fix service list for list and tree graphs

src/store/modules/trace.ts

@@ -35,6 +35,7 @@ interface TraceState {
   traceSpanLogs: Recordable[];
   selectorStore: Recordable;
   selectedSpan: Recordable<Span>;
+  serviceList: string[];
 }
 const { getDurationTime } = useDuration();
 
@@ -56,6 +57,7 @@ export const traceStore = defineStore({
     },
     traceSpanLogs: [],
     selectorStore: useSelectorStore(),
+    serviceList: [],
   }),
   actions: {
     setTraceCondition(data: Recordable) {
@@ -180,9 +182,9 @@ export const traceStore = defineStore({
       if (response.errors) {
         return response;
       }
-      const data = response.data.trace.spans;
-
-      this.setTraceSpans(data || []);
+      const data = response.data.trace.spans || [];
+      this.serviceList = Array.from(new Set(data.map((i: Span) => i.serviceCode)));
+      this.setTraceSpans(data);
       return response;
     },
     async getSpanLogs(params: Recordable) {

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

@@ -13,7 +13,12 @@ limitations under the License. -->
 <template>
   <div class="charts">
     <div>
-      <span class="charts-item mr-5" v-for="(i, index) in list" :key="index" :style="`color:${computedScale(index)}`">
+      <span
+        class="charts-item mr-5"
+        v-for="(i, index) in traceStore.serviceList"
+        :key="index"
+        :style="`color:${computedScale(index)}`"
+      >
         <Icon iconName="issue-open-m" class="mr-5" size="sm" />
         <span>{{ i }}</span>
       </span>
@@ -27,11 +32,11 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import * as d3 from "d3";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useTraceStore } from "@/store/modules/trace";
   import type { Span } from "@/types/trace";
   import Graph from "./D3Graph/Index.vue";
   import { Themes } from "@/constants/data";
@@ -44,12 +49,12 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const appStore = useAppStoreWithOut();
-  const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
+  const traceStore = useTraceStore();
 
   function computedScale(i: number) {
     const sequentialScale = d3
       .scaleSequential()
-      .domain([0, list.value.length + 1])
+      .domain([0, traceStore.serviceList.length + 1])
       .interpolator(d3.interpolateCool);
     return sequentialScale(i);
   }

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

@@ -15,7 +15,7 @@ limitations under the License. -->
     <div>
       <span
         class="time-charts-item mr-5"
-        v-for="(i, index) in list"
+        v-for="(i, index) in traceStore.serviceList"
         :key="index"
         :style="`color:${computedScale(index)}`"
       >
@@ -45,22 +45,23 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import type { Span } from "@/types/trace";
   import { useI18n } from "vue-i18n";
-  import { ref, computed } from "vue";
+  import { ref } from "vue";
   import { TraceGraphType } from "./constant";
+  import { useTraceStore } from "@/store/modules/trace";
 
   /* global defineProps */
-  const props = defineProps({
+  defineProps({
     data: { type: Array as PropType<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
   });
   const { t } = useI18n();
-  const list = computed(() => Array.from(new Set(props.data.map((i: Span) => i.serviceCode))));
+  const traceStore = useTraceStore();
   const charts = ref<any>(null);
 
   function computedScale(i: number) {
     const sequentialScale = d3
       .scaleSequential()
-      .domain([0, list.value.length + 1])
+      .domain([0, traceStore.serviceList.length + 1])
       .interpolator(d3.interpolateCool);
     return sequentialScale(i);
   }

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

@@ -22,6 +22,7 @@ import dayjs from "dayjs";
 import icons from "@/assets/img/icons";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { Themes } from "@/constants/data";
+import { useTraceStore } from "@/store/modules/trace";
 
 export default class ListGraph {
   private barHeight = 48;
@@ -92,7 +93,7 @@ export default class ListGraph {
     this.data = data;
     this.min = d3.min(this.row.map((i) => i.startTime));
     this.max = d3.max(this.row.map((i) => i.endTime - this.min)) || 0;
-    this.list = Array.from(new Set(this.row.map((i) => i.serviceCode)));
+    this.list = useTraceStore().serviceList;
     this.xScale = d3
       .scaleLinear()
       .range([0, this.width * 0.387])

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

@@ -19,6 +19,7 @@ import * as d3 from "d3";
 import d3tip from "d3-tip";
 import type { Trace, Span } from "@/types/trace";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useTraceStore } from "@/store/modules/trace";
 import { Themes } from "@/constants/data";
 
 export default class TraceMap {
@@ -87,7 +88,7 @@ export default class TraceMap {
     this.data = data;
     this.min = Number(d3.min(this.row.map((i: Span) => i.startTime)));
     this.max = Number(d3.max(this.row.map((i: Span) => i.endTime - this.min)));
-    this.list = Array.from(new Set(this.row.map((i: Span) => i.serviceCode)));
+    this.list = useTraceStore().serviceList;
     this.xScale = d3.scaleLinear().range([0, 100]).domain([0, this.max]);
     this.sequentialScale = d3
       .scaleSequential()