build(lint): update config

2025-05-13 16:27:33 +00:00 · 2022-12-15 12:53:43 +08:00 · 2022-12-15 12:53:43 +08:00 · 5b9fe5f7e8
commit 5b9fe5f7e8
parent 30317aabc0
95 changed files with 368 additions and 1270 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-/* eslint-env node */
+
 require("@rushstack/eslint-patch/modern-module-resolution");

 module.exports = {
@ -34,6 +34,10 @@ module.exports = {
  parserOptions: {
    ecmaVersion: "latest",
  },
+  env: {
+    browser: true,
+    node: true,
+  },
  rules: {
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-/* global module */
+
 module.exports = {
  ignores: [(commit) => commit.includes("init")],
  extends: ["@commitlint/config-conventional"],
--- a/postcss.config.js
+++ b/postcss.config.js
@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-/* global module */
+
 module.exports = {
  autoprefixer: {},
 };
--- a/prettier.config.js
+++ b/prettier.config.js
@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-/* global module */
+
 module.exports = {
  printWidth: 120,
  semi: true,
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@ -21,19 +21,12 @@ limitations under the License. -->
      <a :class="`${state.pre}-prev-year-btn`" v-show="!state.showYears" @click="state.year--">
        <Icon size="sm" iconName="angle-double-left" />
      </a>
-      <a
-        :class="`${state.pre}-prev-month-btn`"
-        v-show="!state.showYears && !state.showMonths"
-        @click="pm"
-      >
+      <a :class="`${state.pre}-prev-month-btn`" v-show="!state.showYears && !state.showMonths" @click="pm">
        <Icon size="middle" iconName="chevron-left" />
      </a>
      <a :class="`${state.pre}-year-select`" v-show="state.showYears">{{ ys + "-" + ye }}</a>
      <template v-if="local.yearSuffix">
-        <a
-          :class="`${state.pre}-year-select`"
-          @click="state.showYears = !state.showYears"
-          v-show="!state.showYears"
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears"
          >{{ state.year }}{{ local.yearSuffix }}</a
        >
        <a
@ -50,18 +43,11 @@ limitations under the License. -->
          v-show="!state.showYears && !state.showMonths"
          >{{ local.monthsHead[state.month] }}</a
        >
-        <a
-          :class="`${state.pre}-year-select`"
-          @click="state.showYears = !state.showYears"
-          v-show="!state.showYears"
-          >{{ state.year }}</a
-        >
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears">{{
+          state.year
+        }}</a>
      </template>
-      <a
-        :class="`${state.pre}-next-month-btn`"
-        v-show="!state.showYears && !state.showMonths"
-        @click="nm"
-      >
+      <a :class="`${state.pre}-next-month-btn`" v-show="!state.showYears && !state.showMonths" @click="nm">
        <Icon size="middle" iconName="chevron-right" />
      </a>
      <a :class="`${state.pre}-next-year-btn`" v-show="!state.showYears" @click="state.year++">
@ -88,13 +74,8 @@ limitations under the License. -->
      <div :class="`${state.pre}-months`" v-show="state.showMonths">
        <a
          v-for="(i, j) in local.months"
-          @click="
-            is($event) &&
-              ((state.showMonths = state.m === 'M'), (state.month = j), state.m === 'M' && ok('m'))
-          "
-          :class="[
-            status(state.year, j, state.day, state.hour, state.minute, state.second, 'YYYYMM'),
-          ]"
+          @click="is($event) && ((state.showMonths = state.m === 'M'), (state.month = j), state.m === 'M' && ok('m'))"
+          :class="[status(state.year, j, state.day, state.hour, state.minute, state.second, 'YYYYMM')]"
          :key="j"
          >{{ i }}</a
        >
@ -102,10 +83,7 @@ limitations under the License. -->
      <div :class="`${state.pre}-years`" v-show="state.showYears">
        <a
          v-for="(i, j) in years"
-          @click="
-            is($event) &&
-              ((state.showYears = state.m === 'Y'), (state.year = i), state.m === 'Y' && ok('y'))
-          "
+          @click="is($event) && ((state.showYears = state.m === 'Y'), (state.year = i), state.m === 'Y' && ok('y'))"
          :class="[
            j === 0 || j === 11 ? `${state.pre}-date-out` : '',
            status(i, state.month, state.day, state.hour, state.minute, state.second, 'YYYY'),
@ -120,17 +98,7 @@ limitations under the License. -->
          <a
            v-for="(j, i) in 24"
            @click="is($event) && ((state.showHours = false), (state.hour = i), ok('h'))"
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                i,
-                state.minute,
-                state.second,
-                'YYYYMMDDHH',
-              ),
-            ]"
+            :class="[status(state.year, state.month, state.day, i, state.minute, state.second, 'YYYYMMDDHH')]"
            :key="i"
            >{{ i }}</a
          >
@ -142,17 +110,7 @@ limitations under the License. -->
          <a
            v-for="(j, i) in 60"
            @click="is($event) && ((state.showMinutes = false), (state.minute = i), ok('h'))"
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                state.hour,
-                i,
-                state.second,
-                'YYYYMMDDHHmm',
-              ),
-            ]"
+            :class="[status(state.year, state.month, state.day, state.hour, i, state.second, 'YYYYMMDDHHmm')]"
            :key="i"
            >{{ i }}</a
          >
@ -164,17 +122,7 @@ limitations under the License. -->
          <a
            v-for="(j, i) in 60"
            @click="is($event) && ((state.showSeconds = false), (state.second = i), ok('h'))"
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                state.hour,
-                state.minute,
-                i,
-                'YYYYMMDDHHmmss',
-              ),
-            ]"
+            :class="[status(state.year, state.month, state.day, state.hour, state.minute, i, 'YYYYMMDDHHmmss')]"
            :key="i"
            >{{ i }}</a
          >
@ -185,18 +133,14 @@ limitations under the License. -->
      <div :class="`${state.pre}-hour`">
        <a
          :title="local.hourTip"
-          @click="
-            (state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)
-          "
+          @click="(state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)"
          :class="{ on: state.showHours }"
          >{{ dd(state.hour) }}</a
        >
        <span>:</span>
        <a
          :title="local.minuteTip"
-          @click="
-            (state.showMinutes = !state.showMinutes), (state.showHours = state.showSeconds = false)
-          "
+          @click="(state.showMinutes = !state.showMinutes), (state.showHours = state.showSeconds = false)"
          :class="{ on: state.showMinutes }"
          >{{ dd(state.minute) }}</a
        >
@ -204,10 +148,7 @@ limitations under the License. -->
          <span>:</span>
          <a
            :title="local.secondTip"
-            @click="
-              (state.showSeconds = !state.showSeconds),
-                (state.showHours = state.showMinutes = false)
-            "
+            @click="(state.showSeconds = !state.showSeconds), (state.showHours = state.showMinutes = false)"
            :class="{ on: state.showSeconds }"
            >{{ dd(state.second) }}</a
          >
@ -416,10 +357,7 @@ limitations under the License. -->
        s: seconds,
        S: milliseconds,
      };
-      return (format || props.format).replace(
-        /Y+|M+|D+|H+|h+|m+|s+|S+/g,
-        (str: string) => map[str],
-      );
+      return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
    };
    const classObj: any = {};
    let flag = false;
@ -431,10 +369,8 @@ limitations under the License. -->
      flag = tf(props.value, format) === tf(time, format);
    }
    classObj[`${state.pre}-date`] = true;
