feat: update tab

src/hooks/useExpressionsProcessor.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { RespFields } from "./data";
-import { EntityType, ExpressionResultType } from "@/views/dashboard/data";
+import { EntityType, ExpressionResultType, ListChartTypes } from "@/views/dashboard/data";
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
@@ -88,6 +88,40 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
     };
   }
 
+  function isPresentGraphqlPods() {
+    if (!(config.metrics && config.metrics[0])) {
+      return;
+    }
+    const appStore = useAppStoreWithOut();
+    const selectorStore = useSelectorStore();
+    const conditions: Recordable = {
+      duration: appStore.durationTime,
+    };
+    const variables: string[] = [`$duration: Duration!`];
+    const fragment = config.metrics.map((name: string, index: number) => {
+      variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
+      conditions[`expression${index}`] = name;
+      const entity = {
+        serviceName:
+          config.scopes[index] === ListChartTypes[2] ? config.pods[index].value : selectorStore.currentService.value,
+        normal:
+          config.scopes[index] === ListChartTypes[2] ? config.pods[index].normal : selectorStore.currentService.normal,
+        serviceInstanceName: config.scopes[index] === ListChartTypes[1] ? config.pods[index].value : undefined,
+        endpointName: config.scopes[index] === ListChartTypes[0] ? config.pods[index].value : undefined,
+      };
+      conditions[`entity${index}`] = entity;
+
+      return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+    });
+
+    const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+    return {
+      queryStr,
+      conditions,
+    };
+  }
+
   function expressionsSource(resp: { errors: string; data: Indexable }) {
     if (resp.errors) {
       ElMessage.error(resp.errors);
@@ -141,7 +175,8 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
 
     return { source, tips, typesOfMQE };
   }
-  const params = await expressionsGraphqlPods();
+  console.log(config);
+  const params = await (config.scopes ? isPresentGraphqlPods() : expressionsGraphqlPods());
   if (!params) {
     return { source: {}, tips: [], typesOfMQE: [] };
   }
@@ -301,6 +336,7 @@ export async function useExpressionsQueryPodsMetrics(
 
     return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
   }
+
   const dashboardStore = useDashboardStore();
   const params = await expressionsGraphqlPods();
   const json = await dashboardStore.fetchMetricValue(params);

src/store/modules/selectors.ts

@@ -105,6 +105,7 @@ export const selectorStore = defineStore({
           return res.data;
         }
         this.pods = res.data.data.pods || [];
+        console.log(this.pods);
       }
       return res.data;
     },

src/views/dashboard/controls/Tab.vue

@@ -126,8 +126,9 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { LayoutConfig } from "@/types/dashboard";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import controls from "./tab";
-  import { dragIgnoreFrom, WidgetType, ListEntity } from "../data";
+  import { dragIgnoreFrom, WidgetType, ListEntity, ListChartTypes } from "../data";
   import copy from "@/utils/copy";
   import { useExpressionsQueryProcessor, useExpressionsQueryPodsMetrics } from "@/hooks/useExpressionsProcessor";
 
@@ -147,6 +148,7 @@ limitations under the License. -->
     setup(props) {
       const { t } = useI18n();
       const dashboardStore = useDashboardStore();
+      const selectorStore = useSelectorStore();
       const route = useRoute();
       const activeTabIndex = ref<number>(Number(route.params.activeTabIndex) || 0);
       const activeTabWidget = ref<string>("");
@@ -252,18 +254,26 @@ limitations under the License. -->
         const tabsProps = props.data;
         const metrics = [];
         const listExp = [];
+        const types: string[] = [];
+        const pods = [];
         for (const child of tabsProps.children || []) {
           let isList = false;
           if (child.expression) {
             const expList = parseTabsExpression(child.expression);
             for (const exp of expList) {
-              const item = child.children.find((d: any) => d.expressions.includes(exp));
+              let item = child.children.find((d: any) => d.expressions.join(", ").includes(exp));
-
               if (item && item.graph && Object.keys(ListEntity).includes(item.graph.type as string)) {
                 isList = true;
               }
-              if (child.children.find((d: any) => d.subExpressions && d.subExpressions.includes(exp))) {
+              if (!item) {
-                isList = true;
+                item = child.children.find((d: any) => d.subExpressions && d.subExpressions.join(", ").includes(exp));
+                if (item) {
+                  isList = true;
+                }
+              }
+              if (item && item.graph && isList && item.graph.type) {
+                types.push(item.graph.type);
+                getPods(item.graph.type) && pods.push(getPods(item.graph.type));
               }
             }
             if (isList) {
@@ -276,6 +286,15 @@ limitations under the License. -->
         if (![...metrics, ...listExp].length) {
           return;
         }
+        if (listExp.length) {
+          const params: { [key: string]: any } =
+            (await useExpressionsQueryProcessor({
+              metrics: listExp,
+              pods,
+              metricConfig: [],
+              scopes: types.length ? types : undefined,
+            })) || {};
+        }
         if (metrics.length) {
           const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
           for (const child of tabsProps.children || []) {
@@ -288,21 +307,27 @@ limitations under the License. -->
             }
           }
         }
-
-        // if (listExp.length) {
-        //   await useExpressionsQueryPodsMetrics({});
-        // }
-        console.log(tabsProps);
         dashboardStore.setConfigs(tabsProps);
       }
 
+      function getPods(type: string) {
+        let pod = null;
+
+        switch (type) {
+          case ListChartTypes[2]:
+            pod = selectorStore.services[0];
+            break;
+          default:
+            pod = selectorStore.pods[0];
+        }
+        return pod;
+      }
+
       function parseTabsExpression(inputString: string) {
-        const regex = /is_present\s*\(\s*([^,)\s]+)\s*,\s*([^,)\s]+)\s*\)/;
+        const resultString = inputString.replace(/is_present\(|\)/g, "");
-        const match = inputString.match(regex);
+        const result = resultString.replace(/\s/g, "").split(",");
 
-        const result = match ? [match[1], match[2]] : [];
+        return result || [];
-
-        return result;
       }
 
       watch(