feat: add tips

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -73,13 +73,20 @@ limitations under the License. -->
           size="sm"
           class="mr-5"
         />
-        <Icon
+        <el-tooltip
+          :content="data.type === 'Entry' ? 'Entry' : 'Exit'"
+          placement="bottom"
           v-if="['Entry', 'Exit'].includes(data.type)"
-          :iconName="data.type === 'Entry' ? 'entry' : 'exit'"
+        >
-          size="sm"
+          <span>
-          class="mr-5"
+            <Icon :iconName="data.type === 'Entry' ? 'entry' : 'exit'" size="sm" class="mr-5" />
-        />
+          </span>
-        <Icon v-if="isCrossThread" iconName="cross" size="sm" class="mr-5" />
+        </el-tooltip>
+        <el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="bottom">
+          <span>
+            <Icon iconName="cross" size="sm" class="mr-5" />
+          </span>
+        </el-tooltip>
         <el-tooltip :content="data.endpointName" placement="bottom">
           <span>
             {{ data.endpointName }}

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 `<div class="mb-5">${d.data.type}</div>`;
+      });
     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")