-    classObj[`${state.pre}-date-disabled`] =
-      (props.right && t < start.value) || props.disabledDate(time, format);
-    classObj[`${state.pre}-date-on`] =
-      (props.left && t > start.value) || (props.right && t < end.value);
+    classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format);
+    classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value);
    classObj[`${state.pre}-date-selected`] = flag;
    return classObj;
  };
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@ -78,9 +78,7 @@ limitations under the License. -->
  });
  const available = computed(
    () =>
-      (Array.isArray(props.option.series) &&
-        props.option.series[0] &&
-        props.option.series[0].data) ||
+      (Array.isArray(props.option.series) && props.option.series[0] && props.option.series[0].data) ||
      (Array.isArray(props.option.series.data) && props.option.series.data[0]),
  );
  onMounted(async () => {
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@ -27,12 +27,7 @@ limitations under the License. -->
    :remote-method="remoteMethod"
    :filterable="filterable"
  >
-    <el-option
-      v-for="item in options"
-      :key="item.value || ''"
-      :label="item.label || ''"
-      :value="item.value || ''"
-    >
+    <el-option v-for="item in options" :key="item.value || ''" :label="item.label || ''" :value="item.value || ''">
    </el-option>
  </el-select>
 </template>
--- a/src/components/tests/HelloWorld.spec.ts
+++ b/src/components/tests/HelloWorld.spec.ts
@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it } from "vitest";

 // import { mount } from '@vue/test-utils'
 // import HelloWorld from '../HelloWorld.vue'
--- a/src/graphql/fragments/alarm.ts
+++ b/src/graphql/fragments/alarm.ts
@ -16,8 +16,7 @@
 */

 export const Alarm = {
-  variable:
-    "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
+  variable: "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
  query: `
    getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) {
      items: msgs {
--- a/src/graphql/query/topology.ts
+++ b/src/graphql/query/topology.ts
@ -14,12 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import {
-  InstanceTopology,
-  EndpointTopology,
-  ServicesTopology,
-  ProcessTopology,
-} from "../fragments/topology";
+import { InstanceTopology, EndpointTopology, ServicesTopology, ProcessTopology } from "../fragments/topology";

 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@ -14,12 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import type {
-  BarSeriesOption,
-  LineSeriesOption,
-  HeatmapSeriesOption,
-  SankeySeriesOption,
-} from "echarts/charts";
+import type { BarSeriesOption, LineSeriesOption, HeatmapSeriesOption, SankeySeriesOption } from "echarts/charts";
 import type {
  TitleComponentOption,
  TooltipComponentOption,
@ -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;
  });
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@ -39,9 +39,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
  }
  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()) {
@ -55,10 +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
@ -18,16 +18,13 @@ 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 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
@ -42,12 +42,9 @@ 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;
  }
@ -58,9 +55,7 @@ export function useQueryProcessor(config: any) {
      variables.push(`$condition${index}: TopNCondition!`);
      conditions[`condition${index}`] = {
        name,
-        parentService: ["All"].includes(dashboardStore.entity)
-          ? null
-          : selectorStore.currentService.value,
+        parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
        normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
        scope: config.catalog,
        topN: c.topN || 10,
@ -69,14 +64,11 @@ export function useQueryProcessor(config: any) {
    } else {
      const entity = {
        scope: config.catalog,
-        serviceName:
-          dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
-        serviceInstanceName: [
-          "ServiceInstance",
-          "ServiceInstanceRelation",
-          "ProcessRelation",
-        ].includes(dashboardStore.entity)
+        serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
+          dashboardStore.entity,
+        )
          ? selectorStore.currentPod && selectorStore.currentPod.value
          : undefined,
        endpointName: dashboardStore.entity.includes("Endpoint")
@ -87,9 +79,7 @@ export function useQueryProcessor(config: any) {
          : undefined,
        destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
        destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
-        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(
-          dashboardStore.entity,
-        )
+        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
          ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
          : undefined,
        destEndpointName:
@ -111,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,21 +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;
@ -189,11 +170,7 @@ 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 }) => {
@ -216,10 +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[][]
@ -253,37 +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}}`;

@ -320,16 +290,10 @@ 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);
@ -338,17 +302,11 @@ export function usePodsSource(
      }
      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) {
@ -357,11 +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;
@ -402,10 +356,7 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {

  return { queryStr, conditions };
 }
-function calculateExp(
-  arr: { value: number }[],
-  config: { calculation?: string },
-): (number | string)[] {
+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) {
@ -480,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/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@ -23,20 +23,12 @@ limitations under the License. -->
        format="YYYY-MM-DD HH:mm"
        @input="changeTimeRange"
      />
-      <span>
-        UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
-      </span>
+      <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
      <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
        <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
      </span>
      <span class="version ml-5 cp">
-        <el-popover
-          trigger="hover"
-          width="250"
-          placement="bottom"
-          effect="light"
-          :content="appStore.version"
-        >
+        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
          <template #reference>
            <span>
              <Icon iconName="info_outline" size="middle" />
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@ -84,9 +84,7 @@ limitations under the License. -->
  const appStore = useAppStoreWithOut();
  const { t } = useI18n();
  const name = ref<string>(String(useRouter().currentRoute.value.name));
-  const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
-    ? ref("light")
-    : ref("black");
+  const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
  const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
    appStore.setIsMobile(true);
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@ -367,8 +367,7 @@ const msg = {
  addKeywordsOfContent: "Please input a keyword of content",
  addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
  noticeTag: "Please press Enter after inputting a tag(key=value).",
-  conditionNotice:
-    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
+  conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
  language: "Language",
  gateway: "Gateway",
  virtualMQ: "Virtual MQ",
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@ -178,10 +178,8 @@ const msg = {
  asTable: "Como tabla",
  toTheRight: "Derecha",
  minDuration: "Duración mínima de la solicitud",
-  when4xx:
-    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
-  when5xx:
-    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
+  when4xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
+  when5xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
  taskTitle: "Reglas de recolección de peticiones y respuestas HTTP",
  second: "s",
  yearSuffix: "Año",
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -282,12 +282,9 @@ const msg = {
  chartType: "图表类型",
  currentDepth: "当前深度",
  defaultDepth: "默认深度",
-  traceTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  logTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  alarmTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  traceTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  alarmTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
  tagsLink: "配置词汇页",
  addTag: "请添加标签",
  logCategory: "日志类别",
@ -310,8 +307,7 @@ const msg = {
  contentType: "内容类型",
  content: "内容",
  viewLogs: "查看日志",
-  logsTagsTip:
-    "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logsTagsTip: "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
  keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
  setEvent: "设置事件",
  viewAttributes: "查看",
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -21,12 +21,7 @@ import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";

-const routes: Array<RouteRecordRaw> = [
-  ...routesLayers,
-  ...routesDashboard,
-  ...routesAlarm,
-  ...routesSetting,
-];
+const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting];

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -92,8 +92,7 @@ export const appStore = defineStore({
              this.duration.start.getMonth());
          break;
      }
-      const utcSpace =
-        (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + this.utcMin * 60000;
+      const utcSpace = (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + this.utcMin * 60000;
      const startUnix: number = this.duration.start.getTime();
      const endUnix: number = this.duration.end.getTime();
      const timeIntervals: number[] = [];
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@ -45,9 +45,7 @@ export const eventStore = defineStore({
      this.condition = data;
    },
    async getInstances() {
-      const serviceId = useSelectorStore().currentService
-        ? useSelectorStore().currentService.id
-        : "";
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId,
        duration: useAppStoreWithOut().durationTime,
@ -56,15 +54,11 @@ export const eventStore = defineStore({
      if (res.data.errors) {
        return res.data;
      }
-      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [
-        { value: "", label: "All" },
-      ];
+      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
      return res.data;
    },
    async getEndpoints() {
-      const serviceId = useSelectorStore().currentService
-        ? useSelectorStore().currentService.id
-        : "";
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
      if (!serviceId) {
        return;
      }
@ -76,9 +70,7 @@ export const eventStore = defineStore({
      if (res.data.errors) {
        return res.data;
      }
-      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [
-        { value: "", label: "All" },
-      ];
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
      return res.data;
    },
    async getEvents() {
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@ -71,9 +71,7 @@ export const logStore = defineStore({
      return res.data;
    },
    async getInstances(id: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId,
        duration: useAppStoreWithOut().durationTime,
@ -82,15 +80,11 @@ export const logStore = defineStore({
      if (res.data.errors) {
        return res.data;
      }
-      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [
-        { value: " 0", label: "All" },
-      ];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: " 0", label: "All" }];
      return res.data;
    },
    async getEndpoints(id: string, keyword?: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
        serviceId,
        duration: useAppStoreWithOut().durationTime,
@ -99,9 +93,7 @@ export const logStore = defineStore({
      if (res.data.errors) {
        return res.data;
      }
-      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [
-        { value: "0", label: "All" },
-      ];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: "0", label: "All" }];
      return res.data;
    },
    async getLogsByKeywords() {
@ -123,9 +115,7 @@ export const logStore = defineStore({
    },
    async getServiceLogs() {
      this.loadLogs = true;
-      const res: AxiosResponse = await graphql
-        .query("queryServiceLogs")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("queryServiceLogs").params({ condition: this.conditions });
      this.loadLogs = false;
      if (res.data.errors) {
        return res.data;
@ -136,9 +126,7 @@ export const logStore = defineStore({
    },
    async getBrowserLogs() {
      this.loadLogs = true;
-      const res: AxiosResponse = await graphql
-        .query("queryBrowserErrorLogs")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("queryBrowserErrorLogs").params({ condition: this.conditions });

      this.loadLogs = false;
      if (res.data.errors) {
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@ -90,10 +90,7 @@ export const selectorStore = defineStore({
      }
      return res.data;
    },
-    async getServiceInstances(param?: {
-      serviceId: string;
-      isRelation: boolean;
-    }): Promise<Nullable<AxiosResponse>> {
+    async getServiceInstances(param?: { serviceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
      const serviceId = param ? param.serviceId : this.currentService?.id;
      if (!serviceId) {
        return null;
@ -111,10 +108,7 @@ export const selectorStore = defineStore({
      }
      return res.data;
    },
-    async getProcesses(param?: {
-      instanceId: string;
-      isRelation: boolean;
-    }): Promise<Nullable<AxiosResponse>> {
+    async getProcesses(param?: { instanceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
      const instanceId = param ? param.instanceId : this.currentPod?.id;
      if (!instanceId) {
        return null;
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@ -110,7 +110,5 @@ declare global {
 }

 declare module "vue" {
-  export type JSXComponent<Props = any> =
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
 }
--- a/src/utils/dateFormat.ts
+++ b/src/utils/dateFormat.ts
@ -97,5 +97,4 @@ export const dateFormatTime = (date: Date, step: string): string => {
  return "";
 };

-export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(new Date(date)).format(pattern);
+export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => dayjs(new Date(date)).format(pattern);
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@ -41,9 +41,7 @@ limitations under the License. -->
    await dashboardStore.setDashboards();
    const item = dashboardStore.dashboards.find(
      (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
-        d.layer === dashboardStore.layerId &&
-        [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
-        d.isRoot,
+        d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
    );
    if (!item) {
      appStore.setPageTitle(dashboardStore.layer);
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@ -30,24 +30,10 @@ limitations under the License. -->
      <div>
        <span>UTC</span>
        <span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
-        <input
-          type="number"
-          v-model="utcHour"
-          min="-12"
-          max="14"
-          class="utc-input"
-          @change="setUTCHour"
-        />
+        <input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
        <span class="ml-5 mr-5">:</span>
        <span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
-        <input
-          type="number"
-          v-model="utcMin"
-          min="0"
-          max="59"
-          class="utc-input"
-          @change="setUTCMin"
-        />
+        <input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
      </div>
    </div>
    <div class="flex-h item">
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@ -58,20 +58,12 @@ limitations under the License. -->
        <div>
          <ul>
            <li>
-              <span
-                v-for="(i, index) of EventsDetailHeaders"
-                :class="i.class"
-                :key="i.class + index"
-              >
+              <span v-for="(i, index) of EventsDetailHeaders" :class="i.class" :key="i.class + index">
                {{ t(i.text) }}
              </span>
            </li>
            <li v-for="event in currentEvents" :key="event.uuid" @click="viewEventDetail(event)">
-              <span
-                v-for="(d, index) of EventsDetailHeaders"
-                :class="d.class"
-                :key="event.uuid + index"
-              >
+              <span v-for="(d, index) of EventsDetailHeaders" :class="d.class" :key="event.uuid + index">
                <span v-if="d.class === 'startTime' || d.class === 'endTime'">
                  {{ dateFormat(event[d.class]) }}
                </span>
@ -97,9 +89,7 @@ limitations under the License. -->
      <div class="mb-10" v-for="(eventKey, index) in EventsDetailKeys" :key="index">
        <span class="keys">{{ t(eventKey.text) }}</span>
        <span v-if="eventKey.class === 'parameters'">
-          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index">
-            {{ d.key }}={{ d.value }};
-          </span>
+          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"> {{ d.key }}={{ d.value }}; </span>
        </span>
        <span v-else-if="eventKey.class === 'startTime' || eventKey.class === 'endTime'">
          {{ dateFormat(currentEvent[eventKey.class]) }}
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@ -28,12 +28,7 @@ limitations under the License. -->
      </div>
      <div class="mr-10 ml-10">
        <span class="grey">{{ t("searchKeyword") }}: </span>
-        <el-input
-          size="small"
-          v-model="keyword"
-          class="alarm-tool-input"
-          @change="refreshAlarms({ pageNum: 1 })"
-        />
+        <el-input size="small" v-model="keyword" class="alarm-tool-input" @change="refreshAlarms({ pageNum: 1 })" />
      </div>
      <div class="pagination">
        <el-pagination
@ -48,10 +43,7 @@ limitations under the License. -->
        />
      </div>
    </div>
-    <ConditionTags
-      :type="'ALARM'"
-      @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
-    />
+    <ConditionTags :type="'ALARM'" @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })" />
  </nav>
 </template>
 <script lang="ts" setup>
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@ -42,12 +42,7 @@ limitations under the License. -->
        />
      </template>
      <div class="content">
-        <span
-          v-for="(item, index) in tagList"
-          :key="index"
-          @click="selectTag(item)"
-          class="tag-item"
-        >
+        <span v-for="(item, index) in tagList" :key="index" @click="selectTag(item)" class="tag-item">
          {{ item }}
        </span>
      </div>
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@ -63,9 +63,7 @@ limitations under the License. -->
          const { layer, entity, name } = dashboardStore.currentDashboard;
          layoutKey.value = `${layer}_${entity}_${name}`;
        }
-        const c: { configuration: string; id: string } = JSON.parse(
-          sessionStorage.getItem(layoutKey.value) || "{}",
-        );
+        const c: { configuration: string; id: string } = JSON.parse(sessionStorage.getItem(layoutKey.value) || "{}");
        const layout: any = c.configuration || {};

        dashboardStore.setLayout(setWidgetsID(layout.children || []));
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@ -171,8 +171,7 @@ limitations under the License. -->
    for (const item of arr) {
      const { layer, name, entity } = item.configuration;
      const index = dashboardStore.dashboards.findIndex(
-        (d: DashboardItem) =>
-          d.name === name && d.entity === entity && d.layer === layer && !item.id,
+        (d: DashboardItem) => d.name === name && d.entity === entity && d.layer === layer && !item.id,
      );
      if (index > -1) {
        return ElMessage.error(t("nameError"));
@ -447,8 +446,7 @@ limitations under the License. -->

    total.value = arr.length;
    dashboards.value = arr.filter(
-      (d: { name: string }, index: number) =>
-        index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
+      (d: { name: string }, index: number) => index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
    );
    currentPage.value = pageIndex;
  }
--- a/src/views/dashboard/configuration/Event.vue
+++ b/src/views/dashboard/configuration/Event.vue
@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
  <div>
    <span class="label">{{ t("enableAssociate") }}</span>
-    <el-switch
-      v-model="eventAssociate"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig"
-    />
+    <el-switch v-model="eventAssociate" active-text="Yes" inactive-text="No" @change="updateConfig" />
  </div>
  <div class="footer">
    <el-button size="small" @click="cancelConfig">
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@ -13,22 +13,11 @@ limitations under the License. -->
 <template>
  <div class="item">
    <span class="label">{{ t("showDepth") }}</span>
-    <el-switch
-      v-model="showDepth"
-      active-text="Yes"
-      inactive-text="No"
-      @change="changeConfig({ showDepth })"
-    />
+    <el-switch v-model="showDepth" active-text="Yes" inactive-text="No" @change="changeConfig({ showDepth })" />
  </div>
  <div class="item" v-show="showDepth">
    <span class="label">{{ t("defaultDepth") }}</span>
-    <Selector
-      class="input"
-      size="small"
-      :value="depth"
-      :options="DepthList"
-      @change="changeDepth($event)"
-    />
+    <Selector class="input" size="small" :value="depth" :options="DepthList" @change="changeDepth($event)" />
  </div>
  <div class="footer">
    <el-button size="small">
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@ -47,10 +47,7 @@ limitations under the License. -->
      </div>
    </div>
    <div class="collapse" :style="{ height: configHeight + 'px' }">
-      <el-collapse
-        v-model="states.activeNames"
-        :style="{ '--el-collapse-header-font-size': '15px' }"
-      >
+      <el-collapse v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }">
        <el-collapse-item :title="t('selectVisualization')" name="1">
          <MetricOptions @update="getSource" @loading="setLoading" />
        </el-collapse-item>
--- a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
+++ b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
@ -26,12 +26,7 @@ limitations under the License. -->
  </div>
  <div v-else class="item">
    <span class="label">{{ t("enableRelatedTrace") }}</span>
-    <el-switch
-      v-model="enableRelate"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ enableRelate })"
-    />
+    <el-switch v-model="enableRelate" active-text="Yes" inactive-text="No" @change="updateConfig({ enableRelate })" />
  </div>
  <div v-if="enableRelate">
    <div class="item">
@ -58,12 +53,7 @@ limitations under the License. -->
    </div>
    <div class="item">
      <span class="label">{{ t("setLatencyDuration") }}</span>
-      <el-switch
-        v-model="latency"
-        active-text="Yes"
-        inactive-text="No"
-        @change="updateConfig({ latency })"
-      />
+      <el-switch v-model="latency" active-text="Yes" inactive-text="No" @change="updateConfig({ latency })" />
    </div>
  </div>
 </template>
--- a/src/views/dashboard/configuration/widget/graph-styles/Card.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
@ -28,12 +28,7 @@ limitations under the License. -->
  </div>
  <div class="item">
    <span class="label">{{ t("showUnit") }}</span>
-    <el-switch
-      v-model="showUnit"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ showUnit })"
-    />
+    <el-switch v-model="showUnit" active-text="Yes" inactive-text="No" @change="updateConfig({ showUnit })" />
  </div>
 </template>
 <script lang="ts" setup>
--- a/src/views/dashboard/configuration/widget/graph-styles/Line.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
@ -34,30 +34,15 @@ limitations under the License. -->
  </div>
  <div>
    <span class="label">{{ t("smooth") }}</span>
-    <el-switch
-      v-model="smooth"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ smooth })"
-    />
+    <el-switch v-model="smooth" active-text="Yes" inactive-text="No" @change="updateConfig({ smooth })" />
  </div>
  <div>
    <span class="label">{{ t("showSymbol") }}</span>
-    <el-switch
-      v-model="showSymbol"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ showSymbol })"
-    />
+    <el-switch v-model="showSymbol" active-text="Yes" inactive-text="No" @change="updateConfig({ showSymbol })" />
  </div>
  <div>
    <span class="label">{{ t("step") }}</span>
-    <el-switch
-      v-model="step"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ step })"
-    />
+    <el-switch v-model="step" active-text="Yes" inactive-text="No" @change="updateConfig({ step })" />
  </div>
 </template>
 <script lang="ts" setup>
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@ -59,12 +59,7 @@ limitations under the License. -->
        size="middle"
        @click="addMetric"
      />
-      <Icon
-        class="cp"
-        iconName="remove_circle_outline"
-        size="middle"
-        @click="deleteMetric(index)"
-      />
+      <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
    </span>
  </div>
  <div>{{ t("visualization") }}</div>
@ -97,11 +92,7 @@ limitations under the License. -->
  } from "../../../data";
  import { ElMessage } from "element-plus";
  import Icon from "@/components/Icon.vue";
-  import {
-    useQueryProcessor,
-    useSourceProcessor,
-    useGetMetricEntity,
-  } from "@/hooks/useMetricsProcessor";
+  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
  import { useI18n } from "vue-i18n";
  import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
  import Standard from "./Standard.vue";
@ -146,9 +137,7 @@ limitations under the License. -->
  const setVisTypes = computed(() => {
    let graphs = [];
    if (dashboardStore.entity === EntityType[0].value) {
-      graphs = ChartTypes.filter(
-        (d: Option) => ![ChartTypes[7].value, ChartTypes[8].value].includes(d.value),
-      );
+      graphs = ChartTypes.filter((d: Option) => ![ChartTypes[7].value, ChartTypes[8].value].includes(d.value));
    } else if (dashboardStore.entity === EntityType[1].value) {
      graphs = ChartTypes.filter((d: Option) => !PodsChartTypes.includes(d.value));
    } else {
@ -215,28 +204,24 @@ limitations under the License. -->
  }

  function setDashboards(type?: string) {
-    const chart =
-      type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
+    const chart = type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
    const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-    const arr = list.reduce(
-      (prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
-        if (d.layer === dashboardStore.layerId) {
-          if (
-            (d.entity === EntityType[0].value && chart === "ServiceList") ||
-            (d.entity === EntityType[2].value && chart === "EndpointList") ||
-            (d.entity === EntityType[3].value && chart === "InstanceList")
-          ) {
-            prev.push({
-              ...d,
-              value: d.name,
-              label: d.name,
-            });
-          }
+    const arr = list.reduce((prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
+      if (d.layer === dashboardStore.layerId) {
+        if (
+          (d.entity === EntityType[0].value && chart === "ServiceList") ||
+          (d.entity === EntityType[2].value && chart === "EndpointList") ||
+          (d.entity === EntityType[3].value && chart === "InstanceList")
+        ) {
+          prev.push({
+            ...d,
+            value: d.name,
+            label: d.name,
+          });
        }
-        return prev;
-      },
-      [],
-    );
+      }
+      return prev;
+    }, []);

    states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
  }
@ -286,8 +271,7 @@ limitations under the License. -->
  }

  function changeMetricType(index: number, opt: Option[] | any) {
-    const metric =
-      states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
+    const metric = states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
    const l = setMetricTypeList(metric.type);
    if (states.isList) {
      states.metricTypes[index] = opt[0].value;
@ -400,10 +384,7 @@ limitations under the License. -->
      labelsIndex: "",
      sortOrder: "DES",
    };
-    if (
-      !dashboardStore.selectedGrid.metricConfig ||
-      !dashboardStore.selectedGrid.metricConfig[index]
-    ) {
+    if (!dashboardStore.selectedGrid.metricConfig || !dashboardStore.selectedGrid.metricConfig[index]) {
      currentMetricConfig.value = n;
      return;
    }
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@ -120,17 +120,13 @@ limitations under the License. -->
    const graph = dashboardStore.selectedGrid.graph || {};
    return (
      ListChartTypes.includes(graph.type) ||
-      [ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(
-        metricType.value,
-      )
+      [ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(metricType.value)
    );
  });
  const isTopn = computed(() =>
-    [
-      ProtocolTypes.SortMetrics,
-      ProtocolTypes.ReadSampledRecords,
-      ProtocolTypes.ReadRecords,
-    ].includes(metricTypes[props.index]),
+    [ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
+      metricTypes[props.index],
+    ),
  );
  function updateConfig(index: number, param: { [key: string]: string }) {
    const key = Object.keys(param)[0];
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@ -140,9 +140,7 @@ limitations under the License. -->
      dashboardStore.setActiveTabIndex(activeTabIndex);
      const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
      if (dashboardStore.layout[l].children.length) {
-        dashboardStore.setCurrentTabItems(
-          dashboardStore.layout[l].children[activeTabIndex.value].children,
-        );
+        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
        dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
      }

@ -153,9 +151,7 @@ limitations under the License. -->
        dashboardStore.selectWidget(props.data);
        dashboardStore.setActiveTabIndex(idx);
        const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-        dashboardStore.setCurrentTabItems(
-          dashboardStore.layout[l].children[activeTabIndex.value].children,
-        );
+        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
        needQuery.value = true;
        if (route.params.activeTabIndex) {
          let p = location.href.split("/tab/")[0];
@ -204,9 +200,7 @@ limitations under the License. -->
      }
      function layoutUpdatedEvent() {
        const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-        dashboardStore.setCurrentTabItems(
-          dashboardStore.layout[l].children[activeTabIndex.value].children,
-        );
+        dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
      }
      function copyLink() {
        let path = "";
@ -241,9 +235,7 @@ limitations under the License. -->
          dashboardStore.activeGridItem(props.data.i);
          dashboardStore.selectWidget(props.data);
          const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
-          dashboardStore.setCurrentTabItems(
-            dashboardStore.layout[l].children[activeTabIndex.value].children,
-          );
+          dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
          needQuery.value = true;
          if (route.params.activeTabIndex) {
            let p = location.href.split("/tab/")[0];
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@ -73,11 +73,7 @@ limitations under the License. -->
  import { useSelectorStore } from "@/store/modules/selectors";
  import graphs from "../graphs";
  import { useI18n } from "vue-i18n";
-  import {
-    useQueryProcessor,
-    useSourceProcessor,
-    useGetMetricEntity,
-  } from "@/hooks/useMetricsProcessor";
+  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
  import { EntityType, ListChartTypes } from "../data";
  import type { EventParams } from "@/types/dashboard";
  import getDashboard from "@/hooks/useDashboardsSession";
@ -107,9 +103,7 @@ limitations under the License. -->
      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 isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));

      if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList.value) {
        queryMetrics();
@ -189,10 +183,7 @@ limitations under the License. -->
          if (isList.value) {
            return;
          }
-          if (
-            dashboardStore.entity === EntityType[0].value ||
-            dashboardStore.entity === EntityType[4].value
-          ) {
+          if (dashboardStore.entity === EntityType[0].value || dashboardStore.entity === EntityType[4].value) {
            queryMetrics();
          }
        },
@ -200,10 +191,7 @@ limitations under the License. -->
      watch(
        () => [selectorStore.currentPod, selectorStore.currentDestPod],
        () => {
-          if (
-            dashboardStore.entity === EntityType[0].value ||
-            dashboardStore.entity === EntityType[7].value
-          ) {
+          if (dashboardStore.entity === EntityType[0].value || dashboardStore.entity === EntityType[7].value) {
            return;
          }
          if (isList.value) {
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
-    <Graph
-      :option="option"
-      @select="clickEvent"
-      :filters="config.filters"
-      :associate="config.associate || []"
-    />
+    <Graph :option="option" @select="clickEvent" :filters="config.filters" :associate="config.associate || []" />
    <Legend :config="config.legend" :data="data" :intervalTime="intervalTime" />
  </div>
 </template>
@ -54,18 +49,13 @@ limitations under the License. -->
  const option = computed(() => getOption());

  function getOption() {
-    const keys = Object.keys(props.data || {}).filter(
-      (i: any) => Array.isArray(props.data[i]) && props.data[i].length,
-    );
+    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
    const temp = keys.map((i: string) => {
      if (!props.intervalTime) {
        return;
      }
      return {
-        data: props.data[i].map((item: number, itemIndex: number) => [
-          props.intervalTime[itemIndex],
-          item,
-        ]),
+        data: props.data[i].map((item: number, itemIndex: number) => [props.intervalTime[itemIndex], item]),
        name: i,
        type: "bar",
        symbol: "none",
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@ -55,9 +55,7 @@ limitations under the License. -->
  const metricConfig = computed(() => props.config.metricConfig || []);
  const key = computed(() => Object.keys(props.data)[0]);
  const singleVal = computed(() => Number(props.data[key.value]));
-  const unit = computed(
-    () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""),
-  );
+  const unit = computed(() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""));
 </script>
 <style lang="scss" scoped>
  .chart-card {
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
  <div class="table">
    <div class="search">
-      <el-input
-        v-model="searchText"
-        placeholder="Search for more endpoints"
-        @change="searchList"
-        class="inputs"
-      >
+      <el-input v-model="searchText" placeholder="Search for more endpoints" @change="searchList" class="inputs">
        <template #append>
          <el-button @click="searchList" class="btn">
            <Icon size="middle" iconName="search" />
@ -33,11 +28,7 @@ limitations under the License. -->
      <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
        <el-table-column label="Endpoints" fixed min-width="220">
          <template #default="scope">
-            <span
-              class="link"
-              @click="clickEndpoint(scope)"
-              :style="{ fontSize: `${config.fontSize}px` }"
-            >
+            <span class="link" @click="clickEndpoint(scope)" :style="{ fontSize: `${config.fontSize}px` }">
              {{ scope.row.label }}
            </span>
          </template>
@ -169,11 +160,7 @@ limitations under the License. -->
    await queryEndpoints();
  }
  watch(
-    () => [
-      ...(props.config.metricTypes || []),
-      ...(props.config.metrics || []),
-      ...(props.config.metricConfig || []),
-    ],
+    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
    (data, old) => {
      if (JSON.stringify(data) === JSON.stringify(old)) {
        return;
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
  <div class="table">
    <div class="search">
-      <el-input
-        v-model="searchText"
-        placeholder="Please input instance name"
-        @change="searchList"
-        class="inputs"
-      >
+      <el-input v-model="searchText" placeholder="Please input instance name" @change="searchList" class="inputs">
        <template #append>
          <el-button class="btn" @click="searchList">
            <Icon size="sm" iconName="search" />
@ -32,11 +27,7 @@ limitations under the License. -->
      <el-table v-loading="chartLoading" :data="instances" style="width: 100%">
        <el-table-column label="Service Instances" fixed min-width="320">
          <template #default="scope">
-            <span
-              class="link"
-              @click="clickInstance(scope)"
-              :style="{ fontSize: `${config.fontSize}px` }"
-            >
+            <span class="link" @click="clickInstance(scope)" :style="{ fontSize: `${config.fontSize}px` }">
              {{ scope.row.label }}
            </span>
          </template>
@ -167,14 +158,10 @@ limitations under the License. -->
        ElMessage.error(json.errors);
        return;
      }
-      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
-        currentInstances,
-        json,
-        {
-          ...props.config,
-          metricConfig: metricConfig.value,
-        },
-      );
+      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentInstances, json, {
+        ...props.config,
+        metricConfig: metricConfig.value,
+      });
      instances.value = data;
      colMetrics.value = names;
      metricTypes.value = metricTypesArr;
@ -211,19 +198,13 @@ limitations under the License. -->
  }

  function searchList() {
-    const searchInstances = selectorStore.pods.filter((d: { label: string }) =>
-      d.label.includes(searchText.value),
-    );
+    const searchInstances = selectorStore.pods.filter((d: { label: string }) => d.label.includes(searchText.value));
    instances.value = searchInstances.filter((d: unknown, index: number) => index < pageSize);
    queryInstanceMetrics(instances.value);
  }

  watch(
-    () => [
-      ...(props.config.metricTypes || []),
-      ...(props.config.metrics || []),
-      ...(props.config.metricConfig || []),
-    ],
+    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
    (data, old) => {
      if (JSON.stringify(data) === JSON.stringify(old)) {
        return;
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
  <div class="table">
    <div class="search">
-      <el-input
-        v-model="searchText"
-        placeholder="Please input service name"
-        @change="searchList"
-        class="inputs mt-5"
-      >
+      <el-input v-model="searchText" placeholder="Please input service name" @change="searchList" class="inputs mt-5">
        <template #append>
          <el-button class="btn" @click="searchList">
            <Icon size="sm" iconName="search" />
@ -44,11 +39,7 @@ limitations under the License. -->
        </el-table-column>
        <el-table-column fixed label="Service Names" min-width="220">
          <template #default="scope">
-            <span
-              class="link"
-              :style="{ fontSize: `${config.fontSize}px` }"
-              @click="clickService(scope)"
-            >
+            <span class="link" :style="{ fontSize: `${config.fontSize}px` }" @click="clickService(scope)">
              {{ scope.row.label }}
            </span>
          </template>
@ -156,20 +147,17 @@ limitations under the License. -->

  function setServices(arr: (Service & { merge: boolean })[]) {
    groups.value = {};
-    const map: { [key: string]: any[] } = arr.reduce(
-      (result: { [key: string]: any[] }, item: any) => {
-        item.group = item.group || "";
-        if (result[item.group]) {
-          item.merge = true;
-        } else {
-          item.merge = false;
-          result[item.group] = [];
-        }
-        result[item.group].push(item);
-        return result;
-      },
-      {},
-    );
+    const map: { [key: string]: any[] } = arr.reduce((result: { [key: string]: any[] }, item: any) => {
+      item.group = item.group || "";
+      if (result[item.group]) {
+        item.merge = true;
+      } else {
+        item.merge = false;
+        result[item.group] = [];
+      }
+      result[item.group].push(item);
+      return result;
+    }, {});
    const list = Object.values(map).flat(1);
    const obj = {} as any;
    for (const s of list) {
@ -219,14 +207,10 @@ limitations under the License. -->
        return;
      }

-      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
-        currentServices,
-        json,
-        {
-          ...props.config,
-          metricConfig: metricConfig.value || [],
-        },
-      );
+      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentServices, json, {
+        ...props.config,
+        metricConfig: metricConfig.value || [],
+      });
      services.value = data;
      colMetrics.value = names;
      metricTypes.value = metricTypesArr;
@ -261,19 +245,13 @@ limitations under the License. -->
    setServices(arr);
  }
  function searchList() {
-    const searchServices = sortServices.value.filter((d: { label: string }) =>
-      d.label.includes(searchText.value),
-    );
+    const searchServices = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));
    const services = searchServices.filter((d: unknown, index: number) => index < pageSize);
    setServices(services);
  }

  watch(
-    () => [
-      ...(props.config.metricTypes || []),
-      ...(props.config.metrics || []),
-      ...(props.config.metricConfig || []),
-    ],
+    () => [...(props.config.metricTypes || []), ...(props.config.metrics || []), ...(props.config.metricConfig || [])],
    (data, old) => {
      if (JSON.stringify(data) === JSON.stringify(old)) {
        return;
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@ -26,11 +26,7 @@ limitations under the License. -->
    <div class="row flex-h" v-for="key in dataKeys" :key="key">
      <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
      <div class="value-col" v-if="config.showTableValues">
-        {{
-          config.metricTypes[0] === "readMetricsValue"
-            ? data[key]
-            : data[key][data[key].length - 1 || 0]
-        }}
+        {{ config.metricTypes[0] === "readMetricsValue" ? data[key] : data[key][data[key].length - 1 || 0] }}
      </div>
    </div>
  </div>
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@ -93,10 +93,7 @@ limitations under the License. -->
  );
  const key = computed(() => Object.keys(props.data)[0] || "");
  const available = computed(
-    () =>
-      Array.isArray(props.data[key.value]) &&
-      props.data[key.value][0] &&
-      props.data[key.value][0].value,
+    () => Array.isArray(props.data[key.value]) && props.data[key.value][0] && props.data[key.value][0].value,
  );
  const maxValue = computed(() => {
    if (!(props.data[key.value] && props.data[key.value].length)) {
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@ -97,10 +97,7 @@ limitations under the License. -->

  function getUnit(index: string) {
    const i = Number(index);
-    const u =
-      props.config.metricConfig &&
-      props.config.metricConfig[i] &&
-      props.config.metricConfig[i].unit;
+    const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
    if (u) {
      return `(${encodeURIComponent(u)})`;
    }
@ -108,10 +105,7 @@ limitations under the License. -->
  }
  function getLabel(metric: string, index: string) {
    const i = Number(index);
-    const label =
-      props.config.metricConfig &&
-      props.config.metricConfig[i] &&
-      props.config.metricConfig[i].label;
+    const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
    if (label) {
      if (props.config.metricTypes[i] === MetricQueryTypes.ReadLabeledMetricsValues) {
        const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@ -109,13 +109,9 @@ limitations under the License. -->
    return aggregations(props.data, props.intervalTime).headers;
  });
  const isRight = computed(() => useLegendProcess(props.config).isRight);
-  const width = computed(() =>
-    props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%",
-  );
+  const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%"));
  const colors = computed(() => {
-    const keys = Object.keys(props.data || {}).filter(
-      (i: any) => Array.isArray(props.data[i]) && props.data[i].length,
-    );
+    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
    const { chartColors } = useLegendProcess(props.config);
    return chartColors(keys);
  });
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@ -29,11 +29,7 @@ limitations under the License. -->
        </div>
        <div class="selectors-item" v-if="key === 3 || key === 4 || key === 5">
          <span class="label">
-            {{
-              ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
-                ? "$Endpoint"
-                : "$ServiceInstance"
-            }}
+            {{ ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity) ? "$Endpoint" : "$ServiceInstance" }}
          </span>
          <Selector
            v-model="states.currentPod"
@ -72,11 +68,7 @@ limitations under the License. -->
        </div>
        <div class="selectors-item" v-if="key === 4 || key === 5">
          <span class="label">
-            {{
-              dashboardStore.entity === "EndpointRelation"
-                ? "$DestinationEndpoint"
-                : "$DestinationServiceInstance"
-            }}
+            {{ dashboardStore.entity === "EndpointRelation" ? "$DestinationEndpoint" : "$DestinationServiceInstance" }}
          </span>
          <Selector
            v-model="states.currentDestPod"
@ -110,12 +102,7 @@ limitations under the License. -->
          </i>
          <template #dropdown>
            <el-dropdown-menu>
-              <el-dropdown-item
-                @click="clickIcons(t)"
-                v-for="(t, index) in toolIcons"
-                :key="index"
-                :title="t.content"
-              >
+              <el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
                <Icon class="mr-5" size="middle" :iconName="t.name" />
                <span>{{ t.content }}</span>
              </el-dropdown-item>
@ -198,9 +185,7 @@ limitations under the License. -->
  });

  const isRelation = computed(() => {
-    return [EntityType[7].value, EntityType[6].value, EntityType[5].value].includes(
-      dashboardStore.entity,
-    );
+    return [EntityType[7].value, EntityType[6].value, EntityType[5].value].includes(dashboardStore.entity);
  });

  setCurrentDashboard();
@ -269,8 +254,7 @@ limitations under the License. -->
    selectorStore.setCurrentService(currentService);
    selectorStore.setCurrentDestService(currentDestService);
    states.currentService = selectorStore.currentService && selectorStore.currentService.value;
-    states.currentDestService =
-      selectorStore.currentDestService && selectorStore.currentDestService.value;
+    states.currentDestService = selectorStore.currentDestService && selectorStore.currentDestService.value;
  }

  async function setSourceSelector() {
@ -303,9 +287,7 @@ limitations under the License. -->
    }
    let s;
    if (states.currentService) {
-      s = (selectorStore.services || []).find(
-        (d: { label: string }) => d.label === states.currentService,
-      );
+      s = (selectorStore.services || []).find((d: { label: string }) => d.label === states.currentService);
    } else {
      s = (selectorStore.services || []).find((d: unknown, index: number) => index === 0);
    }
@ -316,9 +298,7 @@ limitations under the License. -->
      val = 0;
    }
    if (states.currentService) {
-      d = (selectorStore.services || []).find(
-        (d: { label: string }) => d.label === states.currentDestService,
-      );
+      d = (selectorStore.services || []).find((d: { label: string }) => d.label === states.currentDestService);
    } else {
      d = (selectorStore.services || []).find((d: unknown, index: number) => index === val);
    }
@ -344,11 +324,7 @@ limitations under the License. -->
      return;
    }
    states.currentDestService = selectorStore.currentDestService.value;
-    if (
-      [EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(
-        dashboardStore.entity,
-      )
-    ) {
+    if ([EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(dashboardStore.entity)) {
      await fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
    }
  }
@ -521,12 +497,7 @@ limitations under the License. -->
    }
  }

-  async function fetchPods(
-    type: string,
-    serviceId: string,
-    setPod: boolean,
-    param?: { keyword?: string },
-  ) {
+  async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
    let resp;
    switch (type) {
      case EntityType[2].value:
@ -597,9 +568,7 @@ limitations under the License. -->
    });
    if (setPod) {
      const destProcess = params.destProcessId || selectorStore.destProcesses[0].id;
-      const currentDestProcess = selectorStore.destProcesses.find(
-        (d: { id: string }) => d.id === destProcess,
-      );
+      const currentDestProcess = selectorStore.destProcesses.find((d: { id: string }) => d.id === destProcess);
      if (!currentDestProcess) {
        states.currentDestProcess = "";
        selectorStore.setCurrentDestProcess(null);
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@ -72,11 +72,7 @@ limitations under the License. -->
    <div class="mr-5">
      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
      <span class="log-tags">
-        <span
-          class="selected"
-          v-for="(item, index) in keywordsOfContent"
-          :key="`keywordsOfContent${index}`"
-        >
+        <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
          <span>{{ item }}</span>
          <span class="remove-icon" @click="removeContent(index)">×</span>
        </span>
@ -111,13 +107,7 @@ limitations under the License. -->
    </div>
  </div>
  <div class="flex-h row btn-row">
-    <el-button
-      class="search-btn mt-10"
-      size="small"
-      type="primary"
-      @click="runInterval"
-      :disabled="disabled"
-    >
+    <el-button class="search-btn mt-10" size="small" type="primary" @click="runInterval" :disabled="disabled">
      <Icon size="middle" iconName="retry" :loading="!!intervalFn" class="mr-5" />
      {{ intervalFn ? t("pause") : t("start") }}
    </el-button>
@ -172,9 +162,7 @@ limitations under the License. -->
    if (!(state.instance.id || (selectorStore.currentPod && selectorStore.currentPod.id))) {
      return;
    }
-    const resp = await demandLogStore.getContainers(
-      state.instance.id || selectorStore.currentPod.id,
-    );
+    const resp = await demandLogStore.getContainers(state.instance.id || selectorStore.currentPod.id);
    if (resp.errors) {
      disabled.value = true;
      ElMessage.error(resp.errors);
@ -236,10 +224,7 @@ limitations under the License. -->
  function rangeTime() {
    {
      const times = {
-        start: getLocalTime(
-          appStore.utc,
-          new Date(new Date().getTime() - state.duration.value * 1000),
-        ),
+        start: getLocalTime(appStore.utc, new Date(new Date().getTime() - state.duration.value * 1000)),
        end: getLocalTime(appStore.utc, new Date()),
        step: "SECOND",
      };
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@ -59,11 +59,7 @@ limitations under the License. -->
            </el-button>
          </template>
        </el-input>
-        <el-table
-          :data="currentProcesses"
-          ref="multipleTableRef"
-          @selection-change="handleSelectionChange"
-        >
+        <el-table :data="currentProcesses" ref="multipleTableRef" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column
            v-for="(h, index) of TableHeader"
@ -213,8 +209,7 @@ limitations under the License. -->
        searchAttribute(d.attributes, searchText.value),
    );
    currentProcesses.value = arr.filter(
-      (d, index: number) =>
-        (pageIndex - 1 || 0) * pageSize <= index && pageSize * (pageIndex || 1) > index,
+      (d, index: number) => (pageIndex - 1 || 0) * pageSize <= index && pageSize * (pageIndex || 1) > index,
    );
  }

--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@ -101,8 +101,7 @@ limitations under the License. -->
          (d.parent &&
            `<div class="mb-5">Percentage Of Selected: ${
              (
-                (d.data.dumpCount /
-                  ((selectStack.value && selectStack.value.dumpCount) || root.dumpCount)) *
+                (d.data.dumpCount / ((selectStack.value && selectStack.value.dumpCount) || root.dumpCount)) *
                100
              ).toFixed(3) + "%"
            }</div>`) ||
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@ -42,18 +42,9 @@ limitations under the License. -->
    <div>
      <div class="label">{{ t("monitorTime") }}</div>
      <div>
-        <Radio
-          :value="monitorTime"
-          :options="InitTaskField.monitorTimeEn"
-          @change="changeMonitorTime"
-        />
+        <Radio :value="monitorTime" :options="InitTaskField.monitorTimeEn" @change="changeMonitorTime" />
        <span class="date">
-          <TimePicker
-            :value="time"
-            position="bottom"
-            format="YYYY-MM-DD HH:mm:ss"
-            @input="changeTimeRange"
-          />
+          <TimePicker :value="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" @input="changeTimeRange" />
        </span>
      </div>
    </div>
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@ -21,12 +21,7 @@ limitations under the License. -->
          {{ t("noData") }}
        </div>
        <table class="profile-t">
-          <tr
-            class="profile-tr cp"
-            v-for="(i, index) in ebpfStore.taskList"
-            @click="changeTask(i)"
-            :key="index"
-          >
+          <tr class="profile-tr cp" v-for="(i, index) in ebpfStore.taskList" @click="changeTask(i)" :key="index">
            <td
              class="profile-td"
              :class="{
@ -35,11 +30,7 @@ limitations under the License. -->
            >
              <div class="ell">
                <span>
-                  {{
-                    i.targetType +
-                    ": " +
-                    (i.processLabels.length ? i.processLabels.join(" ") : `All Processes`)
-                  }}
+                  {{ i.targetType + ": " + (i.processLabels.length ? i.processLabels.join(" ") : `All Processes`) }}
                </span>
                <a class="profile-btn r" @click="viewDetail = true">
                  <Icon iconName="view" size="middle" />
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@ -239,10 +239,7 @@ limitations under the License. -->
    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      const cr = entry.contentRect;
-      if (
-        Math.abs(cr.width - oldVal.value.width) < 3 &&
-        Math.abs(cr.height - oldVal.value.height) < 3
-      ) {
+      if (Math.abs(cr.width - oldVal.value.width) < 3 && Math.abs(cr.height - oldVal.value.height) < 3) {
        return;
      }
      visTimeline();
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@ -74,11 +74,7 @@ limitations under the License. -->
    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
      <span class="log-tags">
-        <span
-          class="selected"
-          v-for="(item, index) in keywordsOfContent"
-          :key="`keywordsOfContent${index}`"
-        >
+        <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
          <span>{{ item }}</span>
          <span class="remove-icon" @click="removeContent(index)">×</span>
        </span>
@ -148,9 +144,7 @@ limitations under the License. -->
  const dashboardStore = useDashboardStore();
  const logStore = useLogStore();
  const traceId = ref<string>((props.data.filters && props.data.filters.traceId) || "");
-  const duration = ref<DurationTime>(
-    (props.data.filters && props.data.filters.duration) || appStore.durationTime,
-  );
+  const duration = ref<DurationTime>((props.data.filters && props.data.filters.duration) || appStore.durationTime);
  const keywordsOfContent = ref<string[]>([]);
  const excludingKeywordsOfContent = ref<string[]>([]);
  const tagsList = ref<string[]>([]);
@ -237,9 +231,7 @@ limitations under the License. -->
    }
    if (dashboardStore.layerId === "BROWSER") {
      logStore.setLogCondition({
-        serviceId: selectorStore.currentService
-          ? selectorStore.currentService.id
-          : state.service.id,
+        serviceId: selectorStore.currentService ? selectorStore.currentService.id : state.service.id,
        pagePathId: endpoint || state.endpoint.id || undefined,
        serviceVersionId: instance || state.instance.id || undefined,
        paging: { pageNum: 1, pageSize: 15 },
@ -253,9 +245,7 @@ limitations under the License. -->
        spanId = props.data.filters.spanId;
      }
      logStore.setLogCondition({
-        serviceId: selectorStore.currentService
-          ? selectorStore.currentService.id
-          : state.service.id,
+        serviceId: selectorStore.currentService ? selectorStore.currentService.id : state.service.id,
        endpointId: endpoint || state.endpoint.id || undefined,
        serviceInstanceId: instance || state.instance.id || undefined,
        queryDuration: duration.value,
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div>
-    <LogTable
-      v-loading="logStore.loadLogs"
-      :tableData="logStore.logs || []"
-      :type="type"
-      :noLink="false"
-    >
+    <LogTable v-loading="logStore.loadLogs" :tableData="logStore.logs || []" :type="type" :noLink="false">
      <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
    </LogTable>
    <div class="mt-5 mb-5">
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@ -15,10 +15,7 @@ limitations under the License. -->

 <template>
  <div class="log">
-    <div
-      class="log-header"
-      :class="type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'"
-    >
+    <div class="log-header" :class="type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'">
      <template v-for="(item, index) in columns" :key="`col${index}`">
        <div :class="[item.label, ['message', 'stack'].includes(item.label) ? 'max-item' : '']">
          {{ t(item.value) }}
@ -26,12 +23,7 @@ limitations under the License. -->
      </template>
    </div>
    <div v-if="type === 'browser'">
-      <LogBrowser
-        v-for="(item, index) in tableData"
-        :data="item"
-        :key="'browser' + index"
-        @select="setCurrentLog"
-      />
+      <LogBrowser v-for="(item, index) in tableData" :data="item" :key="'browser' + index" @select="setCurrentLog" />
    </div>
    <div v-else>
      <LogService
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@ -55,9 +55,7 @@ limitations under the License. -->
    if (!props.data.tags) {
      return "";
    }
-    return String(
-      props.data.tags.map((d: { key: string; value: string }) => `${d.key}=${d.value}`),
-    );
+    return String(props.data.tags.map((d: { key: string; value: string }) => `${d.key}=${d.value}`));
  });

  function selectLog(label: string, value: string) {
--- a/src/views/dashboard/related/network-profiling/components/Graph/layout.ts
+++ b/src/views/dashboard/related/network-profiling/components/Graph/layout.ts
@ -49,33 +49,11 @@ class Orientation {

 const SQRT3 = Math.sqrt(3.0);
 class Layout {
-  static Pointy = new Orientation(
-    SQRT3,
-    SQRT3 / 2.0,
-    0.0,
-    3.0 / 2.0,
-    SQRT3 / 3.0,
-    -1.0 / 3.0,
-    0.0,
-    2.0 / 3.0,
-    0.5,
-  );
-  static Flat = new Orientation(
-    3.0 / 2.0,
-    0.0,
-    SQRT3 / 2.0,
-    SQRT3,
-    2.0 / 3.0,
-    0.0,
-    -1.0 / 3.0,
-    SQRT3 / 3.0,
-    0.0,
-  );
+  static Pointy = new Orientation(SQRT3, SQRT3 / 2.0, 0.0, 3.0 / 2.0, SQRT3 / 3.0, -1.0 / 3.0, 0.0, 2.0 / 3.0, 0.5);
+  static Flat = new Orientation(3.0 / 2.0, 0.0, SQRT3 / 2.0, SQRT3, 2.0 / 3.0, 0.0, -1.0 / 3.0, SQRT3 / 3.0, 0.0);

  static spacing(radius: number, isPointy = false): number[] {
-    return isPointy
-      ? [SQRT3 * radius, 2 * radius * (3 / 4)]
-      : [2 * radius * (3 / 4), SQRT3 * radius];
+    return isPointy ? [SQRT3 * radius, 2 * radius * (3 / 4)] : [2 * radius * (3 / 4), SQRT3 * radius];
  }

  private radius = 1;
--- a/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts
+++ b/src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts
@ -24,10 +24,7 @@ function computeControlPoint(ps: number[], pe: number[], arc = 0.5) {
  const theta = Math.atan(deltaY / deltaX);
  const len = (Math.sqrt(deltaX * deltaX + deltaY * deltaY) / 2) * arc;
  const newTheta = theta - Math.PI / 2;
-  return [
-    (ps[0] + pe[0]) / 2 + len * Math.cos(newTheta),
-    (ps[1] + pe[1]) / 2 + len * Math.sin(newTheta),
-  ];
+  return [(ps[0] + pe[0]) / 2 + len * Math.cos(newTheta), (ps[1] + pe[1]) / 2 + len * Math.sin(newTheta)];
 }
 // Point coordinates of quadratic Bezier curve
 /**
@ -73,11 +70,7 @@ export function linkPath(d: Call) {
  if (isNaN(d.target.x) || isNaN(d.target.y)) {
    return;
  }
-  const controlPos = computeControlPoint(
-    [d.source.x, d.source.y - 5],
-    [d.target.x, d.target.y - 5],
-    0.5,
-  );
+  const controlPos = computeControlPoint([d.source.x, d.source.y - 5], [d.target.x, d.target.y - 5], 0.5);
  if (d.lowerArc) {
    controlPos[1] = -controlPos[1] - 10;
  }
--- a/src/views/dashboard/related/network-profiling/components/NewConditions.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
@ -21,31 +21,15 @@ limitations under the License. -->
    </div>
    <div>
      <div class="label">{{ t("minDuration") }} (ms)</div>
-      <el-input
-        size="small"
-        class="profile-input"
-        :min="0"
-        v-model="states.minDuration"
-        type="number"
-      />
+      <el-input size="small" class="profile-input" :min="0" v-model="states.minDuration" type="number" />
    </div>
    <div>
      <div class="label">{{ t("when4xx") }}</div>
-      <Radio
-        class="mb-5"
-        :value="states.when4xx"
-        :options="InitTaskField.Whenxx"
-        @change="changeWhen4xx"
-      />
+      <Radio class="mb-5" :value="states.when4xx" :options="InitTaskField.Whenxx" @change="changeWhen4xx" />
    </div>
    <div>
      <div class="label">{{ t("when5xx") }}</div>
-      <Radio
-        class="mb-5"
-        :value="states.when5xx"
-        :options="InitTaskField.Whenxx"
-        @change="changeWhen5xx"
-      />
+      <Radio class="mb-5" :value="states.when5xx" :options="InitTaskField.Whenxx" @change="changeWhen5xx" />
    </div>
  </div>
 </template>
@ -63,7 +47,7 @@ limitations under the License. -->
      type: Object as PropType<NetworkProfilingRequest>,
      default: () => ({ children: [] }),
    },
-    key: {
+    index: {
      type: Number,
      default: () => 0,
    },
@ -73,11 +57,11 @@ limitations under the License. -->

  function changeWhen5xx(value: string) {
    states.when5xx = value;
-    emits("change", states, props.key);
+    emits("change", states, props.index);
  }
  function changeWhen4xx(value: string) {
    states.when4xx = value;
-    emits("change", states, props.key);
+    emits("change", states, props.index);
  }
 </script>
 <style lang="scss" scoped>
--- a/src/views/dashboard/related/network-profiling/components/NewTask.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewTask.vue
@ -36,7 +36,7 @@ limitations under the License. -->
            />
          </div>
        </template>
-        <NewCondition :name="index" :condition="item" :key="index" @change="changeConfig" />
+        <NewCondition :name="index" :condition="item" :index="index" @change="changeConfig" />
      </el-collapse-item>
    </el-collapse>
    <div>
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@ -250,9 +250,7 @@ limitations under the License. -->
      count: 1,
      radius, // layout hexagons radius 300
    };
-    const nodeArr = networkProfilingStore.nodes.filter(
-      (d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL",
-    );
+    const nodeArr = networkProfilingStore.nodes.filter((d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL");
    const count = nodeArr.length;
    // layout
    const centers = hexGrid(p.count, 68, origin); // cube centers
@ -310,9 +308,7 @@ limitations under the License. -->
      nodeArr[v].x = x;
      nodeArr[v].y = y;
    }
-    const outNodes = networkProfilingStore.nodes.filter(
-      (d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL"),
-    );
+    const outNodes = networkProfilingStore.nodes.filter((d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL"));
    const interval = 30;
    let r = 250;
    let pointArr = getCirclePoint(r, interval);
@ -359,9 +355,7 @@ limitations under the License. -->
    } else {
      const { taskStartTime, fixedTriggerDuration } = networkProfilingStore.selectedNetworkTask;
      const startTime =
-        fixedTriggerDuration > 1800
-          ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000
-          : taskStartTime;
+        fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
      times = {
        start: startTime,
        end: taskStartTime + fixedTriggerDuration * 1000,
@ -394,10 +388,7 @@ limitations under the License. -->
    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      const cr = entry.contentRect;
-      if (
-        Math.abs(cr.width - oldVal.value.width) < 5 &&
-        Math.abs(cr.height - oldVal.value.height) < 5
-      ) {
+      if (Math.abs(cr.width - oldVal.value.width) < 5 && Math.abs(cr.height - oldVal.value.height) < 5) {
        return;
      }
      freshNodes();
@ -487,9 +478,7 @@ limitations under the License. -->
    if (types.includes("tls")) {
      l = "TLS";
    }
-    const tipHtml = `<div><span class="grey">${t("detectPoint")}: </span>${link.detectPoints.join(
-      " | ",
-    )}</div>
+    const tipHtml = `<div><span class="grey">${t("detectPoint")}: </span>${link.detectPoints.join(" | ")}</div>
        <div><span class="grey">Type: </span>${l}</div>`;

    tooltip.value
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@ -18,11 +18,7 @@ limitations under the License. -->
      <div class="profile-t-tool">
        <span>{{ t("taskList") }}</span>
        <span class="new-task cp" @click="createTask">
-          <Icon
-            :style="{ color: inProcess ? '#ccc' : '#000' }"
-            iconName="library_add"
-            size="middle"
-          />
+          <Icon :style="{ color: inProcess ? '#ccc' : '#000' }" iconName="library_add" size="middle" />
        </span>
      </div>
      <div class="profile-t-wrapper">
@ -65,13 +61,7 @@ limitations under the License. -->
  <el-dialog v-model="viewDetail" :destroy-on-close="true" fullscreen @closed="viewDetail = false">
    <TaskDetails :details="networkProfilingStore.selectedNetworkTask" />
  </el-dialog>
-  <el-dialog
-    v-model="newTask"
-    :title="t('taskTitle')"
-    :destroy-on-close="true"
-    fullscreen
-    @closed="newTask = false"
-  >
+  <el-dialog v-model="newTask" :title="t('taskTitle')" :destroy-on-close="true" fullscreen @closed="newTask = false">
    <NewTask @create="saveNewTask" />
  </el-dialog>
 </template>
@ -107,13 +97,10 @@ limitations under the License. -->
    getTopology();
  }
  async function getTopology() {
-    const { taskStartTime, fixedTriggerDuration, taskId } =
-      networkProfilingStore.selectedNetworkTask;
+    const { taskStartTime, fixedTriggerDuration, taskId } = networkProfilingStore.selectedNetworkTask;
    const serviceInstanceId = (selectorStore.currentPod && selectorStore.currentPod.id) || "";
    const startTime =
-      fixedTriggerDuration > 1800
-        ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000
-        : taskStartTime;
+      fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
    let endTime = taskStartTime + fixedTriggerDuration * 1000;
    if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
      endTime = new Date().getTime();
@ -121,16 +108,8 @@ limitations under the License. -->
    const resp = await networkProfilingStore.getProcessTopology({
      serviceInstanceId,
      duration: {
-        start: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(startTime)),
-          appStore.duration.step,
-          true,
-        ),
-        end: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(endTime)),
-          appStore.duration.step,
-          true,
-        ),
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
        step: appStore.duration.step,
      },
    });
@ -139,8 +118,7 @@ limitations under the License. -->
    }
    const task = networkProfilingStore.networkTasks[0] || {};
    if (task.taskId === taskId) {
-      inProcess.value =
-        task.taskStartTime + task.fixedTriggerDuration * 1000 > new Date().getTime() ? true : false;
+      inProcess.value = task.taskStartTime + task.fixedTriggerDuration * 1000 > new Date().getTime() ? true : false;
    }
    if (!inProcess.value) {
      intervalFn.value && clearInterval(intervalFn.value);
@ -187,9 +165,7 @@ limitations under the License. -->
  }

  async function keepAliveNetwork() {
-    const res = await networkProfilingStore.keepNetworkProfiling(
-      networkProfilingStore.selectedNetworkTask.taskId,
-    );
+    const res = await networkProfilingStore.keepNetworkProfiling(networkProfilingStore.selectedNetworkTask.taskId);
    if (res.errors) {
      intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
      return ElMessage.error(res.errors);
--- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue
+++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
@ -58,8 +58,7 @@ limitations under the License. -->
    if (!networkProfilingStore.selectedNetworkTask.taskId) {
      return;
    }
-    const { taskStartTime, fixedTriggerDuration, targetType, taskId } =
-      networkProfilingStore.selectedNetworkTask;
+    const { taskStartTime, fixedTriggerDuration, targetType, taskId } = networkProfilingStore.selectedNetworkTask;
    if (task.value[0] && task.value[0].data.taskId === taskId) {
      if (isUpdate.value) {
        return;
@ -127,16 +126,8 @@ limitations under the License. -->
    const resp = await networkProfilingStore.getProcessTopology({
      serviceInstanceId,
      duration: {
-        start: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(task.value[0].start)),
-          appStore.duration.step,
-          true,
-        ),
-        end: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(task.value[0].end)),
-          appStore.duration.step,
-          true,
-        ),
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(task.value[0].start)), appStore.duration.step, true),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(task.value[0].end)), appStore.duration.step, true),
        step: appStore.duration.step,
      },
    });
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@ -31,19 +31,9 @@ limitations under the License. -->
    <div>
      <div class="label">{{ t("monitorTime") }}</div>
      <div>
-        <Radio
-          class="mb-5"
-          :value="monitorTime"
-          :options="InitTaskField.monitorTimeEn"
-          @change="changeMonitorTime"
-        />
+        <Radio class="mb-5" :value="monitorTime" :options="InitTaskField.monitorTimeEn" @change="changeMonitorTime" />
        <span class="date">
-          <TimePicker
-            :value="time"
-            position="bottom"
-            format="YYYY-MM-DD HH:mm:ss"
-            @input="changeTimeRange"
-          />
+          <TimePicker :value="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" @input="changeTimeRange" />
        </span>
      </div>
    </div>
@ -62,12 +52,7 @@ limitations under the License. -->
    </div>
    <div>
      <div class="label">{{ t("dumpPeriod") }}</div>
-      <Radio
-        class="mb-5"
-        :value="dumpPeriod"
-        :options="InitTaskField.dumpPeriod"
-        @change="changeDumpPeriod"
-      />
+      <Radio class="mb-5" :value="dumpPeriod" :options="InitTaskField.dumpPeriod" @change="changeDumpPeriod" />
    </div>
    <div>
      <div class="label">{{ t("maxSamplingCount") }}</div>
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@ -20,12 +20,7 @@ limitations under the License. -->
        {{ t("noData") }}
      </div>
      <table class="profile-t">
-        <tr
-          class="profile-tr cp"
-          v-for="(i, index) in profileStore.segmentList"
-          @click="selectTrace(i)"
-          :key="index"
-        >
+        <tr class="profile-tr cp" v-for="(i, index) in profileStore.segmentList" @click="selectTrace(i)" :key="index">
          <td
            class="profile-td"
            :class="{
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@ -36,12 +36,7 @@ limitations under the License. -->
      </div>
      <div class="dump-count">Dump Count</div>
    </div>
-    <TableItem
-      :thread="thread"
-      v-for="(item, index) in tableData"
-      :data="item"
-      :key="'key' + index"
-    />
+    <TableItem :thread="thread" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
    <slot></slot>
  </div>
 </template>
--- a/src/views/dashboard/related/profile/components/Stack/Index.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Index.vue
@ -50,9 +50,7 @@ limitations under the License. -->
    function compare(val: number, val1: number) {
      return val1 - val;
    }
-    const topDur = durationChildExcluded
-      .sort(compare)
-      .filter((item: any, index: number) => index < 10 && item !== 0);
+    const topDur = durationChildExcluded.sort(compare).filter((item: any, index: number) => index < 10 && item !== 0);
    const trees = [];

    for (const item of props.data) {
--- a/src/views/dashboard/related/profile/components/Stack/Item.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div>
-    <div
-      :class="['profile-item', 'level' + data.parentId]"
-      :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }"
-    >
+    <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
      <div
        :class="['thread', 'level' + data.parentId]"
        :style="{
@ -43,12 +40,7 @@ limitations under the License. -->
      <div class="dump-count">{{ data.count }}</div>
    </div>
    <div v-show="data.children && data.children.length && displayChildren" class="children-trace">
-      <table-item
-        :thread="thread"
-        v-for="(item, index) in data.children"
-        :key="index"
-        :data="item"
-      />
+      <table-item :thread="thread" v-for="(item, index) in data.children" :key="index" :data="item" />
    </div>
  </div>
 </template>
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@ -21,12 +21,7 @@ limitations under the License. -->
          {{ t("noData") }}
        </div>
        <table class="profile-t">
-          <tr
-            class="profile-tr cp"
-            v-for="(i, index) in profileStore.taskList"
-            @click="changeTask(i)"
-            :key="index"
-          >
+          <tr class="profile-tr cp" v-for="(i, index) in profileStore.taskList" @click="changeTask(i)" :key="index">
            <td
              class="profile-td"
              :class="{
@ -89,9 +84,7 @@ limitations under the License. -->
        </div>
      </div>
      <div>
-        <h5 class="mb-10 mt-10" v-show="selectedTask.logs && selectedTask.logs.length">
-          {{ t("logs") }}.
-        </h5>
+        <h5 class="mb-10 mt-10" v-show="selectedTask.logs && selectedTask.logs.length"> {{ t("logs") }}. </h5>
        <div class="log-item" v-for="(i, index) in Object.keys(instanceLogs)" :key="index">
          <div class="mb-10 sm">
            <span class="mr-10 grey">{{ t("instance") }}:</span>
@ -138,9 +131,7 @@ limitations under the License. -->
    window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
    viewDetail.value = true;
    selectedTask.value = item;
-    service.value = (
-      selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}
-    ).label;
+    service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label;
    const res = await profileStore.getTaskLogs({ taskID: item.id });

    if (res.errors) {
@ -156,9 +147,7 @@ limitations under the License. -->
          operationTime: d.operationTime,
        });
      } else {
-        instanceLogs.value[d.instanceName] = [
-          { operationType: d.operationType, operationTime: d.operationTime },
-        ];
+        instanceLogs.value[d.instanceName] = [{ operationType: d.operationType, operationTime: d.operationTime }];
      }
    }
    selectedTask.value = item;
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@ -42,12 +42,7 @@ limitations under the License. -->
        <span class="label">{{ t("currentDepth") }}</span>
        <Selector class="inputs" :value="depth" :options="DepthList" @change="changeDepth" />
      </span>
-      <span
-        class="switch-icon ml-5"
-        title="Settings"
-        @click="setConfig"
-        v-if="dashboardStore.editMode"
-      >
+      <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
        <Icon size="middle" iconName="settings" />
      </span>
      <span class="switch-icon ml-5" title="Back to overview topology" @click="backToTopology">
@ -159,10 +154,7 @@ limitations under the License. -->
  });
  async function init() {
    tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
-    graph.value = svg.value
-      .append("g")
-      .attr("class", "topo-svg-graph")
-      .attr("transform", `translate(-100, -100)`);
+    graph.value = svg.value.append("g").attr("class", "topo-svg-graph").attr("transform", `translate(-100, -100)`);
    graph.value.call(tip.value);
    simulation.value = simulationInit(d3, topologyStore.nodes, topologyStore.calls, ticked);
    node.value = graph.value.append("g").selectAll(".topo-node");
@ -201,9 +193,7 @@ limitations under the License. -->
    anchor.value.attr(
      "transform",
      (d: Call | any) =>
-        `translate(${(d.source.x + d.target.x) / 2}, ${
-          (d.target.y + d.source.y) / 2 - d.loopFactor * 45
-        })`,
+        `translate(${(d.source.x + d.target.x) / 2}, ${(d.target.y + d.source.y) / 2 - d.loopFactor * 45})`,
    );
    node.value.attr("transform", (d: Node | any) => `translate(${d.x - 22},${d.y - 22})`);
  }
@ -252,8 +242,7 @@ limitations under the License. -->
      return;
    }
    const origin = dashboardStore.entity;
-    const e =
-      dashboardStore.entity === EntityType[1].value ? EntityType[0].value : dashboardStore.entity;
+    const e = dashboardStore.entity === EntityType[1].value ? EntityType[0].value : dashboardStore.entity;
    const { dashboard } = getDashboard({
      name: settings.value.linkDashboard,
      layer: dashboardStore.layerId,
@ -294,14 +283,9 @@ limitations under the License. -->
              ) || {};
            const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
            const v = aggregation(metric.value, opt);
-            return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-              opt.unit || ""
-            }</div>`;
+            return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
          });
-          return [
-            ` <div class="mb-5"><span class="grey">name: </span>${data.name}</div>`,
-            ...html,
-          ].join(" ");
+          return [` <div class="mb-5"><span class="grey">name: </span>${data.name}</div>`, ...html].join(" ");
        },
      },
      tip.value,
@ -320,10 +304,8 @@ limitations under the License. -->
        handleLinkClick: handleLinkClick,
        tipHtml: (data: Call) => {
          const linkClientMetrics: string[] = settings.value.linkClientMetrics || [];
-          const linkServerMetricConfig: MetricConfigOpt[] =
-            settings.value.linkServerMetricConfig || [];
-          const linkClientMetricConfig: MetricConfigOpt[] =
-            settings.value.linkClientMetricConfig || [];
+          const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
+          const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
          const linkServerMetrics: string[] = settings.value.linkServerMetrics || [];
          const htmlServer = linkServerMetrics.map((m, index) => {
            const metric = topologyStore.linkServerMetrics[m].values.find(
@ -332,9 +314,7 @@ limitations under the License. -->
            if (metric) {
              const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
              const v = aggregation(metric.value, opt);
-              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-                opt.unit || ""
-              }</div>`;
+              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
            }
          });
          const htmlClient = linkClientMetrics.map((m: string, index: number) => {
@ -344,17 +324,13 @@ limitations under the License. -->
            );
            if (metric) {
              const v = aggregation(metric.value, opt);
-              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-                opt.unit || ""
-              }</div>`;
+              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
            }
          });
          const html = [
            ...htmlServer,
            ...htmlClient,
-            `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(
-              " | ",
-            )}</div>`,
+            `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(" | ")}</div>`,
          ].join(" ");

          return html;
@ -447,8 +423,7 @@ limitations under the License. -->
  }
  async function getTopology() {
    const ids = selectorStore.services.map((d: Service) => d.id);
-    const serviceIds =
-      dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
+    const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
    const resp = await topologyStore.getDepthServiceTopology(serviceIds, Number(depth.value));
    return resp;
  }
--- a/src/views/dashboard/related/topology/components/Metrics.vue
+++ b/src/views/dashboard/related/topology/components/Metrics.vue
@ -16,12 +16,7 @@ limitations under the License. -->
  <div class="config-panel">
    <div class="item mb-10">
      <span class="label">{{ t("metrics") }}</span>
-      <SelectSingle
-        :value="currentMetric"
-        :options="metrics"
-        @change="changeMetric"
-        class="selectors"
-      />
+      <SelectSingle :value="currentMetric" :options="metrics" @change="changeMetric" class="selectors" />
    </div>
    <div class="item mb-10">
      <span class="label">{{ t("unit") }}</span>
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@ -14,11 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div class="tool">
-    <span
-      v-show="
-        dashboardStore.entity === EntityType[2].value && config.graph && config.graph.showDepth
-      "
-    >
+    <span v-show="dashboardStore.entity === EntityType[2].value && config.graph && config.graph.showDepth">
      <span class="label">{{ t("currentDepth") }}</span>
      <Selector
        class="inputs"
@ -28,12 +24,7 @@ limitations under the License. -->
        @change="changeDepth"
      />
    </span>
-    <span
-      class="switch-icon ml-5"
-      title="Settings"
-      @click="setConfig"
-      v-if="dashboardStore.editMode"
-    >
+    <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
      <Icon size="middle" iconName="settings" />
    </span>
    <span class="switch-icon ml-5" title="Back to overview topology" @click="backToTopology">
@ -61,12 +52,7 @@ limitations under the License. -->
    }"
  >
    <i v-for="(item, index) of items" :key="index" @click="item.func">
-      <span
-        v-if="
-          ['alarm', 'inspect'].includes(item.id) ||
-          (item.id === 'dashboard' && settings.nodeDashboard)
-        "
-      >
+      <span v-if="['alarm', 'inspect'].includes(item.id) || (item.id === 'dashboard' && settings.nodeDashboard)">
        {{ item.title }}
      </span>
    </i>
@ -161,8 +147,7 @@ limitations under the License. -->
    topologyStore.setNode(null);
  }
  function goDashboard() {
-    const entity =
-      dashboardStore.entity === EntityType[2].value ? EntityType[2].value : EntityType[3].value;
+    const entity = dashboardStore.entity === EntityType[2].value ? EntityType[2].value : EntityType[3].value;
    const { dashboard } = getDashboard({
      name: settings.value.nodeDashboard,
      layer: dashboardStore.layerId,
@ -201,8 +186,7 @@ limitations under the License. -->
        return;
      }
      const { sourceObj, targetObj } = d.data;
-      const entity =
-        dashboardStore.entity === EntityType[2].value ? EntityType[6].value : EntityType[5].value;
+      const entity = dashboardStore.entity === EntityType[2].value ? EntityType[6].value : EntityType[5].value;
      const { dashboard } = getDashboard({
        name: settings.value.linkDashboard,
        layer: dashboardStore.layerId,
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@ -54,17 +54,7 @@ limitations under the License. -->
          color: "#fff",
          formatter: (param: any) => param.data.name,
        },
-        color: [
-          "#3fe1da",
-          "#6be6c1",
-          "#3fcfdc",
-          "#626c91",
-          "#3fbcde",
-          "#a0a7e6",
-          "#3fa9e1",
-          "#96dee8",
-          "#bf99f8",
-        ],
+        color: ["#3fe1da", "#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
        itemStyle: {
          borderWidth: 0,
        },
@ -92,27 +82,21 @@ limitations under the License. -->

    const htmlServer = serverMetrics.map((m, index) => {
      const metric =
-        topologyStore.linkServerMetrics[m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
-        ) || {};
+        topologyStore.linkServerMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
+        {};
      if (metric) {
        const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
        const v = aggregation(metric.value, opt);
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-          opt.unit || ""
-        }</div>`;
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
      }
    });
    const htmlClient = clientMetrics.map((m, index) => {
      const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
      const metric =
-        topologyStore.linkClientMetrics[m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
-        ) || {};
+        topologyStore.linkClientMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
+        {};
      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-        opt.unit || ""
-      }</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
    });
    const html = [
      `<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
@ -128,14 +112,10 @@ limitations under the License. -->
    const nodeMetricConfig = props.settings.nodeMetricConfig || [];
    const html = nodeMetrics.map((m, index) => {
      const metric =
-        topologyStore.nodeMetricValue[m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
-        ) || {};
+        topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
      const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${
-        opt.unit || ""
-      }</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
    });
    return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(" ");
  }
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@ -27,23 +27,13 @@ limitations under the License. -->
    />
    <div class="label">
      <span>{{ t("linkServerMetrics") }}</span>
-      <el-popover
-        placement="left"
-        :width="400"
-        trigger="click"
-        effect="dark"
-        v-if="states.linkServerMetrics.length"
-      >
+      <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.linkServerMetrics.length">
        <template #reference>
          <span @click="setConfigType('linkServerMetricConfig')">
            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
          </span>
        </template>
-        <Metrics
-          :type="configType"
-          :metrics="states.linkServerMetrics"
-          @update="changeLinkServerMetrics"
-        />
+        <Metrics :type="configType" :metrics="states.linkServerMetrics" @update="changeLinkServerMetrics" />
      </el-popover>
    </div>
    <Selector
@ -58,23 +48,13 @@ limitations under the License. -->
    <span v-show="dashboardStore.entity !== EntityType[2].value">
      <div class="label">
        <span>{{ t("linkClientMetrics") }}</span>
-        <el-popover
-          placement="left"
-          :width="400"
-          trigger="click"
-          effect="dark"
-          v-if="states.linkClientMetrics.length"
-        >
+        <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.linkClientMetrics.length">
          <template #reference>
            <span @click="setConfigType('linkClientMetricConfig')">
              <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
            </span>
          </template>
-          <Metrics
-            :type="configType"
-            :metrics="states.linkClientMetrics"
-            @update="changeLinkClientMetrics"
-          />
+          <Metrics :type="configType" :metrics="states.linkClientMetrics" @update="changeLinkClientMetrics" />
        </el-popover>
      </div>
      <Selector
@ -118,12 +98,7 @@ limitations under the License. -->
        class="item mr-5"
      />
      <span>
-        <Icon
-          class="cp mr-5"
-          iconName="remove_circle_outline"
-          size="middle"
-          @click="deleteItem(index)"
-        />
+        <Icon class="cp mr-5" iconName="remove_circle_outline" size="middle" @click="deleteItem(index)" />
        <Icon
          class="cp"
          v-show="index === items.length - 1 && items.length < 5"
@ -135,13 +110,7 @@ limitations under the License. -->
    </div>
    <div class="label">
      <span>{{ t("nodeMetrics") }}</span>
-      <el-popover
-        placement="left"
-        :width="400"
-        trigger="click"
-        effect="dark"
-        v-if="states.nodeMetrics.length"
-      >
+      <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.nodeMetrics.length">
        <template #reference>
          <span @click="setConfigType('nodeMetricConfig')">
            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
@ -189,12 +158,7 @@ limitations under the License. -->
        class="item"
      />
      <span>
-        <Icon
-          class="cp delete"
-          iconName="remove_circle_outline"
-          size="middle"
-          @click="deleteMetric(index)"
-        />
+        <Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
        <Icon
          class="cp"
          iconName="add_circle_outlinecontrol_point"
@ -206,19 +170,9 @@ limitations under the License. -->
      <div v-show="index !== legend.metric.length - 1">&&</div>
    </div>
    <div class="label">Healthy Description</div>
-    <el-input
-      v-model="description.healthy"
-      placeholder="Please input description"
-      size="small"
-      class="mt-5"
-    />
+    <el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
    <div class="label">Unhealthy Description</div>
-    <el-input
-      v-model="description.unhealthy"
-      placeholder="Please input description"
-      size="small"
-      class="mt-5"
-    />
+    <el-input v-model="description.unhealthy" placeholder="Please input description" size="small" class="mt-5" />
    <el-button @click="setLegend" class="legend-btn" size="small" type="primary">
      {{ t("setLegend") }}
    </el-button>
@ -245,9 +199,7 @@ limitations under the License. -->
  const topologyStore = useTopologyStore();
  const { selectedGrid } = dashboardStore;
  const nodeDashboard =
-    selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length
-      ? selectedGrid.nodeDashboard
-      : "";
+    selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
  const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
  const items = reactive<
    {
@ -316,8 +268,7 @@ limitations under the License. -->
    );
    states.linkMetricList = (json.data.metrics || []).filter(
      (d: { catalog: string; type: string }) =>
-        entity + "Relation" === (MetricCatalog as any)[d.catalog] &&
-        d.type === MetricsType.REGULAR_VALUE,
+        entity + "Relation" === (MetricCatalog as any)[d.catalog] && d.type === MetricsType.REGULAR_VALUE,
    );
    if (isService) {
      return;
--- a/src/views/dashboard/related/topology/components/utils/nodeElement.ts
+++ b/src/views/dashboard/related/topology/components/utils/nodeElement.ts
@ -21,9 +21,7 @@ icons["KAFKA-CONSUMER"] = icons.KAFKA;
 export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => {
  const nodeEnter = graph
    .append("g")
-    .call(
-      d3.drag().on("start", funcs.dragstart).on("drag", funcs.dragged).on("end", funcs.dragended),
-    )
+    .call(d3.drag().on("start", funcs.dragstart).on("drag", funcs.dragged).on("end", funcs.dragended))
    .on("mouseover", function (event: any, d: Node) {
      tip.html(funcs.tipHtml).show(d, this);
    })
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@ -47,21 +47,11 @@ limitations under the License. -->
          <span class="sm">{{ traceStore.traceSpans.length }}</span>
        </div>
        <div>
-          <el-button
-            class="grey"
-            size="small"
-            :class="{ ghost: displayMode !== 'List' }"
-            @click="displayMode = 'List'"
-          >
+          <el-button class="grey" size="small" :class="{ ghost: displayMode !== 'List' }" @click="displayMode = 'List'">
            <Icon class="mr-5" size="sm" iconName="list-bulleted" />
            {{ t("list") }}
          </el-button>
-          <el-button
-            class="grey"
-            size="small"
-            :class="{ ghost: displayMode !== 'Tree' }"
-            @click="displayMode = 'Tree'"
-          >
+          <el-button class="grey" size="small" :class="{ ghost: displayMode !== 'Tree' }" @click="displayMode = 'Tree'">
            <Icon class="mr-5" size="sm" iconName="issue-child" />
            {{ t("tree") }}
          </el-button>
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@ -19,12 +19,7 @@ limitations under the License. -->
  </div>
  <div class="conditions flex-h" v-else>
    <el-radio-group v-model="conditions" @change="changeCondition" size="small">
-      <el-radio-button
-        v-for="(item, index) in items"
-        :label="item.label"
-        :key="item.label + index"
-        border
-      >
+      <el-radio-button v-for="(item, index) in items" :label="item.label" :key="item.label + index" border>
        {{ t(item.label) }}
      </el-radio-button>
    </el-radio-group>
@ -53,9 +48,7 @@ limitations under the License. -->
          >
            {{ t(key) }}: {{ traceStore.conditions[FiltersKeys[key]] }}
          </span>
-          <span v-else-if="key !== 'duration'">
-            {{ t(key) }}: {{ traceStore.conditions[FiltersKeys[key]] }}
-          </span>
+          <span v-else-if="key !== 'duration'"> {{ t(key) }}: {{ traceStore.conditions[FiltersKeys[key]] }} </span>
        </div>
      </div>
    </el-popover>
@ -67,9 +60,7 @@ limitations under the License. -->
      </template>
      <div>
        <div class="title">{{ t("metricValues") }}</div>
-        <div v-for="metric in filters.metricValue" :key="metric.value">
-          {{ metric.label }}: {{ metric.data }}
-        </div>
+        <div v-for="metric in filters.metricValue" :key="metric.value"> {{ metric.label }}: {{ metric.data }} </div>
      </div>
    </el-popover>
  </div>
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@ -34,12 +34,7 @@ limitations under the License. -->
    </div>
    <div class="trace-t-wrapper" v-loading="loading">
      <table class="list" v-if="traceStore.traceList.length">
-        <tr
-          class="trace-tr cp"
-          v-for="(i, index) in traceStore.traceList"
-          @click="selectTrace(i)"
-          :key="index"
-        >
+        <tr class="trace-tr cp" v-for="(i, index) in traceStore.traceList" @click="selectTrace(i)" :key="index">
          <td
            class="trace-td"
            :class="{
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@ -55,11 +55,7 @@ limitations under the License. -->
    }
    if (props.type === "List") {
      tree.value = new ListGraph(traceGraph.value, handleSelectSpan);
-      tree.value.init(
-        { label: "TRACE_ROOT", children: segmentId.value },
-        props.data,
-        fixSpansSize.value,
-      );
+      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
      tree.value.draw();
    } else {
      tree.value = new TreeGraph(traceGraph.value, handleSelectSpan);
@ -105,9 +101,7 @@ limitations under the License. -->
      if (span.parentSpanId === -1) {
        segmentHeaders.push(span);
      } else {
-        const item = props.data.find(
-          (i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1,
-        );
+        const item = props.data.find((i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1);
        const fixSpanKeyContent = {
          traceId: span.traceId,
          segmentId: span.segmentId,
@ -211,9 +205,7 @@ limitations under the License. -->
    });
    fixSpansSize.value = fixSpans.length;
    segmentIdGroup.forEach((id: string) => {
-      const currentSegment = segmentGroup[id].sort(
-        (a: Span, b: Span) => b.parentSpanId - a.parentSpanId,
-      );
+      const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
      currentSegment.forEach((s: any) => {
        const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId);
        if (index !== -1) {
@ -243,12 +235,7 @@ limitations under the License. -->
    segmentIdGroup.forEach((id: string) => {
      segmentGroup[id].refs.forEach((ref: any) => {
        if (ref.traceId === props.traceId) {
-          traverseTree(
-            segmentGroup[ref.parentSegmentId],
-            ref.parentSpanId,
-            ref.parentSegmentId,
-            segmentGroup[id],
-          );
+          traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]);
        }
      });
    });
@ -263,9 +250,7 @@ limitations under the License. -->
  }
  function collapse(d: Span) {
    if (d.children) {
-      const item = refSpans.value.find(
-        (s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId,
-      );
+      const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId);
      let dur = d.endTime - d.startTime;
      d.children.forEach((i: Span) => {
        dur -= i.endTime - i.startTime;
@ -296,11 +281,7 @@ limitations under the License. -->
      }
      loading.value = true;
      changeTree();
-      tree.value.init(
-        { label: "TRACE_ROOT", children: segmentId.value },
-        props.data,
-        fixSpansSize.value,
-      );
+      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
      tree.value.draw(() => {
        setTimeout(() => {
          loading.value = false;
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@ -47,18 +47,12 @@ limitations under the License. -->
      <span class="g-sm-4 grey">{{ i.key }}:</span>
      <span class="g-sm-8 wba">
        {{ i.value }}
-        <span
-          v-if="i.key === 'db.statement' && i.value"
-          class="grey link-hover cp ml-5"
-          @click="copy(i.value)"
-        >
+        <span v-if="i.key === 'db.statement' && i.value" class="grey link-hover cp ml-5" @click="copy(i.value)">
          <Icon size="middle" iconName="review-list" />
        </span>
      </span>
    </div>
-    <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length">
-      {{ t("logs") }}.
-    </h5>
+    <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length"> {{ t("logs") }}. </h5>
    <div v-for="(i, index) in currentSpan.logs" :key="index">
      <div class="mb-10 sm">
        <span class="mr-10">{{ t("time") }}:</span>
@ -77,9 +71,7 @@ limitations under the License. -->
        <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
      </div>
    </div>
-    <h5 class="mb-10" v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length">
-      {{ t("events") }}.
-    </h5>
+    <h5 class="mb-10" v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"> {{ t("events") }}. </h5>
    <div
      class="attach-events"
      ref="timeline"
@ -89,12 +81,7 @@ limitations under the License. -->
      {{ t("relatedTraceLogs") }}
    </el-button>
  </div>
-  <el-dialog
-    v-model="showEventDetail"
-    :destroy-on-close="true"
-    fullscreen
-    @closed="showEventDetail = false"
-  >
+  <el-dialog v-model="showEventDetail" :destroy-on-close="true" fullscreen @closed="showEventDetail = false">
    <div>
      <div class="mb-10">
        <span class="grey title">Name:</span>
@ -102,50 +89,27 @@ limitations under the License. -->
      </div>
      <div class="mb-10">
        <span class="grey title">Start Time:</span>
-        {{
-          currentEvent.startTime
-            ? `${visDate(Number(currentEvent.startTime))}:${currentEvent.startTimeNanos}`
-            : ""
-        }}
+        {{ currentEvent.startTime ? `${visDate(Number(currentEvent.startTime))}:${currentEvent.startTimeNanos}` : "" }}
      </div>
      <div class="mb-10">
        <span class="grey title">End Time:</span>
-        {{
-          currentEvent.endTime
-            ? `${visDate(Number(currentEvent.endTime))}:${currentEvent.endTimeNanos}`
-            : ""
-        }}
+        {{ currentEvent.endTime ? `${visDate(Number(currentEvent.endTime))}:${currentEvent.endTimeNanos}` : "" }}
      </div>
      <div class="mb-10">
        <span class="grey title">Summary:</span>
-        <div
-          class="mb-5"
-          v-for="(d, index) in currentEvent.summary || []"
-          :key="index"
-          style="white-space: pre-wrap"
-        >
+        <div class="mb-5" v-for="(d, index) in currentEvent.summary || []" :key="index" style="white-space: pre-wrap">
          {{ d.key + "=" + d.value }};
        </div>
      </div>
      <div>
        <span class="grey title">Tags:</span>
-        <div
-          class="mb-5"
-          v-for="(tag, index) in currentEvent.tags || []"
-          :key="index"
-          style="white-space: pre-wrap"
-        >
+        <div class="mb-5" v-for="(tag, index) in currentEvent.tags || []" :key="index" style="white-space: pre-wrap">
          {{ tag.key + "=" + tag.value }};
        </div>
      </div>
    </div>
  </el-dialog>
-  <el-dialog
-    v-model="showRelatedLogs"
-    :destroy-on-close="true"
-    fullscreen
-    @closed="showRelatedLogs = false"
-  >
+  <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" fullscreen @closed="showRelatedLogs = false">
    <el-pagination
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
@ -190,12 +154,9 @@ limitations under the License. -->
  const currentEvent = ref<any>({});
  const pageSize = 10;
  const total = computed(() =>
-    traceStore.traceList.length === pageSize
-      ? pageSize * pageNum.value + 1
-      : pageSize * pageNum.value,
+    traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
  );
-  const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") =>
-    dayjs(date).format(pattern);
+  const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);

  onMounted(() => {
    setTimeout(() => {
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
  <div class="charts">
    <div>
-      <span
-        class="charts-item mr-5"
-        v-for="(i, index) in list"
-        :key="index"
-        :style="`color:${computedScale(index)}`"
-      >
+      <span class="charts-item mr-5" v-for="(i, index) in list" :key="index" :style="`color:${computedScale(index)}`">
        <Icon iconName="issue-open-m" class="mr-5" size="sm" />
        <span>{{ i }}</span>
      </span>
@ -58,9 +53,7 @@ limitations under the License. -->
  function downloadTrace() {
    const serializer = new XMLSerializer();
    const svgNode: any = d3.select(".trace-list-dowanload").node();
-    const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(
-      svgNode,
-    )}`;
+    const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
    const canvas = document.createElement("canvas");
    const context: any = canvas.getContext("2d");
    canvas.width = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientWidth;
--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@ -17,12 +17,7 @@ limitations under the License. -->
    <div class="trace-t-loading" v-show="loading">
      <Icon iconName="spinner" size="sm" />
    </div>
-    <TableContainer
-      :tableData="tableData"
-      type="table"
-      :headerType="headerType"
-      @select="handleSelectSpan"
-    >
+    <TableContainer :tableData="tableData" type="table" :headerType="headerType" @select="handleSelectSpan">
      <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
    </TableContainer>
  </div>
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@ -48,10 +48,7 @@ limitations under the License. -->
    </div>
  </div>
  <div v-else>
-    <div
-      @click="selectSpan"
-      :class="['trace-item', 'level' + (data.level - 1), { 'trace-item-error': data.isError }]"
-    >
+    <div @click="selectSpan" :class="['trace-item', 'level' + (data.level - 1), { 'trace-item-error': data.isError }]">
      <div
        :class="['method', 'level' + (data.level - 1)]"
        :style="{
@ -103,10 +100,7 @@ limitations under the License. -->
        <span>{{ data.attachedEvents && data.attachedEvents.length }}</span>
      </div>
    </div>
-    <div
-      v-show="data.children && data.children.length > 0 && displayChildren"
-      class="children-trace"
-    >
+    <div v-show="data.children && data.children.length > 0 && displayChildren" class="children-trace">
      <table-item
        :method="method"
        v-for="(child, index) in data.children"
@ -117,12 +111,7 @@ limitations under the License. -->
        @select="selectedItem(child)"
      />
    </div>
-    <el-dialog
-      v-model="showDetail"
-      :destroy-on-close="true"
-      fullscreen
-      @closed="showDetail = false"
-    >
+    <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
      <SpanDetail :currentSpan="data" />
    </el-dialog>
  </div>
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@ -124,9 +124,7 @@ export default class ListGraph {
      n.x = ++index * this.barHeight + 24;
      n.y = n.depth * 12;
    });
-    const node = this.svg
-      .selectAll(".trace-node")
-      .data(nodes, (d: any) => d.id || (d.id = ++this.i));
+    const node = this.svg.selectAll(".trace-node").data(nodes, (d: any) => d.id || (d.id = ++this.i));
    const nodeEnter = node
      .enter()
      .append("g")
@ -170,8 +168,7 @@ export default class ListGraph {
        if (d.data.label === "TRACE_ROOT") {
          return "";
        }
-        const label =
-          d.data.label.length > 30 ? `${d.data.label.slice(0, 30)}...` : `${d.data.label}`;
+        const label = d.data.label.length > 30 ? `${d.data.label.slice(0, 30)}...` : `${d.data.label}`;
        return label;
      });
    nodeEnter
@ -217,12 +214,7 @@ export default class ListGraph {
      .attr("y", 12)
      .attr("fill", "#ccc")
      .style("font-size", "11px")
-      .text(
-        (d: any) =>
-          `${d.data.layer || ""} ${
-            d.data.component ? "- " + d.data.component : d.data.component || ""
-          }`,
-      );
+      .text((d: any) => `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`);
    nodeEnter
      .append("rect")
      .attr("rx", 2)
@ -250,14 +242,10 @@ export default class ListGraph {
      .style("cursor", "pointer")
      .attr("stroke-width", 2.5)
      .attr("fill", (d: any) =>
-        d._children
-          ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
-          : "rbga(0,0,0,0)",
+        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
      )
      .style("stroke", (d: any) =>
-        d.data.label === "TRACE_ROOT"
-          ? ""
-          : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
+        d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
      )
      .on("click", (d: any) => {
        this.click(d, this);
@ -268,9 +256,7 @@ export default class ListGraph {
      .attr("transform", (d: any) => `translate(${d.y + 5},${d.x})`)
      .style("opacity", 1)
      .select("circle")
-      .attr("fill", (d: any) =>
-        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "",
-      );
+      .attr("fill", (d: any) => (d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : ""));

    // Transition exiting nodes to the parent's new position.
    node
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@ -158,9 +158,7 @@ export default class TraceMap {
        if (!that.timeUpdate) {
          return;
        }
-        const _node = that.timeUpdate._groups[0].filter(
-          (group: any) => group.__data__.id === that.i + 1,
-        );
+        const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1);
        if (_node.length) {
          that.timeTip.show(d, _node[0].children[1]);
        }
@ -170,9 +168,7 @@ export default class TraceMap {
        if (!that.timeUpdate) {
          return;
        }
-        const _node = that.timeUpdate._groups[0].filter(
-          (group: any) => group.__data__.id === that.i + 1,
-        );
+        const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1);
        if (_node.length) {
          that.timeTip.hide(d, _node[0].children[1]);
        }
@ -220,9 +216,7 @@ export default class TraceMap {
      .append("circle")
      .attr("class", "node")
      .attr("r", 1e-6)
-      .style("fill", (d: any) =>
-        d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
-      )
+      .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff"))
      .attr("stroke", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)))
      .attr("stroke-width", 2.5);

@ -254,12 +248,7 @@ export default class TraceMap {
        return d.children || d._children ? "end" : "start";
      })
      .style("font-size", "10px")
-      .text(
-        (d: any) =>
-          `${d.data.layer || ""}${
-            d.data.component ? "-" + d.data.component : d.data.component || ""
-          }`,
-      );
+      .text((d: any) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`);
    nodeEnter
      .append("rect")
      .attr("rx", 1)
@ -302,9 +291,7 @@ export default class TraceMap {
    nodeUpdate
      .select("circle.node")
      .attr("r", 5)
-      .style("fill", (d: any) =>
-        d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
-      )
+      .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff"))
      .attr("cursor", "pointer")
      .on("click", (d: any) => {
        click(d);
@ -395,10 +382,7 @@ export default class TraceMap {
    d3.selectAll(".trace-tree-node-selfchild").style("opacity", 1);
    this.nodeUpdate._groups[0].forEach((i: any) => {
      d3.select(i).style("opacity", 0.2);
-      if (
-        i.__data__.data.children.length >= this.topChildMin &&
-        i.__data__.data.children.length <= this.topChildMax
-      ) {
+      if (i.__data__.data.children.length >= this.topChildMin && i.__data__.data.children.length <= this.topChildMax) {
        d3.select(i).style("opacity", 1);
      }
    });
--- a/src/views/dashboard/related/trace/utils/trace-table.ts
+++ b/src/views/dashboard/related/trace/utils/trace-table.ts
@ -121,9 +121,7 @@ export default class TraceUtil {
      if (span.refs && span.refs.length) {
        span.refs.forEach((ref) => {
          const index = data.findIndex((patchSpan: Span) => {
-            return (
-              ref.parentSegmentId === patchSpan.segmentId && ref.parentSpanId === patchSpan.spanId
-            );
+            return ref.parentSegmentId === patchSpan.segmentId && ref.parentSpanId === patchSpan.spanId;
          });
          if (index === -1) {
            // create a known broken node.
@ -197,9 +195,7 @@ export default class TraceUtil {
    });

    segmentIdGroup.forEach((segmentId: string) => {
-      const currentSegmentSet = segmentGroup[segmentId].sort(
-        (a: Span, b: Span) => b.parentSpanId - a.parentSpanId,
-      );
+      const currentSegmentSet = segmentGroup[segmentId].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
      currentSegmentSet.forEach((curSegment: Span) => {
        const index = currentSegmentSet.findIndex(
          (curSegment2: Span) => curSegment2.spanId === curSegment.parentSpanId,
@ -262,10 +258,7 @@ export default class TraceUtil {
    }
  }

-  private static getSpanGroupData(
-    groupspans: Span[],
-    groupRef: StatisticsGroupRef,
-  ): StatisticsSpan {
+  private static getSpanGroupData(groupspans: Span[], groupRef: StatisticsGroupRef): StatisticsSpan {
    let maxTime = 0;
    let minTime = 0;
    let sumTime = 0;
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -14,7 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-/* global module */
+
 module.exports = {
  root: true,
  plugins: ["stylelint-order"],
--- a/vite.config.ts
+++ b/vite.config.ts
@ -27,7 +27,7 @@ import path from "path";

 const OUTPUT_DIR = "dist";
 // https://vitejs.dev/config/
-export default ({ command, mode }: ConfigEnv): UserConfig => {
+export default ({ mode }: ConfigEnv): UserConfig => {
  const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
  return {
    plugins: [