fix: update span tree

src/views/dashboard/controls/Profile.vue

@@ -20,8 +20,8 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
-      <div class="tools">
+      <div class="tools" @click="removeWidget">
-        <span @click="removeWidget">{{ t("delete") }}</span>
+        <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
     <Header />

src/views/dashboard/controls/Trace.vue

@@ -20,8 +20,8 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
-      <div class="tools">
+      <div class="tools" @click="removeWidget">
-        <span @click="removeWidget">{{ t("delete") }}</span>
+        <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
     <div class="header">

src/views/dashboard/data.ts

@@ -210,8 +210,8 @@ export const Status = [
   { label: "Error", value: "ERROR" },
 ];
 export const QueryOrders = [
-  { label: "startTime", value: "BY_START_TIME" },
+  { label: "Start Time", value: "BY_START_TIME" },
-  { label: "duration", value: "BY_DURATION" },
+  { label: "Duration", value: "BY_DURATION" },
 ];
 export const TraceEntitys = ["All", "Service", "ServiceInstance", "Endpoint"];
 export const ProfileMode: any[] = [

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

@@ -78,7 +78,7 @@ async function selectTrace(item: Trace) {
 <style lang="scss" scoped>
 .profile-trace-wrapper {
   width: 300px;
-  height: calc((100% - 60px) / 2);
+  height: 50%;
   overflow: auto;
 
   .no-data {

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

@@ -45,8 +45,8 @@ limitations under the License. -->
         profileStore.currentSegment.traceIds[0]
       "
       :showBtnDetail="true"
-      :HeaderType="'profile'"
+      headerType="profile"
-      @selectSpan="selectSpan"
+      @select="selectSpan"
     />
   </div>
 </template>

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

@@ -15,45 +15,45 @@ limitations under the License. -->
 <template>
   <div>
     <h5 class="mb-15">{{ t("tags") }}.</h5>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("service") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("instance") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.serviceInstanceName }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.label }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("spanType") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.type }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("component") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.component }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">Peer:</span>
       <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
     </div>
-    <div class="mb-10 clear">
+    <div class="mb-10 clear item">
       <span class="g-sm-4 grey">{{ t("error") }}:</span>
       <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
     </div>
-    <div class="mb-10 clear" v-for="i in currentSpan.tags" :key="i.key">
+    <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
       <span class="g-sm-4 grey">{{ i.key }}:</span>
       <span class="g-sm-8 wba">
         {{ i.value }}
-        <svg
+        <span
           v-if="i.key === 'db.statement'"
-          class="icon vm grey link-hover cp ml-5"
+          class="grey link-hover cp ml-5"
           @click="copy(i.value)"
         >
-          <use xlink:href="#review-list"></use>
+          <Icon iconName="review-list" />
-        </svg>
+        </span>
       </span>
     </div>
     <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length">
@@ -71,20 +71,16 @@ limitations under the License. -->
             class="r rk-sidebox-magnify"
             @click="showCurrentSpanDetail(_i.value)"
           >
-            <svg class="icon">
+            <Icon iconName="magnify" />
-              <use xlink:href="#magnify"></use>
-            </svg>
           </span>
         </div>
         <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
       </div>
     </div>
-    <div @click="getTaceLogs()">
+    <el-button class="popup-btn" type="primary" @click="getTaceLogs">
-      <el-button class="popup-btn" type="primary">
       {{ t("relatedTraceLogs") }}
     </el-button>
   </div>
-  </div>
   <el-dialog
     v-model="showRelatedLogs"
     :destroy-on-close="true"
@@ -132,6 +128,7 @@ const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
   showRelatedLogs.value = true;
