refactor: update codes

package.json

@@ -12,7 +12,6 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged",

prettier.config.js

@@ -16,7 +16,7 @@
  */
 /* global module */
 module.exports = {
-  printWidth: 100,
+  printWidth: 120,
   semi: true,
   vueIndentScriptAndStyle: true,
   trailingComma: "all",

src/store/modules/dashboard.ts

@@ -105,8 +105,7 @@ export const dashboardStore = defineStore({
         newItem.h = 36;
         newItem.graph = {
           showDepth: true,
-          depth:
+          depth: this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
-            this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
         };
       }
       if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
@@ -148,7 +147,7 @@ export const dashboardStore = defineStore({
         return;
       }
       const tabIndex = this.layout[idx].activedTabIndex || 0;
-      const { children } = this.layout[idx].children[tabIndex];
+      const { children } = (this.layout[idx].children || [])[tabIndex];
       const arr = children.map((d: any) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!children.length) {
@@ -187,7 +186,7 @@ export const dashboardStore = defineStore({
           return d;
         });
         items.push(newItem);
-        this.layout[idx].children[tabIndex].children = items;
+        (this.layout[idx].children || [])[tabIndex].children = items;
         this.currentTabItems = items;
       }
     },
@@ -222,7 +221,7 @@ export const dashboardStore = defineStore({
       if (actived.length === 3) {
         const tabIndex = Number(actived[1]);
         this.currentTabItems = this.currentTabItems.filter((d: LayoutConfig) => actived[2] !== d.i);
-        this.layout[index].children[tabIndex].children = this.currentTabItems;
+        (this.layout[index].children || [])[tabIndex].children = this.currentTabItems;
         return;
       }
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
@@ -230,8 +229,8 @@ export const dashboardStore = defineStore({
     removeTabItem(item: LayoutConfig, index: number) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
       if (this.selectedGrid) {
-        for (const item of this.layout[idx].children[index].children) {
+        for (const item of (this.layout[idx].children || [])[index].children) {
-          if (this.selectedGrid.i === item.i) {
+          if (this.selectedGrid?.i === item.i) {
             this.selectedGrid = null;
           }
         }
@@ -260,16 +259,16 @@ export const dashboardStore = defineStore({
       const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
       if (actived.length === 3) {
         const tabIndex = Number(actived[1]);
-        const itemIndex = this.layout[index].children[tabIndex].children.findIndex(
+        const itemIndex = (this.layout[index].children || [])[tabIndex].children.findIndex(
           (d: LayoutConfig) => actived[2] === d.i,
         );
 
-        this.layout[index].children[tabIndex].children[itemIndex] = {
+        (this.layout[index].children || [])[tabIndex].children[itemIndex] = {
-          ...this.layout[index].children[tabIndex].children[itemIndex],
+          ...(this.layout[index].children || [])[tabIndex].children[itemIndex],
           ...param,
         };
-        this.selectedGrid = this.layout[index].children[tabIndex].children[itemIndex];
+        this.selectedGrid = (this.layout[index].children || [])[tabIndex].children[itemIndex];
-        this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
+        this.setCurrentTabItems((this.layout[index].children || [])[tabIndex].children);
         return;
       }
       this.layout[index] = {
@@ -281,8 +280,8 @@ export const dashboardStore = defineStore({
     setWidget(param: LayoutConfig) {
       for (let i = 0; i < this.layout.length; i++) {
         if (this.layout[i].type === "Tab") {
-          if (this.layout[i].children && this.layout[i].children.length) {
+          if ((this.layout[i].children || []).length) {
-            for (const child of this.layout[i].children) {
+            for (const child of this.layout[i].children || []) {
               if (child.children && child.children.length) {
                 for (let c = 0; c < child.children.length; c++) {
                   if (child.children[c].id === param.id) {
@@ -386,7 +385,7 @@ export const dashboardStore = defineStore({
       return res.data;
     },
     async saveDashboard() {
-      if (!this.currentDashboard.name) {
+      if (!this.currentDashboard?.name) {
         ElMessage.error("The dashboard name is needed.");
         return;
       }
@@ -407,18 +406,16 @@ export const dashboardStore = defineStore({
         c.isRoot = false;
         const index = this.dashboards.findIndex(
           (d: DashboardItem) =>
-            d.name === this.currentDashboard.name &&
+            d.name === this.currentDashboard?.name &&
             d.entity === this.currentDashboard.entity &&
-            d.layer === this.currentDashboard.layerId,
+            d.layer === this.currentDashboard?.layer,
         );
         if (index > -1) {
           const { t } = useI18n();
           ElMessage.error(t("nameError"));
           return;
         }
-        res = await graphql
+        res = await graphql.query("addNewTemplate").params({ setting: { configuration: JSON.stringify(c) } });
-          .query("addNewTemplate")
-          .params({ setting: { configuration: JSON.stringify(c) } });
 
         json = res.data.data.addTemplate;
       }
@@ -433,17 +430,11 @@ export const dashboardStore = defineStore({
       if (!this.currentDashboard.id) {
         ElMessage.success("Saved successfully");
       }
-      const key = [
+      const key = [this.currentDashboard.layer, this.currentDashboard.entity, this.currentDashboard.name].join("_");
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        this.currentDashboard.name,
-      ].join("_");
       this.currentDashboard.id = json.id;
       if (this.currentDashboard.id) {
         sessionStorage.removeItem(key);
-        this.dashboards = this.dashboards.filter(
+        this.dashboards = this.dashboards.filter((d: DashboardItem) => d.id !== this.currentDashboard?.id);
-          (d: DashboardItem) => d.id !== this.currentDashboard.id,
-        );
       }
       this.dashboards.push(this.currentDashboard);
       const l = { id: json.id, configuration: c };
@@ -453,9 +444,7 @@ export const dashboardStore = defineStore({
       return json;
     },
     async deleteDashboard() {
-      const res: AxiosResponse = await graphql
+      const res: AxiosResponse = await graphql.query("removeTemplate").params({ id: this.currentDashboard?.id });
-        .query("removeTemplate")
-        .params({ id: this.currentDashboard.id });
 
       if (res.data.errors) {
         ElMessage.error(res.data.errors);
@@ -466,12 +455,8 @@ export const dashboardStore = defineStore({
         ElMessage.error(json.message);
         return res.data;
       }
-      this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard.id);
+      this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard?.id);
-      const key = [
+      const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_");
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        this.currentDashboard.name,
-      ].join("_");
       sessionStorage.removeItem(key);
     },
   },

src/store/modules/demand-log.ts

@@ -59,9 +59,7 @@ export const demandLogStore = defineStore({
       this.message = message || "";
     },
     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,
@@ -96,15 +94,13 @@ export const demandLogStore = defineStore({
     },
     async getDemandLogs() {
       this.loadLogs = true;
-      const res: AxiosResponse = await graphql
+      const res: AxiosResponse = await graphql.query("fetchDemandPodLogs").params({ condition: this.conditions });
-        .query("fetchDemandPodLogs")
-        .params({ condition: this.conditions });
       this.loadLogs = false;
       if (res.data.errors) {
         return res.data;
       }
       if (res.data.data.logs.errorReason) {
-        this.setLogs("", res.data.data.logs.errorReason);
+        this.setLogs([], res.data.data.logs.errorReason);
         return res.data;
       }
       this.total = res.data.data.logs.logs.length;

src/store/modules/ebpf.ts

@@ -16,17 +16,12 @@
  */
 import { defineStore } from "pinia";
 import type { Option } from "@/types/app";
-import type {
+import type { EBPFTaskCreationRequest, EBPFProfilingSchedule, EBPFTaskList, AnalyzationTrees } from "@/types/ebpf";
-  EBPFTaskCreationRequest,
-  EBPFProfilingSchedule,
-  EBPFTaskList,
-  AnalyzationTrees,
-} from "@/types/ebpf";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
 interface EbpfState {
-  taskList: EBPFTaskList[];
+  taskList: Array<Recordable<EBPFTaskList>>;
   eBPFSchedules: EBPFProfilingSchedule[];
   currentSchedule: EBPFProfilingSchedule | Record<string, never>;
   analyzeTrees: AnalyzationTrees[];
@@ -51,7 +46,7 @@ export const ebpfStore = defineStore({
     aggregateType: "COUNT",
   }),
   actions: {
-    setSelectedTask(task: EBPFTaskList) {
+    setSelectedTask(task: Recordable<EBPFTaskList>) {
       this.selectedTask = task || {};
     },
     setCurrentSchedule(s: EBPFProfilingSchedule) {
@@ -85,7 +80,7 @@ export const ebpfStore = defineStore({
       });
       return res.data;
     },
-    async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
+    async getTaskList(params: { serviceId: string; targets: string[] }) {
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
@@ -101,7 +96,7 @@ export const ebpfStore = defineStore({
       if (!this.taskList.length) {
         return res.data;
       }
-      this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
+      this.getEBPFSchedules({ taskId: String(this.taskList[0].taskId) });
       return res.data;
     },
     async getEBPFSchedules(params: { taskId: string }) {

src/store/modules/network-profiling.ts

@@ -24,7 +24,7 @@ import type { LayoutConfig } from "@/types/dashboard";
 import { ElMessage } from "element-plus";
 
 interface NetworkProfilingState {
-  networkTasks: EBPFTaskList[];
+  networkTasks: Array<Recordable<EBPFTaskList>>;
   networkTip: string;
   selectedNetworkTask: Recordable<EBPFTaskList>;
   nodes: ProcessNode[];
@@ -55,10 +55,10 @@ export const networkProfilingStore = defineStore({
     loadNodes: false,
   }),
   actions: {
-    setSelectedNetworkTask(task: EBPFTaskList) {
+    setSelectedNetworkTask(task: Recordable<EBPFTaskList>) {
       this.selectedNetworkTask = task || {};
     },
-    setNode(node: Node) {
+    setNode(node: Nullable<ProcessNode>) {
       this.node = node;
     },
     setLink(link: Call) {
@@ -156,7 +156,6 @@ export const networkProfilingStore = defineStore({
       }
       const res: AxiosResponse = await graphql.query("aliveNetworkProfiling").params({ taskId });
 
-      this.aliveMessage = "";
       if (res.data.errors) {
         return res.data;
       }

src/store/modules/profile.ts

@@ -23,7 +23,7 @@ import type {
   TaskLog,
   ProfileTaskCreationRequest,
 } from "@/types/profile";
-import type { Trace, Span } from "@/types/trace";
+import type { Trace } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
@@ -35,9 +35,9 @@ interface ProfileState {
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
   segmentList: Trace[];
-  currentSegment: Trace | Record<string, never>;
+  currentSegment: Recordable<Trace>;
-  segmentSpans: SegmentSpan[];
+  segmentSpans: Array<Recordable<SegmentSpan>>;
-  currentSpan: SegmentSpan | Record<string, never>;
+  currentSpan: Recordable<SegmentSpan>;
   analyzeTrees: ProfileAnalyzationTrees;
   taskLogs: TaskLog[];
   highlightTop: boolean;
@@ -65,10 +65,10 @@ export const profileStore = defineStore({
         ...data,
       };
     },
-    setCurrentSpan(span: Span) {
+    setCurrentSpan(span: Recordable<SegmentSpan>) {
       this.currentSpan = span;
     },
-    setCurrentSegment(s: Trace) {
+    setCurrentSegment(s: Recordable<Trace>) {
       this.currentSegment = s;
     },
     setHighlightTop() {
@@ -139,7 +139,7 @@ export const profileStore = defineStore({
         this.currentSegment = segmentList[0];
         this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
       } else {
-        this.currentSegment = null;
+        this.currentSegment = {};
       }
       return res.data;
     },
@@ -161,8 +161,8 @@ export const profileStore = defineStore({
       this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
         return {
           ...d,
-          segmentId: this.currentSegment.segmentId,
+          segmentId: this.currentSegment?.segmentId,
-          traceId: this.currentSegment.traceIds[0],
+          traceId: (this.currentSegment.traceIds as any)[0],
         };
       });
       if (!(segment.spans && segment.spans.length)) {
@@ -173,10 +173,7 @@ export const profileStore = defineStore({
       this.currentSpan = segment.spans[index];
       return res.data;
     },
-    async getProfileAnalyze(params: {
+    async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
-      segmentId: string;
-      timeRanges: Array<{ start: number; end: number }>;
-    }) {
       if (!params.segmentId) {
         return new Promise((resolve) => resolve({}));
       }
@@ -203,9 +200,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async createTask(param: ProfileTaskCreationRequest) {
-      const res: AxiosResponse = await graphql
+      const res: AxiosResponse = await graphql.query("saveProfileTask").params({ creationRequest: param });
-        .query("saveProfileTask")
-        .params({ creationRequest: param });
 
       if (res.data.errors) {
         return res.data;

src/store/modules/topology.ts

@@ -105,21 +105,19 @@ export const topologyStore = defineStore({
       this.calls = calls;
       this.nodes = nodes;
     },
-    setNodeMetricValue(m: { id: string; value: unknown }[]) {
+    setNodeMetricValue(m: MetricVal) {
       this.nodeMetricValue = m;
     },
-    setLinkServerMetrics(m: { id: string; value: unknown }[]) {
+    setLinkServerMetrics(m: MetricVal) {
       this.linkServerMetrics = m;
     },
-    setLinkClientMetrics(m: { id: string; value: unknown }[]) {
+    setLinkClientMetrics(m: MetricVal) {
       this.linkClientMetrics = m;
     },
     async getDepthServiceTopology(serviceIds: string[], depth: number) {
       const res = await this.getServicesTopology(serviceIds);
       if (depth > 1) {
-        const ids = (res.nodes || [])
+        const ids = (res.nodes || []).map((item: Node) => item.id).filter((d: string) => !serviceIds.includes(d));
-          .map((item: Node) => item.id)
-          .filter((d: string) => !serviceIds.includes(d));
         if (!ids.length) {
           this.setTopology(res);
           return;
@@ -158,20 +156,8 @@ export const topologyStore = defineStore({
                 return;
               }
               const toposObj = await this.getServicesTopology(nodeIds);
-              const nodes = [
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
-                ...res.nodes,
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-                ...toposObj.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-                ...toposObj.calls,
-              ];
               this.setTopology({ nodes, calls });
             } else {
               const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
@@ -221,9 +207,7 @@ export const topologyStore = defineStore({
     async updateEndpointTopology(endpointIds: string[], depth: number) {
       const res = await this.getEndpointTopology(endpointIds);
       if (depth > 1) {
-        const ids = res.nodes
+        const ids = res.nodes.map((item: Node) => item.id).filter((d: string) => !endpointIds.includes(d));
-          .map((item: Node) => item.id)
-          .filter((d: string) => !endpointIds.includes(d));
         if (!ids.length) {
           this.setTopology(res);
           return;
@@ -254,9 +238,7 @@ export const topologyStore = defineStore({
             if (depth > 4) {
               const nodeIds = data.nodes
                 .map((item: Node) => item.id)
-                .filter(
+                .filter((d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d));
-                  (d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d),
-                );
               if (!nodeIds.length) {
                 const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
                 const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
@@ -264,20 +246,8 @@ export const topologyStore = defineStore({
                 return;
               }
               const toposObj = await this.getEndpointTopology(nodeIds);
-              const nodes = [
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
-                ...res.nodes,
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-                ...toposObj.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-                ...toposObj.calls,
-              ];
               this.setTopology({ nodes, calls });
             } else {
               const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
@@ -352,9 +322,7 @@ export const topologyStore = defineStore({
         this.setLinkClientMetrics({});
         return;
       }
-      const idsC = this.calls
+      const idsC = this.calls.filter((i: Call) => i.detectPoints.includes("CLIENT")).map((b: Call) => b.id);
-        .filter((i: Call) => i.detectPoints.includes("CLIENT"))
-        .map((b: Call) => b.id);
       if (!idsC.length) {
         return;
       }
@@ -370,9 +338,7 @@ export const topologyStore = defineStore({
         this.setLinkServerMetrics({});
         return;
       }
-      const idsS = this.calls
+      const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id);
-        .filter((i: Call) => i.detectPoints.includes("SERVER"))
-        .map((b: Call) => b.id);
       if (!idsS.length) {
         return;
       }
@@ -419,10 +385,7 @@ export const topologyStore = defineStore({
       });
       return res.data;
     },
-    async getCallServerMetrics(param: {
+    async getCallServerMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {
@@ -431,10 +394,7 @@ export const topologyStore = defineStore({
       this.setLinkServerMetrics(res.data.data);
       return res.data;
     },
-    async getCallClientMetrics(param: {
+    async getCallClientMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {

src/store/modules/trace.ts

@@ -30,7 +30,7 @@ interface TraceState {
   endpoints: Endpoint[];
   traceList: Trace[];
   traceSpans: Span[];
-  currentTrace: Trace | any;
+  currentTrace: Recordable<Trace>;
   conditions: any;
   traceSpanLogs: any[];
   selectorStore: any;
@@ -58,10 +58,10 @@ export const traceStore = defineStore({
     setTraceCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
-    setCurrentTrace(trace: Trace) {
+    setCurrentTrace(trace: Recordable<Trace>) {
       this.currentTrace = trace;
     },
-    setTraceSpans(spans: Span) {
+    setTraceSpans(spans: Span[]) {
       this.traceSpans = spans;
     },
     resetState() {
@@ -116,9 +116,7 @@ export const traceStore = 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: serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -131,9 +129,7 @@ export const traceStore = defineStore({
       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,
@@ -146,9 +142,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getTraces() {
-      const res: AxiosResponse = await graphql
+      const res: AxiosResponse = await graphql.query("queryTraces").params({ condition: this.conditions });
-        .query("queryTraces")
-        .params({ condition: this.conditions });
       if (res.data.errors) {
         return res.data;
       }

src/types/monaco-editor.ts

@@ -15,3 +15,4 @@
  * limitations under the License.
  */
 declare module "monaco-editor";
+export {};

src/types/selector.d.ts

@@ -29,6 +29,7 @@ export type Instance = {
   language?: string;
   instanceUUID?: string;
   attributes?: { name: string; value: string }[];
+  id?: string;
 };
 
 export type Endpoint = {

src/views/dashboard/graphs/Line.vue

@@ -46,7 +46,7 @@ limitations under the License. -->
           filters?: Filters;
           relatedTrace?: RelatedTrace;
           id?: string;
-          associate: { widgetId: string }[];
+          associate?: { widgetId: string }[];
         }
       >,
       default: () => ({
@@ -66,15 +66,10 @@ limitations under the License. -->
   function getOption() {
     const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
     setRight.value = isRight;
-    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: any) => {
       const serie: any = {
-        data: props.data[i].map((item: any, itemIndex: number) => [
+        data: props.data[i].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
-          props.intervalTime[itemIndex],
-          item,
-        ]),
         name: i,
         type: "line",
         symbol: "circle",

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

@@ -139,9 +139,8 @@ limitations under the License. -->
         }
       }
     }
-    this.tableData = element;
+    componentKey.value += 1;
-    this.componentKey += 1;
+    flag.value = !flag.value;
-    this.flag = !this.flag;
   }
 </script>
 <style lang="scss" scoped>

tsconfig.app.json

@@ -23,6 +23,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "noImplicitThis": false
   }
 }

tsconfig.config.json

@@ -20,5 +20,6 @@
   "compilerOptions": {
     "composite": true,
     "types": ["node"],
+    "noImplicitThis": false
   }
 }