add action box

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -162,6 +162,9 @@ limitations under the License. -->
     }
   }
   function viewParentSpan(span: Recordable) {
+    if (props.type === TraceGraphType.TABLE) {
+      return;
+    }
     tree.value.highlightParents(span);
   }
   function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {

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

@@ -11,7 +11,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="charts">
+  <div class="trace-table-charts">
     <Graph :data="data" :traceId="traceId" :type="TraceGraphType.TABLE" :headerType="headerType" />
   </div>
 </template>
@@ -29,10 +29,11 @@ limitations under the License. -->
   });
 </script>
 <style lang="scss" scoped>
-  .charts {
+  .trace-table-charts {
     overflow: auto;
     padding: 10px;
     height: 100%;
     width: 100%;
+    position: relative;
   }
 </style>

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

@@ -47,7 +47,7 @@ limitations under the License. -->
       :key="`key${index}`"
       :type="type"
       :headerType="headerType"
-      @click="selectItem()"
+      @click="selectItem"
     />
     <slot></slot>
   </div>
@@ -104,8 +104,24 @@ limitations under the License. -->
       };
     };
   });
-  function selectItem() {
+  function selectItem(event: MouseEvent) {
     emits("select", traceStore.selectedSpan);
+    if (props.headerType === WidgetType.Profile) {
+      return;
+    }
+    if (props.type === TraceGraphType.STATISTICS) {
+      return;
+    }
+    const item: any = document.querySelector("#trace-action-box");
+    const tableBox = document.querySelector(".trace-table-charts")?.getBoundingClientRect();
+    if (!tableBox) {
+      return;
+    }
+    const offsetX = event.x - tableBox.x;
+    const offsetY = event.y - tableBox.y;
+    item.style.display = "block";
+    item.style.top = `${offsetY + 20}px`;
+    item.style.left = `${offsetX + 10}px`;
   }
   function sortStatistics(key: string) {
     const element = props.tableData;

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

@@ -17,14 +17,14 @@ limitations under the License. -->
   <div v-if="type === TraceGraphType.STATISTICS">
     <div class="trace-item">
       <div :class="['method']">
-        <el-tooltip :content="data.groupRef.endpointName" placement="bottom" :show-after="300">
+        <el-tooltip :content="data.groupRef.endpointName" placement="top" :show-after="300">
           <span>
             {{ data.groupRef.endpointName }}
           </span>
         </el-tooltip>
       </div>
       <div :class="['type']">
-        <el-tooltip :content="data.groupRef.type" placement="bottom" :show-after="300">
+        <el-tooltip :content="data.groupRef.type" placement="top" :show-after="300">
           <span>
             {{ data.groupRef.type }}
           </span>
@@ -75,7 +75,7 @@ limitations under the License. -->
         />
         <el-tooltip
           :content="data.type === 'Entry' ? 'Entry' : 'Exit'"
-          placement="bottom"
+          placement="top"
           :show-after="300"
           v-if="['Entry', 'Exit'].includes(data.type)"
         >
@@ -83,12 +83,12 @@ limitations under the License. -->
             <Icon :iconName="data.type === 'Entry' ? 'entry' : 'exit'" size="sm" class="mr-5" />
           </span>
         </el-tooltip>
-        <el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="bottom" :show-after="300">
+        <el-tooltip v-if="isCrossThread" content="CROSS_THREAD" placement="top" :show-after="300">
           <span>
             <Icon iconName="cross" size="sm" class="mr-5" />
           </span>
         </el-tooltip>
-        <el-tooltip :content="data.endpointName" placement="bottom" :show-after="300">
+        <el-tooltip :content="data.endpointName" placement="top" :show-after="300">
           <span>
             {{ data.endpointName }}
           </span>
@@ -109,12 +109,12 @@ limitations under the License. -->
         {{ data.dur ? data.dur + "" : "0" }}
       </div>
       <div class="api">
-        <el-tooltip :show-after="300" :content="data.component || '-'" placement="bottom">
+        <el-tooltip :show-after="300" :content="data.component || '-'" placement="top">
           <span>{{ data.component || "-" }}</span>
         </el-tooltip>
       </div>
       <div class="application">
-        <el-tooltip :show-after="300" :content="data.serviceCode || '-'" placement="bottom">
+        <el-tooltip :show-after="300" :content="data.serviceCode || '-'" placement="top">
           <span>{{ data.serviceCode }}</span>
         </el-tooltip>
       </div>
@@ -284,8 +284,6 @@ limitations under the License. -->
   }
 
   .trace-item.level0 {
-    color: #448dfe;
-
     &:hover {
       background: rgb(0 0 0 / 4%);
     }