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")