feat: watch dashboard change

src/components/Selector.vue

@@ -28,8 +28,8 @@ limitations under the License. -->
     :filterable="filterable"
   >
     <el-option
-      v-for="item in options"
+      v-for="(item, index) in options"
-      :key="item.value || ''"
+      :key="item.value + index"
       :label="item.label || ''"
       :value="item.value || ''"
       :disabled="item.disabled || false"

src/hooks/useExpressionsProcessor.ts

@@ -88,7 +88,7 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
     };
   }
 
-  function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable }) {
+  function expressionsSource(config: Indexable, resp: { errors: string; data: Indexable | any }) {
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return { source: {}, tips: [], typesOfMQE: [] };
@@ -97,6 +97,10 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
       ElMessage.error("The query is wrong");
       return { source: {}, tips: [], typesOfMQE: [] };
     }
+    if (resp.data.error) {
+      ElMessage.error(resp.data.error);
+      return { source: {}, tips: [], typesOfMQE: [] };
+    }
     const tips: string[] = [];
     const source: { [key: string]: unknown } = {};
     const keys = Object.keys(resp.data);
@@ -162,12 +166,16 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
   }
   try {
     const pageData: Recordable = {};
+
     for (let i = 0; i < configArr.length; i++) {
-      const data = expressionsSource(configArr[i], json);
+      const resp: any = {};
-
+      for (let m = 0; m < configArr[i].metrics.length; m++) {
-      pageData[i] = data;
+        resp[`expression${i}${m}`] = json.data[`expression${i}${m}`];
+      }
+      const data = expressionsSource(configArr[i], { ...json, data: resp });
+      const id = configArr[i].id;
+      pageData[id] = data;
     }
-
     return pageData;
   } catch (error) {
     console.error(error);

src/views/dashboard/controls/Tab.vue

@@ -113,6 +113,7 @@ limitations under the License. -->
           :data="item"
           :activeIndex="`${data.i}-${activeTabIndex}-${item.i}`"
           :needQuery="needQuery"
+          :metricsValues="metricsValues"
         />
       </grid-item>
     </grid-layout>
@@ -136,6 +137,10 @@ limitations under the License. -->
       type: Object as PropType<LayoutConfig>,
       default: () => ({ children: [] }),
     },
+    metricsValues: {
+      type: Object as PropType<any>,
+      default: () => ({}),
+    },
     active: { type: Boolean, default: false },
   };
   export default defineComponent({

src/views/dashboard/controls/Widget.vue

@@ -88,6 +88,10 @@ limitations under the License. -->
       type: Object as PropType<LayoutConfig>,
       default: () => ({ widget: {}, graph: {} }),
     },
+    metricsValues: {
+      type: Object as PropType<any>,
+      default: () => ({}),
+    },
     activeIndex: { type: String, default: "" },
     needQuery: { type: Boolean, default: false },
   };
@@ -111,10 +115,6 @@ limitations under the License. -->
       const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));
       const typesOfMQE = ref<string[]>([]);
 
-      // if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) {
-      //   queryMetrics();
-      // }
-
       async function queryMetrics() {
         loading.value = true;
         const e = {
@@ -176,48 +176,15 @@ limitations under the License. -->
         },
       );
       watch(
-        () => [selectorStore.currentService, selectorStore.currentDestService],
+        () => props.metricsValues,
         () => {
-          if (isList.value) {
+          loading.value = true;
-            return;
+          const params = props.metricsValues[data.value.i];
-          }
+          if (params) {
-          if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
+            state.source = params.source || {};
-            queryMetrics();
+            typesOfMQE.value = params.typesOfMQE;
-          }
-        },
-      );
-      watch(
-        () => [selectorStore.currentPod, selectorStore.currentDestPod],
-        () => {
-          if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
-            return;
-          }
-          if (isList.value) {
-            return;
-          }
-          queryMetrics();
-        },
-      );
-      watch(
-        () => [selectorStore.currentProcess, selectorStore.currentDestProcess],
-        () => {
-          if (isList.value) {
-            return;
-          }
-          if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
-            queryMetrics();
-          }
-        },
-      );
-      watch(
-        () => appStore.durationTime,
-        () => {
-          if (isList.value) {
-            return;
-          }
-          if (dashboardStore.entity === EntityType[1].value) {
-            queryMetrics();
           }
+          loading.value = false;
         },
       );
 

