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 12cd279c Feat: enhance the Trace widget for batch consuming spans
(#387)
12cd279c is described below
commit 12cd279c90a6843199aee16056f455582211d6d0
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Mon Apr 15 15:33:09 2024 +0800
Feat: enhance the Trace widget for batch consuming spans (#387)
---
src/store/modules/trace.ts | 2 +-
.../related/trace/components/D3Graph/Index.vue | 88 +++++++++++++---------
2 files changed, 53 insertions(+), 37 deletions(-)
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 0b860130..4c2d5876 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -23,7 +23,6 @@ import type { AxiosResponse } from "axios";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors";
import { QueryOrders } from "@/views/dashboard/data";
-
interface TraceState {
services: Service[];
instances: Instance[];
@@ -168,6 +167,7 @@ export const traceStore = defineStore({
return res.data;
}
const data = res.data.data.trace.spans;
+
this.setTraceSpans(data || []);
return res.data;
},
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 6a107a0b..9d67f468 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -96,10 +96,8 @@ limitations under the License. -->
node.children.push(data);
return;
}
- if (node.children && node.children.length > 0) {
- node.children.forEach((nodeItem: Recordable) => {
- traverseTree(nodeItem, spanId, segmentId, data);
- });
+ for (const nodeItem of node.children || []) {
+ traverseTree(nodeItem, spanId, segmentId, data);
}
}
function changeTree() {
@@ -108,7 +106,7 @@ limitations under the License. -->
}
segmentId.value = [];
const segmentGroup: Recordable = {};
- const segmentIdGroup: Recordable = [];
+ const segmentIdGroup: string[] = [];
const fixSpans: Span[] = [];
const segmentHeaders: Span[] = [];
for (const span of props.data) {
@@ -118,7 +116,9 @@ limitations under the License. -->
if (span.parentSpanId === -1) {
segmentHeaders.push(span);
} else {
- const item = props.data.find((i: Span) => i.segmentId ===
span.segmentId && i.spanId === span.spanId - 1);
+ const item = props.data.find(
+ (i: Span) => i.traceId === span.traceId && i.segmentId ===
span.segmentId && i.spanId === span.spanId - 1,
+ );
const fixSpanKeyContent = {
traceId: span.traceId,
segmentId: span.segmentId,
@@ -145,18 +145,18 @@ limitations under the License. -->
}
}
}
- segmentHeaders.forEach((span: Span) => {
+ for (const span of segmentHeaders) {
if (span.refs.length) {
- let exit = 0;
- span.refs.forEach((ref) => {
- const i = props.data.findIndex(
- (i: Recordable) => ref.parentSegmentId === i.segmentId &&
ref.parentSpanId === i.spanId,
+ let exit = null;
+ for (const ref of span.refs) {
+ const e = props.data.find(
+ (i: Recordable) =>
+ ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId
&& ref.parentSpanId === i.spanId,
);
- if (i > -1) {
- exit = 1;
+ if (e) {
+ exit = e;
}
- });
-
+ }
if (!exit) {
const ref = span.refs[0];
// create a known broken node.
@@ -214,23 +214,23 @@ limitations under the License. -->
}
}
}
- });
- [...fixSpans, ...props.data].forEach((i) => {
+ }
+ for (const i of [...fixSpans, ...props.data]) {
i.label = i.endpointName || "no operation name";
i.children = [];
- if (!segmentGroup[i.segmentId]) {
+ if (segmentGroup[i.segmentId]) {
+ segmentGroup[i.segmentId].push(i);
+ } else {
segmentIdGroup.push(i.segmentId);
segmentGroup[i.segmentId] = [i];
- } else {
- segmentGroup[i.segmentId].push(i);
}
- });
+ }
fixSpansSize.value = fixSpans.length;
- segmentIdGroup.forEach((id: string) => {
+ for (const id of segmentIdGroup) {
const currentSegment = segmentGroup[id].sort((a: Span, b: Span) =>
b.parentSpanId - a.parentSpanId);
- currentSegment.forEach((s: Recordable) => {
+ for (const s of currentSegment) {
const index = currentSegment.findIndex((i: Span) => i.spanId ===
s.parentSpanId);
- if (index !== -1) {
+ if (index > -1) {
if (
(currentSegment[index].isBroken &&
currentSegment[index].parentSpanId === -1) ||
!currentSegment[index].isBroken
@@ -251,37 +251,53 @@ limitations under the License. -->
s.children.push(...children);
}
}
- });
+ }
segmentGroup[id] = currentSegment[currentSegment.length - 1];
- });
- segmentIdGroup.forEach((id: string) => {
- segmentGroup[id].refs.forEach((ref: Recordable) => {
+ }
+ for (const id of segmentIdGroup) {
+ for (const ref of segmentGroup[id].refs) {
if (ref.traceId === props.traceId) {
traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId,
ref.parentSegmentId, segmentGroup[id]);
}
- });
- });
+ }
+ }
for (const i in segmentGroup) {
- if (segmentGroup[i].refs.length === 0) {
+ if (segmentGroup[i].refs.length) {
+ let exit = null;
+ for (const ref of segmentGroup[i].refs) {
+ const e = props.data.find(
+ (i: Recordable) =>
+ ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId
&& ref.parentSpanId === i.spanId,
+ );
+ if (e) {
+ exit = e;
+ }
+ }
+ if (exit) {
+ segmentId.value.push(segmentGroup[i]);
+ }
+ } else {
segmentId.value.push(segmentGroup[i]);
}
}
- segmentId.value.forEach((i: Span | Recordable) => {
+ for (const i of segmentId.value) {
collapse(i);
- });
+ }
}
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;
- d.children.forEach((i: Span) => {
+ for (const i of d.children) {
dur -= i.endTime - i.startTime;
- });
+ }
d.dur = dur < 0 ? 0 : dur;
if (item) {
d.children = d.children.sort(compare("startTime"));
}
- d.children.forEach((i: Span) => collapse(i));
+ for (const i of d.children) {
+ collapse(i);
+ }
}
}
function compare(p: string) {
