feat: improve dashboard queries to make page opening brisker (#410)

src/components/Selector.vue

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

src/hooks/useExpressionsProcessor.ts

@@ -24,31 +24,27 @@ import type { MetricConfigOpt } from "@/types/dashboard";
 import type { Instance, Endpoint, Service } from "@/types/selector";
 import type { Node, Call } from "@/types/topology";
 
-export async function useExpressionsQueryProcessor(config: Indexable) {
-  function expressionsGraphqlPods() {
+export async function useDashboardQueryProcessor(configList: Indexable[]) {
+  function expressionsGraphql(config: Indexable, idx: number) {
     if (!(config.metrics && config.metrics[0])) {
       return;
     }
-    const appStore = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
     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${index}: String!`, `$entity${index}: Entity!`);
-      conditions[`expression${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,19 +72,21 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
           ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
           : undefined,
       };
-      conditions[`entity${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${index}: execExpression(expression: $expression${index}, entity: $entity${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 {
-      queryStr,
+      variables,
+      fragment,
       conditions,
     };
   }
-
-  function expressionsSource(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 +95,10 @@ export async function useExpressionsQueryProcessor(config: 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);
@@ -133,26 +135,72 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
 
     return { source, tips, typesOfMQE };
   }
+  async function fetchMetrics(configArr: any) {
+    const appStore = useAppStoreWithOut();
+    const variables: string[] = [`$duration: Duration!`];
+    let fragments = "";
+    let conditions: Recordable = {
+      duration: appStore.durationTime,
+    };
+    for (let i = 0; i < configArr.length; i++) {
+      const params = await expressionsGraphql(configArr[i], i);
+      if (params) {
+        fragments += params?.fragment;
+        conditions = { ...conditions, ...params.conditions };
+        variables.push(...params.variables);
+      }
+    }
+    if (!fragments) {
+      return { 0: { source: {}, tips: [], typesOfMQE: [] } };
+    }
+    const queryStr = `query queryData(${variables}) {${fragments}}`;
+    const dashboardStore = useDashboardStore();
+    const json = await dashboardStore.fetchMetricValue({
+      queryStr,
+      conditions,
+    });
+    if (json.errors) {
+      ElMessage.error(json.errors);
+      return { 0: { source: {}, tips: [], typesOfMQE: [] } };
+    }
+    try {
+      const pageData: Recordable = {};
 
-  const params = await expressionsGraphqlPods();
-  if (!params) {
-    return { source: {}, tips: [], typesOfMQE: [] };
+      for (let i = 0; i < configArr.length; i++) {
+        const resp: any = {};
+        for (let m = 0; m < configArr[i].metrics.length; m++) {
+          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);
+      return { 0: { source: {}, tips: [], typesOfMQE: [] } };
+    }
   }
-
-  const dashboardStore = useDashboardStore();
-  const json = await dashboardStore.fetchMetricValue(params);
-  if (json.errors) {
-    ElMessage.error(json.errors);
-    return { source: {}, tips: [], typesOfMQE: [] };
+  function chunkArray(array: any[], chunkSize: number) {
+    const result = [];
+    for (let i = 0; i < array.length; i += chunkSize) {
+      result.push(array.slice(i, i + chunkSize));
+    }
+    return result;
   }
-  try {
-    const data = expressionsSource(json);
 
-    return data;
-  } catch (error) {
-    console.error(error);
-    return { source: {}, tips: [], typesOfMQE: [] };
+  const partArr = chunkArray(configList, 6);
+  const promiseArr = partArr.map((d: Array<Indexable>) => fetchMetrics(d));
+  const responseList = await Promise.all(promiseArr);
+  let resp = {};
+  for (const item of responseList) {
+    resp = {
+      ...resp,
+      ...item,
+    };
   }
+
+  return resp;
 }
 
 export async function useExpressionsQueryPodsMetrics(

src/views/dashboard/Widget.vue

@@ -53,7 +53,7 @@ limitations under the License. -->
   import { useRoute } from "vue-router";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
+  import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
   import graphs from "./graphs";
   import { EntityType } from "./data";
   import timeFormat from "@/utils/timeFormat";
@@ -128,12 +128,16 @@ limitations under the License. -->
       }
       async function queryMetrics() {
         loading.value = true;
-        const params = await useExpressionsQueryProcessor({
-          metrics: config.value.expressions || [],
-          metricConfig: config.value.metricConfig || [],
-          subExpressions: config.value.subExpressions || [],
-        });
-
+        const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } =
+          await useDashboardQueryProcessor([
+            {
+              metrics: config.value.expressions || [],
+              metricConfig: config.value.metricConfig || [],
+              subExpressions: config.value.subExpressions || [],
+              id: config.value.i,
+            },
+          ]);
+        const params = metrics[config.value.i];
         loading.value = false;
         source.value = params.source || {};
         typesOfMQE.value = params.typesOfMQE;

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -110,7 +110,7 @@ limitations under the License. -->
     ExpressionResultType,
   } from "@/views/dashboard/data";
   import Icon from "@/components/Icon.vue";
-  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
+  import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
   import { useI18n } from "vue-i18n";
   import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
   import Standard from "./Standard.vue";
@@ -240,12 +240,13 @@ limitations under the License. -->
   }
 
   async function queryMetricsWithExpressions() {
-    const { expressions, metricConfig } = dashboardStore.selectedGrid;
+    const { expressions, metricConfig, i } = dashboardStore.selectedGrid;
     if (!(expressions && expressions[0])) {
       return emit("update", {});
     }
 
-    const params: Indexable = (await useExpressionsQueryProcessor({ ...states, metricConfig })) || {};
+    const metrics: Indexable = (await useDashboardQueryProcessor([{ ...states, metricConfig, id: i }])) || {};
+    const params = metrics[i];
     states.tips = params.tips || [];
     states.metricTypes = params.typesOfMQE || [];
     dashboardStore.selectWidget({

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>
@@ -129,13 +130,17 @@ limitations under the License. -->
   import controls from "./tab";
   import { dragIgnoreFrom, WidgetType } from "../data";
   import copy from "@/utils/copy";
-  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
+  import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
 
   const props = {
     data: {
       type: Object as PropType<LayoutConfig>,
       default: () => ({ children: [] }),
     },
+    metricsValues: {
+      type: Object as PropType<any>,
+      default: () => ({}),
+    },
     active: { type: Boolean, default: false },
   };
   export default defineComponent({
@@ -259,8 +264,10 @@ limitations under the License. -->
         if (!metrics.length) {
           return;
         }
-        const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
+        const values: { [key: string]: any } =
+          (await useDashboardQueryProcessor([{ metrics, id: props.data.i }])) || {};
         for (const child of tabsProps.children || []) {
+          const params = values[props.data.i];
           if (params.source[child.expression || ""]) {
             child.enable =
               !!Number(params.source[child.expression || ""]) &&

src/views/dashboard/controls/Widget.vue

@@ -75,11 +75,10 @@ limitations under the License. -->
   import type { LayoutConfig } from "@/types/dashboard";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
-  import { useSelectorStore } from "@/store/modules/selectors";
   import graphs from "../graphs";
   import { useI18n } from "vue-i18n";
-  import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
-  import { EntityType, ListChartTypes } from "../data";
+  import { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
+  import { ListChartTypes } from "../data";
   import type { EventParams } from "@/types/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
 
@@ -88,6 +87,10 @@ limitations under the License. -->
       type: Object as PropType<LayoutConfig>,
       default: () => ({ widget: {}, graph: {} }),
     },
+    metricsValues: {
+      type: Object as PropType<{ [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } }>,
+      default: () => ({}),
+    },
     activeIndex: { type: String, default: "" },
     needQuery: { type: Boolean, default: false },
   };
@@ -105,23 +108,20 @@ limitations under the License. -->
       const { data } = toRefs(props);
       const appStore = useAppStoreWithOut();
       const dashboardStore = useDashboardStore();
-      const selectorStore = useSelectorStore();
       const graph = computed(() => props.data.graph || {});
       const widget = computed(() => props.data.widget || {});
-      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 = {
+        const config = {
           metrics: props.data.expressions || [],
           metricConfig: props.data.metricConfig || [],
+          id: props.data.i,
         };
-        const params = (await useExpressionsQueryProcessor(e)) || {};
+        const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } =
+          (await useDashboardQueryProcessor([config])) || {};
+        const params = metrics[data.value.i];
         loading.value = false;
         state.source = params.source || {};
         typesOfMQE.value = params.typesOfMQE;
@@ -160,7 +160,7 @@ limitations under the License. -->
         dashboardStore.selectWidget(props.data);
       }
       watch(
-        () => props.data.expressions,
+        () => props.data,
         () => {
           if (!dashboardStore.selectedGrid) {
             return;
@@ -169,54 +169,19 @@ limitations under the License. -->
             return;
           }
           const chart = dashboardStore.selectedGrid.graph || {};
-          if (ListChartTypes.includes(chart.type) || isList.value) {
-            return;
-          }
-          queryMetrics();
-        },
-      );
-      watch(
-        () => [selectorStore.currentService, selectorStore.currentDestService],
-        () => {
-          if (isList.value) {
-            return;
-          }
-          if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
-            queryMetrics();
-          }
-        },
-      );
-      watch(
-        () => [selectorStore.currentPod, selectorStore.currentDestPod],
-        () => {
-          if ([EntityType[0].value, EntityType[7].value, EntityType[8].value].includes(dashboardStore.entity)) {
-            return;
-          }
-          if (isList.value) {
+          if (ListChartTypes.includes(chart.type)) {
             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,
+        () => props.metricsValues,
         () => {
-          if (isList.value) {
-            return;
-          }
-          if (dashboardStore.entity === EntityType[1].value) {
-            queryMetrics();
+          const params = props.metricsValues[data.value.i];
+          if (params) {
+            state.source = params.source || {};
+            typesOfMQE.value = params.typesOfMQE;
           }
         },
       );