+  console.log(props.currentSpan);
   const res = await traceStore.getSpanLogs({
     condition: {
       relatedTrace: {
@@ -161,4 +158,16 @@ function showCurrentSpanDetail(text: string) {
   width: 100%;
   text-align: center;
 }
+
+.item span {
+  height: 21px;
+}
+
+.link-hover {
+  cursor: pointer;
+}
+
+.link-hover:hover {
+  color: #448dfe;
+}
 </style>

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

@@ -20,7 +20,8 @@ limitations under the License. -->
     <TableContainer
       :tableData="tableData"
       type="table"
-      :HeaderType="HeaderType"
+      :headerType="headerType"
+      @select="handleSelectSpan"
     >
       <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
     </TableContainer>
@@ -31,27 +32,26 @@ import { ref, watch, onMounted } from "vue";
 import type { PropType } from "vue";
 import TableContainer from "./TableContainer.vue";
 import traceTable from "../../utils/trace-table";
+import { Span } from "@/types/trace";
 
 /* global defineProps, defineEmits */
 const props = defineProps({
   data: { type: Array as PropType<any>, default: () => [] },
   traceId: { type: String, default: "" },
   showBtnDetail: { type: Boolean, default: false },
-  HeaderType: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 });
 const emit = defineEmits(["select", "view", "load"]);
 const loading = ref<boolean>(true);
 const tableData = ref<any>([]);
 const showDetail = ref<boolean>(false);
-const currentSpan = ref<any[]>([]);
+const currentSpan = ref<Span | any>({});
 
 onMounted(() => {
   tableData.value = formatData(
     traceTable.changeTree(props.data, props.traceId)
   );
   loading.value = false;
-  emit("select", handleSelectSpan);
-  emit("view", handleViewSpan);
   emit("load", () => {
     loading.value = true;
   });
@@ -69,7 +69,7 @@ function formatData(arr: any[], level = 1, totalExec?: number) {
   return arr;
 }
 
-function handleSelectSpan(data: any[]) {
+function handleSelectSpan(data: Span) {
   currentSpan.value = data;
   if (!props.showBtnDetail) {
     showDetail.value = true;
@@ -77,10 +77,6 @@ function handleSelectSpan(data: any[]) {
   emit("select", data);
 }
 
-function handleViewSpan() {
-  showDetail.value = true;
-}
-
 watch(
   () => props.data,
   () => {

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

@@ -43,12 +43,14 @@ limitations under the License. -->
         {{ item.value }}
       </div>
     </div>
-    <table-item
+    <TableItem
       :method="method"
       v-for="(item, index) in tableData"
       :data="item"
       :key="'key' + index"
       :type="type"
+      :headerType="headerType"
+      @click="selectItem(item)"
     />
     <slot></slot>
   </div>
@@ -56,21 +58,24 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import type { PropType } from "vue";
+import { Span } from "@/types/trace";
 import TableItem from "./TableItem.vue";
 import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";
 
-/* global defineProps, Nullable */
+/* global defineProps, Nullable, defineEmits */
 const props = defineProps({
   tableData: { type: Array as PropType<any>, default: () => [] },
   type: { type: String, default: "" },
-  HeaderType: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 });
+const emits = defineEmits(["select"]);
 const method = ref<number>(300);
 const componentKey = ref<number>(300);
 const flag = ref<boolean>(true);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 let headerData: any[] = TraceConstant;
-if (props.HeaderType === "profile") {
+
+if (props.headerType === "profile") {
   headerData = ProfileConstant;
 }
 if (props.type === "statistics") {
@@ -94,6 +99,9 @@ onMounted(() => {
     };
   };
 });
+function selectItem(span: Span) {
+  emits("select", span);
+}
 function sortStatistics(key: string) {
   const element = props.tableData;
   for (let i = 0; i < element.length; i++) {

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

@@ -143,13 +143,13 @@ const props = {
   data: { type: Object as PropType<any>, default: () => ({}) },
   method: { type: Number, default: 0 },
   type: { type: String, default: "" },
+  headerType: { type: String, default: "" },
 };
 export default defineComponent({
   name: "TableItem",
   props,
-  emits: ["select"],
   components: { SpanDetail },
-  setup(props, { emit }) {
+  setup(props) {
     /* global Nullable */
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
@@ -193,12 +193,14 @@ export default defineComponent({
       if (!traceItem.value) {
         return;
       }
-      traceItem.value.style.background = "rgba(0, 0, 0, 0.1)";
+
+      traceItem.value.style.background = "rgba(0, 0, 0, 1)";
     }
     function viewSpanDetail() {
-      showDetail.value = true;
       showSelectSpan();
-      emit("select", props.data);
+      if (props.headerType === "trace") {
+        showDetail.value = true;
+      }
     }
 
     watch(