From 6dbb072360dd5a4ab07f0d35155109f1051bab1e Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 20 Aug 2024 15:35:29 +0800
Subject: [PATCH] feat: update query

---
 src/hooks/useExpressionsProcessor.ts | 24 +++++++++++-------------
 src/views/dashboard/panel/Layout.vue | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 9d4d56cf..fa0debca 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -36,19 +36,16 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
     if (!selectorStore.currentService && dashboardStore.entity !== "All") {
       return;
     }
-    const conditions: Recordable = {
-      duration: appStore.durationTime,
-    };
-    const variables: string[] = [`$duration: Duration!`];
+    const conditions: Recordable = {};
+    const variables: string[] = [];
     const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
       dashboardStore.entity,
     );
     if (isRelation && !selectorStore.currentDestService) {
       return;
     }
-    const fragment = config.metrics.map((name: string, index: number) => {
-      variables.push(`$expression${idx}${index}: String!`, `$entity${idx}${index}: Entity!`);
-      conditions[`expression${idx}${index}`] = name;
+    if (idx === 0) {
+      variables.push(`$entity: Entity!`);
       const entity = {
         serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
         normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
@@ -76,12 +73,14 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
           ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
           : undefined,
       };
-      conditions[`entity${idx}${index}`] = entity;
+      conditions[`entity`] = entity;
+    }
+    const fragment = config.metrics.map((name: string, index: number) => {
+      variables.push(`$expression${idx}${index}: String!`);
+      conditions[`expression${idx}${index}`] = name;
 
-      return `expression${idx}${index}: execExpression(expression: $expression${idx}${index}, entity: $entity${idx}${index}, duration: $duration)${RespFields.execExpression}`;
+      return `expression${idx}${index}: execExpression(expression: $expression${idx}${index}, entity: $entity, duration: $duration)${RespFields.execExpression}`;
     });
-    // const queryStr = `query queryData(${variables}) {${fragment}}`;
-
     return {
       variables,
       fragment,
@@ -136,7 +135,7 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
   }
   const appStore = useAppStoreWithOut();
   const variables: string[] = [`$duration: Duration!`];
-  let fragments;
+  let fragments = "";
   let conditions: Recordable = {
     duration: appStore.durationTime,
   };
@@ -151,7 +150,6 @@ export async function useDashboardQueryProcessor(configArr: Indexable[]) {
   if (!fragments) {
     return { 0: { source: {}, tips: [], typesOfMQE: [] } };
   }
-
   const queryStr = `query queryData(${variables}) {${fragments}}`;
   const dashboardStore = useDashboardStore();
   const json = await dashboardStore.fetchMetricValue({
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 399043bb..3511e0cf 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -39,7 +39,7 @@ limitations under the License. -->
   <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
 </template>
 <script lang="ts">
-  import { defineComponent, onBeforeUnmount } from "vue";
+  import { defineComponent, onBeforeUnmount, watch } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useSelectorStore } from "@/store/modules/selectors";
@@ -47,6 +47,7 @@ limitations under the License. -->
   import controls from "../controls/index";
   import { dragIgnoreFrom } from "../data";
   import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
+  import { EntityType } from "../data";
 
   export default defineComponent({
     name: "Layout",
@@ -55,7 +56,6 @@ limitations under the License. -->
       const { t } = useI18n();
       const dashboardStore = useDashboardStore();
       const selectorStore = useSelectorStore();
-      console.log(dashboardStore.layout);
 
       function clickGrid(item: LayoutConfig, event: Event) {
         dashboardStore.activeGridItem(item.i);
@@ -76,12 +76,13 @@ limitations under the License. -->
             widgets.push(item);
           }
           if (item.type === "Tab") {
-            widgets.push(...item.children[item.activedTabIndex].children);
+            const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
+            widgets.push(...item.children[index].children);
           }
         }
         const configList = widgets.map((d: any) => ({
           metrics: d.expressions || [],
-          metricConfig: d.data.metricConfig || [],
+          metricConfig: d.metricConfig || [],
         }));
         const params = (await useDashboardQueryProcessor(configList)) || {};
         console.log(params);
@@ -93,6 +94,14 @@ limitations under the License. -->
         dashboardStore.setEntity("");
         dashboardStore.setConfigPanel(false);
       });
+      watch(
+        () => [selectorStore.currentService, selectorStore.currentDestService],
+        () => {
+          if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
+            queryMetrics();
+          }
+        },
+      );
       return {
         dashboardStore,
         clickGrid,