fix: update types

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

src/hooks/useTimeout.ts

@@ -38,7 +38,7 @@ export function useTimeoutFn(handle: Fn<any>, 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;

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>(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);
   };
 </script>

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);
 }

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<any>;
+  timer: Nullable<TimeoutHandle>;
   autoRefresh: boolean;
   pageTitle: string;
   version: string;
   isMobile: boolean;
-  reloadTimer: Nullable<any>;
+  reloadTimer: Nullable<IntervalHandle>;
 }
 
 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);
 }

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);
 }

src/types/global.d.ts

@@ -114,7 +114,7 @@ type AnyNormalFunction = (...arg: any) => any;
 
 type AnyPromiseFunction = (...arg: any) => PromiseLike<any>;
 
-type AnyFunction = AnyNormalFunction | AnyPromiseFunction;
+declare type AnyFunction = AnyNormalFunction | AnyPromiseFunction;
 
 declare module "vue" {
   export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;

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 });

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

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,

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<any>,
+      type: Object as PropType<LayoutConfig>,
       default: () => ({ graph: {} }),
     },
   });

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 },

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<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
@@ -38,10 +38,10 @@ limitations under the License. -->
   const loading = ref<boolean>(false);
   const showDetail = ref<boolean>(false);
   const fixSpansSize = ref<number>(0);
-  const segmentId = ref<any>([]);
+  const segmentId = ref<Recordable[]>([]);
   const currentSpan = ref<Array<Span>>([]);
   const refSpans = ref<Array<Ref>>([]);
-  const tree = ref<any>(null);
+  const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(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 segmentGroup: Recordable = {};
-    const segmentIdGroup: any = [];
+    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;

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<any>, default: () => ({}) },
+    currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
   });
   const { t } = useI18n();
   const traceStore = useTraceStore();
@@ -151,7 +151,7 @@ limitations under the License. -->
   const pageNum = ref<number>(1);
   const showRelatedLogs = ref<boolean>(false);
   const showEventDetail = ref<boolean>(false);
-  const currentEvent = ref<any>({});
+  const currentEvent = ref<Recordable>({});
   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;

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<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
@@ -56,8 +56,8 @@ limitations under the License. -->
     const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
     const canvas = document.createElement("canvas");
     const context: any = canvas.getContext("2d");
-    canvas.width = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientWidth;
+    canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth;
-    canvas.height = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientHeight;
+    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();

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<any>, default: () => [] },
+    data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
     showBtnDetail: { type: Boolean, default: false },
     HeaderType: { type: String, default: "" },
   });
   const emit = defineEmits(["load"]);
   const loading = ref<boolean>(true);
-  const tableData = ref<any>([]);
+  const tableData = ref<Recordable>([]);
   const list = ref<any[]>([]);
 
   onMounted(() => {

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<any>, default: () => [] },
+    data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
     showBtnDetail: { type: Boolean, default: false },
     headerType: { type: String, default: "" },
   });
   const emit = defineEmits(["select", "view", "load"]);
   const loading = ref<boolean>(true);
-  const tableData = ref<any>([]);
+  const tableData = ref<Recordable[]>([]);
   const showDetail = ref<boolean>(false);
-  const currentSpan = ref<Span | any>({});
+  const currentSpan = ref<Span | Recordable>({});
 
   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;

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<any>, default: () => [] },
+    tableData: { type: Array as PropType<Recordable>, default: () => [] },
     type: { type: String, default: "" },
     headerType: { type: String, default: "" },
   });
@@ -69,7 +69,7 @@ limitations under the License. -->
   const componentKey = ref<number>(300);
   const flag = ref<boolean>(true);
   const dragger = ref<Nullable<HTMLSpanElement>>(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;
+    const drag: Nullable<HTMLSpanElement> = dragger.value;
-    drag.onmousedown = (event: any) => {
+    if (!drag) {
+      return;
+    }
+    drag.onmousedown = (event: MouseEvent) => {
       const diffX = event.clientX;
       const copy = method.value;
       document.onmousemove = (documentEvent) => {

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<any>, default: () => ({}) },
+    data: { type: Object as PropType<Recordable>, 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) {
+      function selectSpan(event: Recordable) {
-        const dom = event.composedPath().find((d: any) => d.className.includes("trace-item"));
+        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) {
+      function viewSpan(event: Recordable) {
-        const dom = event.composedPath().find((d: any) => d.className.includes("trace-item"));
+        const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item"));
         emit("select", props.data);
         viewSpanDetail(dom);
       }

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 `
           <div class="mb-5">${d.data.label}</div>
           ${d.data.dur ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>" : ""}
@@ -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;
     });

src/views/dashboard/related/trace/utils/d3-trace-tree.ts

@@ -23,27 +23,27 @@ export default class TraceMap {
   private i = 0;
   private el: Nullable<HTMLDivElement> = null;
   private handleSelectSpan: Nullable<(i: Trace) => void> = null;
-  private topSlow: any = [];
+  private topSlow: Nullable<any> = [];
   private height = 0;
   private width = 0;
-  private topChild: any[] = [];
+  private topChild: Nullable<any>[] = [];
-  private body: any = null;
+  private body: Nullable<any> = null;
-  private tip: any = null;
+  private tip: Nullable<any> = null;
-  private svg: any = null;
+  private svg: Nullable<any> = null;
-  private treemap: any = null;
+  private treemap: Nullable<any> = null;
-  private data: any = null;
+  private data: Nullable<any> = null;
-  private row: any = null;
+  private row: Nullable<any> = null;
   private min = 0;
   private max = 0;
   private list: string[] = [];
-  private xScale: any = null;
+  private xScale: Nullable<any> = null;
-  private sequentialScale: any = null;
+  private sequentialScale: Nullable<any> = null;
-  private root: any = null;
+  private root: Nullable<any> = null;
   private topSlowMax: number[] = [];
   private topSlowMin: number[] = [];
   private topChildMax: number[] = [];
   private topChildMin: number[] = [];
-  private nodeUpdate: any = null;
+  private nodeUpdate: Nullable<any> = 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) => `
       <div class="mb-5">${d.data.label}</div>
       ${d.data.dur ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>" : ""}
       ${
@@ -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"))
+      .style("fill", (d: Recordable) =>
-      .attr("stroke", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)))
+        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})`,
         );

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<string, Span> = new Map();
     const segmentIdGroup: string[] = [];
     const fixSpans: Span[] = [];