build: migrate the build tool from vue-cli to vite4 (#208)

2025-10-15 04:09:14 +00:00 · 2022-12-17 14:07:03 +08:00
parent 1e0c253488
commit 44dcb1e7f6
214 changed files with 27014 additions and 54234 deletions
--- a/src/hooks/useAssociateProcessor.ts
+++ b/src/hooks/useAssociateProcessor.ts
@@ -17,7 +17,7 @@
 import { useAppStoreWithOut } from "@/store/modules/app";
 import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
-import { EventParams } from "@/types/app";
+import type { EventParams } from "@/types/app";

 export default function associateProcessor(props: any) {
  function eventAssociate() {
@@ -30,9 +30,7 @@ export default function associateProcessor(props: any) {
    if (!props.option.series[0]) {
      return;
    }
-    const list = props.option.series[0].data.map(
-      (d: (number | string)[]) => d[0]
-    );
+    const list = props.option.series[0].data.map((d: (number | string)[]) => d[0]);
    if (!list.includes(props.filters.duration.endTime)) {
      return;
    }
@@ -77,16 +75,8 @@ export default function associateProcessor(props: any) {
    if (start) {
      const end = start;
      duration = {
-        start: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(start)),
-          step,
-          true
-        ),
-        end: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(end)),
-          step,
-          true
-        ),
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(start)), step, true),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(end)), step, true),
        step,
      };
    }
@@ -101,36 +91,27 @@ export default function associateProcessor(props: any) {
      status,
    };
    if (latency) {
-      const latencyList = series.map(
-        (d: { name: string; data: number[][] }, index: number) => {
-          const data = [
-            d.data[currentParams.dataIndex][1],
-            series[index + 1]
-              ? series[index + 1].data[currentParams.dataIndex][1]
-              : Infinity,
-          ];
-          return {
-            label:
-              d.name +
-              "--" +
-              (series[index + 1] ? series[index + 1].name : "Infinity"),
-            value: String(index),
-            data,
-          };
-        }
-      );
+      const latencyList = series.map((d: { name: string; data: number[][] }, index: number) => {
+        const data = [
+          d.data[currentParams.dataIndex][1],
+          series[index + 1] ? series[index + 1].data[currentParams.dataIndex][1] : Infinity,
+        ];
+        return {
+          label: d.name + "--" + (series[index + 1] ? series[index + 1].name : "Infinity"),
+          value: String(index),
+          data,
+        };
+      });
      item.latency = latencyList;
    }
-    const value = series.map(
-      (d: { name: string; data: number[][] }, index: number) => {
-        return {
-          label: d.name,
-          value: String(index),
-          data: d.data[currentParams.dataIndex][1],
-          date: d.data[currentParams.dataIndex][0],
-        };
-      }
-    );
+    const value = series.map((d: { name: string; data: number[][] }, index: number) => {
+      return {
+        label: d.name,
+        value: String(index),
+        data: d.data[currentParams.dataIndex][1],
+        date: d.data[currentParams.dataIndex][0],
+      };
+    });
    item.metricValue = value;
    return item;
  }
--- a/src/hooks/useBreakpoint.ts
+++ b/src/hooks/useBreakpoint.ts
@@ -14,7 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { ref, computed, ComputedRef, unref } from "vue";
+import type { ComputedRef } from "vue";
+import { ref, computed, unref } from "vue";
 import { useEventListener } from "./useEventListener";
 import { screenMap, sizeEnum, screenEnum } from "./data";

@@ -40,9 +41,7 @@ export function useBreakpoint(): any {
  };
 }

