From dd90ab5ea7bfe18901bc98d4fef28d4dfe705ea8 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Sun, 28 Sep 2025 19:01:23 +0800 Subject: [PATCH] feat: adapt new trace protocol and implement new trace view (#499) --- src/assets/icons/download.svg | 17 + src/components/TimePicker.vue | 3 + src/graphql/fragments/trace.ts | 70 ++++ src/graphql/http/index.ts | 42 +- src/graphql/query/trace.ts | 14 +- src/layout/components/NavBar.vue | 6 +- src/layout/components/SideBar.vue | 2 +- src/locales/lang/en.ts | 8 +- src/locales/lang/es.ts | 6 + src/locales/lang/zh.ts | 6 + src/store/modules/trace.ts | 98 ++++- src/styles/lib.scss | 27 +- src/styles/theme.scss | 12 +- src/types/trace.ts | 7 + src/utils/color.ts | 70 ++++ src/utils/file.ts | 23 +- src/views/dashboard/List.vue | 4 +- src/views/dashboard/controls/Trace.vue | 140 +------ src/views/dashboard/data.ts | 2 +- .../related/async-profiling/Content.vue | 2 +- .../related/profile/components/SpanTree.vue | 4 +- src/views/dashboard/related/trace/Content.vue | 193 +++++++++ src/views/dashboard/related/trace/Index.vue | 30 +- .../trace/components/D3Graph/Index.vue | 389 ++++++------------ .../trace/components/D3Graph/SpanDetail.vue | 20 +- .../D3Graph}/utils/d3-trace-list.ts | 160 ++++--- .../D3Graph}/utils/d3-trace-tree.ts | 75 ++-- .../trace/components/D3Graph/utils/helper.ts | 281 +++++++++++++ .../D3Graph}/utils/trace-table.ts | 0 .../trace/components/Table/TableContainer.vue | 67 ++- .../trace/components/Table/TableItem.vue | 281 +++++++------ .../related/trace/components/Table/data.ts | 6 +- .../{ => components/TraceList}/Filter.vue | 135 +++--- .../TraceList/SearchBar.vue} | 2 +- .../TraceList/SegmentList.vue} | 6 +- .../TraceList/SpanList.vue} | 73 ++-- .../trace/components/TraceQuery/Index.vue | 47 +++ .../components/TraceQuery/MinTimeline.vue | 107 +++++ .../TraceQuery/MinTimelineMarker.vue | 57 +++ .../TraceQuery/MinTimelineOverlay.vue | 147 +++++++ .../TraceQuery/MinTimelineSelector.vue | 157 +++++++ .../trace/components/TraceQuery/SpanNode.vue | 120 ++++++ .../components/TraceQuery/TimelineTool.vue | 59 +++ .../components/TraceQuery/TraceContent.vue | 175 ++++++++ .../components/TraceQuery/TracesTable.vue | 379 +++++++++++++++++ .../trace/components/TraceQuery/useHooks.ts | 128 ++++++ .../trace/components/{ => VisGraph}/List.vue | 50 +-- .../components/{ => VisGraph}/Statistics.vue | 36 +- .../trace/components/{ => VisGraph}/Table.vue | 32 +- .../trace/components/{ => VisGraph}/Tree.vue | 45 +- .../components/{ => VisGraph}/constant.ts | 6 + .../trace/components/{ => VisGraph}/index.ts | 0 52 files changed, 2889 insertions(+), 937 deletions(-) create mode 100644 src/assets/icons/download.svg create mode 100644 src/utils/color.ts create mode 100644 src/views/dashboard/related/trace/Content.vue rename src/views/dashboard/related/trace/{ => components/D3Graph}/utils/d3-trace-list.ts (73%) rename src/views/dashboard/related/trace/{ => components/D3Graph}/utils/d3-trace-tree.ts (87%) create mode 100644 src/views/dashboard/related/trace/components/D3Graph/utils/helper.ts rename src/views/dashboard/related/trace/{ => components/D3Graph}/utils/trace-table.ts (100%) rename src/views/dashboard/related/trace/{ => components/TraceList}/Filter.vue (77%) rename src/views/dashboard/related/trace/{Header.vue => components/TraceList/SearchBar.vue} (99%) rename src/views/dashboard/related/trace/{TraceList.vue => components/TraceList/SegmentList.vue} (97%) rename src/views/dashboard/related/trace/{Detail.vue => components/TraceList/SpanList.vue} (78%) create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/Index.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/MinTimeline.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/MinTimelineMarker.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/MinTimelineOverlay.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/MinTimelineSelector.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/SpanNode.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/TimelineTool.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/TraceContent.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/TracesTable.vue create mode 100644 src/views/dashboard/related/trace/components/TraceQuery/useHooks.ts rename src/views/dashboard/related/trace/components/{ => VisGraph}/List.vue (73%) rename src/views/dashboard/related/trace/components/{ => VisGraph}/Statistics.vue (82%) rename src/views/dashboard/related/trace/components/{ => VisGraph}/Table.vue (65%) rename src/views/dashboard/related/trace/components/{ => VisGraph}/Tree.vue (76%) rename src/views/dashboard/related/trace/components/{ => VisGraph}/constant.ts (75%) rename src/views/dashboard/related/trace/components/{ => VisGraph}/index.ts (100%) diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 00000000..6c138a32 --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue index 422d0644..c762e021 100755 --- a/src/components/TimePicker.vue +++ b/src/components/TimePicker.vue @@ -310,6 +310,9 @@ limitations under the License. --> break; } dates.value = [start, end]; + if (!props.showButtons) { + ok(true); + } }; const submit = () => { inputDates.value = dates.value; diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts index 58c28f30..0aac354d 100644 --- a/src/graphql/fragments/trace.ts +++ b/src/graphql/fragments/trace.ts @@ -163,3 +163,73 @@ export const TraceSpansFromColdStage = { } `, }; +export const HasQueryTracesV2Support = { + query: ` + hasQueryTracesV2Support + `, +}; + +export const QueryV2Traces = { + variable: "$condition: TraceQueryCondition", + query: ` + queryTraces(condition: $condition) { + traces { + spans { + traceId + segmentId + spanId + parentSpanId + refs { + traceId + parentSegmentId + parentSpanId + type + } + serviceCode + serviceInstanceName + startTime + endTime + endpointName + type + peer + component + isError + layer + tags { + key + value + } + logs { + time + data { + key + value + } + } + attachedEvents { + startTime { + seconds + nanos + } + event + endTime { + seconds + nanos + } + tags { + key + value + } + summary { + key + value + } + } + } + } + retrievedTimeRange { + startTime + endTime + } + }`, +}; diff --git a/src/graphql/http/index.ts b/src/graphql/http/index.ts index d9825404..f09f1241 100644 --- a/src/graphql/http/index.ts +++ b/src/graphql/http/index.ts @@ -17,11 +17,45 @@ import { httpQuery } from "../base"; import { HttpURL } from "./url"; -export default async function fetchQuery({ method, json, path }: { method: string; json?: unknown; path: string }) { +export default async function fetchQuery({ + method, + json, + path, +}: { + method: string; + json?: Record; + path: string; +}) { + const upperMethod = method.toUpperCase(); + let url = (HttpURL as Record)[path]; + let body: unknown | undefined = json; + + if (upperMethod === "GET" && json && typeof json === "object") { + const params = new URLSearchParams(); + const stringifyValue = (val: unknown): string => { + if (val instanceof Date) return val.toISOString(); + if (typeof val === "object") return JSON.stringify(val); + return String(val); + }; + for (const [key, value] of Object.entries(json)) { + if (value === undefined || value === null) continue; + if (Array.isArray(value)) { + for (const v of value as unknown[]) params.append(key, stringifyValue(v)); + continue; + } + params.append(key, stringifyValue(value)); + } + const queryString = params.toString(); + if (queryString) { + url += (url.includes("?") ? "&" : "?") + queryString; + } + body = undefined; + } + const response = await httpQuery({ - method, - json, - url: (HttpURL as { [key: string]: string })[path], + method: upperMethod, + json: body, + url, }); if (response.errors) { response.errors = response.errors.map((e: { message: string }) => e.message).join(" "); diff --git a/src/graphql/query/trace.ts b/src/graphql/query/trace.ts index 77b1dfe3..eac2bfdd 100644 --- a/src/graphql/query/trace.ts +++ b/src/graphql/query/trace.ts @@ -15,7 +15,15 @@ * limitations under the License. */ -import { Traces, TraceSpans, TraceTagKeys, TraceTagValues, TraceSpansFromColdStage } from "../fragments/trace"; +import { + Traces, + TraceSpans, + TraceTagKeys, + TraceTagValues, + TraceSpansFromColdStage, + HasQueryTracesV2Support, + QueryV2Traces, +} from "../fragments/trace"; export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`; @@ -26,3 +34,7 @@ export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variabl export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`; export const queryTraceSpansFromColdStage = `query queryTraceSpansFromColdStage(${TraceSpansFromColdStage.variable}) {${TraceSpansFromColdStage.query}}`; + +export const queryHasQueryTracesV2Support = `query queryHasQueryTracesV2Support {${HasQueryTracesV2Support.query}}`; + +export const queryV2Traces = `query queryV2Traces(${QueryV2Traces.variable}) {${QueryV2Traces.query}}`; diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index bf5710cb..7dc6ab75 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -89,6 +89,7 @@ limitations under the License. --> import router from "@/router"; import { useAppStoreWithOut, InitializationDurationRow } from "@/store/modules/app"; import { useDashboardStore } from "@/store/modules/dashboard"; + import { useTraceStore } from "@/store/modules/trace"; import type { DashboardItem } from "@/types/dashboard"; import timeFormat from "@/utils/timeFormat"; import { MetricCatalog } from "@/views/dashboard/data"; @@ -98,10 +99,10 @@ limitations under the License. --> import { useI18n } from "vue-i18n"; import { useRoute } from "vue-router"; - /*global Indexable */ const { t, te } = useI18n(); const appStore = useAppStoreWithOut(); const dashboardStore = useDashboardStore(); + const traceStore = useTraceStore(); const route = useRoute(); const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]); const showTimeRangeTips = ref(false); @@ -124,6 +125,7 @@ limitations under the License. --> getVersion(); getNavPaths(); setTTL(); + traceStore.getHasQueryTracesV2Support(); function changeTheme() { const root = document.documentElement; @@ -391,7 +393,7 @@ limitations under the License. --> } function resetDuration() { - const { duration }: Indexable = route.params; + const { duration } = route.params as { duration: string }; if (duration) { const d = JSON.parse(duration); diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue index 955f847f..73b4c114 100644 --- a/src/layout/components/SideBar.vue +++ b/src/layout/components/SideBar.vue @@ -17,7 +17,7 @@ limitations under the License. -->
-
+
; selectedSpan: Nullable; serviceList: string[]; + currentSpan: Nullable; + hasQueryTracesV2Support: boolean; + v2Traces: Trace[]; + loading: boolean; } const { getDurationTime } = useDuration(); +export const PageSize = 20; + export const traceStore = defineStore({ id: "trace", state: (): TraceState => ({ @@ -54,24 +60,39 @@ export const traceStore = defineStore({ queryDuration: getDurationTime(), traceState: "ALL", queryOrder: QueryOrders[0].value, - paging: { pageNum: 1, pageSize: 20 }, + paging: { pageNum: 1, pageSize: PageSize }, }, traceSpanLogs: [], selectorStore: useSelectorStore(), serviceList: [], + currentSpan: null, + hasQueryTracesV2Support: false, + v2Traces: [], + loading: false, }), actions: { setTraceCondition(data: Recordable) { this.conditions = { ...this.conditions, ...data }; }, - setCurrentTrace(trace: Trace) { - this.currentTrace = trace; + setCurrentTrace(trace: Nullable) { + this.currentTrace = trace || {}; }, setTraceSpans(spans: Span[]) { this.traceSpans = spans; }, - setSelectedSpan(span: Span) { - this.selectedSpan = span; + setSelectedSpan(span: Nullable) { + this.selectedSpan = span || {}; + }, + setCurrentSpan(span: Nullable) { + this.currentSpan = span || {}; + }, + setV2Spans(traceId: string) { + const trace = this.traceList.find((d: Trace) => d.traceId === traceId); + this.setTraceSpans(trace?.spans || []); + this.serviceList = Array.from(new Set(trace?.spans.map((i: Span) => i.serviceCode))); + }, + setTraceList(traces: Trace[]) { + this.traceList = traces; }, resetState() { this.traceSpans = []; @@ -156,14 +177,20 @@ export const traceStore = defineStore({ return response; }, async getTraces() { + if (this.hasQueryTracesV2Support) { + return this.fetchV2Traces(); + } + this.loading = true; const response = await graphql.query("queryTraces").params({ condition: this.conditions }); if (response.errors) { + this.loading = false; return response; } if (!response.data.data.traces.length) { this.traceList = []; this.setCurrentTrace({}); this.setTraceSpans([]); + this.loading = false; return response; } this.getTraceSpans({ traceId: response.data.data.traces[0].traceIds[0] }); @@ -177,8 +204,13 @@ export const traceStore = defineStore({ return response; }, async getTraceSpans(params: { traceId: string }) { + if (this.hasQueryTracesV2Support) { + this.setV2Spans(params.traceId); + return new Promise((resolve) => resolve({})); + } const appStore = useAppStoreWithOut(); let response; + this.loading = true; if (appStore.coldStageMode) { response = await graphql .query("queryTraceSpansFromColdStage") @@ -186,6 +218,7 @@ export const traceStore = defineStore({ } else { response = await graphql.query("querySpans").params(params); } + this.loading = false; if (response.errors) { return response; } @@ -209,6 +242,61 @@ export const traceStore = defineStore({ async getTagValues(tagKey: string) { return await graphql.query("queryTraceTagValues").params({ tagKey, duration: useAppStoreWithOut().durationTime }); }, + async getHasQueryTracesV2Support() { + const response = await graphql.query("queryHasQueryTracesV2Support").params({}); + this.hasQueryTracesV2Support = response.data.hasQueryTracesV2Support; + return response; + }, + async fetchV2Traces() { + this.loading = true; + const response = await graphql.query("queryV2Traces").params({ condition: this.conditions }); + this.loading = false; + if (response.errors) { + this.traceList = []; + this.setCurrentTrace({}); + this.setTraceSpans([]); + return response; + } + this.v2Traces = response.data.queryTraces.traces || []; + this.traceList = this.v2Traces + .map((d: Trace) => { + const newSpans = d.spans.map((span: Span) => { + return { + ...span, + traceId: span.traceId, + duration: span.endTime - span.startTime, + label: `${span.serviceCode}: ${span.endpointName}`, + }; + }); + const trace = + newSpans.find((span: Span) => span.parentSpanId === -1 && span.refs.length === 0) || newSpans[0]; + return { + endpointNames: trace.endpointName ? [trace.endpointName] : [], + traceIds: trace.traceId ? [{ value: trace.traceId, label: trace.traceId }] : [], + start: trace.startTime, + duration: trace.endTime - trace.startTime, + isError: trace.isError, + spans: newSpans, + traceId: trace.traceId, + key: trace.traceId, + serviceCode: trace.serviceCode, + label: `${trace.serviceCode}: ${trace.endpointName}`, + }; + }) + .sort((a: Trace, b: Trace) => b.duration - a.duration); + const trace = this.traceList[0]; + if (!trace) { + this.traceList = []; + this.setCurrentTrace({}); + this.setTraceSpans([]); + return response; + } + + this.serviceList = Array.from(new Set(trace.spans.map((i: Span) => i.serviceCode))); + this.setTraceSpans(trace.spans); + this.setCurrentTrace(trace || {}); + return response; + }, }, }); diff --git a/src/styles/lib.scss b/src/styles/lib.scss index 696a8a19..785b48ab 100644 --- a/src/styles/lib.scss +++ b/src/styles/lib.scss @@ -185,13 +185,13 @@ } .scroll_bar_style::-webkit-scrollbar { - width: 4px; - height: 4px; - background-color: #eee; + width: 5px; + height: 5px; + background-color: var(--sw-scrollbar-track); } .scroll_bar_style::-webkit-scrollbar-track { - background-color: #eee; + background-color: var(--sw-scrollbar-track); border-radius: 3px; box-shadow: inset 0 0 6px $disabled-color; } @@ -199,26 +199,9 @@ .scroll_bar_style::-webkit-scrollbar-thumb { border-radius: 3px; box-shadow: inset 0 0 6px $disabled-color; - background-color: #aaa; + background-color: var(--sw-scrollbar-thumb); } -.scroll_bar_dark::-webkit-scrollbar { - width: 6px; - height: 6px; - background-color: #666; -} - -.scroll_bar_dark::-webkit-scrollbar-track { - background-color: #252a2f; - border-radius: 3px; - box-shadow: inset 0 0 6px #999; -} - -.scroll_bar_dark::-webkit-scrollbar-thumb { - border-radius: 3px; - box-shadow: inset 0 0 6px #888; - background-color: #999; -} .d3-tip { line-height: 1; padding: 8px; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 72c04efc..0f9a62e3 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -71,6 +71,11 @@ html { --sw-marketplace-border: #dedfe0; --sw-grid-item-active: #d4d7de; --sw-trace-line: #999; + --sw-scrollbar-track: #eee; + --sw-scrollbar-thumb: #aaa; + --sw-font-grey-color: #a7aebb; + --sw-trace-list-path: rgba(0, 0, 0, 0.1); + --sw-trace-table-selected: rgba(0, 0, 0, 0.1); } html.dark { @@ -81,7 +86,7 @@ html.dark { --disabled-color: #999; --dashboard-tool-bg: #000; --text-color-placeholder: #ccc; - --border-color: #262629; + --border-color: #333; --border-color-primary: #4b4b52; --layout-background: #000; --box-shadow-color: #606266; @@ -114,6 +119,11 @@ html.dark { --sw-marketplace-border: #606266; --sw-grid-item-active: #73767a; --sw-trace-line: #e8e8e8; + --sw-scrollbar-track: #252a2f; + --sw-scrollbar-thumb: #888; + --sw-font-grey-color: #a7aebb; + --sw-trace-list-path: rgba(244, 244, 244, 0.4); + --sw-trace-table-selected: rgba(255, 255, 255, 0.1); } .el-drawer__header { diff --git a/src/types/trace.ts b/src/types/trace.ts index 87954d57..25508e46 100644 --- a/src/types/trace.ts +++ b/src/types/trace.ts @@ -27,6 +27,10 @@ export interface Trace { spans: Span[]; endpointNames: string[]; traceId: string; + serviceCode: string; + label: string; + id: string; + parentId: string; } export interface Span { @@ -46,6 +50,7 @@ export interface Span { refs: Array; startTime: number; endTime: number; + duration?: number; dur?: number; children?: Span[]; tags?: { value: string; key: string }[]; @@ -63,6 +68,8 @@ export interface Span { avgTime?: number; count?: number; profiled?: boolean; + startTimeNanos?: number; + event?: string; } export type Ref = { type?: string; diff --git a/src/utils/color.ts b/src/utils/color.ts new file mode 100644 index 00000000..a7deb13f --- /dev/null +++ b/src/utils/color.ts @@ -0,0 +1,70 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Service color palette for consistent coloring across trace visualizations +export const ServicePalette = [ + "#10b981", // emerald-500 + "#f59e0b", // amber-500 + "#8b5cf6", // violet-500 + "#06b6d4", // cyan-500 + "#84cc16", // lime-500 + "#f97316", // orange-500 + "#ec4899", // pink-500 + "#6366f1", // indigo-500 + "#14b8a6", // teal-500 + "#a855f7", // purple-500 + "#22c55e", // green-500 + "#eab308", // yellow-500 + "#f43f5e", // rose-500 + "#0ea5e9", // sky-500 + "#8b5a2b", // brown-500 + "#64748b", // slate-500 + "#dc2626", // red-600 + "#059669", // emerald-600 + "#d97706", // amber-600 + "#7c3aed", // violet-600 + "#0891b2", // cyan-600 + "#65a30d", // lime-600 + "#ea580ce6", // orange-600 + "#db2777", // pink-600 + "#4f46e5", // indigo-600 + "#0d9488", // teal-600 + "#9333ea", // purple-600 + "#16a34a", // green-600 + "#ca8a04", // yellow-600 + "#e11d48", // rose-600 + "#0284c7", // sky-600 + "#92400e", // brown-600 + "#475569", // slate-600 +]; +// Reuse the same service color function from TracesTable +function generateHash(str: string) { + let hash = 0; + if (str.length === 0) return hash; + for (let i = 0; i < str.length; i += 1) { + const c = str.charCodeAt(i); + hash = (hash << 5) - hash + c; + hash |= 0; // Convert to 32bit integer + } + return Math.abs(hash); // Only positive number. +} + +export function getServiceColor(serviceName: string): string { + if (!serviceName) return "#eee"; + const hash = generateHash(serviceName); + return ServicePalette[hash % ServicePalette.length]; +} diff --git a/src/utils/file.ts b/src/utils/file.ts index 2e8b5254..c6afcd3f 100644 --- a/src/utils/file.ts +++ b/src/utils/file.ts @@ -31,16 +31,15 @@ export const readFile = (event: any) => { }; }); }; -export const saveFile = (data: any, name: string) => { - const newData = JSON.stringify(data); - const tagA = document.createElement("a"); - tagA.download = name; - tagA.style.display = "none"; - const blob = new Blob([newData]); - const url = URL.createObjectURL(blob); - tagA.href = url; - document.body.appendChild(tagA); - tagA.click(); - document.body.removeChild(tagA); - URL.revokeObjectURL(url); +export const saveFileAsJSON = (data: unknown, filename: string) => { + const jsonContent = JSON.stringify(data, null, 2); + const blob = new Blob([jsonContent], { type: "application/json;charset=utf-8;" }); + const link = document.createElement("a"); + link.href = URL.createObjectURL(blob); + link.download = filename; + link.style.display = "none"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(link.href); }; diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 97b9b2a6..ce255b27 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -179,7 +179,7 @@ limitations under the License. --> import { useDashboardStore } from "@/store/modules/dashboard"; import router from "@/router"; import type { DashboardItem, LayoutConfig } from "@/types/dashboard"; - import { saveFile, readFile } from "@/utils/file"; + import { saveFileAsJSON, readFile } from "@/utils/file"; import { EntityType } from "./data"; import { isEmptyObject } from "@/utils/is"; import { WidgetType } from "@/views/dashboard/data"; @@ -356,7 +356,7 @@ limitations under the License. --> optimizeTemplate(item.configuration.children); } const name = `dashboards.json`; - saveFile(templates, name); + saveFileAsJSON(templates, name); setTimeout(() => { multipleTableRef.value!.clearSelection(); }, 2000); diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue index 586adf8d..ff22e1fa 100644 --- a/src/views/dashboard/controls/Trace.vue +++ b/src/views/dashboard/controls/Trace.vue @@ -24,36 +24,16 @@ limitations under the License. --> {{ t("delete") }}
-
- -
-
- -
-
- - - -
- -
+
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index e5a46be4..8a6edbd0 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -15,7 +15,7 @@ * limitations under the License. */ export const dragIgnoreFrom = - "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline, .process-svg"; + "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline, .process-svg, .trace-query-content"; export const PodsChartTypes = ["EndpointList", "InstanceList"]; diff --git a/src/views/dashboard/related/async-profiling/Content.vue b/src/views/dashboard/related/async-profiling/Content.vue index 9d48180a..61329bb4 100644 --- a/src/views/dashboard/related/async-profiling/Content.vue +++ b/src/views/dashboard/related/async-profiling/Content.vue @@ -16,7 +16,7 @@ limitations under the License. -->
-
+
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue index 6e3475bf..3fe29c07 100644 --- a/src/views/dashboard/related/profile/components/SpanTree.vue +++ b/src/views/dashboard/related/profile/components/SpanTree.vue @@ -41,7 +41,7 @@ limitations under the License. -->
+ diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue index 31a80a34..7663d2b1 100644 --- a/src/views/dashboard/related/trace/Index.vue +++ b/src/views/dashboard/related/trace/Index.vue @@ -14,27 +14,27 @@ See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/related/trace/components/Table/data.ts b/src/views/dashboard/related/trace/components/Table/data.ts index cc486536..4eff830e 100644 --- a/src/views/dashboard/related/trace/components/Table/data.ts +++ b/src/views/dashboard/related/trace/components/Table/data.ts @@ -48,7 +48,7 @@ export const ProfileConstant = [ label: "application", value: "Operation", }, -]; +] as const; export const TraceConstant = [ { @@ -83,7 +83,7 @@ export const TraceConstant = [ label: "application", value: "Attached Events", }, -]; +] as const; export const StatisticsConstant = [ { @@ -121,4 +121,4 @@ export const StatisticsConstant = [ value: "Hits", key: "count", }, -]; +] as const; diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/components/TraceList/Filter.vue similarity index 77% rename from src/views/dashboard/related/trace/Filter.vue rename to src/views/dashboard/related/trace/components/TraceList/Filter.vue index 5f65ea56..fc09eb19 100644 --- a/src/views/dashboard/related/trace/Filter.vue +++ b/src/views/dashboard/related/trace/components/TraceList/Filter.vue @@ -13,52 +13,56 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> diff --git a/src/views/dashboard/related/trace/components/Tree.vue b/src/views/dashboard/related/trace/components/VisGraph/Tree.vue similarity index 76% rename from src/views/dashboard/related/trace/components/Tree.vue rename to src/views/dashboard/related/trace/components/VisGraph/Tree.vue index 5b7b926e..d125ab40 100644 --- a/src/views/dashboard/related/trace/components/Tree.vue +++ b/src/views/dashboard/related/trace/components/VisGraph/Tree.vue @@ -17,7 +17,7 @@ limitations under the License. --> class="time-charts-item mr-5" v-for="(i, index) in traceStore.serviceList" :key="index" - :style="`color:${computedScale(index)}`" + :style="`color:${getServiceColor(i)}`" > {{ i }} @@ -35,40 +35,44 @@ limitations under the License. -->
- +
diff --git a/src/views/dashboard/related/trace/components/constant.ts b/src/views/dashboard/related/trace/components/VisGraph/constant.ts similarity index 75% rename from src/views/dashboard/related/trace/components/constant.ts rename to src/views/dashboard/related/trace/components/VisGraph/constant.ts index 1a2337a2..12282a12 100644 --- a/src/views/dashboard/related/trace/components/constant.ts +++ b/src/views/dashboard/related/trace/components/VisGraph/constant.ts @@ -21,3 +21,9 @@ export enum TraceGraphType { TABLE = "Table", STATISTICS = "Statistics", } +export const GraphTypeOptions = [ + { value: "List", icon: "list-bulleted", label: "list" }, + { value: "Tree", icon: "issue-child", label: "tree" }, + { value: "Table", icon: "table", label: "table" }, + { value: "Statistics", icon: "statistics-bulleted", label: "statistics" }, +] as const; diff --git a/src/views/dashboard/related/trace/components/index.ts b/src/views/dashboard/related/trace/components/VisGraph/index.ts similarity index 100% rename from src/views/dashboard/related/trace/components/index.ts rename to src/views/dashboard/related/trace/components/VisGraph/index.ts