From 10b6a70c60ded8820867d97f4667416d01efd6e2 Mon Sep 17 00:00:00 2001 From: Fine Date: Thu, 6 Apr 2023 17:34:19 +0800 Subject: [PATCH] fix: update types --- src/components/DateCalendar.vue | 2 +- src/hooks/useTimeout.ts | 2 +- src/layout/components/SideBar.vue | 3 +- src/store/modules/alarm.ts | 4 +- src/store/modules/app.ts | 12 +- src/store/modules/dashboard.ts | 6 +- src/types/global.d.ts | 2 +- src/views/dashboard/related/trace/Detail.vue | 2 +- src/views/dashboard/related/trace/Filter.vue | 4 +- src/views/dashboard/related/trace/Header.vue | 2 +- src/views/dashboard/related/trace/Index.vue | 4 +- .../dashboard/related/trace/TraceList.vue | 2 +- .../trace/components/D3Graph/Index.vue | 28 ++--- .../trace/components/D3Graph/SpanDetail.vue | 9 +- .../related/trace/components/List.vue | 6 +- .../related/trace/components/Statistics.vue | 6 +- .../related/trace/components/Table/Index.vue | 10 +- .../trace/components/Table/TableContainer.vue | 13 ++- .../trace/components/Table/TableItem.vue | 11 +- .../related/trace/utils/d3-trace-list.ts | 61 +++++----- .../related/trace/utils/d3-trace-tree.ts | 106 +++++++++--------- .../related/trace/utils/trace-table.ts | 4 +- 22 files changed, 157 insertions(+), 142 deletions(-) diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 0c09ee66..f5d9bc4e 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -162,7 +162,7 @@ limitations under the License. --> import { computed, onMounted, watch, reactive } from "vue"; import type { PropType } from "vue"; import { useI18n } from "vue-i18n"; - /*global defineProps, defineEmits, Indexable, Recordable */ + /*global defineProps, defineEmits, Indexable, Recordable*/ const emit = defineEmits(["input", "setDates", "ok"]); const { t } = useI18n(); const props = defineProps({ diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts index c66bce31..f70656a7 100644 --- a/src/hooks/useTimeout.ts +++ b/src/hooks/useTimeout.ts @@ -38,7 +38,7 @@ export function useTimeoutFn(handle: Fn, wait: number, native = false): any return { readyRef, stop, start }; } -export function useTimeoutRef(wait: number): any { +export function useTimeoutRef(wait: number) { const readyRef = ref(false); let timer: TimeoutHandle; diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue index 4e0e79f0..fd162ba7 100644 --- a/src/layout/components/SideBar.vue +++ b/src/layout/components/SideBar.vue @@ -81,6 +81,7 @@ limitations under the License. --> import Icon from "@/components/Icon.vue"; import { useAppStoreWithOut } from "@/store/modules/app"; + /*global Recordable*/ const appStore = useAppStoreWithOut(); const { t } = useI18n(); const name = ref(String(useRouter().currentRoute.value.name)); @@ -98,7 +99,7 @@ limitations under the License. --> const changePage = (menu: RouteRecordRaw) => { theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black"; }; - const filterMenus = (menus: any[]) => { + const filterMenus = (menus: Recordable[]) => { return menus.filter((d) => d.meta && !d.meta.notShow); }; diff --git a/src/store/modules/alarm.ts b/src/store/modules/alarm.ts index 4550a96b..c97acb87 100644 --- a/src/store/modules/alarm.ts +++ b/src/store/modules/alarm.ts @@ -34,7 +34,7 @@ export const alarmStore = defineStore({ total: 0, }), actions: { - async getAlarms(params: any) { + async getAlarms(params: Recordable) { const res: AxiosResponse = await graphql.query("queryAlarms").params(params); if (res.data.errors) { return res.data; @@ -48,6 +48,6 @@ export const alarmStore = defineStore({ }, }); -export function useAlarmStore(): any { +export function useAlarmStore(): Recordable { return alarmStore(store); } diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index f55853df..2065a163 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -24,17 +24,17 @@ import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat"; import { TimeType } from "@/constants/data"; /*global Nullable*/ interface AppState { - durationRow: any; + durationRow: Recordable; utc: string; utcHour: number; utcMin: number; eventStack: (() => unknown)[]; - timer: Nullable; + timer: Nullable; autoRefresh: boolean; pageTitle: string; version: string; isMobile: boolean; - reloadTimer: Nullable; + reloadTimer: Nullable; } export const appStore = defineStore({ @@ -152,7 +152,7 @@ export const appStore = defineStore({ } this.timer = setTimeout( () => - this.eventStack.forEach((event: any) => { + this.eventStack.forEach((event: Function) => { setTimeout(event(), 0); }), 500, @@ -179,11 +179,11 @@ export const appStore = defineStore({ this.version = res.data.data.version; return res.data; }, - setReloadTimer(timer: any): void { + setReloadTimer(timer: IntervalHandle) { this.reloadTimer = timer; }, }, }); -export function useAppStoreWithOut(): any { +export function useAppStoreWithOut(): Recordable { return appStore(store); } diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 3258bfbf..4b5f6ed3 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -33,7 +33,7 @@ interface DashboardState { entity: string; layerId: string; activedGridItem: string; - selectorStore: any; + selectorStore: Recordable; showTopology: boolean; currentTabItems: LayoutConfig[]; dashboards: DashboardItem[]; @@ -455,13 +455,13 @@ 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: Recordable) => d.id !== this.currentDashboard?.id); const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_"); sessionStorage.removeItem(key); }, }, }); -export function useDashboardStore(): any { +export function useDashboardStore(): Recordable { return dashboardStore(store); } diff --git a/src/types/global.d.ts b/src/types/global.d.ts index a1bee0ed..fb131d41 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -114,7 +114,7 @@ type AnyNormalFunction = (...arg: any) => any; type AnyPromiseFunction = (...arg: any) => PromiseLike; -type AnyFunction = AnyNormalFunction | AnyPromiseFunction; +declare type AnyFunction = AnyNormalFunction | AnyPromiseFunction; declare module "vue" { export type JSXComponent = { new (): ComponentPublicInstance } | FunctionalComponent; diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue index 424917df..cdaf111c 100644 --- a/src/views/dashboard/related/trace/Detail.vue +++ b/src/views/dashboard/related/trace/Detail.vue @@ -121,7 +121,7 @@ limitations under the License. --> copy(traceId.value || traceStore.currentTrace.traceIds[0].value); } - async function changeTraceId(opt: Option[] | any) { + async function changeTraceId(opt: Option[]) { traceId.value = opt[0].value; loading.value = true; const res = await traceStore.getTraceSpans({ traceId: opt[0].value }); diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue index eb4fe89c..49a17b73 100644 --- a/src/views/dashboard/related/trace/Filter.vue +++ b/src/views/dashboard/related/trace/Filter.vue @@ -181,7 +181,7 @@ limitations under the License. --> return item; } function setCondition() { - let param: any = { + let param: Recordable = { traceState: state.status.value || "ALL", tags: tagsMap.value.length ? tagsMap.value : undefined, queryOrder: traceStore.conditions.queryOrder || QueryOrders[1].value, @@ -226,7 +226,7 @@ limitations under the License. --> ElMessage.error(res.errors); } } - function changeField(type: string, opt: any) { + function changeField(type: string, opt: Recordable) { state[type] = opt[0]; if (type === "service") { getEndpoints(state.service.id); diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue index b22173be..deffee1b 100644 --- a/src/views/dashboard/related/trace/Header.vue +++ b/src/views/dashboard/related/trace/Header.vue @@ -193,7 +193,7 @@ limitations under the License. --> state.instance = (resp.data.instance && resp.data.instance.id) || ""; } function setCondition() { - let params: any = { + let params: Recordable = { traceState: Status[0].value, queryOrder: QueryOrders[0].value, queryDuration: duration.value, diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue index 7c2493d7..0ead034c 100644 --- a/src/views/dashboard/related/trace/Index.vue +++ b/src/views/dashboard/related/trace/Index.vue @@ -29,11 +29,11 @@ limitations under the License. --> import Header from "./Header.vue"; import TraceList from "./TraceList.vue"; import TraceDetail from "./Detail.vue"; - + import type { LayoutConfig } from "@/types/dashboard"; /*global defineProps */ const props = defineProps({ data: { - type: Object as PropType, + type: Object as PropType, default: () => ({ graph: {} }), }, }); diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue index b0ce2eb0..d64e2d3f 100644 --- a/src/views/dashboard/related/trace/TraceList.vue +++ b/src/views/dashboard/related/trace/TraceList.vue @@ -98,7 +98,7 @@ limitations under the License. --> searchTrace(); } - function changeSort(opt: Option[] | any) { + function changeSort(opt: Option[]) { traceStore.setTraceCondition({ queryOrder: opt[0].value, paging: { pageNum: 1, pageSize: pageSize.value }, diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index 07a6db78..0f9e8f21 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -29,7 +29,7 @@ limitations under the License. --> import type { Span, Ref } from "@/types/trace"; import SpanDetail from "./SpanDetail.vue"; - /* global defineProps, Nullable, defineExpose*/ + /* global defineProps, Nullable, defineExpose,Recordable*/ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, @@ -38,10 +38,10 @@ limitations under the License. --> const loading = ref(false); const showDetail = ref(false); const fixSpansSize = ref(0); - const segmentId = ref([]); + const segmentId = ref([]); const currentSpan = ref>([]); const refSpans = ref>([]); - const tree = ref(null); + const tree = ref>(null); const traceGraph = ref>(null); defineExpose({ tree, @@ -67,11 +67,11 @@ limitations under the License. --> function resize() { tree.value.resize(); } - function handleSelectSpan(i: any) { + function handleSelectSpan(i: Recordable) { currentSpan.value = i.data; showDetail.value = true; } - function traverseTree(node: any, spanId: string, segmentId: string, data: any) { + function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) { if (!node || node.isBroken) { return; } @@ -80,7 +80,7 @@ limitations under the License. --> return; } if (node.children && node.children.length > 0) { - node.children.forEach((nodeItem: any) => { + node.children.forEach((nodeItem: Recordable) => { traverseTree(nodeItem, spanId, segmentId, data); }); } @@ -90,8 +90,8 @@ limitations under the License. --> return []; } segmentId.value = []; - const segmentGroup: any = {}; - const segmentIdGroup: any = []; + const segmentGroup: Recordable = {}; + const segmentIdGroup: Recordable = []; const fixSpans: Span[] = []; const segmentHeaders: Span[] = []; for (const span of props.data) { @@ -132,7 +132,7 @@ limitations under the License. --> if (span.refs.length) { span.refs.forEach((ref) => { const index = props.data.findIndex( - (i: any) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, + (i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, ); if (index === -1) { // create a known broken node. @@ -206,7 +206,7 @@ limitations under the License. --> fixSpansSize.value = fixSpans.length; segmentIdGroup.forEach((id: string) => { const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId); - currentSegment.forEach((s: any) => { + currentSegment.forEach((s: Recordable) => { const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId); if (index !== -1) { if ( @@ -233,7 +233,7 @@ limitations under the License. --> segmentGroup[id] = currentSegment[currentSegment.length - 1]; }); segmentIdGroup.forEach((id: string) => { - segmentGroup[id].refs.forEach((ref: any) => { + segmentGroup[id].refs.forEach((ref: Recordable) => { if (ref.traceId === props.traceId) { traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]); } @@ -244,11 +244,11 @@ limitations under the License. --> segmentId.value.push(segmentGroup[i]); } } - segmentId.value.forEach((i: any) => { + segmentId.value.forEach((i: Span | Recordable) => { collapse(i); }); } - function collapse(d: Span) { + function collapse(d: Span | Recordable) { if (d.children) { const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId); let dur = d.endTime - d.startTime; @@ -263,7 +263,7 @@ limitations under the License. --> } } function compare(p: string) { - return (m: any, n: any) => { + return (m: Recordable, n: Recordable) => { const a = m[p]; const b = n[p]; return a - b; diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue index 391bfa28..54326211 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue @@ -140,9 +140,9 @@ limitations under the License. --> import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue"; import type { SpanAttachedEvent } from "@/types/trace"; - /*global defineProps, Nullable */ + /*global defineProps, Nullable, Recordable */ const props = defineProps({ - currentSpan: { type: Object as PropType, default: () => ({}) }, + currentSpan: { type: Object as PropType, default: () => ({}) }, }); const { t } = useI18n(); const traceStore = useTraceStore(); @@ -151,7 +151,7 @@ limitations under the License. --> const pageNum = ref(1); const showRelatedLogs = ref(false); const showEventDetail = ref(false); - const currentEvent = ref({}); + const currentEvent = ref({}); const pageSize = 10; const total = computed(() => traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value, @@ -208,7 +208,7 @@ limitations under the License. --> }); const items = new DataSet(events); - const options: any = { + const options: Recordable = { height: h, width: "100%", locale: "en", @@ -220,7 +220,6 @@ limitations under the License. --> visGraph.value.on("select", (data: { items: number[] }) => { const index = data.items[0]; currentEvent.value = events[index - 1 || 0] || {}; - console.log(currentEvent.value); if (data.items.length) { showEventDetail.value = true; return; diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue index 81b05684..20f072e2 100644 --- a/src/views/dashboard/related/trace/components/List.vue +++ b/src/views/dashboard/related/trace/components/List.vue @@ -34,7 +34,7 @@ limitations under the License. --> import type { Span } from "@/types/trace"; import Graph from "./D3Graph/Index.vue"; - /* global defineProps*/ + /* global defineProps, Recordable*/ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, @@ -56,8 +56,8 @@ limitations under the License. --> const source = `\r\n${serializer.serializeToString(svgNode)}`; const canvas = document.createElement("canvas"); const context: any = canvas.getContext("2d"); - canvas.width = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientWidth; - canvas.height = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientHeight; + canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth; + canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight; context.fillStyle = "#fff"; context.fillRect(0, 0, canvas.width, canvas.height); const image = new Image(); diff --git a/src/views/dashboard/related/trace/components/Statistics.vue b/src/views/dashboard/related/trace/components/Statistics.vue index 1666afc7..00468abe 100644 --- a/src/views/dashboard/related/trace/components/Statistics.vue +++ b/src/views/dashboard/related/trace/components/Statistics.vue @@ -29,16 +29,16 @@ limitations under the License. --> import traceTable from "../utils/trace-table"; import type { StatisticsSpan, Span, StatisticsGroupRef } from "@/types/trace"; - /* global defineProps, defineEmits */ + /* global defineProps, defineEmits, Recordable*/ const props = defineProps({ - data: { type: Array as PropType, default: () => [] }, + data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, showBtnDetail: { type: Boolean, default: false }, HeaderType: { type: String, default: "" }, }); const emit = defineEmits(["load"]); const loading = ref(true); - const tableData = ref([]); + const tableData = ref([]); const list = ref([]); onMounted(() => { diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue index c1b1b7ce..9d16a758 100644 --- a/src/views/dashboard/related/trace/components/Table/Index.vue +++ b/src/views/dashboard/related/trace/components/Table/Index.vue @@ -29,18 +29,18 @@ limitations under the License. --> import traceTable from "../../utils/trace-table"; import type { Span } from "@/types/trace"; - /* global defineProps, defineEmits */ + /* global defineProps, defineEmits, Recordable */ const props = defineProps({ - data: { type: Array as PropType, default: () => [] }, + data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, showBtnDetail: { type: Boolean, default: false }, headerType: { type: String, default: "" }, }); const emit = defineEmits(["select", "view", "load"]); const loading = ref(true); - const tableData = ref([]); + const tableData = ref([]); const showDetail = ref(false); - const currentSpan = ref({}); + const currentSpan = ref({}); onMounted(() => { tableData.value = formatData(traceTable.changeTree(props.data, props.traceId)); @@ -50,7 +50,7 @@ limitations under the License. --> }); }); - function formatData(arr: any[], level = 1, totalExec?: number) { + function formatData(arr: Recordable[], level = 1, totalExec?: number) { for (const item of arr) { item.level = level; totalExec = totalExec || item.endTime - item.startTime; diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue index 6a79b1a7..b3688a3f 100644 --- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue +++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue @@ -58,9 +58,9 @@ limitations under the License. --> import TableItem from "./TableItem.vue"; import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data"; - /* global defineProps, Nullable, defineEmits */ + /* global defineProps, Nullable, defineEmits, Recordable*/ const props = defineProps({ - tableData: { type: Array as PropType, default: () => [] }, + tableData: { type: Array as PropType, default: () => [] }, type: { type: String, default: "" }, headerType: { type: String, default: "" }, }); @@ -69,7 +69,7 @@ limitations under the License. --> const componentKey = ref(300); const flag = ref(true); const dragger = ref>(null); - let headerData: any[] = TraceConstant; + let headerData: Recordable[] = TraceConstant; if (props.headerType === "profile") { headerData = ProfileConstant; @@ -81,8 +81,11 @@ limitations under the License. --> if (props.type === "statistics") { return; } - const drag: any = dragger.value; - drag.onmousedown = (event: any) => { + const drag: Nullable = dragger.value; + if (!drag) { + return; + } + drag.onmousedown = (event: MouseEvent) => { const diffX = event.clientX; const copy = method.value; document.onmousemove = (documentEvent) => { diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index 9f88355c..9c59ebaf 100644 --- a/src/views/dashboard/related/trace/components/Table/TableItem.vue +++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue @@ -124,8 +124,9 @@ limitations under the License. --> import { dateFormat } from "@/utils/dateFormat"; import { useAppStoreWithOut } from "@/store/modules/app"; + /*global Recordable*/ const props = { - data: { type: Object as PropType, default: () => ({}) }, + data: { type: Object as PropType, default: () => ({}) }, method: { type: Number, default: 0 }, type: { type: String, default: "" }, headerType: { type: String, default: "" }, @@ -175,8 +176,8 @@ limitations under the License. --> } dom.style.background = "rgba(0, 0, 0, 0.1)"; } - function selectSpan(event: any) { - const dom = event.composedPath().find((d: any) => d.className.includes("trace-item")); + function selectSpan(event: Recordable) { + const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item")); emit("select", props.data); if (props.headerType === "profile") { @@ -185,8 +186,8 @@ limitations under the License. --> } viewSpanDetail(dom); } - function viewSpan(event: any) { - const dom = event.composedPath().find((d: any) => d.className.includes("trace-item")); + function viewSpan(event: Recordable) { + const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item")); emit("select", props.data); viewSpanDetail(dom); } diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts index 7bb39a6f..9d27af2d 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts @@ -52,7 +52,7 @@ export default class ListGraph { this.tip = (d3tip as any)() .attr("class", "d3-tip") .offset([-8, 0]) - .html((d: any) => { + .html((d: Recordable) => { return `
${d.data.label}
${d.data.dur ? '
SelfDuration: ' + d.data.dur + "ms
" : ""} @@ -65,13 +65,13 @@ export default class ListGraph { }); this.svg.call(this.tip); } - diagonal(d: any) { + diagonal(d: Recordable) { return `M ${d.source.y} ${d.source.x + 5} L ${d.source.y} ${d.target.x - 30} L${d.target.y} ${d.target.x - 20} L${d.target.y} ${d.target.x - 5}`; } - init(data: any, row: any[], fixSpansSize: number) { + init(data: Recordable, row: Recordable[], fixSpansSize: number) { d3.select(".trace-xaxis").remove(); this.row = row; this.data = data; @@ -102,10 +102,10 @@ export default class ListGraph { this.root.x0 = 0; this.root.y0 = 0; } - draw(callback: any) { + draw(callback: Function) { this.update(this.root, callback); } - click(d: any, scope: any) { + click(d: Recordable, scope: Recordable) { if (!d.data.type) return; if (d.children) { d._children = d.children; @@ -116,15 +116,15 @@ export default class ListGraph { } scope.update(d); } - update(source: any, callback: any) { + update(source: Recordable, callback: Function) { const t = this; const nodes = this.root.descendants(); let index = -1; - this.root.eachBefore((n: any) => { + this.root.eachBefore((n: Recordable) => { n.x = ++index * this.barHeight + 24; n.y = n.depth * 12; }); - const node = this.svg.selectAll(".trace-node").data(nodes, (d: any) => d.id || (d.id = ++this.i)); + const node = this.svg.selectAll(".trace-node").data(nodes, (d: Recordable) => d.id || (d.id = ++this.i)); const nodeEnter = node .enter() .append("g") @@ -132,13 +132,13 @@ export default class ListGraph { .attr("class", "trace-node") .attr("style", "cursor: pointer") .style("opacity", 0) - .on("mouseover", function (event: any, d: Trace) { + .on("mouseover", function (event: MouseEvent, d: Trace) { t.tip.show(d, this); }) - .on("mouseout", function (event: any, d: Trace) { + .on("mouseout", function (event: MouseEvent, d: Trace) { t.tip.hide(d, this); }) - .on("click", (event: any, d: Trace) => { + .on("click", (event: MouseEvent, d: Trace) => { if (this.handleSelectSpan) { this.handleSelectSpan(d); } @@ -157,14 +157,14 @@ export default class ListGraph { .attr("x", 13) .attr("y", 5) .attr("fill", "#E54C17") - .html((d: any) => (d.data.isError ? "◉" : "")); + .html((d: Recordable) => (d.data.isError ? "◉" : "")); nodeEnter .append("text") .attr("class", "node-text") .attr("x", 35) .attr("y", -6) .attr("fill", "#333") - .html((d: any) => { + .html((d: Recordable) => { if (d.data.label === "TRACE_ROOT") { return ""; } @@ -174,7 +174,7 @@ export default class ListGraph { nodeEnter .append("circle") .attr("r", 10) - .attr("cx", (d: any) => { + .attr("cx", (d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length > 9) { return 272; @@ -185,7 +185,7 @@ export default class ListGraph { .attr("cy", -5) .attr("fill", "none") .attr("stroke", "#e66") - .style("opacity", (d: any) => { + .style("opacity", (d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return 0.5; @@ -199,7 +199,7 @@ export default class ListGraph { .attr("y", -1) .attr("fill", "#e66") .style("font-size", "10px") - .text((d: any) => { + .text((d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return `${events.length}`; @@ -214,49 +214,54 @@ export default class ListGraph { .attr("y", 12) .attr("fill", "#ccc") .style("font-size", "11px") - .text((d: any) => `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`); + .text( + (d: Recordable) => + `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`, + ); nodeEnter .append("rect") .attr("rx", 2) .attr("ry", 2) .attr("height", 4) - .attr("width", (d: any) => { + .attr("width", (d: Recordable) => { if (!d.data.endTime || !d.data.startTime) return 0; return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0; }) - .attr("x", (d: any) => + .attr("x", (d: Recordable) => !d.data.endTime || !d.data.startTime ? 0 : this.width * 0.618 - 20 - d.y + this.xScale(d.data.startTime - this.min) || 0, ) .attr("y", -2) - .style("fill", (d: any) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`); + .style("fill", (d: Recordable) => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`); nodeEnter .transition() .duration(400) - .attr("transform", (d: any) => `translate(${d.y + 5},${d.x})`) + .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`) .style("opacity", 1); nodeEnter .append("circle") .attr("r", 3) .style("cursor", "pointer") .attr("stroke-width", 2.5) - .attr("fill", (d: any) => + .attr("fill", (d: Recordable) => d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)", ) - .style("stroke", (d: any) => + .style("stroke", (d: Recordable) => d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`, ) - .on("click", (d: any) => { + .on("click", (d: Recordable) => { this.click(d, this); }); node .transition() .duration(400) - .attr("transform", (d: any) => `translate(${d.y + 5},${d.x})`) + .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`) .style("opacity", 1) .select("circle") - .attr("fill", (d: any) => (d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "")); + .attr("fill", (d: Recordable) => + d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "", + ); // Transition exiting nodes to the parent's new position. node @@ -266,7 +271,7 @@ export default class ListGraph { .attr("transform", `translate(${source.y},${source.x})`) .style("opacity", 0) .remove(); - const link = this.svg.selectAll(".trace-link").data(this.root.links(), function (d: any) { + const link = this.svg.selectAll(".trace-link").data(this.root.links(), function (d: Recordable) { return d.target.id; }); @@ -297,7 +302,7 @@ export default class ListGraph { return this.diagonal({ source: o, target: o }); }) .remove(); - this.root.each(function (d: any) { + this.root.each(function (d: Recordable) { d.x0 = d.x; d.y0 = d.y; }); diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts index b6e03b2e..4f5563f3 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts @@ -23,27 +23,27 @@ export default class TraceMap { private i = 0; private el: Nullable = null; private handleSelectSpan: Nullable<(i: Trace) => void> = null; - private topSlow: any = []; + private topSlow: Nullable = []; private height = 0; private width = 0; - private topChild: any[] = []; - private body: any = null; - private tip: any = null; - private svg: any = null; - private treemap: any = null; - private data: any = null; - private row: any = null; + private topChild: Nullable[] = []; + private body: Nullable = null; + private tip: Nullable = null; + private svg: Nullable = null; + private treemap: Nullable = null; + private data: Nullable = null; + private row: Nullable = null; private min = 0; private max = 0; private list: string[] = []; - private xScale: any = null; - private sequentialScale: any = null; - private root: any = null; + private xScale: Nullable = null; + private sequentialScale: Nullable = null; + private root: Nullable = null; private topSlowMax: number[] = []; private topSlowMin: number[] = []; private topChildMax: number[] = []; private topChildMin: number[] = []; - private nodeUpdate: any = null; + private nodeUpdate: Nullable = null; constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) { this.el = el; @@ -63,7 +63,7 @@ export default class TraceMap { .attr("class", "d3-tip") .offset([-8, 0]) .html( - (d: any) => ` + (d: Recordable) => `
${d.data.label}
${d.data.dur ? '
SelfDuration: ' + d.data.dur + "ms
" : ""} ${ @@ -87,7 +87,7 @@ export default class TraceMap { const transform = d3.zoomTransform(this.body).translate(0, 0); d3.zoom().transform(this.body, transform); } - init(data: any, row: any) { + init(data: Recordable, row: Recordable) { this.treemap = d3.tree().size([row.length * 35, this.width]); this.row = row; this.data = data; @@ -114,10 +114,10 @@ export default class TraceMap { this.topChildMin = this.topChild.sort((a: number, b: number) => b - a)[4]; this.update(this.root); // Collapse the node and all it's children - function collapse(d: any) { + function collapse(d: Recordable) { if (d.children) { let dur = d.data.endTime - d.data.startTime; - d.children.forEach((i: any) => { + d.children.forEach((i: Recordable) => { dur -= i.data.endTime - i.data.startTime; }); d.dur = dur < 0 ? 0 : dur; @@ -131,17 +131,17 @@ export default class TraceMap { draw() { this.update(this.root); } - update(source: any) { + update(source: Recordable) { const that: any = this; const treeData = this.treemap(this.root); const nodes = treeData.descendants(), links = treeData.descendants().slice(1); - nodes.forEach(function (d: any) { + nodes.forEach(function (d: Recordable) { d.y = d.depth * 140; }); - const node = this.svg.selectAll("g.node").data(nodes, (d: any) => { + const node = this.svg.selectAll("g.node").data(nodes, (d: Recordable) => { return d.id || (d.id = ++this.i); }); @@ -153,39 +153,39 @@ export default class TraceMap { .attr("transform", function () { return "translate(" + source.y0 + "," + source.x0 + ")"; }) - .on("mouseover", function (event: any, d: any) { + .on("mouseover", function (event: MouseEvent, d: Recordable) { that.tip.show(d, this); if (!that.timeUpdate) { return; } - const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1); + const _node = that.timeUpdate._groups[0].filter((group: Recordable) => group.__data__.id === that.i + 1); if (_node.length) { that.timeTip.show(d, _node[0].children[1]); } }) - .on("mouseout", function (event: any, d: any) { + .on("mouseout", function (event: MouseEvent, d: Recordable) { that.tip.hide(d, this); if (!that.timeUpdate) { return; } - const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1); + const _node = that.timeUpdate._groups[0].filter((group: Recordable) => group.__data__.id === that.i + 1); if (_node.length) { that.timeTip.hide(d, _node[0].children[1]); } }) - .on("click", function (event: any, d: any) { + .on("click", function (event: MouseEvent, d: Recordable) { that.handleSelectSpan(d); }); nodeEnter .append("circle") .attr("r", 8) .attr("cy", "-12") - .attr("cx", function (d: any) { + .attr("cx", function (d: Recordable) { return d.children || d._children ? -15 : 110; }) .attr("fill", "none") .attr("stroke", "#e66") - .style("opacity", (d: any) => { + .style("opacity", (d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return 0.5; @@ -195,7 +195,7 @@ export default class TraceMap { }); nodeEnter .append("text") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { const events = d.data.attachedEvents || []; let p = d.children || d._children ? -18 : 107; p = events.length > 9 ? p - 2 : p; @@ -204,7 +204,7 @@ export default class TraceMap { .attr("dy", "-0.8em") .attr("fill", "#e66") .style("font-size", "10px") - .text((d: any) => { + .text((d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return `${events.length}`; @@ -216,46 +216,50 @@ export default class TraceMap { .append("circle") .attr("class", "node") .attr("r", 1e-6) - .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff")) - .attr("stroke", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) + .style("fill", (d: Recordable) => + d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", + ) + .attr("stroke", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) .attr("stroke-width", 2.5); nodeEnter .append("text") .attr("font-size", 11) .attr("dy", "-0.5em") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? -45 : 15; }) - .attr("text-anchor", function (d: any) { + .attr("text-anchor", function (d: Recordable) { return d.children || d._children ? "end" : "start"; }) - .text((d: any) => + .text((d: Recordable) => d.data.label.length > 19 ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..." : (d.data.isError ? "◉ " : "") + d.data.label, ) - .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17")); + .style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17")); nodeEnter .append("text") .attr("class", "node-text") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? -45 : 15; }) .attr("dy", "1em") .attr("fill", "#bbb") - .attr("text-anchor", function (d: any) { + .attr("text-anchor", function (d: Recordable) { return d.children || d._children ? "end" : "start"; }) .style("font-size", "10px") - .text((d: any) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`); + .text( + (d: Recordable) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`, + ); nodeEnter .append("rect") .attr("rx", 1) .attr("ry", 1) .attr("height", 2) .attr("width", 100) - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? "-110" : "10"; }) .attr("y", -1) @@ -265,11 +269,11 @@ export default class TraceMap { .attr("rx", 1) .attr("ry", 1) .attr("height", 2) - .attr("width", (d: any) => { + .attr("width", (d: Recordable) => { if (!d.data.endTime || !d.data.startTime) return 0; return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0; }) - .attr("x", (d: any) => { + .attr("x", (d: Recordable) => { if (!d.data.endTime || !d.data.startTime) { return 0; } @@ -279,21 +283,23 @@ export default class TraceMap { return 10 + this.xScale(d.data.startTime - this.min); }) .attr("y", -1) - .style("fill", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))); + .style("fill", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))); const nodeUpdate = nodeEnter.merge(node); this.nodeUpdate = nodeUpdate; nodeUpdate .transition() .duration(600) - .attr("transform", function (d: any) { + .attr("transform", function (d: Recordable) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate .select("circle.node") .attr("r", 5) - .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff")) + .style("fill", (d: Recordable) => + d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", + ) .attr("cursor", "pointer") - .on("click", (d: any) => { + .on("click", (d: Recordable) => { click(d); }); const nodeExit = node @@ -332,7 +338,7 @@ export default class TraceMap { linkUpdate .transition() .duration(600) - .attr("d", function (d: any) { + .attr("d", function (d: Recordable) { return diagonal(d, d.parent); }); link @@ -346,16 +352,16 @@ export default class TraceMap { .style("stroke-width", 1.5) .remove(); - nodes.forEach(function (d: any) { + nodes.forEach(function (d: Recordable) { d.x0 = d.x; d.y0 = d.y; }); - function diagonal(s: any, d: any) { + function diagonal(s: Recordable, d: Recordable) { return `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}`; } - function click(d: any) { + function click(d: Recordable) { if (d.children) { d._children = d.children; d.children = null; @@ -399,11 +405,11 @@ export default class TraceMap { } }); } - getZoomBehavior(g: any) { + getZoomBehavior(g: Recordable) { return d3 .zoom() .scaleExtent([0.3, 10]) - .on("zoom", (d: any) => { + .on("zoom", (d: Recordable) => { g.attr("transform", d3.zoomTransform(this.svg.node())).attr( `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`, ); diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts index 8d500aac..c08b6992 100644 --- a/src/views/dashboard/related/trace/utils/trace-table.ts +++ b/src/views/dashboard/related/trace/utils/trace-table.ts @@ -25,7 +25,7 @@ export default class TraceUtil { public static changeTree(data: Span[], currentTraceId: string) { const segmentIdList: Span[] = []; - const traceTreeRef: any = this.changeTreeCore(data); + const traceTreeRef: Recordable = this.changeTreeCore(data); traceTreeRef.segmentIdGroup.forEach((segmentId: string) => { if (traceTreeRef.segmentMap.get(segmentId).refs) { traceTreeRef.segmentMap.get(segmentId).refs.forEach((ref: Ref) => { @@ -79,7 +79,7 @@ export default class TraceUtil { segmentIdGroup: [], }; } - const segmentGroup: any = {}; + const segmentGroup: Recordable = {}; const segmentMap: Map = new Map(); const segmentIdGroup: string[] = []; const fixSpans: Span[] = [];