refactor

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

@@ -43,7 +43,7 @@ limitations under the License. -->
       <Table
         :data="profileStore.segmentSpans"
         :traceId="profileStore.currentSegment.traceId"
-        headerType="profile"
+        :headerType="WidgetType.Profile"
         @select="selectSpan"
       />
     </div>
@@ -59,6 +59,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import { ElMessage } from "element-plus";
   import { ProfileDataMode, ProfileDisplayMode } from "./data";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /* global defineEmits*/
   const emits = defineEmits(["loading", "displayMode"]);

src/views/dashboard/related/trace/Detail.vue

@@ -84,7 +84,7 @@ limitations under the License. -->
         :data="traceStore.traceSpans"
         :traceId="traceStore.currentTrace.traceIds[0].value"
         :showBtnDetail="false"
-        HeaderType="trace"
+        :headerType="WidgetType.Trace"
       />
     </div>
   </div>
@@ -160,6 +160,7 @@ limitations under the License. -->
         appStore,
         loading,
         traceId,
+        WidgetType,
       };
     },
   });

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

@@ -17,7 +17,7 @@ limitations under the License. -->
     <div class="trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
-    <TableContainer :tableData="tableData" :type="TraceGraphType.STATISTICS" :HeaderType="HeaderType">
+    <TableContainer :tableData="tableData" :type="TraceGraphType.STATISTICS" :headerType="headerType">
       <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
     </TableContainer>
   </div>
@@ -35,7 +35,7 @@ limitations under the License. -->
     data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
     showBtnDetail: { type: Boolean, default: false },
-    HeaderType: { type: String, default: "" },
+    headerType: { type: String, default: "" },
   });
   const emit = defineEmits(["load"]);
   const loading = ref<boolean>(true);

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

@@ -59,6 +59,7 @@ limitations under the License. -->
   import TableItem from "./TableItem.vue";
   import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";
   import { TraceGraphType } from "../constant";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /* global defineProps, Nullable, defineEmits, Recordable*/
   const props = defineProps({
@@ -74,7 +75,7 @@ limitations under the License. -->
   const dragger = ref<Nullable<HTMLSpanElement>>(null);
   let headerData: Recordable[] = TraceConstant;
 
-  if (props.headerType === "profile") {
+  if (props.headerType === WidgetType.Profile) {
     headerData = ProfileConstant;
   }
   if (props.type === TraceGraphType.STATISTICS) {

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

@@ -118,10 +118,10 @@ limitations under the License. -->
           <span>{{ data.serviceCode }}</span>
         </el-tooltip>
       </div>
-      <div class="application" v-show="headerType === 'profile'" @click="viewSpan($event)">
+      <div class="application" v-show="headerType === WidgetType.Profile" @click="viewSpan($event)">
         <span>{{ t("view") }}</span>
       </div>
-      <div class="application" v-show="headerType !== 'profile'">
+      <div class="application" v-show="headerType !== WidgetType.Profile">
         <span>{{ data.attachedEvents && data.attachedEvents.length }}</span>
       </div>
     </div>
@@ -150,6 +150,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { Themes } from "@/constants/data";
   import { TraceGraphType } from "../constant";
+  import { WidgetType } from "@/views/dashboard/data";
 
   /*global Recordable*/
   const props = {
@@ -215,7 +216,7 @@ limitations under the License. -->
       function selectSpan(event: Recordable) {
         const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item"));
         selectedItem(props.data);
-        if (props.headerType === "profile") {
+        if (props.headerType === WidgetType.Profile) {
           showSelectSpan(dom);
           return;
         }
@@ -264,6 +265,7 @@ limitations under the License. -->
         t,
         appStore,
         TraceGraphType,
+        WidgetType,
       };
     },
   });