types: optimize data types (#254)

src/assets/img/icons.ts

@@ -30,13 +30,13 @@ function validateFileName(str: string): string | undefined {
 Object.keys(requireComponent).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    result[fileName] = (requireComponent as { [key: string]: any })[filePath].default;
+    result[fileName] = (requireComponent as Indexable)[filePath].default;
   }
 });
 Object.keys(requireTool).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    t[fileName] = (requireTool as { [key: string]: any })[filePath].default;
+    t[fileName] = (requireTool as Indexable)[filePath].default;
   }
 });
 

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 */
+  /*global defineProps, defineEmits, Indexable, Recordable*/
   const emit = defineEmits(["input", "setDates", "ok"]);
   const { t } = useI18n();
   const props = defineProps({
@@ -191,7 +191,7 @@ limitations under the License. -->
     minute: 0,
     second: 0,
   });
-  const get = (time: Date): { [key: string]: any } => {
+  const get = (time: Date): Indexable => {
     return {
       year: time.getFullYear(),
       month: time.getMonth(),
@@ -390,7 +390,7 @@ limitations under the License. -->
       state.year--;
     }
   };
-  const is = (e: any) => {
+  const is = (e: Recordable) => {
     return e.target.className.indexOf(`${state.pre}-date-disabled`) === -1;
   };
   const ok = (info: any) => {

src/components/Graph.vue

@@ -54,7 +54,7 @@ limitations under the License. -->
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import associateProcessor from "@/hooks/useAssociateProcessor";
 
-  /*global Nullable, defineProps, defineEmits*/
+  /*global Nullable, defineProps, defineEmits, Indexable*/
   const emits = defineEmits(["select"]);
   const { t } = useI18n();
   const chartRef = ref<Nullable<HTMLDivElement>>(null);
@@ -70,7 +70,7 @@ limitations under the License. -->
     height: { type: String, default: "100%" },
     width: { type: String, default: "100%" },
     option: {
-      type: Object as PropType<{ [key: string]: any }>,
+      type: Object as PropType<Indexable>,
       default: () => ({}),
     },
     filters: {

src/components/SelectSingle.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
   function handleClick() {
     visible.value = false;
   }
-  function setPopper(event: any) {
+  function setPopper(event: MouseEvent) {
     event.stopPropagation();
     visible.value = !visible.value;
   }

src/components/Selector.vue

@@ -40,7 +40,7 @@ limitations under the License. -->
   //   value: string | number;
   // }
 
-  /*global  defineProps, defineEmits*/
+  /*global  defineProps, defineEmits, Indexable*/
   const emit = defineEmits(["change", "query"]);
   const props = defineProps({
     options: {
@@ -71,7 +71,7 @@ limitations under the License. -->
 
   const selected = ref<string[] | string>(props.value);
   function changeSelected() {
-    const options = props.options.filter((d: any) =>
+    const options = props.options.filter((d: Indexable) =>
       props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
     );
     emit("change", options);

src/components/TimePicker.vue

@@ -112,7 +112,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import DateCalendar from "./DateCalendar.vue";
   import { useTimeoutFn } from "@/hooks/useTimeout";
-  /*global defineProps, defineEmits */
+  /*global defineProps, defineEmits*/
   const datepicker = ref(null);
   const { t } = useI18n();
   const show = ref<boolean>(false);
@@ -241,7 +241,7 @@ limitations under the License. -->
     }
     dates.value[0] = d;
   };
-  const dc = (e: any) => {
+  const dc = (e: MouseEvent) => {
     show.value = (datepicker.value as any).contains(e.target) && !props.disabled;
   };
   const quickPick = (type: string) => {

src/components/index.ts

@@ -23,7 +23,7 @@ import Radio from "./Radio.vue";
 import SelectSingle from "./SelectSingle.vue";
 import VueGridLayout from "vue-grid-layout";
 
-const components: { [key: string]: any } = {
+const components: Indexable = {
   Icon,
   TimePicker,
   VueGridLayout,

src/hooks/data.ts

@@ -66,7 +66,7 @@ screenMap.set(sizeEnum.LG, screenEnum.LG);
 screenMap.set(sizeEnum.XL, screenEnum.XL);
 screenMap.set(sizeEnum.XXL, screenEnum.XXL);
 
-export const RespFields: { [key: string]: string } = {
+export const RespFields: Indexable = {
   readMetricsValues: `{
     label
     values {

src/hooks/useAssociateProcessor.ts

@@ -19,7 +19,7 @@ import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import type { EventParams } from "@/types/app";
 
-export default function associateProcessor(props: any) {
+export default function associateProcessor(props: Indexable) {
   function eventAssociate() {
     if (!props.filters) {
       return;
@@ -85,7 +85,7 @@ export default function associateProcessor(props: any) {
     const queryOrder = relatedTrace.queryOrder;
     const latency = relatedTrace.latency;
     const series = props.option.series || [];
-    const item: any = {
+    const item: Indexable = {
       duration,
       queryOrder,
       status,

src/hooks/useBreakpoint.ts

@@ -32,7 +32,7 @@ export interface CreateCallbackParams {
   sizeEnum: typeof sizeEnum;
 }
 
-export function useBreakpoint(): any {
+export function useBreakpoint(): Indexable {
   return {
     screenRef: computed(() => unref(globalScreenRef)),
     widthRef: globalWidthRef,
@@ -41,7 +41,7 @@ export function useBreakpoint(): any {
   };
 }
 
-export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): Indexable {
   const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
   const realWidthRef = ref(window.innerWidth);
 

src/hooks/useDashboardsSession.ts

@@ -59,7 +59,7 @@ export default function getDashboard(param?: { name: string; layer: string; enti
     if (targetTabIndex[1] === undefined) {
       container = document.querySelector(".ds-main");
     } else {
-      const w = widgets.find((d: any) => d.id === targetTabIndex[0]);
+      const w = widgets.find((d: Indexable) => d.id === targetTabIndex[0]);
       container = document.querySelector(".tab-layout");
       const layout: Nullable<Element> = document.querySelector(".ds-main");
       if (w && layout) {

src/hooks/useEcharts.ts

@@ -43,7 +43,7 @@ export type ECOption = echarts.ComposeOption<
   | SankeySeriesOption
 >;
 
-export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): any {
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
   const getDarkMode = computed(() => {
     return theme === "default" ? "light" : theme;
   });

src/hooks/useEventListener.ts

@@ -20,7 +20,7 @@ import { useThrottleFn, useDebounceFn } from "@vueuse/core";
 
 export type RemoveEventFn = () => void;
 export interface UseEventParams {
-  el?: Element | Ref<Element | undefined> | Window | any;
+  el?: Element | Ref<Element | undefined> | Window | Recordable;
   name: string;
   listener: EventListener;
   options?: boolean | AddEventListenerOptions;

src/hooks/useLegendProcessor.ts

@@ -39,7 +39,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
   }
   function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
     const source: { [key: string]: unknown }[] = [];
-    const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length);
+    const keys = Object.keys(data || {}).filter((i: string) => Array.isArray(data[i]) && data[i].length);
     const headers = [];
 
     for (const [key, value] of keys.entries()) {

src/hooks/useListConfig.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { MetricQueryTypes, Calculations } from "./data";
-export function useListConfig(config: any, index: string) {
+export function useListConfig(config: Indexable, index: string) {
   const i = Number(index);
   const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
   const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;

src/hooks/useMetricsProcessor.ts

@@ -24,7 +24,7 @@ import type { Instance, Endpoint, Service } from "@/types/selector";
 import type { MetricConfigOpt } from "@/types/dashboard";
 import { MetricCatalog } from "@/views/dashboard/data";
 
-export function useQueryProcessor(config: any) {
+export function useQueryProcessor(config: Indexable) {
   if (!(config.metrics && config.metrics[0])) {
     return;
   }
@@ -38,7 +38,7 @@ export function useQueryProcessor(config: any) {
   if (!selectorStore.currentService && dashboardStore.entity !== "All") {
     return;
   }
-  const conditions: { [key: string]: unknown } = {
+  const conditions: Recordable = {
     duration: appStore.durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
@@ -126,7 +126,7 @@ export function useQueryProcessor(config: any) {
   };
 }
 export function useSourceProcessor(
-  resp: { errors: string; data: { [key: string]: any } },
+  resp: { errors: string; data: Indexable },
   config: {
     metrics: string[];
     metricTypes: string[];
@@ -181,7 +181,7 @@ export function useSourceProcessor(
     }
     if (type === MetricQueryTypes.READHEATMAP) {
       const resVal = Object.values(resp.data)[0] || {};
-      const nodes = [] as any;
+      const nodes = [] as Indexable[];
       if (!(resVal && resVal.values)) {
         source[m] = { nodes: [] };
         return;
@@ -191,7 +191,7 @@ export function useSourceProcessor(
 
         nodes.push(...grids);
       });
-      let buckets = [] as any;
+      let buckets = [] as Indexable[];
       if (resVal.buckets.length) {
         buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
       }
@@ -204,7 +204,7 @@ export function useSourceProcessor(
 }
 
 export function useQueryPodsMetrics(
-  pods: Array<Instance | Endpoint | Service | any>,
+  pods: Array<(Instance | Endpoint | Service) & Indexable>,
   config: {
     metrics: string[];
     metricTypes: string[];
@@ -227,7 +227,7 @@ export function useQueryPodsMetrics(
   };
   const variables: string[] = [`$duration: Duration!`];
   const currentService = selectorStore.currentService || {};
-  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
+  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
     const param = {
       scope,
       serviceName: scope === "Service" ? d.label : currentService.label,
@@ -262,13 +262,13 @@ export function useQueryPodsMetrics(
 
 export function usePodsSource(
   pods: Array<Instance | Endpoint>,
-  resp: { errors: string; data: { [key: string]: any } },
+  resp: { errors: string; data: Indexable },
   config: {
     metrics: string[];
     metricTypes: string[];
     metricConfig: MetricConfigOpt[];
   },
-): any {
+): Indexable {
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return {};
@@ -276,7 +276,7 @@ export function usePodsSource(
   const names: string[] = [];
   const metricConfigArr: MetricConfigOpt[] = [];
   const metricTypesArr: string[] = [];
-  const data = pods.map((d: Instance | any, idx: number) => {
+  const data = pods.map((d: Instance & Indexable, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const c: any = (config.metricConfig && config.metricConfig[index]) || {};
       const key = name + idx + index;
@@ -424,14 +424,14 @@ export function aggregation(val: number, config: { calculation?: string }): numb
   return data;
 }
 
-export async function useGetMetricEntity(metric: string, metricType: any) {
+export async function useGetMetricEntity(metric: string, metricType: string) {
   if (!metric || !metricType) {
     return;
   }
   let catalog = "";
   const dashboardStore = useDashboardStore();
   if (
-    [MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords].includes(
+    ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords] as any).includes(
       metricType,
     )
   ) {
@@ -441,7 +441,7 @@ export async function useGetMetricEntity(metric: string, metricType: any) {
       return;
     }
     const c: string = res.data.metrics[0].catalog;
-    catalog = (MetricCatalog as any)[c];
+    catalog = (MetricCatalog as Indexable)[c];
   }
 
   return catalog;

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/NavBar.vue

@@ -47,6 +47,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { ElMessage } from "element-plus";
 
+  /*global Indexable */
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
   const route = useRoute();
@@ -65,7 +66,7 @@ limitations under the License. -->
     appStore.setDuration(timeFormat(dates));
   }
 
-  function changeTimeRange(val: Date[] | any) {
+  function changeTimeRange(val: Date[]) {
     timeRange.value = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
     if (timeRange.value) {
       return;
@@ -86,7 +87,7 @@ limitations under the License. -->
     }
   }
   function resetDuration() {
-    const { duration }: any = route.params;
+    const { duration }: Indexable = route.params;
     if (duration) {
       const d = JSON.parse(duration);
 

src/layout/components/SideBar.vue

@@ -74,6 +74,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));
@@ -95,7 +96,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);
   };
   function setCollapse() {

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[];
@@ -79,7 +79,7 @@ export const dashboardStore = defineStore({
       this.currentDashboard = item;
     },
     addControl(type: string) {
-      const arr = this.layout.map((d: any) => Number(d.i));
+      const arr = this.layout.map((d: Recordable) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!this.layout.length) {
         index = "0";
@@ -153,7 +153,7 @@ export const dashboardStore = defineStore({
       }
       const tabIndex = this.layout[idx].activedTabIndex || 0;
       const { children } = (this.layout[idx].children || [])[tabIndex];
-      const arr = children.map((d: any) => Number(d.i));
+      const arr = children.map((d: Recordable) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!children.length) {
         index = "0";
@@ -398,7 +398,7 @@ export const dashboardStore = defineStore({
         children: this.layout,
         ...this.currentDashboard,
       };
-      let res: any;
+      let res: Recordable;
       let json;
 
       if (this.currentDashboard.id) {
@@ -462,13 +462,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/store/modules/demand-log.ts

@@ -27,7 +27,7 @@ interface DemandLogState {
   containers: Instance[];
   instances: Instance[];
   conditions: Conditions;
-  selectorStore: any;
+  selectorStore: Recordable;
   logs: Log[];
   loadLogs: boolean;
   message: string;
@@ -111,6 +111,6 @@ export const demandLogStore = defineStore({
   },
 });
 
-export function useDemandLogStore(): any {
+export function useDemandLogStore(): Recordable {
   return demandLogStore(store);
 }

src/store/modules/ebpf.ts

@@ -153,6 +153,6 @@ export const ebpfStore = defineStore({
   },
 });
 
-export function useEbpfStore(): any {
+export function useEbpfStore(): Recordable {
   return ebpfStore(store);
 }

src/store/modules/event.ts

@@ -106,6 +106,6 @@ export const eventStore = defineStore({
   },
 });
 
-export function useEventStore(): any {
+export function useEventStore(): Recordable {
   return eventStore(store);
 }

src/store/modules/log.ts

@@ -27,10 +27,10 @@ interface LogState {
   services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
-  conditions: any;
+  conditions: Recordable;
-  selectorStore: any;
+  selectorStore: Recordable;
   supportQueryLogsByKeywords: boolean;
-  logs: any[];
+  logs: Recordable[];
   loadLogs: boolean;
 }
 
@@ -50,7 +50,7 @@ export const logStore = defineStore({
     loadLogs: false,
   }),
   actions: {
-    setLogCondition(data: any) {
+    setLogCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
     resetState() {
@@ -152,6 +152,6 @@ export const logStore = defineStore({
   },
 });
 
-export function useLogStore(): any {
+export function useLogStore(): Recordable {
   return logStore(store);
 }

src/store/modules/network-profiling.ts

@@ -22,6 +22,7 @@ import type { AxiosResponse } from "axios";
 import type { Call } from "@/types/topology";
 import type { LayoutConfig } from "@/types/dashboard";
 import { ElMessage } from "element-plus";
+import type { DurationTime } from "@/types/app";
 
 interface NetworkProfilingState {
   networkTasks: Array<Recordable<EBPFTaskList>>;
@@ -74,7 +75,7 @@ export const networkProfilingStore = defineStore({
       this.activeMetricIndex = index;
     },
     setTopology(data: { nodes: ProcessNode[]; calls: Call[] }) {
-      const obj = {} as any;
+      const obj = {} as Recordable;
       let calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
         if (!obj[next.id]) {
           obj[next.id] = true;
@@ -92,8 +93,8 @@ export const networkProfilingStore = defineStore({
         }
         return prev;
       }, []);
-      const param = {} as any;
+      const param = {} as Recordable;
-      calls = data.calls.reduce((prev: (Call | any)[], next: Call | any) => {
+      calls = data.calls.reduce((prev: (Call & Recordable)[], next: Call & Recordable) => {
         if (param[next.targetId + next.sourceId]) {
           next.lowerArc = true;
         }
@@ -165,7 +166,7 @@ export const networkProfilingStore = defineStore({
       }
       return res.data;
     },
-    async getProcessTopology(params: { duration: any; serviceInstanceId: string }) {
+    async getProcessTopology(params: { duration: DurationTime; serviceInstanceId: string }) {
       this.loadNodes = true;
       const res: AxiosResponse = await graphql.query("getProcessTopology").params(params);
       this.loadNodes = false;
@@ -182,6 +183,6 @@ export const networkProfilingStore = defineStore({
   },
 });
 
-export function useNetworkProfilingStore(): any {
+export function useNetworkProfilingStore(): Recordable {
   return networkProfilingStore(store);
 }

src/store/modules/profile.ts

@@ -162,10 +162,35 @@ export const profileStore = defineStore({
       }
       return res.data;
     },
-    async getSegmentSpans() {
+    async getSegmentSpans(params: { segmentId: string }) {
-      this.analyzeTrees = [];
+      if (!params.segmentId) {
-      this.segmentSpans = this.currentSegment.spans;
+        return new Promise((resolve) => resolve({}));
-      this.currentSpan = this.currentSegment.spans[0] || {};
+      }
+      const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
+      if (res.data.errors) {
+        this.segmentSpans = [];
+        return res.data;
+      }
+      const { segment } = res.data.data;
+      if (!segment) {
+        this.segmentSpans = [];
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
+        return {
+          ...d,
+          segmentId: this.currentSegment?.segmentId,
+          traceId: (this.currentSegment.traceIds as string[])[0],
+        };
+      });
+      if (!(segment.spans && segment.spans.length)) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      const index = segment.spans.length - 1 || 0;
+      this.currentSpan = segment.spans[index];
+      return res.data;
     },
     async getProfileAnalyze(params: Array<{ segmentId: string; timeRange: { start: number; end: number } }>) {
       if (!params.length) {
@@ -211,6 +236,6 @@ export const profileStore = defineStore({
   },
 });
 
-export function useProfileStore(): any {
+export function useProfileStore(): Recordable {
   return profileStore(store);
 }

src/store/modules/selectors.ts

@@ -233,6 +233,6 @@ export const selectorStore = defineStore({
   },
 });
 
-export function useSelectorStore(): any {
+export function useSelectorStore(): Recordable {
   return selectorStore(store);
 }

src/store/modules/topology.ts

@@ -73,7 +73,7 @@ export const topologyStore = defineStore({
       this.nodes = data.nodes;
     },
     setTopology(data: { nodes: Node[]; calls: Call[] }) {
-      const obj = {} as any;
+      const obj = {} as Recordable;
       const services = useSelectorStore().services;
       const nodes = (data.nodes || []).reduce((prev: Node[], next: Node) => {
         if (!obj[next.id]) {
@@ -302,8 +302,8 @@ export const topologyStore = defineStore({
         return res.data;
       }
       const topo = res.data.data;
-      const calls = [] as any;
+      const calls = [] as Call[];
-      const nodes = [] as any;
+      const nodes = [] as Node[];
       for (const key of Object.keys(topo)) {
         calls.push(...topo[key].calls);
         nodes.push(...topo[key].nodes);
@@ -377,7 +377,7 @@ export const topologyStore = defineStore({
       }
       const data = res.data.data;
       const metrics = Object.keys(data);
-      this.nodes = this.nodes.map((d: Node | any) => {
+      this.nodes = this.nodes.map((d: Node & Recordable) => {
         for (const m of metrics) {
           for (const val of data[m].values) {
             if (d.id === val.id) {
@@ -410,6 +410,6 @@ export const topologyStore = defineStore({
   },
 });
 
-export function useTopologyStore(): any {
+export function useTopologyStore(): Recordable {
   return topologyStore(store);
 }

src/store/modules/trace.ts

@@ -31,9 +31,9 @@ interface TraceState {
   traceList: Trace[];
   traceSpans: Span[];
   currentTrace: Recordable<Trace>;
-  conditions: any;
+  conditions: Recordable;
-  traceSpanLogs: any[];
+  traceSpanLogs: Recordable[];
-  selectorStore: any;
+  selectorStore: Recordable;
 }
 
 export const traceStore = defineStore({
@@ -55,7 +55,7 @@ export const traceStore = defineStore({
     selectorStore: useSelectorStore(),
   }),
   actions: {
-    setTraceCondition(data: any) {
+    setTraceCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
     setCurrentTrace(trace: Recordable<Trace>) {
@@ -171,7 +171,7 @@ export const traceStore = defineStore({
       this.setTraceSpans(data || []);
       return res.data;
     },
-    async getSpanLogs(params: any) {
+    async getSpanLogs(params: Recordable) {
       const res: AxiosResponse = await graphql.query("queryServiceLogs").params(params);
       if (res.data.errors) {
         this.traceSpanLogs = [];
@@ -197,6 +197,6 @@ export const traceStore = defineStore({
   },
 });
 
-export function useTraceStore(): any {
+export function useTraceStore(): Recordable {
   return traceStore(store);
 }

src/types/global.d.ts

@@ -49,7 +49,9 @@ declare global {
 
   declare type Nullable<T> = T | null;
   declare type NonNullable<T> = T extends null | undefined ? never : T;
+  // String type object
   declare type Recordable<T = any> = Record<string, T>;
+  // Object of read-only string type
   declare type ReadonlyRecordable<T = any> = {
     readonly [key: string]: T;
   };
@@ -108,6 +110,11 @@ declare global {
     }
   }
 }
+type AnyNormalFunction = (...arg: any) => any;
+
+type AnyPromiseFunction = (...arg: any) => PromiseLike<any>;
+
+declare type AnyFunction = AnyNormalFunction | AnyPromiseFunction;
 
 declare module "vue" {
   export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;

src/views/dashboard/controls/Widget.vue

@@ -113,7 +113,7 @@ limitations under the License. -->
       }
 
       async function queryMetrics() {
-        const metricTypes = props.data.metricTypes || [];
+        const metricTypes: string[] = props.data.metricTypes || [];
         const metrics = props.data.metrics || [];
         const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
         const params = await useQueryProcessor({ ...props.data, catalog });

src/views/dashboard/graphs/TopList.vue

@@ -65,6 +65,7 @@ limitations under the License. -->
   import { TextColors } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import { QueryOrders, Status, RefIdTypes, ProtocolTypes } from "../data";
+
   /*global defineProps */
   const props = defineProps({
     data: {

src/views/dashboard/related/topology/components/Graph.vue

@@ -42,7 +42,11 @@ limitations under the License. -->
             :y="n.y - 38"
             :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
           />
-          <text :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6" :y="n.y + n.height + 8" style="pointer-events: none">
+          <text
+            :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
+            :y="n.y + n.height + 8"
+            style="pointer-events: none"
+          >
             {{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }}
           </text>
         </g>

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

@@ -85,7 +85,6 @@ limitations under the License. -->
   import ConditionTags from "@/views/components/ConditionTags.vue";
   import { ElMessage } from "element-plus";
   import { EntityType, QueryOrders, Status } from "../../data";
-  import type { LayoutConfig } from "@/types/dashboard";
 
   const FiltersKeys: { [key: string]: string } = {
     status: "traceState",
@@ -98,7 +97,7 @@ limitations under the License. -->
   const props = defineProps({
     needQuery: { type: Boolean, default: true },
     data: {
-      type: Object as PropType<LayoutConfig>,
+      type: Object as PropType<Recordable>,
       default: () => ({ graph: {} }),
     },
   });
@@ -197,7 +196,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 */
+  /*global defineProps, Recordable */
   const props = defineProps({
     data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig | Recordable>,
       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

@@ -139,16 +139,16 @@ 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();
   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,

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

@@ -149,8 +149,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: "" },
@@ -208,8 +209,8 @@ limitations under the License. -->
           p.style.background = "#eee";
         }
       }
-      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") {
@@ -218,8 +219,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

@@ -55,7 +55,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>" : ""}
@@ -75,13 +75,13 @@ export default class ListGraph {
     this.svg.call(this.tip);
     this.svg.call(this.prompt);
   }
-  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;
@@ -111,10 +111,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;
@@ -125,15 +125,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")
@@ -215,15 +215,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")
-      .style("font-size", "12px")
+      .html((d: Recordable) => {
-      .html((d: any) => {
         if (d.data.label === "TRACE_ROOT") {
           return "";
         }
@@ -233,7 +232,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;
@@ -244,7 +243,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;
@@ -258,7 +257,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}`;
@@ -274,7 +273,7 @@ export default class ListGraph {
       .attr("fill", "#ccc")
       .style("font-size", "11px")
       .text(
-        (d: any) =>
+        (d: Recordable) =>
           `${d.data.layer || ""} ${
             d.data.component
               ? "- " + d.data.component
@@ -288,43 +287,45 @@ export default class ListGraph {
       .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
@@ -334,7 +335,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;
     });
 
@@ -365,7 +366,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[] = [];