From 118c678667c0e18027869ee4bf5e7db77e38c6fc Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 27 Jul 2022 15:08:47 +0800
Subject: [PATCH] update data

---
 src/views/dashboard/controls/Log.vue         |  8 +++--
 src/views/dashboard/controls/Trace.vue       |  2 +-
 src/views/dashboard/related/log/Header.vue   | 35 +++++++++++++++-----
 src/views/dashboard/related/trace/Filter.vue | 26 ++++++++++++---
 4 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 90e3b914..3c6508ae 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/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,
-    default: () => ({}),
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
   needQuery: { type: Boolean, default: true },
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 21163118..9279a8ad 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/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 />
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index de6c3fb1..7b16c4d6 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/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 */
-const options: LayoutConfig | undefined = inject("options");
+/*global  defineProps, Recordable */
 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) {
-      segmentId = options.filters.segmentId;
-      spanId = options.filters.spanId;
+    if (props.data.filters) {
+      segmentId = props.data.filters.segmentId;
+      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 {
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 813e8ed1..77e8c6a9 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/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 {