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

2025-10-15 04:09:14 +00:00 · 2024-08-22 16:47:50 +08:00
parent d9f819d143
commit ae63538baf
7 changed files with 221 additions and 104 deletions
--- a/src/views/dashboard/Widget.vue
+++ b/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;
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/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({
--- a/src/views/dashboard/controls/Tab.vue
+++ b/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 || ""]) &&
--- a/src/views/dashboard/controls/Widget.vue
+++ b/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) {
+          if (ListChartTypes.includes(chart.type)) {
            return;
          }
          queryMetrics();
        },
      );
      watch(
-        () => [selectorStore.currentService, selectorStore.currentDestService],
+        () => props.metricsValues,
        () => {
-          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) {
-            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();
+          const params = props.metricsValues[data.value.i];
+          if (params) {
+            state.source = params.source || {};
+            typesOfMQE.value = params.typesOfMQE;
          }
        },
      );
--- a/src/views/dashboard/panel/Layout.vue
+++ b/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,
      };
    },
  });