diff --git a/package.json b/package.json index c5b14738..e3149262 100644 --- a/package.json +++ b/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", diff --git a/prettier.config.js b/prettier.config.js index 27226c53..96506c10 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -16,7 +16,7 @@ */ /* global module */ module.exports = { - printWidth: 100, + printWidth: 120, semi: true, vueIndentScriptAndStyle: true, trailingComma: "all", diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 6f9bf525..3258bfbf 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -105,8 +105,7 @@ export const dashboardStore = defineStore({ newItem.h = 36; newItem.graph = { showDepth: true, - depth: - this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3, + depth: 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) { - if (this.selectedGrid.i === item.i) { + for (const item of (this.layout[idx].children || [])[index].children) { + 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.setCurrentTabItems(this.layout[index].children[tabIndex].children); + this.selectedGrid = (this.layout[index].children || [])[tabIndex].children[itemIndex]; + 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) { - for (const child of this.layout[i].children) { + if ((this.layout[i].children || []).length) { + 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 - .query("addNewTemplate") - .params({ setting: { configuration: JSON.stringify(c) } }); + res = await graphql.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 = [ - this.currentDashboard.layer, - this.currentDashboard.entity, - this.currentDashboard.name, - ].join("_"); + const key = [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( - (d: DashboardItem) => d.id !== this.currentDashboard.id, - ); + this.dashboards = this.dashboards.filter((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 - .query("removeTemplate") - .params({ id: this.currentDashboard.id }); + const res: AxiosResponse = await graphql.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); - const key = [ - this.currentDashboard.layer, - this.currentDashboard.entity, - this.currentDashboard.name, - ].join("_"); + this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard?.id); + const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_"); sessionStorage.removeItem(key); }, }, diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts index 14d04b6b..1776fa81 100644 --- a/src/store/modules/demand-log.ts +++ b/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 - ? this.selectorStore.currentService.id - : id; + const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id; const res: AxiosResponse = await graphql.query("queryInstances").params({ serviceId, duration: useAppStoreWithOut().durationTime, @@ -96,15 +94,13 @@ export const demandLogStore = defineStore({ }, async getDemandLogs() { this.loadLogs = true; - const res: AxiosResponse = await graphql - .query("fetchDemandPodLogs") - .params({ condition: this.conditions }); + const res: AxiosResponse = await graphql.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; diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index f025e4b0..5e09902d 100644 --- a/src/store/modules/ebpf.ts +++ b/src/store/modules/ebpf.ts @@ -16,17 +16,12 @@ */ import { defineStore } from "pinia"; import type { Option } from "@/types/app"; -import type { - EBPFTaskCreationRequest, - EBPFProfilingSchedule, - EBPFTaskList, - AnalyzationTrees, -} from "@/types/ebpf"; +import type { 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>; eBPFSchedules: EBPFProfilingSchedule[]; currentSchedule: EBPFProfilingSchedule | Record; analyzeTrees: AnalyzationTrees[]; @@ -51,7 +46,7 @@ export const ebpfStore = defineStore({ aggregateType: "COUNT", }), actions: { - setSelectedTask(task: EBPFTaskList) { + setSelectedTask(task: Recordable) { 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 }) { diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts index a799f748..f3648345 100644 --- a/src/store/modules/network-profiling.ts +++ b/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>; networkTip: string; selectedNetworkTask: Recordable; nodes: ProcessNode[]; @@ -55,10 +55,10 @@ export const networkProfilingStore = defineStore({ loadNodes: false, }), actions: { - setSelectedNetworkTask(task: EBPFTaskList) { + setSelectedNetworkTask(task: Recordable) { this.selectedNetworkTask = task || {}; }, - setNode(node: Node) { + setNode(node: Nullable) { 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; } diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts index b1a3f241..e1414695 100644 --- a/src/store/modules/profile.ts +++ b/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; - segmentSpans: SegmentSpan[]; - currentSpan: SegmentSpan | Record; + currentSegment: Recordable; + segmentSpans: Array>; + currentSpan: Recordable; analyzeTrees: ProfileAnalyzationTrees; taskLogs: TaskLog[]; highlightTop: boolean; @@ -65,10 +65,10 @@ export const profileStore = defineStore({ ...data, }; }, - setCurrentSpan(span: Span) { + setCurrentSpan(span: Recordable) { this.currentSpan = span; }, - setCurrentSegment(s: Trace) { + setCurrentSegment(s: Recordable) { 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, - traceId: this.currentSegment.traceIds[0], + segmentId: this.currentSegment?.segmentId, + 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: { - segmentId: string; - timeRanges: Array<{ start: number; end: number }>; - }) { + async getProfileAnalyze(params: { 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 - .query("saveProfileTask") - .params({ creationRequest: param }); + const res: AxiosResponse = await graphql.query("saveProfileTask").params({ creationRequest: param }); if (res.data.errors) { return res.data; diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index e2e2ef0d..960a2579 100644 --- a/src/store/modules/topology.ts +++ b/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 || []) - .map((item: Node) => item.id) - .filter((d: string) => !serviceIds.includes(d)); + const ids = (res.nodes || []).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 = [ - ...res.nodes, - ...json.nodes, - ...topo.nodes, - ...data.nodes, - ...toposObj.nodes, - ]; - const calls = [ - ...res.calls, - ...json.calls, - ...topo.calls, - ...data.calls, - ...toposObj.calls, - ]; + const nodes = [...res.nodes, ...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 - .map((item: Node) => item.id) - .filter((d: string) => !endpointIds.includes(d)); + const ids = res.nodes.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( - (d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d), - ); + .filter((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 = [ - ...res.nodes, - ...json.nodes, - ...topo.nodes, - ...data.nodes, - ...toposObj.nodes, - ]; - const calls = [ - ...res.calls, - ...json.calls, - ...topo.calls, - ...data.calls, - ...toposObj.calls, - ]; + const nodes = [...res.nodes, ...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 - .filter((i: Call) => i.detectPoints.includes("CLIENT")) - .map((b: Call) => b.id); + const idsC = this.calls.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 - .filter((i: Call) => i.detectPoints.includes("SERVER")) - .map((b: Call) => b.id); + const idsS = this.calls.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: { - queryStr: string; - conditions: { [key: string]: unknown }; - }) { + async getCallServerMetrics(param: { 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: { - queryStr: string; - conditions: { [key: string]: unknown }; - }) { + async getCallClientMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) { const res: AxiosResponse = await query(param); if (res.data.errors) { diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 63d33950..ea6f91f3 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -30,7 +30,7 @@ interface TraceState { endpoints: Endpoint[]; traceList: Trace[]; traceSpans: Span[]; - currentTrace: Trace | any; + currentTrace: Recordable; 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) { 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 - ? this.selectorStore.currentService.id - : id; + const serviceId = this.selectorStore.currentService ? 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 - ? this.selectorStore.currentService.id - : id; + const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id; const res: AxiosResponse = await graphql.query("queryEndpoints").params({ serviceId, duration: useAppStoreWithOut().durationTime, @@ -146,9 +142,7 @@ export const traceStore = defineStore({ return res.data; }, async getTraces() { - const res: AxiosResponse = await graphql - .query("queryTraces") - .params({ condition: this.conditions }); + const res: AxiosResponse = await graphql.query("queryTraces").params({ condition: this.conditions }); if (res.data.errors) { return res.data; } diff --git a/src/types/monaco-editor.ts b/src/types/monaco-editor.ts index 0e7645a5..ebf98eaf 100644 --- a/src/types/monaco-editor.ts +++ b/src/types/monaco-editor.ts @@ -15,3 +15,4 @@ * limitations under the License. */ declare module "monaco-editor"; +export {}; diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts index fe4dd163..f4a63a28 100644 --- a/src/types/selector.d.ts +++ b/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 = { diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 0f67e3c9..ae984201 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/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( - (i: any) => Array.isArray(props.data[i]) && props.data[i].length, - ); + const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length); const temp = keys.map((i: any) => { const serie: any = { - data: props.data[i].map((item: any, itemIndex: number) => [ - props.intervalTime[itemIndex], - item, - ]), + data: props.data[i].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]), name: i, type: "line", symbol: "circle", diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue index cba2d2d8..6a79b1a7 100644 --- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue +++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue @@ -139,9 +139,8 @@ limitations under the License. --> } } } - this.tableData = element; - this.componentKey += 1; - this.flag = !this.flag; + componentKey.value += 1; + flag.value = !flag.value; }