You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2023/04/06 13:51:03 UTC
[skywalking-booster-ui] branch main updated: types: optimize data types (#254)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 49a5481 types: optimize data types (#254)
49a5481 is described below
commit 49a5481fb0ab78e9ab71aced704fdbc734179a3f
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Thu Apr 6 21:50:57 2023 +0800
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 +-
src/views/dashboard/related/trace/TraceList.vue | 2 +-
.../related/trace/components/D3Graph/Index.vue | 28 +++---
.../trace/components/D3Graph/SpanDetail.vue | 6 +-
.../dashboard/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 ++-
.../related/trace/components/Table/TableItem.vue | 11 ++-
.../dashboard/related/trace/utils/d3-trace-list.ts | 53 ++++++-----
.../dashboard/related/trace/utils/d3-trace-tree.ts | 106 +++++++++++----------
.../dashboard/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 56e10ef..7386374 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 c9fb6e0..f5d9bc4 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 20ef1ea..c4f0556 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<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: {
diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index d7bc2d8..3773145 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 d114116..5c2d9ca 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<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);
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 6919b2b..a69d3af 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<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) => {
diff --git a/src/components/index.ts b/src/components/index.ts
index 8d8a5a9..607c7ce 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 a6955f5..0484aca 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 bf9cf37..a1bac26 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 26c55ca..fb99854 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>(sizeEnum.XL || "");
const realWidthRef = ref(window.innerWidth);
diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts
index 5f9cf97..a51a25f 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<Element> = document.querySelector(".ds-main");
if (w && layout) {
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index a9772e5..cc28c46 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<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;
});
diff --git a/src/hooks/useEventListener.ts b/src/hooks/useEventListener.ts
index 3b8f112..467b62f 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<Element | undefined> | Window | any;
+ el?: Element | Ref<Element | undefined> | Window | Recordable;
name: string;
listener: EventListener;
options?: boolean | AddEventListenerOptions;
diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts
index 58ab617..11c4e4b 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 61b0924..8c199a0 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 7519086..dbea34b 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<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;
diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts
index c66bce3..f70656a 100644
--- 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;
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index ed12ee1..7615294 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 9336687..0ad4655 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>(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 4550a96..c97acb8 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 f55853d..2065a16 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<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);
}
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 52dc62c..47051f3 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 1776fa8..1ac5481 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 5e09902..7bc26a4 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 5b2c097..e1948cc 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 3509084..f2e222d 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 f364834..071bfa5 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<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);
}
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index 780629b..f1bbf59 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 580aba7..74d6239 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 2a4fbb8..50bae01 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 ea6f91f..0b86013 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<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);
}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index eb18a95..fb131d4 100644
--- 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>;
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index afab659..d52ebc9 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 b03c5d5..1da016e 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 61544d8..3382af8 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('-', '')]"
/>
- <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>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 424917d..cdaf111 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 dcf2749..17b30b5 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 340aa40..f11865b 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<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,
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 7c2493d..0d2e31c 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<any>,
+ type: Object as PropType<LayoutConfig | Recordable>,
default: () => ({ graph: {} }),
},
});
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index b0ce2eb..d64e2d3 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 07a6db7..0f9e8f2 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<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;
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index ee813dd..83bce1b 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<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,
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index 81b0568..20f072e 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<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();
diff --git a/src/views/dashboard/related/trace/components/Statistics.vue b/src/views/dashboard/related/trace/components/Statistics.vue
index 1666afc..00468ab 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<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(() => {
diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue
index c1b1b7c..9d16a75 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<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;
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index 6a79b1a..b3688a3 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<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) => {
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 5b84559..fcc3e89 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<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);
}
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 2f1196b..3b06104 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 `
<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;
});
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 b6e03b2..4f5563f 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<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})`,
);
diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts
index 8d500aa..c08b699 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<string, Span> = new Map();
const segmentIdGroup: string[] = [];
const fixSpans: Span[] = [];