feat: update servicelist

src/hooks/useProcessor.ts

@@ -19,7 +19,7 @@ import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { Instance, Endpoint } from "@/types/selector";
+import { Instance, Endpoint, Service } from "@/types/selector";
 
 export function useQueryProcessor(config: any) {
   if (!(config.metrics && config.metrics[0])) {
@@ -190,7 +190,7 @@ export function useSourceProcessor(
 }
 
 export function useQueryPodsMetrics(
-  pods: Array<Instance | Endpoint>,
+  pods: Array<Instance | Endpoint | Service | any>,
   config: { metrics: string[]; metricTypes: string[] },
   scope: string
 ) {
@@ -202,25 +202,30 @@ export function useQueryPodsMetrics(
   const variables: string[] = [`$duration: Duration!`];
   const { currentService } = selectorStore;
 
-  const fragmentList = pods.map((d: Instance | Endpoint, index: number) => {
-    const param = {
-      scope,
-      serviceName: currentService.label,
-      serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
-      endpointName: scope === "Endpoint" ? d.label : undefined,
-      normal: currentService.normal,
-    };
-    const f = config.metrics.map((name: string, idx: number) => {
-      const metricType = config.metricTypes[idx] || "";
-      conditions[`condition${index}${idx}`] = {
-        name,
-        entity: param,
+  const fragmentList = pods.map(
+    (
+      d: (Instance | Endpoint | Service) & { normal: boolean },
+      index: number
+    ) => {
+      const param = {
+        scope,
+        serviceName: scope === "Service" ? d.label : currentService.label,
+        serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
+        endpointName: scope === "Endpoint" ? d.label : undefined,
+        normal: scope === "Service" ? d.normal : currentService.normal,
       };
-      variables.push(`$condition${index}${idx}: MetricsCondition!`);
-      return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, duration: $duration)${RespFields[metricType]}`;
-    });
-    return f;
-  });
+      const f = config.metrics.map((name: string, idx: number) => {
+        const metricType = config.metricTypes[idx] || "";
+        conditions[`condition${index}${idx}`] = {
+          name,
+          entity: param,
+        };
+        variables.push(`$condition${index}${idx}: MetricsCondition!`);
+        return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, duration: $duration)${RespFields[metricType]}`;
+      });
+      return f;
+    }
+  );
   const fragment = fragmentList.flat(1).join(" ");
   const queryStr = `query queryData(${variables}) {${fragment}}`;
 

src/views/dashboard/graphs/EndpointList.vue

@@ -158,7 +158,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryEndpointMetrics(endpoints.value);
+    if (dashboardStore.showConfig) {
+      queryEndpointMetrics(endpoints.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -170,7 +170,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryInstanceMetrics(instances.value);
+    if (dashboardStore.showConfig) {
+      queryInstanceMetrics(instances.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/ServiceList.vue

@@ -34,7 +34,7 @@ limitations under the License. -->
         <template #default="scope">
           <router-link
             class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${selectorStore.currentService.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${scope.row.id}/${config.dashboardName}`"
             :key="1"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
@@ -111,13 +111,14 @@ queryServices();
 
 async function queryServices() {
   chartLoading.value = true;
-  const resp = await selectorStore.fetchServices();
+  const resp = await selectorStore.fetchServices(dashboardStore.layerId);
 
   chartLoading.value = false;
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
   services.value = selectorStore.services.splice(0, pageSize);
+  queryServiceMetrics(services.value);
 }
 async function queryServiceMetrics(currentServices: Service[]) {
   const { metrics } = props.config;
@@ -155,7 +156,9 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryServiceMetrics(services.value);
+    if (dashboardStore.showConfig) {
+      queryServiceMetrics(services.value);
+    }
   }
 );
 </script>