diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index b5efcea2..94083422 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -101,8 +101,9 @@ limitations under the License. --> tree.value.init({ label: "", children: currentSpan.value.refChildren }, props.data, fixSpansSize.value); tree.value.draw(); } else { + const nodes = getRefsAllNodes({ label: `${props.traceId}`, children: currentSpan.value.refChildren }); tree.value = new TreeGraph(refsChildrenTree.value, handleSelectSpan); - tree.value.init({ label: `${props.traceId}`, children: currentSpan.value.refChildren }, props.data); + tree.value.init({ label: `${props.traceId}`, children: currentSpan.value.refChildren }, nodes); } } function handleSelectSpan(i: Recordable, type?: ViewSpanType) { @@ -345,6 +346,24 @@ limitations under the License. --> traverseTree(nodeItem, spanId, segmentId, data); } } + + function getRefsAllNodes(tree: Recordable) { + let nodes = []; + let stack = [tree]; + + while (stack.length > 0) { + const node = stack.pop(); + nodes.push(node); + + if (node?.children && node.children.length > 0) { + for (let i = node.children.length - 1; i >= 0; i--) { + stack.push(node.children[i]); + } + } + } + + return nodes; + } onBeforeUnmount(() => { d3.selectAll(".d3-tip").remove(); window.removeEventListener("resize", debounceFunc); 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 1086230b..9b78e4b7 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts @@ -257,7 +257,7 @@ export default class ListGraph { } }) .attr("cy", -5) - .attr("fill", appStore.theme === Themes.Dark ? "#fff" : "#ccc") + .attr("fill", "none") .attr("stroke", "#e66") .style("opacity", (d: Recordable) => { const events = d.data.attachedEvents; 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 bf9264c0..1f56cce8 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts @@ -20,11 +20,13 @@ import d3tip from "d3-tip"; import type { Trace, Span } from "@/types/trace"; import { useAppStoreWithOut } from "@/store/modules/app"; import { Themes } from "@/constants/data"; +import icons from "@/assets/img/icons"; +import { ViewSpanType } from "../components/data"; export default class TraceMap { private i = 0; private el: Nullable = null; - private handleSelectSpan: Nullable<(i: Trace) => void> = null; + private handleSelectSpan: Nullable<(i: Trace, type?: ViewSpanType) => void> = null; private topSlow: Nullable = []; private height = 0; private width = 0; @@ -55,7 +57,7 @@ export default class TraceMap { this.topChild = []; this.width = el.clientWidth - 20; this.height = el.clientHeight - 30; - d3.select(".d3-trace-tree").remove(); + d3.select(`.${this.el.className} .d3-trace-tree`).remove(); this.body = d3 .select(this.el) .append("svg") @@ -80,7 +82,7 @@ export default class TraceMap { this.svg.call(this.tip); } init(data: Recordable, row: Recordable) { - this.treemap = d3.tree().size([row.length * 35, this.width]); + this.treemap = d3.tree().size([row.length * 32, this.height]); this.row = row; this.data = data; this.min = Number(d3.min(this.row.map((i: Span) => i.startTime))); @@ -215,6 +217,18 @@ export default class TraceMap { .attr("stroke", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) .attr("stroke-width", 2.5); + nodeEnter + .append("image") + .attr("width", 16) + .attr("height", 16) + .attr("x", -8) + .attr("y", -23) + .attr("xlink:href", (d: any) => (d.data.refChildren?.length ? icons.REFER : ``)) + .on("click", (event: any, d: Trace) => { + event.stopPropagation(); + this.handleSelectSpan && this.handleSelectSpan(d, ViewSpanType.REFS); + }); + nodeEnter .append("text") .attr("font-size", 11)