From 49a5481fb0ab78e9ab71aced704fdbc734179a3f Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 6 Apr 2023 21:50:57 +0800 Subject: [PATCH] types: optimize data types (#254) --- src/assets/img/icons.ts | 4 +- src/components/DateCalendar.vue | 6 +- src/components/Graph.vue | 4 +- src/components/SelectSingle.vue | 2 +- src/components/Selector.vue | 4 +- src/components/TimePicker.vue | 4 +- src/components/index.ts | 2 +- src/hooks/data.ts | 2 +- src/hooks/useAssociateProcessor.ts | 4 +- src/hooks/useBreakpoint.ts | 4 +- src/hooks/useDashboardsSession.ts | 2 +- src/hooks/useEcharts.ts | 2 +- src/hooks/useEventListener.ts | 2 +- src/hooks/useLegendProcessor.ts | 2 +- src/hooks/useListConfig.ts | 2 +- src/hooks/useMetricsProcessor.ts | 26 ++--- src/hooks/useTimeout.ts | 2 +- src/layout/components/NavBar.vue | 5 +- src/layout/components/SideBar.vue | 3 +- src/store/modules/alarm.ts | 4 +- src/store/modules/app.ts | 12 +- src/store/modules/dashboard.ts | 12 +- src/store/modules/demand-log.ts | 4 +- src/store/modules/ebpf.ts | 2 +- src/store/modules/event.ts | 2 +- src/store/modules/log.ts | 10 +- src/store/modules/network-profiling.ts | 11 +- src/store/modules/profile.ts | 35 +++++- src/store/modules/selectors.ts | 2 +- src/store/modules/topology.ts | 10 +- src/store/modules/trace.ts | 12 +- src/types/global.d.ts | 7 ++ src/views/dashboard/controls/Widget.vue | 2 +- src/views/dashboard/graphs/TopList.vue | 1 + .../related/topology/components/Graph.vue | 6 +- src/views/dashboard/related/trace/Detail.vue | 2 +- src/views/dashboard/related/trace/Filter.vue | 4 +- src/views/dashboard/related/trace/Header.vue | 5 +- src/views/dashboard/related/trace/Index.vue | 6 +- .../dashboard/related/trace/TraceList.vue | 2 +- .../trace/components/D3Graph/Index.vue | 28 ++--- .../trace/components/D3Graph/SpanDetail.vue | 6 +- .../related/trace/components/List.vue | 6 +- .../related/trace/components/Statistics.vue | 6 +- .../related/trace/components/Table/Index.vue | 10 +- .../trace/components/Table/TableContainer.vue | 13 ++- .../trace/components/Table/TableItem.vue | 11 +- .../related/trace/utils/d3-trace-list.ts | 53 ++++----- .../related/trace/utils/d3-trace-tree.ts | 106 +++++++++--------- .../related/trace/utils/trace-table.ts | 4 +- 50 files changed, 263 insertions(+), 213 deletions(-) diff --git a/src/assets/img/icons.ts b/src/assets/img/icons.ts index 56e10efb..73863741 100755 --- 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; } }); diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index c9fb6e02..f5d9bc4e 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -162,7 +162,7 @@ limitations under the License. --> import { computed, onMounted, watch, reactive } from "vue"; import type { PropType } from "vue"; import { useI18n } from "vue-i18n"; - /*global defineProps, defineEmits */ + /*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) => { diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 20ef1ea1..c4f0556d 100644 --- 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>(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, default: () => ({}), }, filters: { diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue index d7bc2d8f..37731451 100644 --- 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; } diff --git a/src/components/Selector.vue b/src/components/Selector.vue index d1141165..5c2d9ca6 100644 --- 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(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); diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index 6919b2b1..a69d3af9 100755 --- 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(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) => { diff --git a/src/components/index.ts b/src/components/index.ts index 8d8a5a96..607c7ce7 100644 --- 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, diff --git a/src/hooks/data.ts b/src/hooks/data.ts index a6955f51..0484aca0 100644 --- 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 { diff --git a/src/hooks/useAssociateProcessor.ts b/src/hooks/useAssociateProcessor.ts index bf9cf37c..a1bac26d 100644 --- 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, diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts index 26c55ca5..fb998541 100644 --- 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.XL || ""); const realWidthRef = ref(window.innerWidth); diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts index 5f9cf975..a51a25f2 100644 --- 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 = document.querySelector(".ds-main"); if (w && layout) { diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index a9772e55..cc28c467 100644 --- 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, theme: "light" | "dark" | "default" = "default"): any { +export function useECharts(elRef: Ref, theme: "light" | "dark" | "default" = "default"): Indexable { const getDarkMode = computed(() => { return theme === "default" ? "light" : theme; }); diff --git a/src/hooks/useEventListener.ts b/src/hooks/useEventListener.ts index 3b8f112f..467b62ff 100644 --- 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 | Window | any; + el?: Element | Ref | Window | Recordable; name: string; listener: EventListener; options?: boolean | AddEventListenerOptions; diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts index 58ab6172..11c4e4b4 100644 --- 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()) { diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts index 61b09248..8c199a07 100644 --- 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; diff --git a/src/hooks/useMetricsProcessor.ts b/src/hooks/useMetricsProcessor.ts index 75190861..dbea34bf 100644 --- 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, + 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, - 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; diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts index c66bce31..f70656a7 100644 --- a/src/hooks/useTimeout.ts +++ b/src/hooks/useTimeout.ts @@ -38,7 +38,7 @@ export function useTimeoutFn(handle: Fn, wait: number, native = false): any return { readyRef, stop, start }; } -export function useTimeoutRef(wait: number): any { +export function useTimeoutRef(wait: number) { const readyRef = ref(false); let timer: TimeoutHandle; diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index ed12ee10..7615294e 100644 --- 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); diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue index 9336687a..0ad4655a 100644 --- 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(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() { diff --git a/src/store/modules/alarm.ts b/src/store/modules/alarm.ts index 4550a96b..c97acb87 100644 --- a/src/store/modules/alarm.ts +++ b/src/store/modules/alarm.ts @@ -34,7 +34,7 @@ export const alarmStore = defineStore({ total: 0, }), actions: { - async getAlarms(params: any) { + async getAlarms(params: Recordable) { const res: AxiosResponse = await graphql.query("queryAlarms").params(params); if (res.data.errors) { return res.data; @@ -48,6 +48,6 @@ export const alarmStore = defineStore({ }, }); -export function useAlarmStore(): any { +export function useAlarmStore(): Recordable { return alarmStore(store); } diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index f55853df..2065a163 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -24,17 +24,17 @@ import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat"; import { TimeType } from "@/constants/data"; /*global Nullable*/ interface AppState { - durationRow: any; + durationRow: Recordable; utc: string; utcHour: number; utcMin: number; eventStack: (() => unknown)[]; - timer: Nullable; + timer: Nullable; autoRefresh: boolean; pageTitle: string; version: string; isMobile: boolean; - reloadTimer: Nullable; + reloadTimer: Nullable; } export const appStore = defineStore({ @@ -152,7 +152,7 @@ export const appStore = defineStore({ } this.timer = setTimeout( () => - this.eventStack.forEach((event: any) => { + this.eventStack.forEach((event: Function) => { setTimeout(event(), 0); }), 500, @@ -179,11 +179,11 @@ export const appStore = defineStore({ this.version = res.data.data.version; return res.data; }, - setReloadTimer(timer: any): void { + setReloadTimer(timer: IntervalHandle) { this.reloadTimer = timer; }, }, }); -export function useAppStoreWithOut(): any { +export function useAppStoreWithOut(): Recordable { return appStore(store); } diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 52dc62c2..47051f30 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -33,7 +33,7 @@ interface DashboardState { entity: string; layerId: string; activedGridItem: string; - selectorStore: any; + selectorStore: Recordable; showTopology: boolean; currentTabItems: LayoutConfig[]; dashboards: DashboardItem[]; @@ -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); } diff --git a/src/store/modules/demand-log.ts b/src/store/modules/demand-log.ts index 1776fa81..1ac5481d 100644 --- 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); } diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index 5e09902d..7bc26a46 100644 --- 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); } diff --git a/src/store/modules/event.ts b/src/store/modules/event.ts index 5b2c097e..e1948cce 100644 --- 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); } diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts index 3509084b..f2e222de 100644 --- 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); } diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts index f3648345..071bfa57 100644 --- 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>; @@ -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); } diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts index 780629b0..f1bbf59a 100644 --- 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); } diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 580aba7f..74d62399 100644 --- 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); } diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 2a4fbb8e..50bae018 100644 --- 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); } diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index ea6f91f3..0b860130 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -31,9 +31,9 @@ interface TraceState { traceList: Trace[]; traceSpans: Span[]; currentTrace: Recordable; - 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) { @@ -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); } diff --git a/src/types/global.d.ts b/src/types/global.d.ts index eb18a953..fb131d41 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -49,7 +49,9 @@ declare global { declare type Nullable = T | null; declare type NonNullable = T extends null | undefined ? never : T; + // String type object declare type Recordable = Record; + // Object of read-only string type declare type ReadonlyRecordable = { readonly [key: string]: T; }; @@ -108,6 +110,11 @@ declare global { } } } +type AnyNormalFunction = (...arg: any) => any; + +type AnyPromiseFunction = (...arg: any) => PromiseLike; + +declare type AnyFunction = AnyNormalFunction | AnyPromiseFunction; declare module "vue" { export type JSXComponent = { new (): ComponentPublicInstance } | FunctionalComponent; diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index afab6592..d52ebc96 100644 --- 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 }); diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue index b03c5d57..1da016ed 100644 --- 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: { diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 61544d8d..3382af85 100644 --- 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('-', '')]" /> - + {{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }} diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue index 424917df..cdaf111c 100644 --- a/src/views/dashboard/related/trace/Detail.vue +++ b/src/views/dashboard/related/trace/Detail.vue @@ -121,7 +121,7 @@ limitations under the License. --> copy(traceId.value || traceStore.currentTrace.traceIds[0].value); } - async function changeTraceId(opt: Option[] | any) { + async function changeTraceId(opt: Option[]) { traceId.value = opt[0].value; loading.value = true; const res = await traceStore.getTraceSpans({ traceId: opt[0].value }); diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue index dcf2749e..17b30b57 100644 --- a/src/views/dashboard/related/trace/Filter.vue +++ b/src/views/dashboard/related/trace/Filter.vue @@ -181,7 +181,7 @@ limitations under the License. --> return item; } function setCondition() { - let param: any = { + let param: Recordable = { traceState: state.status.value || "ALL", tags: tagsMap.value.length ? tagsMap.value : undefined, queryOrder: traceStore.conditions.queryOrder || QueryOrders[1].value, @@ -226,7 +226,7 @@ limitations under the License. --> ElMessage.error(res.errors); } } - function changeField(type: string, opt: any) { + function changeField(type: string, opt: Recordable) { state[type] = opt[0]; if (type === "service") { getEndpoints(state.service.id); diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue index 340aa402..f11865b4 100644 --- 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, + type: Object as PropType, 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, diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue index 7c2493d7..0d2e31c2 100644 --- a/src/views/dashboard/related/trace/Index.vue +++ b/src/views/dashboard/related/trace/Index.vue @@ -29,11 +29,11 @@ limitations under the License. --> import Header from "./Header.vue"; import TraceList from "./TraceList.vue"; import TraceDetail from "./Detail.vue"; - - /*global defineProps */ + import type { LayoutConfig } from "@/types/dashboard"; + /*global defineProps, Recordable */ const props = defineProps({ data: { - type: Object as PropType, + type: Object as PropType, default: () => ({ graph: {} }), }, }); diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue index b0ce2eb0..d64e2d3f 100644 --- a/src/views/dashboard/related/trace/TraceList.vue +++ b/src/views/dashboard/related/trace/TraceList.vue @@ -98,7 +98,7 @@ limitations under the License. --> searchTrace(); } - function changeSort(opt: Option[] | any) { + function changeSort(opt: Option[]) { traceStore.setTraceCondition({ queryOrder: opt[0].value, paging: { pageNum: 1, pageSize: pageSize.value }, diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index 07a6db78..0f9e8f21 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -29,7 +29,7 @@ limitations under the License. --> import type { Span, Ref } from "@/types/trace"; import SpanDetail from "./SpanDetail.vue"; - /* global defineProps, Nullable, defineExpose*/ + /* global defineProps, Nullable, defineExpose,Recordable*/ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, @@ -38,10 +38,10 @@ limitations under the License. --> const loading = ref(false); const showDetail = ref(false); const fixSpansSize = ref(0); - const segmentId = ref([]); + const segmentId = ref([]); const currentSpan = ref>([]); const refSpans = ref>([]); - const tree = ref(null); + const tree = ref>(null); const traceGraph = ref>(null); defineExpose({ tree, @@ -67,11 +67,11 @@ limitations under the License. --> function resize() { tree.value.resize(); } - function handleSelectSpan(i: any) { + function handleSelectSpan(i: Recordable) { currentSpan.value = i.data; showDetail.value = true; } - function traverseTree(node: any, spanId: string, segmentId: string, data: any) { + function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) { if (!node || node.isBroken) { return; } @@ -80,7 +80,7 @@ limitations under the License. --> return; } if (node.children && node.children.length > 0) { - node.children.forEach((nodeItem: any) => { + node.children.forEach((nodeItem: Recordable) => { traverseTree(nodeItem, spanId, segmentId, data); }); } @@ -90,8 +90,8 @@ limitations under the License. --> return []; } segmentId.value = []; - const segmentGroup: any = {}; - const segmentIdGroup: any = []; + const segmentGroup: Recordable = {}; + const segmentIdGroup: Recordable = []; const fixSpans: Span[] = []; const segmentHeaders: Span[] = []; for (const span of props.data) { @@ -132,7 +132,7 @@ limitations under the License. --> if (span.refs.length) { span.refs.forEach((ref) => { const index = props.data.findIndex( - (i: any) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, + (i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, ); if (index === -1) { // create a known broken node. @@ -206,7 +206,7 @@ limitations under the License. --> fixSpansSize.value = fixSpans.length; segmentIdGroup.forEach((id: string) => { const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId); - currentSegment.forEach((s: any) => { + currentSegment.forEach((s: Recordable) => { const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId); if (index !== -1) { if ( @@ -233,7 +233,7 @@ limitations under the License. --> segmentGroup[id] = currentSegment[currentSegment.length - 1]; }); segmentIdGroup.forEach((id: string) => { - segmentGroup[id].refs.forEach((ref: any) => { + segmentGroup[id].refs.forEach((ref: Recordable) => { if (ref.traceId === props.traceId) { traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]); } @@ -244,11 +244,11 @@ limitations under the License. --> segmentId.value.push(segmentGroup[i]); } } - segmentId.value.forEach((i: any) => { + segmentId.value.forEach((i: Span | Recordable) => { collapse(i); }); } - function collapse(d: Span) { + function collapse(d: Span | Recordable) { if (d.children) { const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId); let dur = d.endTime - d.startTime; @@ -263,7 +263,7 @@ limitations under the License. --> } } function compare(p: string) { - return (m: any, n: any) => { + return (m: Recordable, n: Recordable) => { const a = m[p]; const b = n[p]; return a - b; diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue index ee813dd1..83bce1bf 100644 --- 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, default: () => ({}) }, + currentSpan: { type: Object as PropType, default: () => ({}) }, }); const { t } = useI18n(); const traceStore = useTraceStore(); const pageNum = ref(1); const showRelatedLogs = ref(false); const showEventDetail = ref(false); - const currentEvent = ref({}); + const currentEvent = ref({}); const pageSize = 10; const total = computed(() => traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value, diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue index 81b05684..20f072e2 100644 --- a/src/views/dashboard/related/trace/components/List.vue +++ b/src/views/dashboard/related/trace/components/List.vue @@ -34,7 +34,7 @@ limitations under the License. --> import type { Span } from "@/types/trace"; import Graph from "./D3Graph/Index.vue"; - /* global defineProps*/ + /* global defineProps, Recordable*/ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, @@ -56,8 +56,8 @@ limitations under the License. --> const source = `\r\n${serializer.serializeToString(svgNode)}`; const canvas = document.createElement("canvas"); const context: any = canvas.getContext("2d"); - canvas.width = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientWidth; - canvas.height = (d3.select(".trace-list-dowanload") as any)._groups[0][0].clientHeight; + canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth; + canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight; context.fillStyle = "#fff"; context.fillRect(0, 0, canvas.width, canvas.height); const image = new Image(); diff --git a/src/views/dashboard/related/trace/components/Statistics.vue b/src/views/dashboard/related/trace/components/Statistics.vue index 1666afc7..00468abe 100644 --- a/src/views/dashboard/related/trace/components/Statistics.vue +++ b/src/views/dashboard/related/trace/components/Statistics.vue @@ -29,16 +29,16 @@ limitations under the License. --> import traceTable from "../utils/trace-table"; import type { StatisticsSpan, Span, StatisticsGroupRef } from "@/types/trace"; - /* global defineProps, defineEmits */ + /* global defineProps, defineEmits, Recordable*/ const props = defineProps({ - data: { type: Array as PropType, default: () => [] }, + data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, showBtnDetail: { type: Boolean, default: false }, HeaderType: { type: String, default: "" }, }); const emit = defineEmits(["load"]); const loading = ref(true); - const tableData = ref([]); + const tableData = ref([]); const list = ref([]); onMounted(() => { diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue index c1b1b7ce..9d16a758 100644 --- a/src/views/dashboard/related/trace/components/Table/Index.vue +++ b/src/views/dashboard/related/trace/components/Table/Index.vue @@ -29,18 +29,18 @@ limitations under the License. --> import traceTable from "../../utils/trace-table"; import type { Span } from "@/types/trace"; - /* global defineProps, defineEmits */ + /* global defineProps, defineEmits, Recordable */ const props = defineProps({ - data: { type: Array as PropType, default: () => [] }, + data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, showBtnDetail: { type: Boolean, default: false }, headerType: { type: String, default: "" }, }); const emit = defineEmits(["select", "view", "load"]); const loading = ref(true); - const tableData = ref([]); + const tableData = ref([]); const showDetail = ref(false); - const currentSpan = ref({}); + const currentSpan = ref({}); onMounted(() => { tableData.value = formatData(traceTable.changeTree(props.data, props.traceId)); @@ -50,7 +50,7 @@ limitations under the License. --> }); }); - function formatData(arr: any[], level = 1, totalExec?: number) { + function formatData(arr: Recordable[], level = 1, totalExec?: number) { for (const item of arr) { item.level = level; totalExec = totalExec || item.endTime - item.startTime; diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue index 6a79b1a7..b3688a3f 100644 --- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue +++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue @@ -58,9 +58,9 @@ limitations under the License. --> import TableItem from "./TableItem.vue"; import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data"; - /* global defineProps, Nullable, defineEmits */ + /* global defineProps, Nullable, defineEmits, Recordable*/ const props = defineProps({ - tableData: { type: Array as PropType, default: () => [] }, + tableData: { type: Array as PropType, default: () => [] }, type: { type: String, default: "" }, headerType: { type: String, default: "" }, }); @@ -69,7 +69,7 @@ limitations under the License. --> const componentKey = ref(300); const flag = ref(true); const dragger = ref>(null); - let headerData: any[] = TraceConstant; + let headerData: Recordable[] = TraceConstant; if (props.headerType === "profile") { headerData = ProfileConstant; @@ -81,8 +81,11 @@ limitations under the License. --> if (props.type === "statistics") { return; } - const drag: any = dragger.value; - drag.onmousedown = (event: any) => { + const drag: Nullable = dragger.value; + if (!drag) { + return; + } + drag.onmousedown = (event: MouseEvent) => { const diffX = event.clientX; const copy = method.value; document.onmousemove = (documentEvent) => { diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index 5b84559e..fcc3e89e 100644 --- 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, default: () => ({}) }, + data: { type: Object as PropType, 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); } diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts index 2f1196b6..3b06104d 100644 --- 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 `
${d.data.label}
${d.data.dur ? '
SelfDuration: ' + d.data.dur + "ms
" : ""} @@ -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; }); diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts index b6e03b2e..4f5563f3 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts @@ -23,27 +23,27 @@ export default class TraceMap { private i = 0; private el: Nullable = null; private handleSelectSpan: Nullable<(i: Trace) => void> = null; - private topSlow: any = []; + private topSlow: Nullable = []; private height = 0; private width = 0; - private topChild: any[] = []; - private body: any = null; - private tip: any = null; - private svg: any = null; - private treemap: any = null; - private data: any = null; - private row: any = null; + private topChild: Nullable[] = []; + private body: Nullable = null; + private tip: Nullable = null; + private svg: Nullable = null; + private treemap: Nullable = null; + private data: Nullable = null; + private row: Nullable = null; private min = 0; private max = 0; private list: string[] = []; - private xScale: any = null; - private sequentialScale: any = null; - private root: any = null; + private xScale: Nullable = null; + private sequentialScale: Nullable = null; + private root: Nullable = null; private topSlowMax: number[] = []; private topSlowMin: number[] = []; private topChildMax: number[] = []; private topChildMin: number[] = []; - private nodeUpdate: any = null; + private nodeUpdate: Nullable = null; constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) { this.el = el; @@ -63,7 +63,7 @@ export default class TraceMap { .attr("class", "d3-tip") .offset([-8, 0]) .html( - (d: any) => ` + (d: Recordable) => `
${d.data.label}
${d.data.dur ? '
SelfDuration: ' + d.data.dur + "ms
" : ""} ${ @@ -87,7 +87,7 @@ export default class TraceMap { const transform = d3.zoomTransform(this.body).translate(0, 0); d3.zoom().transform(this.body, transform); } - init(data: any, row: any) { + init(data: Recordable, row: Recordable) { this.treemap = d3.tree().size([row.length * 35, this.width]); this.row = row; this.data = data; @@ -114,10 +114,10 @@ export default class TraceMap { this.topChildMin = this.topChild.sort((a: number, b: number) => b - a)[4]; this.update(this.root); // Collapse the node and all it's children - function collapse(d: any) { + function collapse(d: Recordable) { if (d.children) { let dur = d.data.endTime - d.data.startTime; - d.children.forEach((i: any) => { + d.children.forEach((i: Recordable) => { dur -= i.data.endTime - i.data.startTime; }); d.dur = dur < 0 ? 0 : dur; @@ -131,17 +131,17 @@ export default class TraceMap { draw() { this.update(this.root); } - update(source: any) { + update(source: Recordable) { const that: any = this; const treeData = this.treemap(this.root); const nodes = treeData.descendants(), links = treeData.descendants().slice(1); - nodes.forEach(function (d: any) { + nodes.forEach(function (d: Recordable) { d.y = d.depth * 140; }); - const node = this.svg.selectAll("g.node").data(nodes, (d: any) => { + const node = this.svg.selectAll("g.node").data(nodes, (d: Recordable) => { return d.id || (d.id = ++this.i); }); @@ -153,39 +153,39 @@ export default class TraceMap { .attr("transform", function () { return "translate(" + source.y0 + "," + source.x0 + ")"; }) - .on("mouseover", function (event: any, d: any) { + .on("mouseover", function (event: MouseEvent, d: Recordable) { that.tip.show(d, this); if (!that.timeUpdate) { return; } - const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1); + const _node = that.timeUpdate._groups[0].filter((group: Recordable) => group.__data__.id === that.i + 1); if (_node.length) { that.timeTip.show(d, _node[0].children[1]); } }) - .on("mouseout", function (event: any, d: any) { + .on("mouseout", function (event: MouseEvent, d: Recordable) { that.tip.hide(d, this); if (!that.timeUpdate) { return; } - const _node = that.timeUpdate._groups[0].filter((group: any) => group.__data__.id === that.i + 1); + const _node = that.timeUpdate._groups[0].filter((group: Recordable) => group.__data__.id === that.i + 1); if (_node.length) { that.timeTip.hide(d, _node[0].children[1]); } }) - .on("click", function (event: any, d: any) { + .on("click", function (event: MouseEvent, d: Recordable) { that.handleSelectSpan(d); }); nodeEnter .append("circle") .attr("r", 8) .attr("cy", "-12") - .attr("cx", function (d: any) { + .attr("cx", function (d: Recordable) { return d.children || d._children ? -15 : 110; }) .attr("fill", "none") .attr("stroke", "#e66") - .style("opacity", (d: any) => { + .style("opacity", (d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return 0.5; @@ -195,7 +195,7 @@ export default class TraceMap { }); nodeEnter .append("text") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { const events = d.data.attachedEvents || []; let p = d.children || d._children ? -18 : 107; p = events.length > 9 ? p - 2 : p; @@ -204,7 +204,7 @@ export default class TraceMap { .attr("dy", "-0.8em") .attr("fill", "#e66") .style("font-size", "10px") - .text((d: any) => { + .text((d: Recordable) => { const events = d.data.attachedEvents; if (events && events.length) { return `${events.length}`; @@ -216,46 +216,50 @@ export default class TraceMap { .append("circle") .attr("class", "node") .attr("r", 1e-6) - .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff")) - .attr("stroke", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) + .style("fill", (d: Recordable) => + d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", + ) + .attr("stroke", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) .attr("stroke-width", 2.5); nodeEnter .append("text") .attr("font-size", 11) .attr("dy", "-0.5em") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? -45 : 15; }) - .attr("text-anchor", function (d: any) { + .attr("text-anchor", function (d: Recordable) { return d.children || d._children ? "end" : "start"; }) - .text((d: any) => + .text((d: Recordable) => d.data.label.length > 19 ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..." : (d.data.isError ? "◉ " : "") + d.data.label, ) - .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17")); + .style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17")); nodeEnter .append("text") .attr("class", "node-text") - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? -45 : 15; }) .attr("dy", "1em") .attr("fill", "#bbb") - .attr("text-anchor", function (d: any) { + .attr("text-anchor", function (d: Recordable) { return d.children || d._children ? "end" : "start"; }) .style("font-size", "10px") - .text((d: any) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`); + .text( + (d: Recordable) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`, + ); nodeEnter .append("rect") .attr("rx", 1) .attr("ry", 1) .attr("height", 2) .attr("width", 100) - .attr("x", function (d: any) { + .attr("x", function (d: Recordable) { return d.children || d._children ? "-110" : "10"; }) .attr("y", -1) @@ -265,11 +269,11 @@ export default class TraceMap { .attr("rx", 1) .attr("ry", 1) .attr("height", 2) - .attr("width", (d: any) => { + .attr("width", (d: Recordable) => { if (!d.data.endTime || !d.data.startTime) return 0; return this.xScale(d.data.endTime - d.data.startTime) + 1 || 0; }) - .attr("x", (d: any) => { + .attr("x", (d: Recordable) => { if (!d.data.endTime || !d.data.startTime) { return 0; } @@ -279,21 +283,23 @@ export default class TraceMap { return 10 + this.xScale(d.data.startTime - this.min); }) .attr("y", -1) - .style("fill", (d: any) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))); + .style("fill", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))); const nodeUpdate = nodeEnter.merge(node); this.nodeUpdate = nodeUpdate; nodeUpdate .transition() .duration(600) - .attr("transform", function (d: any) { + .attr("transform", function (d: Recordable) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate .select("circle.node") .attr("r", 5) - .style("fill", (d: any) => (d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff")) + .style("fill", (d: Recordable) => + d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", + ) .attr("cursor", "pointer") - .on("click", (d: any) => { + .on("click", (d: Recordable) => { click(d); }); const nodeExit = node @@ -332,7 +338,7 @@ export default class TraceMap { linkUpdate .transition() .duration(600) - .attr("d", function (d: any) { + .attr("d", function (d: Recordable) { return diagonal(d, d.parent); }); link @@ -346,16 +352,16 @@ export default class TraceMap { .style("stroke-width", 1.5) .remove(); - nodes.forEach(function (d: any) { + nodes.forEach(function (d: Recordable) { d.x0 = d.x; d.y0 = d.y; }); - function diagonal(s: any, d: any) { + function diagonal(s: Recordable, d: Recordable) { return `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}`; } - function click(d: any) { + function click(d: Recordable) { if (d.children) { d._children = d.children; d.children = null; @@ -399,11 +405,11 @@ export default class TraceMap { } }); } - getZoomBehavior(g: any) { + getZoomBehavior(g: Recordable) { return d3 .zoom() .scaleExtent([0.3, 10]) - .on("zoom", (d: any) => { + .on("zoom", (d: Recordable) => { g.attr("transform", d3.zoomTransform(this.svg.node())).attr( `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`, ); diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts index 8d500aac..c08b6992 100644 --- a/src/views/dashboard/related/trace/utils/trace-table.ts +++ b/src/views/dashboard/related/trace/utils/trace-table.ts @@ -25,7 +25,7 @@ export default class TraceUtil { public static changeTree(data: Span[], currentTraceId: string) { const segmentIdList: Span[] = []; - const traceTreeRef: any = this.changeTreeCore(data); + const traceTreeRef: Recordable = this.changeTreeCore(data); traceTreeRef.segmentIdGroup.forEach((segmentId: string) => { if (traceTreeRef.segmentMap.get(segmentId).refs) { traceTreeRef.segmentMap.get(segmentId).refs.forEach((ref: Ref) => { @@ -79,7 +79,7 @@ export default class TraceUtil { segmentIdGroup: [], }; } - const segmentGroup: any = {}; + const segmentGroup: Recordable = {}; const segmentMap: Map = new Map(); const segmentIdGroup: string[] = []; const fixSpans: Span[] = [];