types: optimize data types (#254)

2025-05-01 16:03:00 +00:00 · 2023-04-06 21:50:57 +08:00 · 2023-04-06 21:50:57 +08:00 · 49a5481fb0
commit 49a5481fb0
parent 8bb45bb453
50 changed files with 263 additions and 213 deletions
--- a/src/assets/img/icons.ts
+++ b/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;
  }
 });

--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@ -162,7 +162,7 @@ limitations under the License. -->
  import { computed, onMounted, watch, reactive } from "vue";
  import type { PropType } from "vue";
  import { useI18n } from "vue-i18n";
-  /*global defineProps, defineEmits */
+  /*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) => {
--- a/src/components/Graph.vue
+++ b/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: {
--- a/src/components/SelectSingle.vue
+++ b/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;
  }
--- a/src/components/Selector.vue
+++ b/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);
--- a/src/components/TimePicker.vue
+++ b/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) => {
--- a/src/components/index.ts
+++ b/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,
--- a/src/hooks/data.ts
+++ b/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 {
--- a/src/hooks/useAssociateProcessor.ts
+++ b/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,
--- a/src/hooks/useBreakpoint.ts
+++ b/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);

--- a/src/hooks/useDashboardsSession.ts
+++ b/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) {
--- a/src/hooks/useEcharts.ts
+++ b/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;
  });
--- a/src/hooks/useEventListener.ts
+++ b/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;
--- a/src/hooks/useLegendProcessor.ts
+++ b/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()) {
--- a/src/hooks/useListConfig.ts
+++ b/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;
--- a/src/hooks/useMetricsProcessor.ts
+++ b/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;
--- a/src/hooks/useTimeout.ts
+++ b/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;
--- a/src/layout/components/NavBar.vue
+++ b/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);

--- a/src/layout/components/SideBar.vue
+++ b/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() {
--- a/src/store/modules/alarm.ts
+++ b/src/store/modules/alarm.ts
@ -34,7 +34,7 @@ export const alarmStore = defineStore({
    total: 0,
  }),
  actions: {
-    async getAlarms(params: any) {
+    async getAlarms(params: Recordable) {
      const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
      if (res.data.errors) {
        return res.data;
@ -48,6 +48,6 @@ export const alarmStore = defineStore({
  },
 });

-export function useAlarmStore(): any {
+export function useAlarmStore(): Recordable {
  return alarmStore(store);
 }
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -24,17 +24,17 @@ import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
 /*global Nullable*/
 interface AppState {
-  durationRow: any;
+  durationRow: Recordable;
  utc: string;
  utcHour: number;
  utcMin: number;
  eventStack: (() => unknown)[];
-  timer: Nullable<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);
 }
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@ -33,7 +33,7 @@ interface DashboardState {
  entity: string;
  layerId: string;
  activedGridItem: string;
-  selectorStore: any;
+  selectorStore: Recordable;
  showTopology: boolean;
  currentTabItems: LayoutConfig[];
  dashboards: DashboardItem[];
@ -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);
 }
--- a/src/store/modules/demand-log.ts
+++ b/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);
 }
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@ -153,6 +153,6 @@ export const ebpfStore = defineStore({
  },
 });

-export function useEbpfStore(): any {
+export function useEbpfStore(): Recordable {
  return ebpfStore(store);
 }
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@ -106,6 +106,6 @@ export const eventStore = defineStore({
  },
 });

-export function useEventStore(): any {
+export function useEventStore(): Recordable {
  return eventStore(store);
 }
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@ -27,10 +27,10 @@ interface LogState {
  services: Service[];
  instances: Instance[];
  endpoints: Endpoint[];
-  conditions: any;
-  selectorStore: any;
+  conditions: Recordable;
+  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);
 }
--- a/src/store/modules/network-profiling.ts
+++ b/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;
-      calls = data.calls.reduce((prev: (Call | any)[], next: Call | any) => {
+      const param = {} as Recordable;
+      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);
 }
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@ -162,10 +162,35 @@ export const profileStore = defineStore({
      }
      return res.data;
    },
-    async getSegmentSpans() {
-      this.analyzeTrees = [];
-      this.segmentSpans = this.currentSegment.spans;
-      this.currentSpan = this.currentSegment.spans[0] || {};
+    async getSegmentSpans(params: { segmentId: string }) {
+      if (!params.segmentId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      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);
 }
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@ -233,6 +233,6 @@ export const selectorStore = defineStore({
  },
 });

