select span

src/store/modules/trace.ts

@@ -34,6 +34,7 @@ interface TraceState {
   conditions: Recordable;
   traceSpanLogs: Recordable[];
   selectorStore: Recordable;
+  selectedSpan: Recordable<Span>;
 }
 
 export const traceStore = defineStore({
@@ -45,6 +46,7 @@ export const traceStore = defineStore({
     traceList: [],
     traceSpans: [],
     currentTrace: {},
+    selectedSpan: {},
     conditions: {
       queryDuration: useAppStoreWithOut().durationTime,
       traceState: "ALL",
@@ -64,6 +66,9 @@ export const traceStore = defineStore({
     setTraceSpans(spans: Span[]) {
       this.traceSpans = spans;
     },
+    setSelectedSpan(span: Span) {
+      this.selectedSpan = span;
+    },
     resetState() {
       this.traceSpans = [];
       this.traceList = [];

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

@@ -126,7 +126,6 @@ limitations under the License. -->
     }
   }
   function handleSelectSpan(i: Recordable) {
-    console.log(i);
     const spans = [];
     const refSpans = [];
     parentSpans.value = [];

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

@@ -47,7 +47,7 @@ limitations under the License. -->
       :key="`key${index}`"
       :type="type"
       :headerType="headerType"
-      @select="selectItem"
+      @click="selectItem()"
     />
     <slot></slot>
   </div>
@@ -55,6 +55,7 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref, onMounted } from "vue";
   import type { PropType } from "vue";
+  import { useTraceStore } from "@/store/modules/trace";
   import type { Span } from "@/types/trace";
   import TableItem from "./TableItem.vue";
   import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";
@@ -69,6 +70,7 @@ limitations under the License. -->
     traceId: { type: String, default: "" },
   });
   const emits = defineEmits(["select"]);
+  const traceStore = useTraceStore();
   const method = ref<number>(300);
   const componentKey = ref<number>(300);
   const flag = ref<boolean>(true);
@@ -103,9 +105,8 @@ limitations under the License. -->
       };
     };
   });
-  function selectItem(span: Span) {
-    console.log(span);
-    emits("select", span);
+  function selectItem() {
+    emits("select", traceStore.selectedSpan);
   }
   function sortStatistics(key: string) {
     const element = props.tableData;

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

@@ -133,7 +133,6 @@ limitations under the License. -->
         :data="child"
         :type="type"
         :headerType="headerType"
-        @select="selectedItem(child)"
       />
     </div>
     <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
@@ -148,6 +147,7 @@ limitations under the License. -->
   import SpanDetail from "../D3Graph/SpanDetail.vue";
   import { dateFormat } from "@/utils/dateFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useTraceStore } from "@/store/modules/trace";
   import { Themes } from "@/constants/data";
   import { TraceGraphType } from "../constant";
   import { WidgetType } from "@/views/dashboard/data";
@@ -163,10 +163,10 @@ limitations under the License. -->
   export default defineComponent({
     name: "TableItem",
     props,
-    emits: ["select"],
     components: { SpanDetail },
-    setup(props, { emit }) {
+    setup(props) {
       const appStore = useAppStoreWithOut();
+      const traceStore = useTraceStore();
       const displayChildren = ref<boolean>(true);
       const showDetail = ref<boolean>(false);
       const { t } = useI18n();
@@ -223,12 +223,13 @@ limitations under the License. -->
         viewSpanDetail(dom);
       }
       function viewSpan(event: Recordable) {
+        showDetail.value = true;
         const dom = event.composedPath().find((d: Recordable) => d.className.includes("trace-item"));
-        emit("select", props.data);
+        selectedItem(props.data);
         viewSpanDetail(dom);
       }
-      function selectedItem(data: Recordable) {
-        emit("select", data);
+      function selectedItem(span: Recordable) {
+        traceStore.setSelectedSpan(span);
       }
       function viewSpanDetail(dom: HTMLSpanElement) {
         showSelectSpan(dom);