build(lint): update config

.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",

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"],

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: {},
 };

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,

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
+      <a :class="`${state.pre}-prev-month-btn`" v-show="!state.showYears && !state.showMonths" @click="pm">
-        :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
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears"
-          :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
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears">{{
-          :class="`${state.pre}-year-select`"
+          state.year
-          @click="state.showYears = !state.showYears"
+        }}</a>
-          v-show="!state.showYears"
-          >{{ state.year }}</a
-        >
       </template>
-      <a
+      <a :class="`${state.pre}-next-month-btn`" v-show="!state.showYears && !state.showMonths" @click="nm">
-        :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="
+          @click="is($event) && ((state.showMonths = state.m === 'M'), (state.month = j), state.m === 'M' && ok('m'))"
-            is($event) &&
+          :class="[status(state.year, j, state.day, state.hour, state.minute, state.second, 'YYYYMM')]"
-              ((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="
+          @click="is($event) && ((state.showYears = state.m === 'Y'), (state.year = i), state.m === 'Y' && ok('y'))"
-            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="[
+            :class="[status(state.year, state.month, state.day, i, state.minute, state.second, 'YYYYMMDDHH')]"
-              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="[
+            :class="[status(state.year, state.month, state.day, state.hour, i, state.second, 'YYYYMMDDHHmm')]"
-              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="[
+            :class="[status(state.year, state.month, state.day, state.hour, state.minute, i, 'YYYYMMDDHHmmss')]"
-              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="
+          @click="(state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)"
-            (state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)
-          "
           :class="{ on: state.showHours }"
           >{{ dd(state.hour) }}</a
         >
         <span>:</span>
         <a
           :title="local.minuteTip"
-          @click="
+          @click="(state.showMinutes = !state.showMinutes), (state.showHours = state.showSeconds = false)"
-            (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="
+            @click="(state.showSeconds = !state.showSeconds), (state.showHours = state.showMinutes = false)"
-              (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(
+      return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
-        /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`] =
+    classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format);
-      (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-on`] =
-      (props.left && t > start.value) || (props.right && t < end.value);
     classObj[`${state.pre}-date-selected`] = flag;
     return classObj;
   };

src/components/Graph.vue

@@ -78,9 +78,7 @@ limitations under the License. -->
   });
   const available = computed(
     () =>
-      (Array.isArray(props.option.series) &&
+      (Array.isArray(props.option.series) && props.option.series[0] && props.option.series[0].data) ||
-        props.option.series[0] &&
-        props.option.series[0].data) ||
       (Array.isArray(props.option.series.data) && props.option.series.data[0]),
   );
   onMounted(async () => {

src/components/Selector.vue

@@ -27,12 +27,7 @@ limitations under the License. -->
     :remote-method="remoteMethod"
     :filterable="filterable"
   >
-    <el-option
+    <el-option v-for="item in options" :key="item.value || ''" :label="item.label || ''" :value="item.value || ''">
-      v-for="item in options"
-      :key="item.value || ''"
-      :label="item.label || ''"
-      :value="item.value || ''"
-    >
     </el-option>
   </el-select>
 </template>

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'

src/graphql/fragments/alarm.ts

@@ -16,8 +16,7 @@
  */
 
 export const Alarm = {
-  variable:
+  variable: "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
-    "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
   query: `
     getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) {
       items: msgs {

src/graphql/query/topology.ts

@@ -14,12 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
+import { InstanceTopology, EndpointTopology, ServicesTopology, ProcessTopology } from "../fragments/topology";
-  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}}`;

src/hooks/useEcharts.ts

@@ -14,12 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type {
+import type { BarSeriesOption, LineSeriesOption, HeatmapSeriesOption, SankeySeriesOption } from "echarts/charts";
-  BarSeriesOption,
-  LineSeriesOption,
-  HeatmapSeriesOption,
-  SankeySeriesOption,
-} from "echarts/charts";
 import type {
   TitleComponentOption,
   TooltipComponentOption,
@@ -48,10 +43,7 @@ export type ECOption = echarts.ComposeOption<
   | SankeySeriesOption
 >;
 
-export function useECharts(
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): any {
-  elRef: Ref<HTMLDivElement>,
-  theme: "light" | "dark" | "default" = "default",
-): any {
   const getDarkMode = computed(() => {
     return theme === "default" ? "light" : theme;
   });

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(
+    const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length);
-      (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(
+          .sort((a: { key: string; value: number }, b: { key: string; value: number }) => b.value - a.value)
-            (a: { key: string; value: number }, b: { key: string; value: number }) =>
-              b.value - a.value,
-          )
           .filter((_: unknown, index: number) => index < 10),
       };
       if (legend) {

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 =
+  const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
-    config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
   const isLinear =
-    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
-      config.metricTypes[i],
+    !types.includes(calculation);
-    ) && !types.includes(calculation);
   const isAvg =
-    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
-      config.metricTypes[i],
+    types.includes(calculation);
-    ) && types.includes(calculation);
   return {
     isLinear,
     isAvg,

src/hooks/useMetricsProcessor.ts

@@ -42,12 +42,9 @@ export function useQueryProcessor(config: any) {
     duration: appStore.durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
-  const isRelation = [
+  const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
-    "ServiceRelation",
+    dashboardStore.entity,
-    "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)
+        parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
-          ? 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:
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
-          dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
         normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
-        serviceInstanceName: [
+        serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
-          "ServiceInstance",
+          dashboardStore.entity,
-          "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(
+        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
-          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 || "")
+          const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-            .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] =
+      source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || [];
-        (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 || "")
+      const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        .split(",")
+      const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        .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 }) =>
+        const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
-          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 = [
+        buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
-          resVal.buckets[0].min,
-          ...resVal.buckets.map((item: { min: string; max: string }) => item.max),
-        ];
       }
 
       source[m] = { nodes, buckets }; // nodes: number[][]
@@ -253,8 +227,7 @@ export function useQueryPodsMetrics(
   };
   const variables: string[] = [`$duration: Duration!`];
   const currentService = selectorStore.currentService || {};
-  const fragmentList = pods.map(
+  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
-    (d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
     const param = {
       scope,
       serviceName: scope === "Service" ? d.label : currentService.label,
@@ -274,16 +247,13 @@ export function useQueryPodsMetrics(
         const c = config.metricConfig[idx] || {};
         variables.push(`$labels${index}${idx}: [String!]!`);
         labelStr = `labels: $labels${index}${idx}, `;
-          const labels = (c.labelsIndex || "")
+        const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-            .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 (
+        if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
-          [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 }) =>
+        d[name]["values"] = resp.data[key].values.values.map((val: { value: number }) => aggregation(val.value, c));
-          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 || "")
+        const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-          .split(",")
+        const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-          .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 }) =>
+          const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
-            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 (
+          if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
-            [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(
+function calculateExp(arr: { value: number }[], config: { calculation?: string }): (number | string)[] {
-  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(
-      MetricQueryTypes.ReadSampledRecords,
+      metricType,
-      MetricQueryTypes.SortMetrics,
+    )
-      MetricQueryTypes.ReadRecords,
-    ].includes(metricType)
   ) {
     const res = await dashboardStore.fetchMetricList(metric);
     if (res.errors) {

src/layout/components/NavBar.vue

@@ -23,20 +23,12 @@ limitations under the License. -->
         format="YYYY-MM-DD HH:mm"
         @input="changeTimeRange"
       />
-      <span>
+      <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </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
+        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
-          trigger="hover"
-          width="250"
-          placement="bottom"
-          effect="light"
-          :content="appStore.version"
-        >
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />

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 || "")
+  const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
-    ? 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);

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:
+  conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
-    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
   gateway: "Gateway",
   virtualMQ: "Virtual MQ",

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:
+  when4xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
-    "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",
-  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",

src/locales/lang/zh.ts

@@ -282,12 +282,9 @@ const msg = {
   chartType: "图表类型",
   currentDepth: "当前深度",
   defaultDepth: "默认深度",
-  traceTagsTip:
+  traceTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  logTagsTip:
+  alarmTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  alarmTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   tagsLink: "配置词汇页",
   addTag: "请添加标签",
   logCategory: "日志类别",
@@ -310,8 +307,7 @@ const msg = {
   contentType: "内容类型",
   content: "内容",
   viewLogs: "查看日志",
-  logsTagsTip:
+  logsTagsTip: "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-    "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
   setEvent: "设置事件",
   viewAttributes: "查看",

src/router/index.ts

@@ -21,12 +21,7 @@ import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
 
-const routes: Array<RouteRecordRaw> = [
+const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting];
-  ...routesLayers,
-  ...routesDashboard,
-  ...routesAlarm,
-  ...routesSetting,
-];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/store/modules/app.ts

@@ -92,8 +92,7 @@ export const appStore = defineStore({
               this.duration.start.getMonth());
           break;
       }
-      const utcSpace =
+      const utcSpace = (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + this.utcMin * 60000;
-        (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[] = [];

src/store/modules/event.ts

@@ -45,9 +45,7 @@ export const eventStore = defineStore({
       this.condition = data;
     },
     async getInstances() {
-      const serviceId = useSelectorStore().currentService
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
-        ? 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] || [
+      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
-        { value: "", label: "All" },
-      ];
       return res.data;
     },
     async getEndpoints() {
-      const serviceId = useSelectorStore().currentService
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
-        ? 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] || [
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
-        { value: "", label: "All" },
-      ];
       return res.data;
     },
     async getEvents() {

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
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
-        ? 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] || [
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: " 0", label: "All" }];
-        { value: " 0", label: "All" },
-      ];
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
-      const serviceId = this.selectorStore.currentService
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
-        ? 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] || [
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: "0", label: "All" }];
-        { 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
+      const res: AxiosResponse = await graphql.query("queryServiceLogs").params({ condition: this.conditions });
-        .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
+      const res: AxiosResponse = await graphql.query("queryBrowserErrorLogs").params({ condition: this.conditions });
-        .query("queryBrowserErrorLogs")
-        .params({ condition: this.conditions });
 
       this.loadLogs = false;
       if (res.data.errors) {

src/store/modules/selectors.ts

@@ -90,10 +90,7 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getServiceInstances(param?: {
+    async getServiceInstances(param?: { serviceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
-      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?: {
+    async getProcesses(param?: { instanceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
-      instanceId: string;
-      isRelation: boolean;
-    }): Promise<Nullable<AxiosResponse>> {
       const instanceId = param ? param.instanceId : this.currentPod?.id;
       if (!instanceId) {
         return null;

src/types/global.d.ts

@@ -110,7 +110,5 @@ declare global {
 }
 
 declare module "vue" {
-  export type JSXComponent<Props = any> =
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
 }

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") =>
+export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => dayjs(new Date(date)).format(pattern);
-  dayjs(new Date(date)).format(pattern);

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 &&
+        d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
-        [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
-        d.isRoot,
     );
     if (!item) {
       appStore.setPageTitle(dashboardStore.layer);

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
+        <input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
-          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
+        <input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
-          type="number"
-          v-model="utcMin"
-          min="0"
-          max="59"
-          class="utc-input"
-          @change="setUTCMin"
-        />
       </div>
     </div>
     <div class="flex-h item">

src/views/alarm/Content.vue

@@ -58,20 +58,12 @@ limitations under the License. -->
         <div>
           <ul>
             <li>
-              <span
+              <span v-for="(i, index) of EventsDetailHeaders" :class="i.class" :key="i.class + index">
-                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
+              <span v-for="(d, index) of EventsDetailHeaders" :class="d.class" :key="event.uuid + index">
-                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">
+          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"> {{ d.key }}={{ d.value }}; </span>
-            {{ d.key }}={{ d.value }};
-          </span>
         </span>
         <span v-else-if="eventKey.class === 'startTime' || eventKey.class === 'endTime'">
           {{ dateFormat(currentEvent[eventKey.class]) }}

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
+        <el-input size="small" v-model="keyword" class="alarm-tool-input" @change="refreshAlarms({ pageNum: 1 })" />
-          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
+    <ConditionTags :type="'ALARM'" @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })" />
-      :type="'ALARM'"
-      @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
-    />
   </nav>
 </template>
 <script lang="ts" setup>

src/views/components/ConditionTags.vue

@@ -42,12 +42,7 @@ limitations under the License. -->
         />
       </template>
       <div class="content">
-        <span
+        <span v-for="(item, index) in tagList" :key="index" @click="selectTag(item)" class="tag-item">
-          v-for="(item, index) in tagList"
-          :key="index"
-          @click="selectTag(item)"
-          class="tag-item"
-        >
           {{ item }}
         </span>
       </div>

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(
+        const c: { configuration: string; id: string } = JSON.parse(sessionStorage.getItem(layoutKey.value) || "{}");
-          sessionStorage.getItem(layoutKey.value) || "{}",
-        );
         const layout: any = c.configuration || {};
 
         dashboardStore.setLayout(setWidgetsID(layout.children || []));

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: DashboardItem) => d.name === name && d.entity === entity && d.layer === layer && !item.id,
-          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) =>
+      (d: { name: string }, index: number) => index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
-        index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
     );
     currentPage.value = pageIndex;
   }

src/views/dashboard/configuration/Event.vue

@@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
   <div>
     <span class="label">{{ t("enableAssociate") }}</span>
-    <el-switch
+    <el-switch v-model="eventAssociate" active-text="Yes" inactive-text="No" @change="updateConfig" />
-      v-model="eventAssociate"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig"
-    />
   </div>
   <div class="footer">
     <el-button size="small" @click="cancelConfig">

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
+    <el-switch v-model="showDepth" active-text="Yes" inactive-text="No" @change="changeConfig({ showDepth })" />
-      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
+    <Selector class="input" size="small" :value="depth" :options="DepthList" @change="changeDepth($event)" />
-      class="input"
-      size="small"
-      :value="depth"
-      :options="DepthList"
-      @change="changeDepth($event)"
-    />
   </div>
   <div class="footer">
     <el-button size="small">

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
+      <el-collapse v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }">
-        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>

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
+    <el-switch v-model="enableRelate" active-text="Yes" inactive-text="No" @change="updateConfig({ enableRelate })" />
-      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
+      <el-switch v-model="latency" active-text="Yes" inactive-text="No" @change="updateConfig({ latency })" />
-        v-model="latency"
-        active-text="Yes"
-        inactive-text="No"
-        @change="updateConfig({ latency })"
-      />
     </div>
   </div>
 </template>

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
+    <el-switch v-model="showUnit" active-text="Yes" inactive-text="No" @change="updateConfig({ showUnit })" />
-      v-model="showUnit"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ showUnit })"
-    />
   </div>
 </template>
 <script lang="ts" setup>

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
+    <el-switch v-model="smooth" active-text="Yes" inactive-text="No" @change="updateConfig({ smooth })" />
-      v-model="smooth"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ smooth })"
-    />
   </div>
   <div>
     <span class="label">{{ t("showSymbol") }}</span>
-    <el-switch
+    <el-switch v-model="showSymbol" active-text="Yes" inactive-text="No" @change="updateConfig({ showSymbol })" />
-      v-model="showSymbol"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ showSymbol })"
-    />
   </div>
   <div>
     <span class="label">{{ t("step") }}</span>
-    <el-switch
+    <el-switch v-model="step" active-text="Yes" inactive-text="No" @change="updateConfig({ step })" />
-      v-model="step"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ step })"
-    />
   </div>
 </template>
 <script lang="ts" setup>

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