-export function createBreakpointListen(
-  fn?: (opt: CreateCallbackParams) => void
-): any {
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
  const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
  const realWidthRef = ref(window.innerWidth);

--- a/src/hooks/useDashboardsSession.ts
+++ b/src/hooks/useDashboardsSession.ts
@@ -16,19 +16,15 @@
 */
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { LayoutConfig } from "@/types/dashboard";
+import type { LayoutConfig } from "@/types/dashboard";

-export default function getDashboard(param?: {
-  name: string;
-  layer: string;
-  entity: string;
-}) {
+export default function getDashboard(param?: { name: string; layer: string; entity: string }) {
  const dashboardStore = useDashboardStore();
  const opt = param || dashboardStore.currentDashboard;
  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
  const dashboard = list.find(
    (d: { name: string; layer: string; entity: string }) =>
-      d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer
+      d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer,
  );
  const all = dashboardStore.layout;
  const widgets: LayoutConfig[] = [];
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -14,13 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import {
-  BarSeriesOption,
-  LineSeriesOption,
-  HeatmapSeriesOption,
-  SankeySeriesOption,
-} from "echarts/charts";
-import {
+import type { BarSeriesOption, LineSeriesOption, HeatmapSeriesOption, SankeySeriesOption } from "echarts/charts";
+import type {
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
@@ -48,10 +43,7 @@ export type ECOption = echarts.ComposeOption<
  | SankeySeriesOption
 >;

-export function useECharts(
-  elRef: Ref<HTMLDivElement>,
-  theme: "light" | "dark" | "default" = "default"
-): any {
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): any {
  const getDarkMode = computed(() => {
    return theme === "default" ? "light" : theme;
  });
@@ -131,7 +123,7 @@ export function useECharts(
        initCharts(theme as "default");
        setOptions(cacheOptions.value);
      }
-    }
+    },
  );

  tryOnUnmounted(() => {
--- a/src/hooks/useEventListener.ts
+++ b/src/hooks/useEventListener.ts
@@ -43,16 +43,13 @@ export function useEventListener({
  if (el) {
    const element = ref(el as Element) as Ref<Element>;

-    const handler = isDebounce
-      ? useDebounceFn(listener, wait)
-      : useThrottleFn(listener, wait);
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
    const realHandler = wait ? handler : listener;
    const removeEventListener = (e: Element) => {
      isAddRef.value = true;
      e.removeEventListener(name, realHandler, options);
    };
-    const addEventListener = (e: Element) =>
-      e.addEventListener(name, realHandler, options);
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);

    const removeWatch = watch(
      element,
@@ -64,7 +61,7 @@ export function useEventListener({
          });
        }
      },
-      { immediate: true }
+      { immediate: true },
    );

    remove = () => {
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { LegendOptions } from "@/types/dashboard";
+import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";

 export default function useLegendProcess(legend?: LegendOptions) {
@@ -37,14 +37,9 @@ export default function useLegendProcess(legend?: LegendOptions) {
    }
    return true;
  }
-  function aggregations(
-    data: { [key: string]: number[] },
-    intervalTime: string[]
-  ) {
+  function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
    const source: { [key: string]: unknown }[] = [];
-    const keys = Object.keys(data || {}).filter(
-      (i: any) => Array.isArray(data[i]) && data[i].length
-    );
+    const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length);
    const headers = [];

    for (const [key, value] of keys.entries()) {
@@ -58,12 +53,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
              value: d,
            };
          })
-          .sort(
-            (
-              a: { key: string; value: number },
-              b: { key: string; value: number }
-            ) => b.value - a.value
-          )
+          .sort((a: { key: string; value: number }, b: { key: string; value: number }) => b.value - a.value)
          .filter((_: unknown, index: number) => index < 10),
      };
      if (legend) {
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -17,25 +17,14 @@
 import { MetricQueryTypes, Calculations } from "./data";
 export function useListConfig(config: any, index: string) {
  const i = Number(index);
-  const types = [
-    Calculations.Average,
-    Calculations.ApdexAvg,
-    Calculations.PercentageAvg,
-  ];
-  const calculation =
-    config.metricConfig &&
-    config.metricConfig[i] &&
-    config.metricConfig[i].calculation;
+  const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
+  const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
  const isLinear =
-    [
-      MetricQueryTypes.ReadMetricsValues,
-      MetricQueryTypes.ReadLabeledMetricsValues,
-    ].includes(config.metricTypes[i]) && !types.includes(calculation);
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
+    !types.includes(calculation);
  const isAvg =
-    [
-      MetricQueryTypes.ReadMetricsValues,
-      MetricQueryTypes.ReadLabeledMetricsValues,
-    ].includes(config.metricTypes[i]) && types.includes(calculation);
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
+    types.includes(calculation);
  return {
    isLinear,
    isAvg,
--- a/src/hooks/useMetricsProcessor.ts
+++ b/src/hooks/useMetricsProcessor.ts
@@ -20,8 +20,8 @@ import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { Instance, Endpoint, Service } from "@/types/selector";
-import { MetricConfigOpt } from "@/types/dashboard";
+import type { Instance, Endpoint, Service } from "@/types/selector";
+import type { MetricConfigOpt } from "@/types/dashboard";
 import { MetricCatalog } from "@/views/dashboard/data";

 export function useQueryProcessor(config: any) {
@@ -42,33 +42,21 @@ export function useQueryProcessor(config: any) {
    duration: appStore.durationTime,
  };
  const variables: string[] = [`$duration: Duration!`];
-  const isRelation = [
-    "ServiceRelation",
-    "ServiceInstanceRelation",
-    "EndpointRelation",
-    "ProcessRelation",
-  ].includes(dashboardStore.entity);
+  const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
+    dashboardStore.entity,
+  );
  if (isRelation && !selectorStore.currentDestService) {
    return;
  }
  const fragment = config.metrics.map((name: string, index: number) => {
    const metricType = config.metricTypes[index] || "";
    const c = (config.metricConfig && config.metricConfig[index]) || {};
-    if (
-      [
-        MetricQueryTypes.ReadSampledRecords,
-        MetricQueryTypes.SortMetrics,
-      ].includes(metricType)
-    ) {
+    if ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics].includes(metricType)) {
      variables.push(`$condition${index}: TopNCondition!`);
      conditions[`condition${index}`] = {
        name,
-        parentService: ["All"].includes(dashboardStore.entity)
-          ? null
-          : selectorStore.currentService.value,
-        normal: selectorStore.currentService
-          ? selectorStore.currentService.normal
-          : true,
+        parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
+        normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
        scope: config.catalog,
        topN: c.topN || 10,
        order: c.sortOrder || "DES",
@@ -76,19 +64,11 @@ export function useQueryProcessor(config: any) {
    } else {
      const entity = {
        scope: config.catalog,
-        serviceName:
-          dashboardStore.entity === "All"
-            ? undefined
-            : selectorStore.currentService.value,
-        normal:
-          dashboardStore.entity === "All"
-            ? undefined
-            : selectorStore.currentService.normal,
-        serviceInstanceName: [
-          "ServiceInstance",
-          "ServiceInstanceRelation",
-          "ProcessRelation",
-        ].includes(dashboardStore.entity)
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
+        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
+        serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
+          dashboardStore.entity,
+        )
          ? selectorStore.currentPod && selectorStore.currentPod.value
          : undefined,
        endpointName: dashboardStore.entity.includes("Endpoint")
@@ -97,16 +77,9 @@ export function useQueryProcessor(config: any) {
        processName: dashboardStore.entity.includes("Process")
          ? selectorStore.currentProcess && selectorStore.currentProcess.value
          : undefined,
-        destNormal: isRelation
-          ? selectorStore.currentDestService.normal
-          : undefined,
-        destServiceName: isRelation
-          ? selectorStore.currentDestService.value
-          : undefined,
-        destServiceInstanceName: [
-          "ServiceInstanceRelation",
-          "ProcessRelation",
-        ].includes(dashboardStore.entity)
+        destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
+        destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
+        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
          ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
          : undefined,
        destEndpointName:
@@ -114,8 +87,7 @@ export function useQueryProcessor(config: any) {
            ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
            : undefined,
        destProcessName: dashboardStore.entity.includes("ProcessRelation")
-          ? selectorStore.currentDestProcess &&
-            selectorStore.currentDestProcess.value
+          ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
          : undefined,
      };
      if ([MetricQueryTypes.ReadRecords].includes(metricType)) {
@@ -129,9 +101,7 @@ export function useQueryProcessor(config: any) {
      } else {
        entity.scope = dashboardStore.entity;
        if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-          const labels = (c.labelsIndex || "")
-            .split(",")
-            .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+          const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
          variables.push(`$labels${index}: [String!]!`);
          conditions[`labels${index}`] = labels;
        }
@@ -161,7 +131,7 @@ export function useSourceProcessor(
    metrics: string[];
    metricTypes: string[];
    metricConfig: MetricConfigOpt[];
-  }
+  },
 ) {
  if (resp.errors) {
    ElMessage.error(resp.errors);
@@ -179,23 +149,14 @@ export function useSourceProcessor(
    const c = (config.metricConfig && config.metricConfig[index]) || {};

    if (type === MetricQueryTypes.ReadMetricsValues) {
-      source[c.label || m] =
-        (resp.data[keys[index]] &&
-          calculateExp(resp.data[keys[index]].values.values, c)) ||
-        [];
+      source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || [];
    }
    if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
      const resVal = Object.values(resp.data)[0] || [];
-      const labels = (c.label || "")
-        .split(",")
-        .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-      const labelsIdx = (c.labelsIndex || "")
-        .split(",")
-        .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+      const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+      const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
      for (const item of resVal) {
-        const values = item.values.values.map((d: { value: number }) =>
-          aggregation(Number(d.value), c)
-        );
+        const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
        const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
        if (labels[indexNum] && indexNum > -1) {
          source[labels[indexNum]] = values;
@@ -209,20 +170,14 @@ export function useSourceProcessor(
    }
    if (
      (
-        [
-          MetricQueryTypes.ReadRecords,
-          MetricQueryTypes.ReadSampledRecords,
-          MetricQueryTypes.SortMetrics,
-        ] as string[]
+        [MetricQueryTypes.ReadRecords, MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics] as string[]
      ).includes(type)
    ) {
-      source[m] = (Object.values(resp.data)[0] || []).map(
-        (d: { value: unknown; name: string }) => {
-          d.value = aggregation(Number(d.value), c);
+      source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => {
+        d.value = aggregation(Number(d.value), c);

-          return d;
-        }
-      );
+        return d;
+      });
    }
    if (type === MetricQueryTypes.READHEATMAP) {
      const resVal = Object.values(resp.data)[0] || {};
@@ -238,12 +193,7 @@ export function useSourceProcessor(
      });
      let buckets = [] as any;
      if (resVal.buckets.length) {
-        buckets = [
-          resVal.buckets[0].min,
-          ...resVal.buckets.map(
-            (item: { min: string; max: string }) => item.max
-          ),
-        ];
+        buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
      }

      source[m] = { nodes, buckets }; // nodes: number[][]
@@ -260,7 +210,7 @@ export function useQueryPodsMetrics(
    metricTypes: string[];
    metricConfig: MetricConfigOpt[];
  },
-  scope: string
+  scope: string,
 ) {
  const metricTypes = (config.metricTypes || []).filter((m: string) => m);
  if (!metricTypes.length) {
@@ -277,40 +227,33 @@ export function useQueryPodsMetrics(
  };
  const variables: string[] = [`$duration: Duration!`];
  const currentService = selectorStore.currentService || {};
-  const fragmentList = pods.map(
-    (
-      d: (Instance | Endpoint | Service) & { normal: boolean },
-      index: number
-    ) => {
-      const param = {
-        scope,
-        serviceName: scope === "Service" ? d.label : currentService.label,
-        serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
-        endpointName: scope === "Endpoint" ? d.label : undefined,
-        normal: scope === "Service" ? d.normal : currentService.normal,
+  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
+    const param = {
+      scope,
+      serviceName: scope === "Service" ? d.label : currentService.label,
+      serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
+      endpointName: scope === "Endpoint" ? d.label : undefined,
+      normal: scope === "Service" ? d.normal : currentService.normal,
+    };
+    const f = metrics.map((name: string, idx: number) => {
+      const metricType = metricTypes[idx] || "";
+      variables.push(`$condition${index}${idx}: MetricsCondition!`);
+      conditions[`condition${index}${idx}`] = {
+        name,
+        entity: param,
      };
-      const f = metrics.map((name: string, idx: number) => {
-        const metricType = metricTypes[idx] || "";
-        variables.push(`$condition${index}${idx}: MetricsCondition!`);
-        conditions[`condition${index}${idx}`] = {
-          name,
-          entity: param,
-        };
-        let labelStr = "";
-        if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-          const c = config.metricConfig[idx] || {};
-          variables.push(`$labels${index}${idx}: [String!]!`);
-          labelStr = `labels: $labels${index}${idx}, `;
-          const labels = (c.labelsIndex || "")
-            .split(",")
-            .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-          conditions[`labels${index}${idx}`] = labels;
-        }
-        return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
-      });
-      return f;
-    }
-  );
+      let labelStr = "";
+      if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
+        const c = config.metricConfig[idx] || {};
+        variables.push(`$labels${index}${idx}: [String!]!`);
+        labelStr = `labels: $labels${index}${idx}, `;
+        const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        conditions[`labels${index}${idx}`] = labels;
+      }
+      return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
+    });
+    return f;
+  });
  const fragment = fragmentList.flat(1).join(" ");
  const queryStr = `query queryData(${variables}) {${fragment}}`;

@@ -324,7 +267,7 @@ export function usePodsSource(
    metrics: string[];
    metricTypes: string[];
    metricConfig: MetricConfigOpt[];
-  }
+  },
 ): any {
  if (resp.errors) {
    ElMessage.error(resp.errors);
@@ -347,39 +290,23 @@ export function usePodsSource(
      }
      if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
        d[name] = {};
-        if (
-          [
-            Calculations.Average,
-            Calculations.ApdexAvg,
-            Calculations.PercentageAvg,
-          ].includes(c.calculation)
-        ) {
+        if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
          d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
        }
-        d[name]["values"] = resp.data[key].values.values.map(
-          (val: { value: number }) => aggregation(val.value, c)
-        );
+        d[name]["values"] = resp.data[key].values.values.map((val: { value: number }) => aggregation(val.value, c));
        if (idx === 0) {
          names.push(name);
          metricConfigArr.push(c);
          metricTypesArr.push(config.metricTypes[index]);
        }
      }
-      if (
-        config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues
-      ) {
+      if (config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues) {
        const resVal = resp.data[key] || [];
-        const labels = (c.label || "")
-          .split(",")
-          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        const labelsIdx = (c.labelsIndex || "")
-          .split(",")
-          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
        for (let i = 0; i < resVal.length; i++) {
          const item = resVal[i];
-          const values = item.values.values.map((d: { value: number }) =>
-            aggregation(Number(d.value), c)
-          );
+          const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
          const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
          let key = item.label;
          if (labels[indexNum] && indexNum > -1) {
@@ -388,13 +315,7 @@ export function usePodsSource(
          if (!d[key]) {
            d[key] = {};
          }
-          if (
-            [
-              Calculations.Average,
-              Calculations.ApdexAvg,
-              Calculations.PercentageAvg,
-            ].includes(c.calculation)
-          ) {
+          if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
            d[key]["avg"] = calculateExp(item.values.values, c);
          }
          d[key]["values"] = values;
@@ -435,13 +356,8 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {

  return { queryStr, conditions };
 }
-function calculateExp(
-  arr: { value: number }[],
-  config: { calculation?: string }
-): (number | string)[] {
-  const sum = arr
-    .map((d: { value: number }) => d.value)
-    .reduce((a, b) => a + b);
+function calculateExp(arr: { value: number }[], config: { calculation?: string }): (number | string)[] {
+  const sum = arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b);
  let data: (number | string)[] = [];
  switch (config.calculation) {
    case Calculations.Average:
@@ -460,10 +376,7 @@ function calculateExp(
  return data;
 }

-export function aggregation(
-  val: number,
-  config: { calculation?: string }
-): number | string {
+export function aggregation(val: number, config: { calculation?: string }): number | string {
  let data: number | string = Number(val);

  switch (config.calculation) {
@@ -518,11 +431,9 @@ export async function useGetMetricEntity(metric: string, metricType: any) {
  let catalog = "";
  const dashboardStore = useDashboardStore();
  if (
-    [
-      MetricQueryTypes.ReadSampledRecords,
-      MetricQueryTypes.SortMetrics,
-      MetricQueryTypes.ReadRecords,
-    ].includes(metricType)
+    [MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords].includes(
+      metricType,
+    )
  ) {
    const res = await dashboardStore.fetchMetricList(metric);
    if (res.errors) {
--- a/src/hooks/useTimeout.ts
+++ b/src/hooks/useTimeout.ts
@@ -18,11 +18,7 @@ import { ref, watch } from "vue";
 import { tryOnUnmounted } from "@vueuse/core";
 import { isFunction } from "@/utils/is";

-export function useTimeoutFn(
-  handle: Fn<any>,
-  wait: number,
-  native = false
-): any {
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false): any {
  if (!isFunction(handle)) {
    throw new Error("handle is not Function!");
  }
@@ -36,7 +32,7 @@ export function useTimeoutFn(
      (maturity) => {
        maturity && handle();
      },
-      { immediate: false }
+      { immediate: false },
    );
  }
  return { readyRef, stop, start };