From 8b56ff2f48f72b09a92c469fc311b3e6d6b71f70 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 27 Apr 2026 17:38:47 +0800 Subject: [PATCH 1/4] support trace v1 in trace single page --- src/layout/components/NavBar.vue | 1 - src/store/modules/trace.ts | 36 +++++++++++++++++-- src/views/dashboard/Trace.vue | 23 +++++++----- .../trace/components/TraceList/SpanList.vue | 6 ++++ 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 35820f5b..86d137f6 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -115,7 +115,6 @@ limitations under the License. --> getVersion(); getNavPaths(); setTTL(); - traceStore.getHasQueryTracesV2Support(); function changeDataMode() { appStore.setColdStageMode(coldStage.value); diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 3b60299b..627d1151 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -177,10 +177,11 @@ export const traceStore = defineStore({ return response; }, async getTraces() { + this.loading = true; + await this.getHasQueryTracesV2Support(); 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; @@ -193,7 +194,6 @@ export const traceStore = defineStore({ this.loading = false; return response; } - this.getTraceSpans({ traceId: response.data.data.traces[0].traceIds[0] }); this.traceList = response.data.data.traces.map((d: Trace) => { d.traceIds = d.traceIds.map((id: string) => { return { value: id, label: id }; @@ -201,6 +201,7 @@ export const traceStore = defineStore({ return d; }); this.setCurrentTrace(response.data.data.traces[0] || {}); + await this.getTraceSpans({ traceId: this.currentTrace?.traceId || "" }); return response; }, async getTraceSpans(params: { traceId: string }) { @@ -301,6 +302,37 @@ export const traceStore = defineStore({ this.setCurrentTrace(trace || {}); return response; }, + + async getTraceByTraceId(traceId: string) { + this.loading = true; + this.setTraceCondition({ + traceId: traceId, + }); + await this.getHasQueryTracesV2Support(); + if (this.hasQueryTracesV2Support) { + await this.fetchV2Traces(); + this.loading = false; + return; + } + this.setCurrentTrace({ + duration: 0, + endpointNames: [], + isError: false, + key: traceId, + label: traceId, + operationNames: [], + segmentId: "", + serviceCode: "", + spans: [], + start: "0", + traceIds: [{ value: traceId, label: traceId }], + traceId: traceId, + id: traceId, + parentId: "", + }); + await this.getTraceSpans({ traceId }); + this.loading = false; + }, }, }); diff --git a/src/views/dashboard/Trace.vue b/src/views/dashboard/Trace.vue index 705e6875..fb13fb72 100644 --- a/src/views/dashboard/Trace.vue +++ b/src/views/dashboard/Trace.vue @@ -14,10 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. --> @@ -26,17 +32,16 @@ limitations under the License. --> import { computed, onMounted, provide } from "vue"; import { useTraceStore } from "@/store/modules/trace"; import TraceContent from "@/views/dashboard/related/trace/components/TraceQuery/TraceContent.vue"; + import SpanList from "@/views/dashboard/related/trace/components/TraceList/SpanList.vue"; const route = useRoute(); const traceStore = useTraceStore(); const traceId = computed(() => route.params.traceId as string); provide("options", {}); onMounted(() => { - if (traceId.value) { - traceStore.setTraceCondition({ - traceId: traceId.value, - }); - traceStore.fetchV2Traces(); + if (!traceId.value) { + return; } + traceStore.getTraceByTraceId(traceId.value); }); diff --git a/src/views/dashboard/related/trace/components/TraceList/SpanList.vue b/src/views/dashboard/related/trace/components/TraceList/SpanList.vue index f33ea8d4..ef7858f5 100644 --- a/src/views/dashboard/related/trace/components/TraceList/SpanList.vue +++ b/src/views/dashboard/related/trace/components/TraceList/SpanList.vue @@ -67,6 +67,12 @@ limitations under the License. --> :traceId="traceStore.currentTrace?.traceIds?.[0]?.value" :showBtnDetail="false" :headerType="WidgetType.Trace" + :minTimestamp="Number(traceStore.currentTrace?.start)" + :maxTimestamp=" + traceStore.currentTrace + ? Number(traceStore.currentTrace.start) + Number(traceStore.currentTrace.duration) + : undefined + " /> From 94acb3d54259e58b90cb4d28032a074dc4c26c00 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 27 Apr 2026 17:58:56 +0800 Subject: [PATCH 2/4] Update src/store/modules/trace.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/store/modules/trace.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 627d1151..4aad452f 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -200,8 +200,9 @@ export const traceStore = defineStore({ }); return d; }); - this.setCurrentTrace(response.data.data.traces[0] || {}); - await this.getTraceSpans({ traceId: this.currentTrace?.traceId || "" }); + const currentTrace = this.traceList[0] || {}; + this.setCurrentTrace(currentTrace); + await this.getTraceSpans({ traceId: currentTrace.traceIds?.[0]?.value || "" }); return response; }, async getTraceSpans(params: { traceId: string }) { From fd88a0f0551cdea83431059fed5de031cb707315 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 27 Apr 2026 18:01:13 +0800 Subject: [PATCH 3/4] revert --- src/layout/components/NavBar.vue | 1 + src/store/modules/trace.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 86d137f6..35820f5b 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -115,6 +115,7 @@ limitations under the License. --> getVersion(); getNavPaths(); setTTL(); + traceStore.getHasQueryTracesV2Support(); function changeDataMode() { appStore.setColdStageMode(coldStage.value); diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 627d1151..a4001b88 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -178,7 +178,6 @@ export const traceStore = defineStore({ }, async getTraces() { this.loading = true; - await this.getHasQueryTracesV2Support(); if (this.hasQueryTracesV2Support) { return this.fetchV2Traces(); } From 0084b28fb24e1e2630be4601b1b9cca4171e2a89 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 27 Apr 2026 18:37:02 +0800 Subject: [PATCH 4/4] update --- src/store/modules/trace.ts | 14 ++------------ src/views/dashboard/Trace.vue | 4 +--- .../trace/components/TraceList/SpanList.vue | 8 ++------ 3 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 1a145ff1..eae5d476 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -315,20 +315,10 @@ export const traceStore = defineStore({ return; } this.setCurrentTrace({ - duration: 0, - endpointNames: [], - isError: false, - key: traceId, - label: traceId, - operationNames: [], - segmentId: "", - serviceCode: "", - spans: [], - start: "0", traceIds: [{ value: traceId, label: traceId }], traceId: traceId, - id: traceId, - parentId: "", + endpointNames: [], + spans: [], }); await this.getTraceSpans({ traceId }); this.loading = false; diff --git a/src/views/dashboard/Trace.vue b/src/views/dashboard/Trace.vue index fb13fb72..0e36b106 100644 --- a/src/views/dashboard/Trace.vue +++ b/src/views/dashboard/Trace.vue @@ -21,9 +21,7 @@ limitations under the License. --> /> -
- No trace found -
+
No trace found
diff --git a/src/views/dashboard/related/trace/components/TraceList/SpanList.vue b/src/views/dashboard/related/trace/components/TraceList/SpanList.vue index ef7858f5..a277b6f4 100644 --- a/src/views/dashboard/related/trace/components/TraceList/SpanList.vue +++ b/src/views/dashboard/related/trace/components/TraceList/SpanList.vue @@ -67,12 +67,8 @@ limitations under the License. --> :traceId="traceStore.currentTrace?.traceIds?.[0]?.value" :showBtnDetail="false" :headerType="WidgetType.Trace" - :minTimestamp="Number(traceStore.currentTrace?.start)" - :maxTimestamp=" - traceStore.currentTrace - ? Number(traceStore.currentTrace.start) + Number(traceStore.currentTrace.duration) - : undefined - " + :minTimestamp="NaN" + :maxTimestamp="NaN" />