@@ -59,12 +59,7 @@ limitations under the License. -->
         size="middle"
         @click="addMetric"
       />
-      <Icon
+      <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
-        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 {
+  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
-    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(
+      graphs = ChartTypes.filter((d: Option) => ![ChartTypes[7].value, ChartTypes[8].value].includes(d.value));
-        (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,11 +204,9 @@ limitations under the License. -->
   }
 
   function setDashboards(type?: string) {
-    const chart =
+    const chart = type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
-      type || (dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type);
     const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-    const arr = list.reduce(
+    const arr = list.reduce((prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
-      (prev: (DashboardItem & { label: string; value: string })[], d: DashboardItem) => {
       if (d.layer === dashboardStore.layerId) {
         if (
           (d.entity === EntityType[0].value && chart === "ServiceList") ||
@@ -234,9 +221,7 @@ limitations under the License. -->
         }
       }
       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 =
+    const metric = states.metricList.filter((d: Option) => states.metrics[index] === d.value)[0] || {};
-      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 (
+    if (!dashboardStore.selectedGrid.metricConfig || !dashboardStore.selectedGrid.metricConfig[index]) {
-      !dashboardStore.selectedGrid.metricConfig ||
-      !dashboardStore.selectedGrid.metricConfig[index]
-    ) {
       currentMetricConfig.value = n;
       return;
     }

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(
+      [ProtocolTypes.ReadLabeledMetricsValues, ProtocolTypes.ReadMetricsValues].includes(metricType.value)
-        metricType.value,
-      )
     );
   });
   const isTopn = computed(() =>
-    [
+    [ProtocolTypes.SortMetrics, ProtocolTypes.ReadSampledRecords, ProtocolTypes.ReadRecords].includes(
-      ProtocolTypes.SortMetrics,
+      metricTypes[props.index],
-      ProtocolTypes.ReadSampledRecords,
+    ),
-      ProtocolTypes.ReadRecords,
-    ].includes(metricTypes[props.index]),
   );
   function updateConfig(index: number, param: { [key: string]: string }) {
     const key = Object.keys(param)[0];

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.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
-          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.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
-          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.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
-          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.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
-            dashboardStore.layout[l].children[activeTabIndex.value].children,
-          );
           needQuery.value = true;
           if (route.params.activeTabIndex) {
             let p = location.href.split("/tab/")[0];

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 {
+  import { useQueryProcessor, useSourceProcessor, useGetMetricEntity } from "@/hooks/useMetricsProcessor";
-    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(() =>
+      const isList = computed(() => ListChartTypes.includes((props.data.graph && props.data.graph.type) || ""));
-        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 (
+          if (dashboardStore.entity === EntityType[0].value || dashboardStore.entity === EntityType[4].value) {
-            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 (
+          if (dashboardStore.entity === EntityType[0].value || dashboardStore.entity === EntityType[7].value) {
-            dashboardStore.entity === EntityType[0].value ||
-            dashboardStore.entity === EntityType[7].value
-          ) {
             return;
           }
           if (isList.value) {

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
+    <Graph :option="option" @select="clickEvent" :filters="config.filters" :associate="config.associate || []" />
-      :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(
+    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
-      (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) => [
+        data: props.data[i].map((item: number, itemIndex: number) => [props.intervalTime[itemIndex], item]),
-          props.intervalTime[itemIndex],
-          item,
-        ]),
         name: i,
         type: "bar",
         symbol: "none",

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(
+  const unit = computed(() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""));
-    () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""),
-  );
 </script>
 <style lang="scss" scoped>
   .chart-card {

src/views/dashboard/graphs/EndpointList.vue

@@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
   <div class="table">
     <div class="search">
-      <el-input
+      <el-input v-model="searchText" placeholder="Search for more endpoints" @change="searchList" class="inputs">
-        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
+            <span class="link" @click="clickEndpoint(scope)" :style="{ fontSize: `${config.fontSize}px` }">
-              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;

src/views/dashboard/graphs/InstanceList.vue

@@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
   <div class="table">
     <div class="search">
-      <el-input
+      <el-input v-model="searchText" placeholder="Please input instance name" @change="searchList" class="inputs">
-        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
+            <span class="link" @click="clickInstance(scope)" :style="{ fontSize: `${config.fontSize}px` }">
-              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(
+      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentInstances, json, {
-        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 }) =>
+    const searchInstances = selectorStore.pods.filter((d: { label: string }) => d.label.includes(searchText.value));
-      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;

src/views/dashboard/graphs/ServiceList.vue

@@ -15,12 +15,7 @@ limitations under the License. -->
 <template>
   <div class="table">
     <div class="search">
-      <el-input
+      <el-input v-model="searchText" placeholder="Please input service name" @change="searchList" class="inputs mt-5">
-        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
+            <span class="link" :style="{ fontSize: `${config.fontSize}px` }" @click="clickService(scope)">
-              class="link"
-              :style="{ fontSize: `${config.fontSize}px` }"
-              @click="clickService(scope)"
-            >
               {{ scope.row.label }}
             </span>
           </template>
@@ -156,8 +147,7 @@ limitations under the License. -->
 
   function setServices(arr: (Service & { merge: boolean })[]) {
     groups.value = {};
-    const map: { [key: string]: any[] } = arr.reduce(
+    const map: { [key: string]: any[] } = arr.reduce((result: { [key: string]: any[] }, item: any) => {
-      (result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
       if (result[item.group]) {
         item.merge = true;
@@ -167,9 +157,7 @@ limitations under the License. -->
       }
       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(
+      const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(currentServices, json, {
-        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 }) =>
+    const searchServices = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));
-      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;

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>

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)) {

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 =
+    const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
-      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 =
+    const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].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, ""))[

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(() =>
+  const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%"));
-    props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%",
-  );
   const colors = computed(() => {
-    const keys = Object.keys(props.data || {}).filter(
+    const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
-      (i: any) => Array.isArray(props.data[i]) && props.data[i].length,
-    );
     const { chartColors } = useLegendProcess(props.config);
     return chartColors(keys);
   });

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
+              <el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
-                @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(
+    return [EntityType[7].value, EntityType[6].value, EntityType[5].value].includes(dashboardStore.entity);
-      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 =
+    states.currentDestService = selectorStore.currentDestService && selectorStore.currentDestService.value;
-      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(
+      s = (selectorStore.services || []).find((d: { label: string }) => d.label === states.currentService);
-        (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 = (selectorStore.services || []).find((d: { label: string }) => d.label === states.currentDestService);
-        (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 (
+    if ([EntityType[5].value, EntityType[6].value, EntityType[7].value].includes(dashboardStore.entity)) {
-      [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(
+  async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
-    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(
+      const currentDestProcess = selectorStore.destProcesses.find((d: { id: string }) => d.id === destProcess);
-        (d: { id: string }) => d.id === destProcess,
-      );
       if (!currentDestProcess) {
         states.currentDestProcess = "";
         selectorStore.setCurrentDestProcess(null);

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
+        <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
-          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
+    <el-button class="search-btn mt-10" size="small" type="primary" @click="runInterval" :disabled="disabled">
-      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(
+    const resp = await demandLogStore.getContainers(state.instance.id || selectorStore.currentPod.id);
-      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(
+        start: getLocalTime(appStore.utc, new Date(new Date().getTime() - state.duration.value * 1000)),
-          appStore.utc,
-          new Date(new Date().getTime() - state.duration.value * 1000),
-        ),
         end: getLocalTime(appStore.utc, new Date()),
         step: "SECOND",
       };

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -59,11 +59,7 @@ limitations under the License. -->
             </el-button>
           </template>
         </el-input>
-        <el-table
+        <el-table :data="currentProcesses" ref="multipleTableRef" @selection-change="handleSelectionChange">
-          :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) =>
+      (d, index: number) => (pageIndex - 1 || 0) * pageSize <= index && pageSize * (pageIndex || 1) > index,
-        (pageIndex - 1 || 0) * pageSize <= index && pageSize * (pageIndex || 1) > index,
     );
   }
 

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 /
+                (d.data.dumpCount / ((selectStack.value && selectStack.value.dumpCount) || root.dumpCount)) *
-                  ((selectStack.value && selectStack.value.dumpCount) || root.dumpCount)) *
                 100
               ).toFixed(3) + "%"
             }</div>`) ||

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
+        <Radio :value="monitorTime" :options="InitTaskField.monitorTimeEn" @change="changeMonitorTime" />
-          :value="monitorTime"
-          :options="InitTaskField.monitorTimeEn"
-          @change="changeMonitorTime"
-        />
         <span class="date">
-          <TimePicker
+          <TimePicker :value="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" @input="changeTimeRange" />
-            :value="time"
-            position="bottom"
-            format="YYYY-MM-DD HH:mm:ss"
-            @input="changeTimeRange"
-          />
         </span>
       </div>
     </div>

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -21,12 +21,7 @@ limitations under the License. -->
           {{ t("noData") }}
         </div>
         <table class="profile-t">
-          <tr
+          <tr class="profile-tr cp" v-for="(i, index) in ebpfStore.taskList" @click="changeTask(i)" :key="index">
-            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" />

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 (
+      if (Math.abs(cr.width - oldVal.value.width) < 3 && Math.abs(cr.height - oldVal.value.height) < 3) {
-        Math.abs(cr.width - oldVal.value.width) < 3 &&
-        Math.abs(cr.height - oldVal.value.height) < 3
-      ) {
         return;
       }
       visTimeline();

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
+        <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
-          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>(
+  const duration = ref<DurationTime>((props.data.filters && props.data.filters.duration) || appStore.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
+        serviceId: selectorStore.currentService ? selectorStore.currentService.id : state.service.id,
-          ? 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
+        serviceId: selectorStore.currentService ? selectorStore.currentService.id : state.service.id,
-          ? selectorStore.currentService.id
-          : state.service.id,
         endpointId: endpoint || state.endpoint.id || undefined,
         serviceInstanceId: instance || state.instance.id || undefined,
         queryDuration: duration.value,

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
+    <LogTable v-loading="logStore.loadLogs" :tableData="logStore.logs || []" :type="type" :noLink="false">
-      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">

src/views/dashboard/related/log/LogTable/Index.vue

@@ -15,10 +15,7 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div
+    <div class="log-header" :class="type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'">
-      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
+      <LogBrowser v-for="(item, index) in tableData" :data="item" :key="'browser' + index" @select="setCurrentLog" />
-        v-for="(item, index) in tableData"
-        :data="item"
-        :key="'browser' + index"
-        @select="setCurrentLog"
-      />
     </div>
     <div v-else>
       <LogService

src/views/dashboard/related/log/LogTable/LogService.vue

@@ -55,9 +55,7 @@ limitations under the License. -->
     if (!props.data.tags) {
       return "";
     }
-    return String(
+    return String(props.data.tags.map((d: { key: string; value: string }) => `${d.key}=${d.value}`));
-      props.data.tags.map((d: { key: string; value: string }) => `${d.key}=${d.value}`),
-    );
   });
 
   function selectLog(label: string, value: string) {

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(
+  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);
-    SQRT3,
+  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);
-    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
+    return isPointy ? [SQRT3 * radius, 2 * radius * (3 / 4)] : [2 * radius * (3 / 4), SQRT3 * radius];
-      ? [SQRT3 * radius, 2 * radius * (3 / 4)]
-      : [2 * radius * (3 / 4), SQRT3 * radius];
   }
 
   private radius = 1;

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 [
+  return [(ps[0] + pe[0]) / 2 + len * Math.cos(newTheta), (ps[1] + pe[1]) / 2 + len * Math.sin(newTheta)];
-    (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(
+  const controlPos = computeControlPoint([d.source.x, d.source.y - 5], [d.target.x, d.target.y - 5], 0.5);
-    [d.source.x, d.source.y - 5],
-    [d.target.x, d.target.y - 5],
-    0.5,
-  );
   if (d.lowerArc) {
     controlPos[1] = -controlPos[1] - 10;
   }

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
+      <el-input size="small" class="profile-input" :min="0" v-model="states.minDuration" type="number" />
-        size="small"
-        class="profile-input"
-        :min="0"
-        v-model="states.minDuration"
-        type="number"
-      />
     </div>
     <div>
       <div class="label">{{ t("when4xx") }}</div>
-      <Radio
+      <Radio class="mb-5" :value="states.when4xx" :options="InitTaskField.Whenxx" @change="changeWhen4xx" />
-        class="mb-5"
-        :value="states.when4xx"
-        :options="InitTaskField.Whenxx"
-        @change="changeWhen4xx"
-      />
     </div>
     <div>
       <div class="label">{{ t("when5xx") }}</div>
-      <Radio
+      <Radio class="mb-5" :value="states.when5xx" :options="InitTaskField.Whenxx" @change="changeWhen5xx" />
-        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>

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>

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(
+    const nodeArr = networkProfilingStore.nodes.filter((d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL");
-      (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(
+    const outNodes = networkProfilingStore.nodes.filter((d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL"));
-      (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
+        fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
-          ? 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 (
+      if (Math.abs(cr.width - oldVal.value.width) < 5 && Math.abs(cr.height - oldVal.value.height) < 5) {
-        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(
+    const tipHtml = `<div><span class="grey">${t("detectPoint")}: </span>${link.detectPoints.join(" | ")}</div>
-      " | ",
-    )}</div>
         <div><span class="grey">Type: </span>${l}</div>`;
 
     tooltip.value

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
+          <Icon :style="{ color: inProcess ? '#ccc' : '#000' }" iconName="library_add" size="middle" />
-            :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
+  <el-dialog v-model="newTask" :title="t('taskTitle')" :destroy-on-close="true" fullscreen @closed="newTask = false">
-    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 } =
+    const { taskStartTime, fixedTriggerDuration, taskId } = networkProfilingStore.selectedNetworkTask;
-      networkProfilingStore.selectedNetworkTask;
     const serviceInstanceId = (selectorStore.currentPod && selectorStore.currentPod.id) || "";
     const startTime =
-      fixedTriggerDuration > 1800
+      fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
-        ? 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(
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
-          getLocalTime(appStore.utc, new Date(startTime)),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
-          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 =
+      inProcess.value = task.taskStartTime + task.fixedTriggerDuration * 1000 > new Date().getTime() ? true : false;
-        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(
+    const res = await networkProfilingStore.keepNetworkProfiling(networkProfilingStore.selectedNetworkTask.taskId);
-      networkProfilingStore.selectedNetworkTask.taskId,
-    );
     if (res.errors) {
       intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
       return ElMessage.error(res.errors);

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 } =
+    const { taskStartTime, fixedTriggerDuration, targetType, taskId } = networkProfilingStore.selectedNetworkTask;
-      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(
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(task.value[0].start)), appStore.duration.step, true),
-          getLocalTime(appStore.utc, new Date(task.value[0].start)),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(task.value[0].end)), appStore.duration.step, true),
-          appStore.duration.step,
-          true,
-        ),
-        end: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(task.value[0].end)),
-          appStore.duration.step,
-          true,
-        ),
         step: appStore.duration.step,
       },
     });

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
+        <Radio class="mb-5" :value="monitorTime" :options="InitTaskField.monitorTimeEn" @change="changeMonitorTime" />
-          class="mb-5"
-          :value="monitorTime"
-          :options="InitTaskField.monitorTimeEn"
-          @change="changeMonitorTime"
-        />
         <span class="date">
-          <TimePicker
+          <TimePicker :value="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" @input="changeTimeRange" />
-            :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
+      <Radio class="mb-5" :value="dumpPeriod" :options="InitTaskField.dumpPeriod" @change="changeDumpPeriod" />
-        class="mb-5"
-        :value="dumpPeriod"
-        :options="InitTaskField.dumpPeriod"
-        @change="changeDumpPeriod"
-      />
     </div>
     <div>
       <div class="label">{{ t("maxSamplingCount") }}</div>

src/views/dashboard/related/profile/components/SegmentList.vue

@@ -20,12 +20,7 @@ limitations under the License. -->
         {{ t("noData") }}
       </div>
       <table class="profile-t">
-        <tr
+        <tr class="profile-tr cp" v-for="(i, index) in profileStore.segmentList" @click="selectTrace(i)" :key="index">
-          class="profile-tr cp"
-          v-for="(i, index) in profileStore.segmentList"
-          @click="selectTrace(i)"
-          :key="index"
-        >
           <td
             class="profile-td"
             :class="{

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
+    <TableItem :thread="thread" v-for="(item, index) in tableData" :data="item" :key="'key' + index" />
-      :thread="thread"
-      v-for="(item, index) in tableData"
-      :data="item"
-      :key="'key' + index"
-    />
     <slot></slot>
   </div>
 </template>

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
+    const topDur = durationChildExcluded.sort(compare).filter((item: any, index: number) => index < 10 && item !== 0);
-      .sort(compare)
-      .filter((item: any, index: number) => index < 10 && item !== 0);
     const trees = [];
 
     for (const item of props.data) {

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
+    <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
-      :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
+      <table-item :thread="thread" v-for="(item, index) in data.children" :key="index" :data="item" />
-        :thread="thread"
-        v-for="(item, index) in data.children"
-        :key="index"
-        :data="item"
-      />
     </div>
   </div>
 </template>

src/views/dashboard/related/profile/components/TaskList.vue

@@ -21,12 +21,7 @@ limitations under the License. -->
           {{ t("noData") }}
         </div>
         <table class="profile-t">
-          <tr
+          <tr class="profile-tr cp" v-for="(i, index) in profileStore.taskList" @click="changeTask(i)" :key="index">
-            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">
+        <h5 class="mb-10 mt-10" v-show="selectedTask.logs && selectedTask.logs.length"> {{ t("logs") }}. </h5>
-          {{ 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 = (
+    service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label;
-      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] = [
+        instanceLogs.value[d.instanceName] = [{ operationType: d.operationType, operationTime: d.operationTime }];
-          { operationType: d.operationType, operationTime: d.operationTime },
-        ];
       }
     }
     selectedTask.value = item;

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
+      <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
-        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
+    graph.value = svg.value.append("g").attr("class", "topo-svg-graph").attr("transform", `translate(-100, -100)`);
-      .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}, ${
+        `translate(${(d.source.x + d.target.x) / 2}, ${(d.target.y + d.source.y) / 2 - d.loopFactor * 45})`,
-          (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 =
+    const e = dashboardStore.entity === EntityType[1].value ? EntityType[0].value : dashboardStore.entity;
-      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} ${
+            return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-              opt.unit || ""
-            }</div>`;
           });
-          return [
+          return [` <div class="mb-5"><span class="grey">name: </span>${data.name}</div>`, ...html].join(" ");
-            ` <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[] =
+          const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
-            settings.value.linkServerMetricConfig || [];
+          const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
-          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} ${
+              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-                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} ${
+              return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-                opt.unit || ""
-              }</div>`;
             }
           });
           const html = [
             ...htmlServer,
             ...htmlClient,
-            `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(
+            `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(" | ")}</div>`,
-              " | ",
-            )}</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 =
+    const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
-      dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
     const resp = await topologyStore.getDepthServiceTopology(serviceIds, Number(depth.value));
     return resp;
   }

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
+      <SelectSingle :value="currentMetric" :options="metrics" @change="changeMetric" class="selectors" />
-        :value="currentMetric"
-        :options="metrics"
-        @change="changeMetric"
-        class="selectors"
-      />
     </div>
     <div class="item mb-10">
       <span class="label">{{ t("unit") }}</span>

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
+    <span v-show="dashboardStore.entity === EntityType[2].value && config.graph && config.graph.showDepth">
-      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
+    <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">
-      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
+      <span v-if="['alarm', 'inspect'].includes(item.id) || (item.id === 'dashboard' && settings.nodeDashboard)">
-        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 =
+    const entity = dashboardStore.entity === EntityType[2].value ? EntityType[2].value : EntityType[3].value;
-      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 =
+      const entity = dashboardStore.entity === EntityType[2].value ? EntityType[6].value : EntityType[5].value;
-        dashboardStore.entity === EntityType[2].value ? EntityType[6].value : EntityType[5].value;
       const { dashboard } = getDashboard({
         name: settings.value.linkDashboard,
         layer: dashboardStore.layerId,

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: [
+        color: ["#3fe1da", "#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
-          "#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(
+        topologyStore.linkServerMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
-          (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} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-          opt.unit || ""
-        }</div>`;
       }
     });
     const htmlClient = clientMetrics.map((m, index) => {
       const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
       const metric =
-        topologyStore.linkClientMetrics[m].values.find(
+        topologyStore.linkClientMetrics[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) ||
-          (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} ${
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-        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(
+        topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
-          (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} ${
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
-        opt.unit || ""
-      }</div>`;
     });
     return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(" ");
   }

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
+      <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.linkServerMetrics.length">
-        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
+        <Metrics :type="configType" :metrics="states.linkServerMetrics" @update="changeLinkServerMetrics" />
-          :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
+        <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.linkClientMetrics.length">
-          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
+          <Metrics :type="configType" :metrics="states.linkClientMetrics" @update="changeLinkClientMetrics" />
-            :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
+        <Icon class="cp mr-5" iconName="remove_circle_outline" size="middle" @click="deleteItem(index)" />
-          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
+      <el-popover placement="left" :width="400" trigger="click" effect="dark" v-if="states.nodeMetrics.length">
-        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
+        <Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
-          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
+    <el-input v-model="description.healthy" placeholder="Please input description" size="small" class="mt-5" />
-      v-model="description.healthy"
-      placeholder="Please input description"
-      size="small"
-      class="mt-5"
-    />
     <div class="label">Unhealthy Description</div>
-    <el-input
+    <el-input v-model="description.unhealthy" placeholder="Please input description" size="small" class="mt-5" />
-      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.length ? selectedGrid.nodeDashboard : "";
-      ? 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] &&
+        entity + "Relation" === (MetricCatalog as any)[d.catalog] && d.type === MetricsType.REGULAR_VALUE,
-        d.type === MetricsType.REGULAR_VALUE,
     );
     if (isService) {
       return;

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(
+    .call(d3.drag().on("start", funcs.dragstart).on("drag", funcs.dragged).on("end", funcs.dragended))
-      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);
     })

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
+          <el-button class="grey" size="small" :class="{ ghost: displayMode !== 'List' }" @click="displayMode = 'List'">
-            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
+          <el-button class="grey" size="small" :class="{ ghost: displayMode !== 'Tree' }" @click="displayMode = 'Tree'">
-            class="grey"
-            size="small"
-            :class="{ ghost: displayMode !== 'Tree' }"
-            @click="displayMode = 'Tree'"
-          >
             <Icon class="mr-5" size="sm" iconName="issue-child" />
             {{ t("tree") }}
           </el-button>

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
+      <el-radio-button v-for="(item, index) in items" :label="item.label" :key="item.label + index" border>
-        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'">
+          <span v-else-if="key !== 'duration'"> {{ t(key) }}: {{ traceStore.conditions[FiltersKeys[key]] }} </span>
-            {{ 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">
+        <div v-for="metric in filters.metricValue" :key="metric.value"> {{ metric.label }}: {{ metric.data }} </div>
-          {{ metric.label }}: {{ metric.data }}
-        </div>
       </div>
     </el-popover>
   </div>

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
+        <tr class="trace-tr cp" v-for="(i, index) in traceStore.traceList" @click="selectTrace(i)" :key="index">
-          class="trace-tr cp"
-          v-for="(i, index) in traceStore.traceList"
-          @click="selectTrace(i)"
-          :key="index"
-        >
           <td
             class="trace-td"
             :class="{

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(
+      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
-        { 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(
+        const item = props.data.find((i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1);
-          (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(
+      const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
-        (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(
+          traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]);
-            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(
+      const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId);
-        (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(
+      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
-        { label: "TRACE_ROOT", children: segmentId.value },
-        props.data,
-        fixSpansSize.value,
-      );
       tree.value.draw(() => {
         setTimeout(() => {
           loading.value = false;

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
+        <span v-if="i.key === 'db.statement' && i.value" class="grey link-hover cp ml-5" @click="copy(i.value)">
-          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">
+    <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length"> {{ t("logs") }}. </h5>
-      {{ 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">
+    <h5 class="mb-10" v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"> {{ t("events") }}. </h5>
-      {{ t("events") }}.
-    </h5>
     <div
       class="attach-events"
       ref="timeline"
@@ -89,12 +81,7 @@ limitations under the License. -->
       {{ t("relatedTraceLogs") }}
     </el-button>
   </div>
-  <el-dialog
+  <el-dialog v-model="showEventDetail" :destroy-on-close="true" fullscreen @closed="showEventDetail = false">
-    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
+        <div class="mb-5" v-for="(d, index) in currentEvent.summary || []" :key="index" style="white-space: pre-wrap">
-          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
+        <div class="mb-5" v-for="(tag, index) in currentEvent.tags || []" :key="index" style="white-space: pre-wrap">
-          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
+  <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" fullscreen @closed="showRelatedLogs = false">
-    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
+    traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
-      ? pageSize * pageNum.value + 1
-      : pageSize * pageNum.value,
   );
-  const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") =>
+  const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
-    dayjs(date).format(pattern);
 
   onMounted(() => {
     setTimeout(() => {

src/views/dashboard/related/trace/components/List.vue

@@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
   <div class="charts">
     <div>
-      <span
+      <span class="charts-item mr-5" v-for="(i, index) in list" :key="index" :style="`color:${computedScale(index)}`">
-        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(
+    const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
-      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;

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
+    <TableContainer :tableData="tableData" type="table" :headerType="headerType" @select="handleSelectSpan">
-      :tableData="tableData"
-      type="table"
-      :headerType="headerType"
-      @select="handleSelectSpan"
-    >
       <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
     </TableContainer>
   </div>

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -48,10 +48,7 @@ limitations under the License. -->
     </div>
   </div>
   <div v-else>
-    <div
+    <div @click="selectSpan" :class="['trace-item', 'level' + (data.level - 1), { 'trace-item-error': data.isError }]">
-      @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
+    <div v-show="data.children && data.children.length > 0 && displayChildren" class="children-trace">
-      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
+    <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
-      v-model="showDetail"
-      :destroy-on-close="true"
-      fullscreen
-      @closed="showDetail = false"
-    >
       <SpanDetail :currentSpan="data" />
     </el-dialog>
   </div>

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
+    const node = this.svg.selectAll(".trace-node").data(nodes, (d: any) => d.id || (d.id = ++this.i));
-      .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 =
+        const label = d.data.label.length > 30 ? `${d.data.label.slice(0, 30)}...` : `${d.data.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(
+      .text((d: any) => `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`);
-        (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
+        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
-          ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
-          : "rbga(0,0,0,0)",
       )
       .style("stroke", (d: any) =>
-        d.data.label === "TRACE_ROOT"
+        d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
-          ? ""
-          : `${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) =>
+      .attr("fill", (d: any) => (d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : ""));
-        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "",
-      );
 
     // Transition exiting nodes to the parent's new position.
     node

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(
+        const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1);
-          (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(
+        const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1);
-          (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) =>
+      .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff"))
-        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(
+      .text((d: any) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`);
-        (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) =>
+      .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff"))
-        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 (
+      if (i.__data__.data.children.length >= this.topChildMin && i.__data__.data.children.length <= this.topChildMax) {
-        i.__data__.data.children.length >= this.topChildMin &&
-        i.__data__.data.children.length <= this.topChildMax
-      ) {
         d3.select(i).style("opacity", 1);
       }
     });

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 (
+            return ref.parentSegmentId === patchSpan.segmentId && ref.parentSpanId === patchSpan.spanId;
-              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(
+      const currentSegmentSet = segmentGroup[segmentId].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
-        (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(
+  private static getSpanGroupData(groupspans: Span[], groupRef: StatisticsGroupRef): StatisticsSpan {
-    groupspans: Span[],
-    groupRef: StatisticsGroupRef,
-  ): StatisticsSpan {
     let maxTime = 0;
     let minTime = 0;
     let sumTime = 0;

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"],

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: [