diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 6390fd52..4d698ed6 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -176,7 +176,21 @@ export const traceStore = defineStore({ return res.data; } const data = res.data.data.trace.spans; - + data[4].attachedEvents = [ + { + startTime: { + seconds: 1669102205296, + nanos: 1669102205296, + }, + event: "event", + endTime: { + seconds: 1669102212791, + nanos: 1669102212791, + }, + tags: [{ key: "test", value: "test" }], + summary: [{ key: "test", value: 123 }], + }, + ]; this.setTraceSpans(data || []); return res.data; }, 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 e50f2336..af301e71 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts @@ -180,15 +180,22 @@ export default class ListGraph { return ""; } const label = - d.data.label.length > 35 - ? `${d.data.label.slice(0, 35)}...` + d.data.label.length > 30 + ? `${d.data.label.slice(0, 30)}...` : `${d.data.label}`; return label; }); nodeEnter .append("circle") - .attr("r", 8) - .attr("cx", 270) + .attr("r", 10) + .attr("cx", (d: any) => { + const events = d.data.attachedEvents; + if (events && events.length > 9) { + return 272; + } else { + return 270; + } + }) .attr("cy", -5) .attr("fill", "none") .attr("stroke", "#e66") @@ -209,7 +216,7 @@ export default class ListGraph { .text((d: any) => { const events = d.data.attachedEvents; if (events && events.length) { - return `E`; + return `${events.length}`; } else { return ""; } 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 8557de3d..940665bc 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts @@ -208,7 +208,10 @@ export default class TraceMap { nodeEnter .append("text") .attr("x", function (d: any) { - return d.children || d._children ? -18 : 107; + const events = d.data.attachedEvents || []; + let p = d.children || d._children ? -18 : 107; + p = events.length > 9 ? p - 2 : p; + return p; }) .attr("dy", "-0.8em") .attr("fill", "#e66") @@ -216,7 +219,7 @@ export default class TraceMap { .text((d: any) => { const events = d.data.attachedEvents; if (events && events.length) { - return `E`; + return `${events.length}`; } else { return ""; }