update relateTrace

src/components/Graph.vue

@@ -47,6 +47,7 @@ import {
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { EventParams } from "@/types/app";
+import { Filters, RelatedTrace } from "@/types/dashboard";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
 import Trace from "@/views/dashboard/related/trace/Index.vue";
@@ -74,15 +75,10 @@ const props = defineProps({
     default: () => ({}),
   },
   filters: {
-    type: Object as PropType<{
+    type: Object as PropType<Filters>,
-      duration: {
+  },
-        startTime: string;
+  relatedTrace: {
-        endTime: string;
+    type: Object as PropType<RelatedTrace>,
-      };
-      isRange: boolean;
-      dataIndex?: number;
-      sourceId: string;
-    }>,
   },
 });
 const available = computed(

src/types/dashboard.d.ts

@@ -1,3 +1,4 @@
+import { DurationTime } from "@/types/app";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -40,7 +41,15 @@ export interface LayoutConfig {
   associate?: { widgetId: string }[];
   eventAssociate?: boolean;
   filters?: Filters;
+  relatedTrace?: RelatedTrace;
 }
+export type RelatedTrace = {
+  duration: DurationTime;
+  status: string;
+  queryOrder: string;
+  latency: any;
+};
+
 export type Filters = {
   dataIndex: number;
   sourceId: string;

src/views/dashboard/configuration/Widget.vue

@@ -36,6 +36,7 @@ limitations under the License. -->
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
+            relatedTrace: dashboardStore.selectedGrid.relatedTrace,
           }"
           :needQuery="true"
         />

src/views/dashboard/controls/Widget.vue

@@ -64,6 +64,7 @@ limitations under the License. -->
           id: data.id,
           metricConfig: data.metricConfig,
           filters: data.filters || {},
+          relatedTrace: data.relatedTrace || {},
         }"
         :needQuery="needQuery"
         @click="clickHandle"

src/views/dashboard/graphs/Line.vue

@@ -13,12 +13,22 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph :option="option" @select="clickEvent" :filters="config.filters" />
+  <Graph
+    :option="option"
+    @select="clickEvent"
+    :filters="config.filters"
+    :relatedTrace="config.relatedTrace"
+  />
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
-import { LineConfig, EventParams } from "@/types/dashboard";
+import {
+  LineConfig,
+  EventParams,
+  RelatedTrace,
+  Filters,
+} from "@/types/dashboard";
 
 /*global defineProps, defineEmits */
 const emits = defineEmits(["click"]);
@@ -32,15 +42,8 @@ const props = defineProps({
   config: {
     type: Object as PropType<
       LineConfig & {
-        filters: {
+        filters: Filters;
-          sourceId: string;
+        relatedTrace: RelatedTrace;
-          duration: {
-            startTime: string;
-            endTime: string;
-          };
-          isRange: boolean;
-          dataIndex?: number;
-        };
       } & { id: string }
     >,
     default: () => ({

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

@@ -53,7 +53,7 @@ import { ElMessage } from "element-plus";
 import { EntityType, QueryOrders, Status } from "../../data";
 import { LayoutConfig } from "@/types/dashboard";
 
-const filtersKeys: { [key: string]: string } = {
+const FiltersKeys: { [key: string]: string } = {
   status: "traceState",
   queryOrder: "queryOrder",
   duration: "queryDuration",
@@ -89,8 +89,8 @@ init();
 async function init() {
   if (!filters.id) {
     for (const d of Object.keys(filters)) {
-      if (filters[d]) {
+      if (filters[d] && d !== "duration") {
-        items.value.push({ key: d, value: filtersKeys[d] });
+        items.value.push({ key: d, value: FiltersKeys[d] });
       }
     }
     conditions.value = (items.value[0] && items.value[0].key) || "";