feat: Implement adding controls in Tabs (#21)

src/views/dashboard/related/profile/Content.vue

@@ -65,19 +65,16 @@ function loadTrees(l: boolean) {
 }
 
 .thread-stack {
-  padding: 5px 12px;
-  height: calc(50% - 50px);
+  padding: 5px;
+  height: calc(50% - 20px);
   overflow: auto;
   width: 100%;
 }
 
 .t-loading {
   text-align: center;
-  position: absolute;
   width: 100%;
-  height: 70px;
-  margin-top: 40px;
-  line-height: 88px;
   overflow: hidden;
+  height: calc(50% - 20px);
 }
 </style>

src/views/dashboard/related/profile/components/SpanTree.vue

@@ -35,16 +35,18 @@ limitations under the License. -->
         {{ t("analyze") }}
       </el-button>
     </div>
-    <Table
-      :data="profileStore.segmentSpans"
-      :traceId="
-        profileStore.currentSegment.traceIds &&
-        profileStore.currentSegment.traceIds[0]
-      "
-      :showBtnDetail="true"
-      headerType="profile"
-      @select="selectSpan"
-    />
+    <div class="profile-table">
+      <Table
+        :data="profileStore.segmentSpans"
+        :traceId="
+          profileStore.currentSegment.traceIds &&
+          profileStore.currentSegment.traceIds[0]
+        "
+        :showBtnDetail="true"
+        headerType="profile"
+        @select="selectSpan"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -158,10 +160,14 @@ function updateTimeRange() {
   padding: 5px;
   flex-shrink: 0;
   height: 50%;
-  overflow: auto;
   width: 100%;
 }
 
+.profile-table {
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+
 .profile-trace-detail-wrapper {
   padding: 5px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);

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

@@ -136,7 +136,7 @@ limitations under the License. -->
 <script lang="ts">
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
-import { ref, watch, computed, defineComponent } from "vue";
+import { ref, computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 import SpanDetail from "../D3Graph/SpanDetail.vue";
 
@@ -152,7 +152,6 @@ export default defineComponent({
   emits: ["select"],
   components: { SpanDetail },
   setup(props, { emit }) {
-    /* global Nullable */
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
     const { t } = useI18n();