-export function useSelectorStore(): any {
+export function useSelectorStore(): Recordable {
  return selectorStore(store);
 }
--- a/src/store/modules/topology.ts
+++ b/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 nodes = [] as any;
+      const calls = [] as Call[];
+      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);
 }
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@ -31,9 +31,9 @@ interface TraceState {
  traceList: Trace[];
  traceSpans: Span[];
  currentTrace: Recordable<Trace>;
-  conditions: any;
-  traceSpanLogs: any[];
-  selectorStore: any;
+  conditions: Recordable;
+  traceSpanLogs: Recordable[];
+  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);
 }
--- a/src/types/global.d.ts
+++ b/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>;
--- a/src/views/dashboard/controls/Widget.vue
+++ b/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 });
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/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: {
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/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>
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@ -121,7 +121,7 @@ limitations under the License. -->
        copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
      }

-      async function changeTraceId(opt: Option[] | any) {
+      async function changeTraceId(opt: Option[]) {
        traceId.value = opt[0].value;
        loading.value = true;
        const res = await traceStore.getTraceSpans({ traceId: opt[0].value });
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@ -181,7 +181,7 @@ limitations under the License. -->
    return item;
  }
  function setCondition() {
-    let param: any = {
+    let param: Recordable = {
      traceState: state.status.value || "ALL",
      tags: tagsMap.value.length ? tagsMap.value : undefined,
      queryOrder: traceStore.conditions.queryOrder || QueryOrders[1].value,
@ -226,7 +226,7 @@ limitations under the License. -->
      ElMessage.error(res.errors);
    }
  }
-  function changeField(type: string, opt: any) {
+  function changeField(type: string, opt: Recordable) {
    state[type] = opt[0];
    if (type === "service") {
      getEndpoints(state.service.id);
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/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,
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@ -29,11 +29,11 @@ limitations under the License. -->
  import Header from "./Header.vue";
  import TraceList from "./TraceList.vue";
  import TraceDetail from "./Detail.vue";
-
-  /*global defineProps */
+  import type { LayoutConfig } from "@/types/dashboard";
+  /*global defineProps, Recordable */
  const props = defineProps({
    data: {
-      type: Object as PropType<any>,
+      type: Object as PropType<LayoutConfig | Recordable>,
      default: () => ({ graph: {} }),
    },
  });
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@ -98,7 +98,7 @@ limitations under the License. -->
    searchTrace();
  }

-  function changeSort(opt: Option[] | any) {
+  function changeSort(opt: Option[]) {
    traceStore.setTraceCondition({
      queryOrder: opt[0].value,
      paging: { pageNum: 1, pageSize: pageSize.value },
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@ -29,7 +29,7 @@ limitations under the License. -->
  import type { Span, Ref } from "@/types/trace";
  import SpanDetail from "./SpanDetail.vue";

-  /* global defineProps, Nullable, defineExpose*/
+  /* global defineProps, Nullable, defineExpose,Recordable*/
  const props = defineProps({
    data: { type: Array as PropType<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 segmentIdGroup: any = [];
+    const segmentGroup: Recordable = {};
+    const segmentIdGroup: Recordable = [];
    const fixSpans: Span[] = [];
    const segmentHeaders: Span[] = [];
    for (const span of props.data) {
@ -132,7 +132,7 @@ limitations under the License. -->
      if (span.refs.length) {
        span.refs.forEach((ref) => {
          const index = props.data.findIndex(
-            (i: any) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
+            (i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId,
          );
          if (index === -1) {
            // create a known broken node.
@ -206,7 +206,7 @@ limitations under the License. -->
    fixSpansSize.value = fixSpans.length;
    segmentIdGroup.forEach((id: string) => {
      const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId);
-      currentSegment.forEach((s: any) => {
+      currentSegment.forEach((s: Recordable) => {
        const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId);
        if (index !== -1) {
          if (
@ -233,7 +233,7 @@ limitations under the License. -->
      segmentGroup[id] = currentSegment[currentSegment.length - 1];
    });
    segmentIdGroup.forEach((id: string) => {
-      segmentGroup[id].refs.forEach((ref: any) => {
+      segmentGroup[id].refs.forEach((ref: Recordable) => {
        if (ref.traceId === props.traceId) {
          traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]);
        }
@ -244,11 +244,11 @@ limitations under the License. -->
        segmentId.value.push(segmentGroup[i]);
      }
    }
-    segmentId.value.forEach((i: any) => {
+    segmentId.value.forEach((i: Span | Recordable) => {
      collapse(i);
    });
  }
-  function collapse(d: Span) {
+  function collapse(d: Span | Recordable) {
    if (d.children) {
      const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId);
      let dur = d.endTime - d.startTime;
@ -263,7 +263,7 @@ limitations under the License. -->
    }
  }
  function compare(p: string) {
-    return (m: any, n: any) => {
+    return (m: Recordable, n: Recordable) => {
      const a = m[p];
      const b = n[p];
      return a - b;
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ 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,
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@ -34,7 +34,7 @@ limitations under the License. -->
  import type { Span } from "@/types/trace";
  import Graph from "./D3Graph/Index.vue";

-  /* global defineProps*/
+  /* global defineProps, Recordable*/
  const props = defineProps({
    data: { type: Array as PropType<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.height = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientHeight;
+    canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth;
+    canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight;
    context.fillStyle = "#fff";
    context.fillRect(0, 0, canvas.width, canvas.height);
    const image = new Image();
--- a/src/views/dashboard/related/trace/components/Statistics.vue
+++ b/src/views/dashboard/related/trace/components/Statistics.vue
@ -29,16 +29,16 @@ limitations under the License. -->
  import traceTable from "../utils/trace-table";
  import type { StatisticsSpan, Span, StatisticsGroupRef } from "@/types/trace";

-  /* global defineProps, defineEmits */
+  /* global defineProps, defineEmits, Recordable*/
  const props = defineProps({
-    data: { type: Array as PropType<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(() => {
--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@ -29,18 +29,18 @@ limitations under the License. -->
  import traceTable from "../../utils/trace-table";
  import type { Span } from "@/types/trace";

-  /* global defineProps, defineEmits */
+  /* global defineProps, defineEmits, Recordable */
  const props = defineProps({
-    data: { type: Array as PropType<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;
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@ -58,9 +58,9 @@ limitations under the License. -->
  import TableItem from "./TableItem.vue";
  import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";

-  /* global defineProps, Nullable, defineEmits */
+  /* global defineProps, Nullable, defineEmits, Recordable*/
  const props = defineProps({
-    tableData: { type: Array as PropType<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;
-    drag.onmousedown = (event: any) => {
+    const drag: Nullable<HTMLSpanElement> = dragger.value;
+    if (!drag) {
+      return;
+    }
+    drag.onmousedown = (event: MouseEvent) => {
      const diffX = event.clientX;
      const copy = method.value;
      document.onmousemove = (documentEvent) => {
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/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) {
-        const dom = event.composedPath().find((d: any) => d.className.includes("trace-item"));
+      function selectSpan(event: Recordable) {
+        const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item"));

        emit("select", props.data);
        if (props.headerType === "profile") {
@ -218,8 +219,8 @@ limitations under the License. -->
        }
        viewSpanDetail(dom);
      }
-      function viewSpan(event: any) {
-        const dom = event.composedPath().find((d: any) => d.className.includes("trace-item"));
+      function viewSpan(event: Recordable) {
+        const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item"));
        emit("select", props.data);
        viewSpanDetail(dom);
      }
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/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: any) => {
+      .html((d: Recordable) => {
        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;
    });
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@ -23,27 +23,27 @@ export default class TraceMap {
  private i = 0;
  private el: Nullable<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 body: any = null;
-  private tip: any = null;
-  private svg: any = null;
-  private treemap: any = null;
-  private data: any = null;
-  private row: any = null;
+  private topChild: Nullable<any>[] = [];
+  private body: Nullable<any> = null;
+  private tip: Nullable<any> = null;
+  private svg: Nullable<any> = null;
+  private treemap: Nullable<any> = null;
+  private data: Nullable<any> = null;
+  private row: Nullable<any> = null;
  private min = 0;
  private max = 0;
  private list: string[] = [];
-  private xScale: any = null;
-  private sequentialScale: any = null;
-  private root: any = null;
+  private xScale: Nullable<any> = null;
+  private sequentialScale: Nullable<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"))
-      .attr("stroke", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)))
+      .style("fill", (d: Recordable) =>
+        d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
+      )
+      .attr("stroke", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)))
      .attr("stroke-width", 2.5);

    nodeEnter
      .append("text")
      .attr("font-size", 11)
      .attr("dy", "-0.5em")
-      .attr("x", function (d: any) {
+      .attr("x", function (d: Recordable) {
        return d.children || d._children ? -45 : 15;
      })
-      .attr("text-anchor", function (d: any) {
+      .attr("text-anchor", function (d: Recordable) {
        return d.children || d._children ? "end" : "start";
      })
-      .text((d: any) =>
+      .text((d: Recordable) =>
        d.data.label.length > 19
          ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
          : (d.data.isError ? "◉ " : "") + d.data.label,
      )
-      .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
+      .style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17"));
    nodeEnter
      .append("text")
      .attr("class", "node-text")
-      .attr("x", function (d: any) {
+      .attr("x", function (d: Recordable) {
        return d.children || d._children ? -45 : 15;
      })
      .attr("dy", "1em")
      .attr("fill", "#bbb")
-      .attr("text-anchor", function (d: any) {
+      .attr("text-anchor", function (d: Recordable) {
        return d.children || d._children ? "end" : "start";
      })
      .style("font-size", "10px")
-      .text((d: any) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`);
+      .text(
+        (d: Recordable) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`,
+      );
    nodeEnter
      .append("rect")
      .attr("rx", 1)
      .attr("ry", 1)
      .attr("height", 2)
      .attr("width", 100)
-      .attr("x", function (d: any) {
+      .attr("x", function (d: Recordable) {
        return d.children || d._children ? "-110" : "10";
      })
      .attr("y", -1)
@ -265,11 +269,11 @@ export default class TraceMap {
      .attr("rx", 1)
      .attr("ry", 1)
      .attr("height", 2)
-      .attr("width", (d: any) => {
+      .attr("width", (d: Recordable) => {
        if (!d.data.endTime || !d.data.startTime) return 0;
        return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0;
      })
-      .attr("x", (d: any) => {
+      .attr("x", (d: Recordable) => {
        if (!d.data.endTime || !d.data.startTime) {
          return 0;
        }
@ -279,21 +283,23 @@ export default class TraceMap {
        return 10 + this.xScale(d.data.startTime - this.min);
      })
      .attr("y", -1)
-      .style("fill", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)));
+      .style("fill", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode)));
    const nodeUpdate = nodeEnter.merge(node);
    this.nodeUpdate = nodeUpdate;
    nodeUpdate
      .transition()
      .duration(600)
-      .attr("transform", function (d: any) {
+      .attr("transform", function (d: Recordable) {
        return "translate(" + d.y + "," + d.x + ")";
      });
    nodeUpdate
      .select("circle.node")
      .attr("r", 5)
-      .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff"))
+      .style("fill", (d: Recordable) =>
+        d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff",
+      )
      .attr("cursor", "pointer")
-      .on("click", (d: any) => {
+      .on("click", (d: Recordable) => {
        click(d);
      });
    const nodeExit = node
@ -332,7 +338,7 @@ export default class TraceMap {
    linkUpdate
      .transition()
      .duration(600)
-      .attr("d", function (d: any) {
+      .attr("d", function (d: Recordable) {
        return diagonal(d, d.parent);
      });
    link
@ -346,16 +352,16 @@ export default class TraceMap {
      .style("stroke-width", 1.5)
      .remove();

-    nodes.forEach(function (d: any) {
+    nodes.forEach(function (d: Recordable) {
      d.x0 = d.x;
      d.y0 = d.y;
    });
-    function diagonal(s: any, d: any) {
+    function diagonal(s: Recordable, d: Recordable) {
      return `M ${s.y} ${s.x}
      C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x},
      ${d.y} ${d.x}`;
    }
-    function click(d: any) {
+    function click(d: Recordable) {
      if (d.children) {
        d._children = d.children;
        d.children = null;
@ -399,11 +405,11 @@ export default class TraceMap {
      }
    });
  }
-  getZoomBehavior(g: any) {
+  getZoomBehavior(g: Recordable) {
    return d3
      .zoom()
      .scaleExtent([0.3, 10])
-      .on("zoom", (d: any) => {
+      .on("zoom", (d: Recordable) => {
        g.attr("transform", d3.zoomTransform(this.svg.node())).attr(
          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`,
        );
--- a/src/views/dashboard/related/trace/utils/trace-table.ts
+++ b/src/views/dashboard/related/trace/utils/trace-table.ts
@ -25,7 +25,7 @@ export default class TraceUtil {

  public static changeTree(data: Span[], currentTraceId: string) {
    const segmentIdList: Span[] = [];
-    const traceTreeRef: any = this.changeTreeCore(data);
+    const traceTreeRef: Recordable = this.changeTreeCore(data);
    traceTreeRef.segmentIdGroup.forEach((segmentId: string) => {
      if (traceTreeRef.segmentMap.get(segmentId).refs) {
        traceTreeRef.segmentMap.get(segmentId).refs.forEach((ref: Ref) => {
@ -79,7 +79,7 @@ export default class TraceUtil {
        segmentIdGroup: [],
      };
    }
-    const segmentGroup: any = {};
+    const segmentGroup: Recordable = {};
    const segmentMap: Map<string, Span> = new Map();
    const segmentIdGroup: string[] = [];
    const fixSpans: Span[] = [];