fix: update pagination for service list, endpoint list, instance list and add legend configs (#45)

src/views/dashboard/graphs/EndpointList.vue

@@ -117,16 +117,14 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
-const pageSize = 15;
-const total = 15;
+const pageSize = 10;
 const searchText = ref<string>("");
 
-queryEndpoints(total);
+queryEndpoints();
 
-async function queryEndpoints(limit?: number) {
+async function queryEndpoints() {
   chartLoading.value = true;
   const resp = await selectorStore.getEndpoints({
-    limit,
     keyword: searchText.value,
   });
 
@@ -135,8 +133,10 @@ async function queryEndpoints(limit?: number) {
     ElMessage.error(resp.errors);
     return;
   }
-  endpoints.value = selectorStore.pods.splice(0, pageSize);
-  await queryEndpointMetrics(endpoints.value);
+  endpoints.value = selectorStore.pods.filter(
+    (d: unknown, index: number) => index < pageSize
+  );
+  queryEndpointMetrics(endpoints.value);
 }
 async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
@@ -181,14 +181,15 @@ function clickEndpoint(scope: any) {
   );
 }
 function changePage(pageIndex: number) {
-  endpoints.value = selectorStore.pods.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
-  );
+  endpoints.value = selectorStore.pods.filter((d: unknown, index: number) => {
+    if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
+      return d;
+    }
+  });
+  queryEndpointMetrics(endpoints.value);
 }
 async function searchList() {
-  const limit = searchText.value ? undefined : total;
-  await queryEndpoints(limit);
+  await queryEndpoints();
 }
 function getUnit(index: number) {
   const u =
@@ -211,7 +212,7 @@ watch(
 watch(
   () => selectorStore.currentService,
   () => {
-    queryEndpoints(total);
+    queryEndpoints();
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -90,7 +90,7 @@ limitations under the License. -->
       small
       layout="prev, pager, next"
       :page-size="pageSize"
-      :total="searchInstances.length"
+      :total="selectorStore.pods.length"
       @current-change="changePage"
       @prev-click="changePage"
       @next-click="changePage"
@@ -142,8 +142,7 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
-const searchInstances = ref<Instance[]>([]); // all instances
-const pageSize = 15;
+const pageSize = 10;
 const searchText = ref<string>("");
 
 queryInstance();
@@ -154,12 +153,12 @@ async function queryInstance() {
   chartLoading.value = false;
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
-    searchInstances.value = [];
     instances.value = [];
     return;
   }
-  searchInstances.value = selectorStore.pods;
-  instances.value = searchInstances.value.splice(0, pageSize);
+  instances.value = selectorStore.pods.filter(
+    (d: unknown, index: number) => index < pageSize
+  );
   queryInstanceMetrics(instances.value);
 }
 
@@ -209,14 +208,22 @@ function clickInstance(scope: any) {
 }
 
 function changePage(pageIndex: number) {
-  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
+  instances.value = selectorStore.pods.filter((d: unknown, index: number) => {
+    if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
+      return d;
+    }
+  });
+  queryInstanceMetrics(instances.value);
 }
 
 function searchList() {
-  searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
+  const searchInstances = selectorStore.pods.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
   );
-  instances.value = searchInstances.value.splice(0, pageSize);
+  instances.value = searchInstances.filter(
+    (d: unknown, index: number) => index < pageSize
+  );
+  queryInstanceMetrics(instances.value);
 }
 
 function getUnit(index: number) {

src/views/dashboard/graphs/ServiceList.vue

@@ -128,7 +128,7 @@ const props = defineProps({
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
-const pageSize = 15;
+const pageSize = 10;
 const services = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
@@ -144,8 +144,21 @@ async function queryServices() {
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
-  setServices(selectorStore.services);
-  queryServiceMetrics(services.value);
+  sortServices.value = selectorStore.services.sort((a: any, b: any) => {
+    const groupA = a.group.toUpperCase();
+    const groupB = b.group.toUpperCase();
+    if (groupA < groupB) {
+      return -1;
+    }
+    if (groupA > groupB) {
+      return 1;
+    }
+    return 0;
+  });
+  const s = sortServices.value.filter(
+    (d: Service, index: number) => index < pageSize
+  );
+  setServices(s);
 }
 
 function setServices(arr: (Service & { merge: boolean })[]) {
@@ -164,23 +177,19 @@ function setServices(arr: (Service & { merge: boolean })[]) {
     },
     {}
   );
-  sortServices.value = Object.values(map).flat(1);
+  const list = Object.values(map).flat(1);
   const obj = {} as any;
-  for (const s of sortServices.value) {
+  for (const s of list) {
     s.group = s.group || "";
     if (!obj[s.group]) {
       obj[s.group] = 1;
     } else {
-      if (obj[s.group] % 5 === 0) {
-        s.merge = false;
-      }
       obj[s.group]++;
     }
     groups.value[s.group] = obj[s.group];
   }
-  services.value = sortServices.value.filter(
-    (d: Service, index: number) => index < pageSize
-  );
+  services.value = list;
+  queryServiceMetrics(services.value);
 }
 
 function clickService(scope: any) {
@@ -240,20 +249,22 @@ function objectSpanMethod(param: any): any {
   return { rowspan: groups.value[param.row.group], colspan: 1 };
 }
 function changePage(pageIndex: number) {
-  services.value = sortServices.value.filter((d: Service, index: number) => {
-    if (
-      index >= (pageIndex - 1 || 0) * pageSize &&
-      index < pageSize * (pageIndex || 1)
-    ) {
+  const arr = sortServices.value.filter((d: Service, index: number) => {
+    if (index >= (pageIndex - 1) * pageSize && index < pageSize * pageIndex) {
       return d;
     }
   });
+
+  setServices(arr);
 }
 function searchList() {
   const searchServices = sortServices.value.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
   );
-  services.value = searchServices.splice(0, pageSize);
+  const services = searchServices.filter(
+    (d: unknown, index: number) => index < pageSize
+  );
+  setServices(services);
 }
 function getUnit(index: number) {
   const u =

src/views/dashboard/graphs/TopList.vue

@@ -15,12 +15,12 @@ limitations under the License. -->
 
 <template>
   <div class="top-list">
-    <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
+    <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
         <div>
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
-            {{ i.name + getTraceId(i) }}
+            {{ i.name }}
           </span>
         </div>
         <div>
@@ -28,14 +28,14 @@ limitations under the License. -->
             iconName="review-list"
             size="middle"
             class="cp"
-            @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
+            @click="handleClick(i.name)"
           />
         </div>
       </div>
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        color="#bf99f8"
+        :color="TextColors[config.color]"
         :show-text="false"
       />
     </div>
@@ -45,6 +45,7 @@ limitations under the License. -->
 import type { PropType } from "vue";
 import { computed } from "vue";
 import copy from "@/utils/copy";
+import { TextColors } from "@/views/dashboard/data";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -54,12 +55,12 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<{ sortOrder: string }>,
-    default: () => ({}),
+    type: Object as PropType<{ color: string }>,
+    default: () => ({ color: "purple" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
-const key = computed(() => Object.keys(props.data)[0]);
+const key = computed(() => Object.keys(props.data)[0] || "");
 const maxValue = computed(() => {
   if (!(props.data[key.value] && props.data[key.value].length)) {
     return 0;
@@ -67,30 +68,6 @@ const maxValue = computed(() => {
   const temp: number[] = props.data[key.value].map((i: any) => i.value);
   return Math.max.apply(null, temp);
 });
-const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
-  return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
-};
-const datas = computed(() => {
-  if (!(props.data[key.value] && props.data[key.value].length)) {
-    return [];
-  }
-  const { sortOrder } = props.config;
-  const val: any = props.data[key.value];
-
-  switch (sortOrder) {
-    case "DES":
-      val.sort((a: any, b: any) => b.value - a.value);
-      break;
-    case "ASC":
-      val.sort((a: any, b: any) => a.value - b.value);
-      break;
-    default:
-      val.sort((a: any, b: any) => b.value - a.value);
-      break;
-  }
-
-  return val;
-});
 function handleClick(i: string) {
   copy(i);
 }