update data

src/views/dashboard/controls/Log.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Header :needQuery="needQuery" />
+      <Header :needQuery="needQuery" :data="data" />
     </div>
     <div class="log">
       <List />
@@ -43,12 +43,14 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
+import { LayoutConfig } from "@/types/dashboard";
+import type { PropType } from "vue";
 
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object,
+    type: Object as PropType<LayoutConfig>,
-    default: () => ({}),
+    default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
   needQuery: { type: Boolean, default: true },

src/views/dashboard/controls/Trace.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter :needQuery="needQuery" />
+      <Filter :needQuery="needQuery" :data="data" />
     </div>
     <div class="trace flex-h">
       <TraceList />

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

@@ -130,7 +130,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, onUnmounted, inject } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { useLogStore } from "@/store/modules/log";
@@ -143,10 +144,13 @@ import { EntityType } from "../../data";
 import { ErrorCategory } from "./data";
 import { LayoutConfig } from "@/types/dashboard";
 
-/*global  defineProps */
+/*global  defineProps, Recordable */
-const options: LayoutConfig | undefined = inject("options");
 const props = defineProps({
   needQuery: { type: Boolean, default: true },
+  data: {
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ graph: {} }),
+  },
 });
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
@@ -154,7 +158,7 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const logStore = useLogStore();
 const traceId = ref<string>(
-  (options && options.filters && options.filters.traceId) || ""
+  (props.data.filters && props.data.filters.traceId) || ""
 );
 const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
@@ -163,7 +167,7 @@ const tagsMap = ref<Option[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
 const isBrowser = ref<boolean>(dashboardStore.layerId === "BROWSER");
-const state = reactive<any>({
+const state = reactive<Recordable>({
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },
   service: { value: "", label: "" },
@@ -253,9 +257,9 @@ function searchLogs() {
     });
   } else {
     let segmentId, spanId;
-    if (options && options.filters) {
+    if (props.data.filters) {
-      segmentId = options.filters.segmentId;
+      segmentId = props.data.filters.segmentId;
-      spanId = options.filters.spanId;
+      spanId = props.data.filters.spanId;
     }
     logStore.setLogCondition({
       serviceId: selectorStore.currentService
@@ -337,7 +341,7 @@ function removeExcludeContent(index: number) {
 onUnmounted(() => {
   logStore.resetCondition();
   const item = {
-    ...options,
+    ...props.data,
     filters: undefined,
   };
   dashboardStore.setWidget(item);
@@ -368,6 +372,19 @@ watch(
     }
   }
 );
+watch(
+  () => props.data.filters,
+  (newJson, oldJson) => {
+    console.log(props.data.filters);
+    if (props.data.filters) {
+      if (JSON.stringify(newJson) === JSON.stringify(oldJson)) {
+        return;
+      }
+      traceId.value = props.data.filters.traceId || "";
+      init();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .inputs {

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

@@ -92,7 +92,8 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, inject } from "vue";
+import { ref, reactive, watch } from "vue";
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { Status } from "../../data";
@@ -106,18 +107,21 @@ import { EntityType } from "../../data";
 import { LayoutConfig } from "@/types/dashboard";
 
 /*global defineProps, Recordable */
-const options: LayoutConfig | undefined = inject("options");
 const props = defineProps({
   needQuery: { type: Boolean, default: true },
+  data: {
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ graph: {} }),
+  },
 });
+const traceId = ref<string>(
+  (props.data.filters && props.data.filters.traceId) || ""
+);
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
-const traceId = ref<string>(
-  (options && options.filters && options.filters.traceId) || ""
-);
 const minTraceDuration = ref<number>();
 const maxTraceDuration = ref<number>();
 const tagsList = ref<string[]>([]);
@@ -252,6 +256,18 @@ watch(
     }
   }
 );
+watch(
+  () => props.data.filters,
+  (newJson, oldJson) => {
+    if (props.data.filters) {
+      if (JSON.stringify(newJson) === JSON.stringify(oldJson)) {
+        return;
+      }
+      traceId.value = props.data.filters.traceId || "";
+      init();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .inputs {