sort spans in segments

src/types/trace.d.ts

@@ -46,8 +46,15 @@ export interface Span {
   children?: Span[];
   tags?: Array<Map<string, string>>;
   logs?: log[];
+  parentSegmentId?: string;
+  refs?: Ref[];
 }
-
+export type Ref = {
+  type: string;
+  parentSegmentId: string;
+  parentSpanId: number;
+  traceId: string;
+};
 export interface log {
   time: number;
   data: Map<string, string>;

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

@@ -64,7 +64,11 @@ limitations under the License. -->
       <div class="mb-5 blue sm">
         <Selector
           size="small"
-          :value="traceId"
+          :value="
+            traceStore.currentTrace.traceIds &&
+            traceStore.currentTrace.traceIds[0] &&
+            traceStore.currentTrace.traceIds[0].value
+          "
           :options="traceStore.currentTrace.traceIds"
           @change="changeTraceId"
           class="trace-detail-ids"
@@ -149,7 +153,6 @@ import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
 import copy from "@/utils/copy";
-import List from "./components/List.vue";
 import graphs from "./components/index";
 import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { ElMessage } from "element-plus";
@@ -158,18 +161,13 @@ export default defineComponent({
   name: "TraceDetail",
   components: {
     ...graphs,
-    List,
     LogTable,
   },
   setup() {
     const { t } = useI18n();
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
-    const traceId = ref<string>(
+    const traceId = ref<string>("");
-      traceStore.currentTrace.traceIds &&
-        traceStore.currentTrace.traceIds[0] &&
-        traceStore.currentTrace.traceIds[0].value
-    );
     const displayMode = ref<string>("List");
     const pageNum = ref<number>(1);
     const pageSize = 10;
@@ -183,7 +181,7 @@ export default defineComponent({
     const showTraceLogs = ref<boolean>(false);
 
     function handleClick() {
-      copy(traceId.value);
+      copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
     }
 
     async function changeTraceId(opt: Option[] | any) {

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

@@ -31,7 +31,7 @@ import _ from "lodash";
 import * as d3 from "d3";
 import ListGraph from "../../utils/d3-trace-list";
 import TreeGraph from "../../utils/d3-trace-tree";
-import { Span } from "@/types/trace";
+import { Span, Ref } from "@/types/trace";
 import SpanDetail from "./SpanDetail.vue";
 
 /* global defineProps, Nullable, defineExpose*/
@@ -45,6 +45,7 @@ const showDetail = ref<boolean>(false);
 const fixSpansSize = ref<number>(0);
 const segmentId = ref<any>([]);
 const currentSpan = ref<Array<Span>>([]);
+const refSpans = ref<Array<Ref>>([]);
 const tree = ref<any>(null);
 const traceGraph = ref<Nullable<HTMLDivElement>>(null);
 defineExpose({
@@ -103,14 +104,17 @@ function changeTree() {
   segmentId.value = [];
   const segmentGroup: any = {};
   const segmentIdGroup: any = [];
-  const fixSpans: any[] = [];
+  const fixSpans: Span[] = [];
-  const segmentHeaders: any = [];
+  const segmentHeaders: Span[] = [];
   for (const span of props.data) {
+    if (span.refs.length) {
+      refSpans.value.push(...span.refs);
+    }
     if (span.parentSpanId === -1) {
       segmentHeaders.push(span);
     } else {
-      const index = props.data.findIndex(
+      const item = props.data.find(
-        (i: any) =>
+        (i: Span) =>
           i.segmentId === span.segmentId && i.spanId === span.spanId - 1
       );
       const fixSpanKeyContent = {
@@ -119,7 +123,7 @@ function changeTree() {
         spanId: span.spanId - 1,
         parentSpanId: span.spanId - 2,
       };
-      if (index === -1 && !_.find(fixSpans, fixSpanKeyContent)) {
+      if (!item && !_.find(fixSpans, fixSpanKeyContent)) {
         fixSpans.push({
           ...fixSpanKeyContent,
           refs: [],
@@ -133,6 +137,8 @@ function changeTree() {
           layer: "Broken",
           tags: [],
           logs: [],
+          startTime: 0,
+          endTime: 0,
         });
       }
     }
@@ -167,6 +173,8 @@ function changeTree() {
               layer: "Broken",
               tags: [],
               logs: [],
+              startTime: 0,
+              endTime: 0,
             });
           }
           // if root broken node is not exist, create a root broken node.
@@ -191,6 +199,8 @@ function changeTree() {
                 layer: "Broken",
                 tags: [],
                 logs: [],
+                startTime: 0,
+                endTime: 0,
               });
             }
           }
@@ -268,14 +278,28 @@ function changeTree() {
 }
 function collapse(d: Span) {
   if (d.children) {
+    const item = refSpans.value.find(
+      (s: Ref) =>
+        s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId
+    );
     let dur = d.endTime - d.startTime;
     d.children.forEach((i: Span) => {
       dur -= i.endTime - i.startTime;
     });
     d.dur = dur < 0 ? 0 : dur;
+    if (item) {
+      d.children = d.children.sort(compare("startTime"));
+    }
     d.children.forEach((i: Span) => collapse(i));
   }
 }
+function compare(p: string) {
+  return (m: any, n: any) => {
+    const a = m[p];
+    const b = n[p];
+    return a - b;
+  };
+}
 onBeforeUnmount(() => {
   d3.selectAll(".d3-tip").remove();
   window.removeEventListener("resize", resize);