src/views/dashboard/panel/Layout.vue

@@ -33,19 +33,20 @@ limitations under the License. -->
       :class="{ active: dashboardStore.activedGridItem === item.i }"
       :drag-ignore-from="dragIgnoreFrom"
     >
-      <component :is="item.type" :data="item" />
+      <component :is="item.type" :data="item" :metricsValues="metricsValues" />
     </grid-item>
   </grid-layout>
   <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
 </template>
 <script lang="ts">
-  import { defineComponent, onBeforeUnmount, watch } from "vue";
+  import { defineComponent, onBeforeUnmount, watch, ref } from "vue";
   import { useI18n } from "vue-i18n";
+  import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useSelectorStore } from "@/store/modules/selectors";
   import type { LayoutConfig } from "@/types/dashboard";
   import controls from "../controls/index";
-  import { dragIgnoreFrom } from "../data";
+  import { dragIgnoreFrom, ListChartTypes, WidgetType } from "../data";
   import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
   import { EntityType } from "../data";
 
@@ -54,14 +55,16 @@ limitations under the License. -->
     components: { ...controls },
     setup() {
       const { t } = useI18n();
+      const appStore = useAppStoreWithOut();
       const dashboardStore = useDashboardStore();
       const selectorStore = useSelectorStore();
+      const metricsValues = ref();
 
       function clickGrid(item: LayoutConfig, event: Event) {
         dashboardStore.activeGridItem(item.i);
         dashboardStore.selectWidget(item);
         if (
-          item.type === "Tab" &&
+          item.type === WidgetType.Tab &&
           !["operations", "tab-layout"].includes((event.target as HTMLDivElement)?.className) &&
           (event.target as HTMLDivElement)?.classList[2] !== "icon-tool" &&
           (event.target as HTMLDivElement)?.nodeName !== "use"
@@ -71,11 +74,13 @@ limitations under the License. -->
       }
       async function queryMetrics() {
         const widgets = [];
+
         for (const item of dashboardStore.layout) {
-          if (item.type === "Widget") {
+          const isList = ListChartTypes.includes(item.type || "");
+          if (item.type === WidgetType.Widget && !isList) {
             widgets.push(item);
           }
-          if (item.type === "Tab") {
+          if (item.type === WidgetType.Tab) {
             const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
             widgets.push(...item.children[index].children);
           }
@@ -83,10 +88,14 @@ limitations under the License. -->
         const configList = widgets.map((d: any) => ({
           metrics: d.expressions || [],
           metricConfig: d.metricConfig || [],
+          id: d.i,
         }));
-        const params = (await useDashboardQueryProcessor(configList)) || {};
+        if (!widgets.length) {
-        console.log(params);
+          return {};
+        }
+        metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
       }
+
       onBeforeUnmount(() => {
         dashboardStore.setLayout([]);
         selectorStore.setCurrentService(null);
@@ -94,6 +103,7 @@ limitations under the License. -->
         dashboardStore.setEntity("");
         dashboardStore.setConfigPanel(false);
       });
+
       watch(
         () => [selectorStore.currentService, selectorStore.currentDestService],
         () => {
@@ -102,11 +112,37 @@ limitations under the License. -->
           }
         },
       );
+      watch(
+        () => [selectorStore.currentPod, selectorStore.currentDestPod],
+        () => {
+          if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
+            return;
+          }
+          queryMetrics();
+        },
+      );
+      watch(
+        () => [selectorStore.currentProcess, selectorStore.currentDestProcess],
+        () => {
+          if ([EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
+            queryMetrics();
+          }
+        },
+      );
+      watch(
+        () => appStore.durationTime,
+        () => {
+          if (dashboardStore.entity === EntityType[1].value) {
+            queryMetrics();
+          }
+        },
+      );
       return {
         dashboardStore,
         clickGrid,
         t,
         dragIgnoreFrom,
+        metricsValues,
       };
     },
   });