fix: polish pages and bugs fix (#36)

src/views/dashboard/graphs/EndpointList.vue

@@ -104,26 +104,24 @@ const props = defineProps({
         i: string;
         metrics: string[];
         metricTypes: string[];
-        isEdit: boolean;
       }
     >,
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  needQuery: { type: Boolean, default: false },
+  isEdit: { type: Boolean, default: false },
 });
+// const emit = defineEmits(["changeOpt"]);
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
-const searchEndpoints = ref<Endpoint[]>([]);
 const pageSize = 5;
 const total = 10;
 const searchText = ref<string>("");
 
-if (props.needQuery) {
-  queryEndpoints(total);
-}
+queryEndpoints(total);
+
 async function queryEndpoints(limit?: number) {
   chartLoading.value = true;
   const resp = await selectorStore.getEndpoints({
@@ -136,15 +134,14 @@ async function queryEndpoints(limit?: number) {
     ElMessage.error(resp.errors);
     return;
   }
-  searchEndpoints.value = selectorStore.pods;
   endpoints.value = selectorStore.pods.splice(0, pageSize);
-  if (props.config.isEdit || !endpoints.value.length) {
-    return;
-  }
-  queryEndpointMetrics(endpoints.value);
+  await queryEndpointMetrics(endpoints.value);
 }
 async function queryEndpointMetrics(currentPods: Endpoint[]) {
-  const { metrics } = props.config;
+  if (!currentPods.length) {
+    return;
+  }
+  const metrics = props.config.metrics.filter((d: string) => d);
 
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
@@ -178,7 +175,7 @@ function clickEndpoint(scope: any) {
   );
 }
 function changePage(pageIndex: number) {
-  endpoints.value = searchEndpoints.value.splice(
+  endpoints.value = selectorStore.pods.splice(
     (pageIndex - 1 || 0) * pageSize,
     pageSize * (pageIndex || 1)
   );
@@ -189,10 +186,11 @@ async function searchList() {
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],
-  () => {
-    if (dashboardStore.showConfig) {
+  async () => {
+    if (props.isEdit) {
       queryEndpointMetrics(endpoints.value);
     }
+    // emit("changeOpt", false);
   }
 );
 watch(

src/views/dashboard/graphs/InstanceList.vue

@@ -42,20 +42,6 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="Service Instances">
-          <template #default="scope">
-            <div class="attributes" v-if="scope.row.attributes.length">
-              <div
-                v-for="(attr, index) in scope.row.attributes"
-                :key="attr.name + index"
-                :style="{ fontSize: `${config.fontSize}px` }"
-              >
-                {{ attr.name }}: {{ attr.value || null }}
-              </div>
-            </div>
-            <div v-else>No Data</div>
-          </template>
-        </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
           :label="metric"
@@ -77,6 +63,25 @@ limitations under the License. -->
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="Attributes" :width="100">
+          <template #default="scope">
+            <el-popover placement="left" :width="400" trigger="click">
+              <template #reference>
+                <span class="link">{{ t("viewAttributes") }}</span>
+              </template>
+              <div class="attributes" v-if="scope.row.attributes.length">
+                <div
+                  v-for="(attr, index) in scope.row.attributes"
+                  :key="attr.name + index"
+                  :style="{ fontSize: `${config.fontSize}px` }"
+                  class="mt-5"
+                >
+                  {{ attr.name }}: {{ attr.value || null }}
+                </div>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <el-pagination
@@ -94,6 +99,7 @@ limitations under the License. -->
 </template>
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
@@ -128,7 +134,9 @@ const props = defineProps({
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   needQuery: { type: Boolean, default: false },
+  isEdit: { type: Boolean, default: false },
 });
+const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -137,9 +145,7 @@ const searchInstances = ref<Instance[]>([]); // all instances
 const pageSize = 5;
 const searchText = ref<string>("");
 
-if (props.needQuery) {
-  queryInstance();
-}
+queryInstance();
 async function queryInstance() {
   chartLoading.value = true;
   const resp = await selectorStore.getServiceInstances();
@@ -153,13 +159,13 @@ async function queryInstance() {
   }
   searchInstances.value = selectorStore.pods;
   instances.value = searchInstances.value.splice(0, pageSize);
-  if (props.config.isEdit) {
-    return;
-  }
   queryInstanceMetrics(instances.value);
 }
 
 async function queryInstanceMetrics(currentInstances: Instance[]) {
+  if (!currentInstances.length) {
+    return;
+  }
   const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
@@ -186,6 +192,10 @@ function clickInstance(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[3].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   router.push(
     `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
       scope.row.id
@@ -207,9 +217,7 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (dashboardStore.showConfig) {
-      queryInstanceMetrics(instances.value);
-    }
+    queryInstanceMetrics(instances.value);
   }
 );
 watch(
@@ -231,7 +239,7 @@ watch(
 }
 
 .attributes {
-  max-height: 80px;
+  max-height: 400px;
   overflow: auto;
 }
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -122,15 +122,16 @@ const props = defineProps({
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+  isEdit: { type: Boolean, default: false },
 });
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const pageSize = 5;
 const services = ref<Service[]>([]);
-const searchServices = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
+const sortServices = ref<(Service & { merge: boolean })[]>([]);
 
 queryServices();
 
@@ -142,7 +143,13 @@ async function queryServices() {
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
-  const map: { [key: string]: any[] } = selectorStore.services.reduce(
+  setServices(selectorStore.services);
+  queryServiceMetrics(services.value);
+}
+
+function setServices(arr: (Service & { merge: boolean })[]) {
+  groups.value = {};
+  const map: { [key: string]: any[] } = arr.reduce(
     (result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
       if (result[item.group]) {
@@ -156,21 +163,23 @@ async function queryServices() {
     },
     {}
   );
-  services.value = Object.values(map).flat(1).splice(0, pageSize);
+  sortServices.value = Object.values(map).flat(1);
   const obj = {} as any;
-  for (const s of services.value) {
+  for (const s of sortServices.value) {
     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];
   }
-  if (props.config.isEdit) {
-    return;
-  }
-  queryServiceMetrics(services.value);
+  services.value = sortServices.value.filter(
+    (d: Service, index: number) => index < pageSize
+  );
 }
 
 function clickService(scope: any) {
@@ -188,6 +197,9 @@ function clickService(scope: any) {
   router.push(path);
 }
 async function queryServiceMetrics(currentServices: Service[]) {
+  if (!currentServices.length) {
+    return;
+  }
   const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
@@ -219,28 +231,29 @@ function objectSpanMethod(param: any): any {
       rowspan: 0,
       colspan: 0,
     };
-  } else {
-    return { rowspan: groups.value[param.row.group], colspan: 1 };
   }
+  return { rowspan: groups.value[param.row.group], colspan: 1 };
 }
 function changePage(pageIndex: number) {
-  services.value = services.value.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
-  );
+  services.value = sortServices.value.filter((d: Service, index: number) => {
+    if (
+      index >= (pageIndex - 1 || 0) * pageSize &&
+      index < pageSize * (pageIndex || 1)
+    ) {
+      return d;
+    }
+  });
 }
 function searchList() {
-  searchServices.value = selectorStore.services.filter((d: { label: string }) =>
+  const searchServices = sortServices.value.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
   );
-  services.value = searchServices.value.splice(0, pageSize);
+  services.value = searchServices.splice(0, pageSize);
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (dashboardStore.showConfig) {
-      queryServiceMetrics(services.value);
-    }
+    queryServiceMetrics(services.value);
   }
 );
 </script>