update

src/views/dashboard/related/log/LogTable/Index.vue

@@ -77,6 +77,7 @@ limitations under the License. -->
     border-bottom: 1px solid $border-color-primary;
     width: 100%;
     overflow: auto;
+    min-height: 350px;
   }
 
   .log-header {

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

@@ -18,10 +18,18 @@ limitations under the License. -->
   <div id="trace-action-box">
     <div @click="showDetail = true">Span Details</div>
     <div v-for="span in parentSpans" :key="span.parentSegmentId" @click="viewParentSpan(span)">{{
-      `Parent Span: ${span.parentSegmentId}`
+      `Parent Span: ${span.endpointName} -> Start Time: ${visDate(span.startTime)}`
     }}</div>
   </div>
-  <el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false" v-if="currentSpan?.segmentId">
+  <el-dialog
+    v-model="showDetail"
+    width="60%"
+    center
+    align-center
+    :destroy-on-close="true"
+    @closed="showDetail = false"
+    v-if="currentSpan?.segmentId"
+  >
     <SpanDetail :currentSpan="currentSpan" />
   </el-dialog>
 </template>
@@ -29,6 +37,7 @@ limitations under the License. -->
   import { ref, watch, onBeforeUnmount, onMounted } from "vue";
   import type { PropType } from "vue";
   import * as d3 from "d3";
+  import dayjs from "dayjs";
   import ListGraph from "../../utils/d3-trace-list";
   import TreeGraph from "../../utils/d3-trace-tree";
   import type { Span, Ref } from "@/types/trace";
@@ -52,8 +61,9 @@ limitations under the License. -->
   const refSpans = ref<Array<Ref>>([]);
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
-  const parentSpans = ref<Array<Ref>>([]);
+  const parentSpans = ref<Array<Span>>([]);
   const debounceFunc = debounce(draw, 500);
+  const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
 
   defineExpose({
     tree,
@@ -99,22 +109,28 @@ limitations under the License. -->
     }
   }
   function handleSelectSpan(i: Recordable) {
+    const spans = [];
     parentSpans.value = [];
     currentSpan.value = i.data;
-    parentSpans.value = [];
     if (!currentSpan.value) {
       return;
     }
     for (const ref of currentSpan.value.refs || []) {
-      parentSpans.value.push(ref);
+      spans.push(ref);
     }
-    if ((currentSpan.value.parentSpanId ?? -1) > -1) {
+    if (currentSpan.value.parentSpanId > -1) {
-      parentSpans.value.push({
+      spans.push({
         parentSegmentId: currentSpan.value.segmentId,
         parentSpanId: currentSpan.value.parentSpanId,
         traceId: currentSpan.value.traceId,
       });
     }
+    for (const span of spans) {
+      const item = props.data.find(
+        (d) => d.segmentId === span.parentSegmentId && d.spanId === span.parentSpanId && d.traceId === span.traceId,
+      );
+      item && parentSpans.value.push(item);
+    }
   }
   function viewParentSpan(span: Recordable) {
     tree.value.highlightParents(span);
@@ -423,7 +439,7 @@ limitations under the License. -->
 
   .trace-node.highlightedParent .node-text {
     font-weight: bold;
-    fill: #4caf50;
+    fill: #409eff;
   }
 
   #trace-action-box {

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

@@ -87,7 +87,14 @@ limitations under the License. -->
       {{ t("relatedTraceLogs") }}
     </el-button>
   </div>
-  <el-dialog v-model="showEventDetail" :destroy-on-close="true" @closed="showEventDetail = false">
+  <el-dialog
+    v-model="showEventDetail"
+    width="60%"
+    center
+    align-center
+    :destroy-on-close="true"
+    @closed="showEventDetail = false"
+  >
     <div>
       <div class="mb-10">
         <span class="grey title">Name:</span>
@@ -115,7 +122,14 @@ limitations under the License. -->
       </div>
     </div>
   </el-dialog>
-  <el-dialog v-model="showRelatedLogs" :destroy-on-close="true" @closed="showRelatedLogs = false">
+  <el-dialog
+    v-model="showRelatedLogs"
+    width="60%"
+    center
+    align-center
+    :destroy-on-close="true"
+    @closed="showRelatedLogs = false"
+  >
     <el-pagination
       v-model="pageNum"
       :page-size="pageSize"

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -413,16 +413,14 @@ export default class ListGraph {
     });
     const parentSpan = nodes.find(
       (node: Recordable) =>
-        span.parentSpanId === node.data.spanId &&
+        span.spanId === node.data.spanId &&
-        span.parentSegmentId === node.data.segmentId &&
+        span.segmentId === node.data.segmentId &&
         span.traceId === node.data.traceId,
     );
-    if (parentSpan) {
+    if (!parentSpan) return;
-      d3.select(`#list-node-${parentSpan.id}`).classed("highlightedParent", true);
+    d3.select(`#list-node-${parentSpan.id}`).classed("highlightedParent", true);
-    }
     d3.select("#trace-action-box").style("display", "none");
     this.selectedNode.classed("highlighted", false);
-    if (!parentSpan) return;
     const container = document.querySelector(".trace-chart .charts");
     const containerRect = container?.getBoundingClientRect();
     if (!containerRect) return;