diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index 7f2abdb3..a9047f84 100644 --- a/src/views/dashboard/related/trace/components/Table/TableItem.vue +++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue @@ -73,13 +73,20 @@ limitations under the License. --> size="sm" class="mr-5" /> - - + > + + + + + + + + + {{ data.endpointName }} 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 c989dc0b..b5bfbd9c 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts @@ -30,6 +30,7 @@ export default class ListGraph { private height = 0; private svg: any = null; private tip: any = null; + private prompt: any = null; private row: any[] = []; private data: any = []; private min = 0; @@ -65,7 +66,14 @@ export default class ListGraph { } `; }); + this.prompt = (d3tip as any)() + .attr("class", "d3-tip") + .offset([-8, 0]) + .html((d: any) => { + return `
${d.data.type}
`; + }); this.svg.call(this.tip); + this.svg.call(this.prompt); } diagonal(d: any) { return `M ${d.source.y} ${d.source.x + 5} @@ -161,7 +169,18 @@ export default class ListGraph { .attr("y", -10) .attr("xlink:href", (d: any) => d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "", - ); + ) + .style("display", (d: any) => { + ["Entry", "Exit"].includes(d.data.type) ? "inline" : "none"; + }) + .on("mouseover", function (event: any, d: Trace) { + event.stopPropagation(); + t.prompt.show(d, this); + }) + .on("mouseout", function (event: any, d: Trace) { + event.stopPropagation(); + t.prompt.hide(d, this); + }); nodeEnter .append("image") .attr("width", 16) @@ -171,6 +190,25 @@ export default class ListGraph { .attr("xlink:href", (d: any) => { const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD"); return key > -1 ? icons.STREAM : ""; + }) + .style("display", (d: any) => { + const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD"); + return key > -1 ? "inline" : "none"; + }) + .on("mouseover", function (event: any, d: any) { + const a = { + ...d, + data: { + ...d.data, + type: "CROSS_THREAD", + }, + }; + event.stopPropagation(); + t.prompt.show(a, this); + }) + .on("mouseout", function (event: any, d: Trace) { + event.stopPropagation(); + t.prompt.hide(d, this); }); nodeEnter .append("text")