fix: update metrics

src/components/Graph.vue

@@ -41,8 +41,11 @@ onMounted(() => {
 
 watch(
   () => props.option,
-  (opt) => {
-    setOptions(opt);
+  (newVal, oldVal) => {
+    if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+      return;
+    }
+    setOptions(newVal);
   }
 );
 

src/hooks/useProcessor.ts

@@ -79,10 +79,10 @@ export function useQueryProcessor(config: any) {
               ? undefined
               : selectorStore.currentService.normal,
           serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
-            ? selectorStore.currentPod.value
+            ? selectorStore.currentPod && selectorStore.currentPod.value
             : undefined,
           endpointName: dashboardStore.entity.includes("Endpoint")
-            ? selectorStore.currentPod.value
+            ? selectorStore.currentPod && selectorStore.currentPod.value
             : undefined,
           destNormal: isRelation
             ? selectorStore.currentDestService.normal
@@ -92,11 +92,13 @@ export function useQueryProcessor(config: any) {
             : undefined,
           destServiceInstanceName:
             dashboardStore.entity === "ServiceInstanceRelation"
-              ? selectorStore.currentDestPod.value
+              ? selectorStore.currentDestPod &&
+                selectorStore.currentDestPod.value
               : undefined,
           destEndpointName:
             dashboardStore.entity === "EndpointRelation"
-              ? selectorStore.currentDestPod.value
+              ? selectorStore.currentDestPod &&
+                selectorStore.currentDestPod.value
               : undefined,
         },
       };

src/store/modules/selectors.ts

@@ -48,6 +48,7 @@ export const selectorStore = defineStore({
       this.currentService = service;
     },
     setCurrentPod(pod: Nullable<Instance | Endpoint>) {
+      console.log(pod);
       this.currentPod = pod;
     },
     async fetchLayers(): Promise<AxiosResponse> {

src/views/dashboard/configuration/MetricOptions.vue

@@ -93,6 +93,7 @@ import {
   EntityType,
   ChartTypes,
   PodsChartTypes,
+  TableEntity,
 } from "../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
@@ -127,7 +128,11 @@ states.visTypes = setVisTypes();
 setMetricType();
 
 async function setMetricType(catalog?: string) {
+  if (states.isTable) {
+    catalog = catalog || TableEntity[graph.type];
+  } else {
     catalog = catalog || dashboardStore.entity;
+  }
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);

src/views/dashboard/controls/Widget.vue

@@ -62,7 +62,6 @@ limitations under the License. -->
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";

src/views/dashboard/data.ts

@@ -155,6 +155,11 @@ export const EntityType = [
   },
   { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
 ];
+export const TableEntity: any = {
+  InstanceList: EntityType[3].value,
+  EndpointList: EntityType[2].value,
+  ServiceList: EntityType[0].value,
+};
 export const SortOrder = [
   { label: "DES", value: "DES" },
   { label: "ASC", value: "ASC" },

src/views/dashboard/graphs/EndpointList.vue

@@ -42,7 +42,7 @@ limitations under the License. -->
         </template>
       </el-table-column>
       <el-table-column
-        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
+        v-for="(metric, index) in config.metrics"
         :label="metric"
         :key="metric + index"
       >
@@ -87,7 +87,13 @@ const props = defineProps({
     type: Object,
   },
   config: {
-    type: Object as PropType<EndpointListConfig & { i: string }>,
+    type: Object as PropType<
+      EndpointListConfig & {
+        i: string;
+        metrics: string[];
+        metricTypes: string[];
+      }
+    >,
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -116,7 +122,7 @@ async function queryEndpoints() {
   queryEndpointMetrics(endpoints.value);
 }
 async function queryEndpointMetrics(currentPods: Endpoint[]) {
-  const { metrics } = dashboardStore.selectedGrid;
+  const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
@@ -150,15 +156,10 @@ function searchList() {
   endpoints.value = currentEndpoints.splice(0, pageSize);
 }
 watch(
-  () => [
-    dashboardStore.selectedGrid.metricTypes,
-    dashboardStore.selectedGrid.metrics,
-  ],
+  () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (dashboardStore.selectedGrid.i === props.config.i) {
     queryEndpointMetrics(endpoints.value);
   }
-  }
 );
 </script>
 <style lang="scss" scoped>

src/views/dashboard/graphs/InstanceList.vue

@@ -50,13 +50,13 @@ limitations under the License. -->
           <div class="chart">
             <Line
               v-if="config.metricTypes[index] === 'readMetricsValues'"
-              :data="{ metric: scope.row[metric] }"
+              :data="metric ? { [metric]: scope.row[metric] } : {}"
               :intervalTime="intervalTime"
               :config="{ showXAxis: false, showYAxis: false }"
             />
             <Card
               v-else
-              :data="{ metric: scope.row[metric] }"
+              :data="{ [metric]: scope.row[metric] }"
               :config="{ textAlign: 'left' }"
             />
           </div>
@@ -128,6 +128,8 @@ async function queryInstance() {
     return;
   }
   searchInstances.value = selectorStore.pods;
+  instances.value = searchInstances.value.splice(0, pageSize);
+  queryInstanceMetrics(instances.value);
 }
 
 async function queryInstanceMetrics(currentInstances: Instance[]) {
@@ -168,10 +170,7 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (dashboardStore.selectedGrid.i === props.config.i) {
-      const currentInstances = searchInstances.value.splice(0, pageSize);
-      queryInstanceMetrics(currentInstances);
-    }
+    queryInstanceMetrics(instances.value);
   }
 );
 </script>

src/views/dashboard/graphs/ServiceList.vue

@@ -43,7 +43,7 @@ limitations under the License. -->
         </template>
       </el-table-column>
       <el-table-column
-        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
+        v-for="(metric, index) in config.metrics"
         :label="metric"
         :key="metric + index"
       >
@@ -88,7 +88,13 @@ const props = defineProps({
     type: Object,
   },
   config: {
-    type: Object as PropType<ServiceListConfig>,
+    type: Object as PropType<
+      ServiceListConfig & {
+        i: string;
+        metrics: string[];
+        metricTypes: string[];
+      }
+    >,
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -114,7 +120,7 @@ async function queryServices() {
   services.value = selectorStore.services.splice(0, pageSize);
 }
 async function queryServiceMetrics(currentServices: Service[]) {
-  const { metrics } = dashboardStore.selectedGrid;
+  const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
@@ -147,15 +153,10 @@ function searchList() {
   services.value = searchServices.value.splice(0, pageSize);
 }
 watch(
-  () => [
-    dashboardStore.selectedGrid.metricTypes,
-    dashboardStore.selectedGrid.metrics,
-  ],
+  () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (dashboardStore.selectedGrid.i === props.config.i) {
     queryServiceMetrics(services.value);
   }
-  }
 );
 </script>
 <style lang="scss" scoped>