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"
+      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

@@ -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) {
+export async function useDashboardQueryProcessor(configList: Indexable[]) {
-  function expressionsGraphqlPods() {
+  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 = {
+    const conditions: Recordable = {};
-      duration: appStore.durationTime,
+    const variables: string[] = [];
-    };
-    const variables: string[] = [`$duration: Duration!`];
     const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
       dashboardStore.entity,
     );
     if (isRelation && !selectorStore.currentDestService) {
       return;
     }
-    const fragment = config.metrics.map((name: string, index: number) => {
+    if (idx === 0) {
-      variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
+      variables.push(`$entity: Entity!`);
-      conditions[`expression${index}`] = name;
       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(config: Indexable, resp: { errors: string; data: Indexable | any }) {
-  function expressionsSource(resp: { errors: string; data: Indexable }) {
     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();
+      for (let i = 0; i < configArr.length; i++) {
-  if (!params) {
+        const resp: any = {};
-    return { source: {}, tips: [], typesOfMQE: [] };
+        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: [] } };
+    }
+  }
+  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;
   }
 
-  const dashboardStore = useDashboardStore();
+  const partArr = chunkArray(configList, 6);
-  const json = await dashboardStore.fetchMetricValue(params);
+  const promiseArr = partArr.map((d: Array<Indexable>) => fetchMetrics(d));
-  if (json.errors) {
+  const responseList = await Promise.all(promiseArr);
-    ElMessage.error(json.errors);
+  let resp = {};
-    return { source: {}, tips: [], typesOfMQE: [] };
+  for (const item of responseList) {
+    resp = {
+      ...resp,
+      ...item,
+    };
   }
-  try {
-    const data = expressionsSource(json);
 
-    return data;
+  return resp;
-  } catch (error) {
-    console.error(error);
-    return { source: {}, tips: [], typesOfMQE: [] };
-  }
 }
 
 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({
+        const metrics: { [key: string]: { source: { [key: string]: unknown }; typesOfMQE: string[] } } =
-          metrics: config.value.expressions || [],
+          await useDashboardQueryProcessor([
-          metricConfig: config.value.metricConfig || [],
+            {
-          subExpressions: config.value.subExpressions || [],
+              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 { useDashboardQueryProcessor } from "@/hooks/useExpressionsProcessor";
-  import { EntityType, ListChartTypes } from "../data";
+  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) {
+          if (ListChartTypes.includes(chart.type)) {
             return;
           }
           queryMetrics();
         },
       );
       watch(
-        () => [selectorStore.currentService, selectorStore.currentDestService],
+        () => props.metricsValues,
         () => {
-          if (isList.value) {
+          const params = props.metricsValues[data.value.i];
-            return;
+          if (params) {
-          }
+            state.source = params.source || {};
-          if ([EntityType[0].value, EntityType[4].value].includes(dashboardStore.entity)) {
+            typesOfMQE.value = params.typesOfMQE;
-            queryMetrics();
-          }
-        },
-      );
-      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();
           }
         },
       );

src/views/dashboard/panel/Layout.vue

@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <grid-layout
+    v-if="dashboardStore.layout.length"
     v-model:layout="dashboardStore.layout"
     :col-num="24"
     :row-height="10"
     :is-draggable="dashboardStore.editMode"
     :is-resizable="dashboardStore.editMode"
-    v-if="dashboardStore.layout.length"
+    v-loading.fullscreen.lock="loading"
+    element-loading-text="Loading..."
+    element-loading-background="rgba(122, 122, 122, 0.8)"
   >
     <grid-item
       v-for="item in dashboardStore.layout"
@@ -33,33 +36,39 @@ 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 } 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";
 
   export default defineComponent({
     name: "Layout",
     components: { ...controls },
     setup() {
       const { t } = useI18n();
+      const appStore = useAppStoreWithOut();
       const dashboardStore = useDashboardStore();
       const selectorStore = useSelectorStore();
+      const metricsValues = ref();
+      const loading = ref<boolean>(false);
 
       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"
@@ -67,6 +76,47 @@ limitations under the License. -->
           dashboardStore.setActiveTabIndex(0);
         }
       }
+      async function queryMetrics() {
+        const widgets = [];
+
+        for (const item of dashboardStore.layout) {
+          const isList = ListChartTypes.includes(item.type || "");
+          if (item.type === WidgetType.Widget && !isList) {
+            widgets.push(item);
+          }
+          if (item.type === WidgetType.Tab) {
+            const index = isNaN(item.activedTabIndex) ? 0 : item.activedTabIndex;
+            widgets.push(...item.children[index].children);
+          }
+        }
+        const configList = widgets.map((d: LayoutConfig) => ({
+          metrics: d.expressions || [],
+          metricConfig: d.metricConfig || [],
+          id: d.i,
+        }));
+        if (!widgets.length) {
+          return {};
+        }
+        loading.value = true;
+        metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
+        loading.value = false;
+      }
+      async function queryTabsMetrics() {
+        const configList = dashboardStore.currentTabItems
+          .filter((item: LayoutConfig) => item.type === WidgetType.Widget && !ListChartTypes.includes(item.type || ""))
+          .map((d: LayoutConfig) => ({
+            metrics: d.expressions || [],
+            metricConfig: d.metricConfig || [],
+            id: d.i,
+          }));
+        if (!configList.length) {
+          return {};
+        }
+        loading.value = true;
+        metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
+        loading.value = false;
+      }
+
       onBeforeUnmount(() => {
         dashboardStore.setLayout([]);
         selectorStore.setCurrentService(null);
@@ -74,11 +124,53 @@ 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();
+          }
+        },
+      );
+      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();
+          }
+        },
+      );
+      watch(
+        () => dashboardStore.currentTabItems,
+        () => {
+          queryTabsMetrics();
+        },
+      );
       return {
         dashboardStore,
         clickGrid,
         t,
         dragIgnoreFrom,
+        metricsValues,
+        loading,
       };
     },
   });