feat: add tips

src/store/modules/profile.ts

@@ -72,8 +72,7 @@ export const profileStore = defineStore({
       this.analyzeTrees = [];
     },
     setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
-      const index = spans.length - 1 || 0;
-      this.currentSpan = spans[index];
+      this.currentSpan = spans[0] || {};
       this.segmentSpans = spans;
     },
     setCurrentSpan(span: Recordable<SegmentSpan>) {
@@ -84,8 +83,7 @@ export const profileStore = defineStore({
       this.currentSegment = segment;
       this.segmentSpans = segment.spans || [];
       if (segment.spans) {
-        const index = segment.spans.length - 1 || 0;
-        this.currentSpan = segment.spans[index];
+        this.currentSpan = segment.spans[0] || {};
       } else {
         this.currentSpan = {};
       }
@@ -167,8 +165,7 @@ export const profileStore = defineStore({
     async getSegmentSpans() {
       this.analyzeTrees = [];
       this.segmentSpans = this.currentSegment.spans;
-      const index = this.currentSegment.spans.length - 1 || 0;
-      this.currentSpan = this.currentSegment.spans[index];
+      this.currentSpan = this.currentSegment.spans[0] || {};
     },
     async getProfileAnalyze(params: Array<{ segmentId: string; timeRange: { start: number; end: number } }>) {
       if (!params.length) {

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

@@ -56,6 +56,7 @@ limitations under the License. -->
         { 'trace-item-error': data.isError },
         { profiled: data.profiled === false },
       ]"
+      :data-text="data.profiled === false ? 'No Thread Dump' : ''"
     >
       <div
         :class="['method', 'level' + (data.level - 1)]"
@@ -83,6 +84,7 @@ limitations under the License. -->
           <span>
             {{ data.endpointName }}
           </span>
+          <span v-if="data.profiled === false"></span>
         </el-tooltip>
       </div>
       <div class="start-time">
@@ -258,21 +260,44 @@ limitations under the License. -->
 
     &:hover {
       background: rgba(0, 0, 0, 0.04);
-      color: #448dfe;
-    }
-
-    &::before {
-      position: absolute;
-      content: "";
-      width: 5px;
-      height: 100%;
-      background: #448dfe;
-      left: 0;
     }
   }
 
   .profiled {
     background-color: #eee;
+    position: relative;
+  }
+
+  .profiled:before {
+    content: attr(data-text);
+    position: absolute;
+    top: 80%;
+    left: 30%;
+    width: 100px;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    box-shadow: #eee 1px 2px 10px;
+    display: none;
+  }
+
+  .profiled:after {
+    content: "";
+    position: absolute;
+    left: 40%;
+    top: 50%;
+    border: 6px solid #333;
+    border-color: transparent transparent #333 transparent;
+    display: none;
+  }
+
+  .profiled:hover:before,
+  .profiled:hover:after {
+    display: block;
+    z-index: 999;
   }
 
   .trace-item-error {