From 9b5913177aa922cd9de57aecf081f0be4c07f695 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sun, 20 Mar 2022 18:04:53 +0800
Subject: [PATCH] watch selector for widgets

---
 src/views/dashboard/controls/Widget.vue           |  6 +-----
 .../related/topology/components/Graph.vue         | 13 +++++++++----
 .../related/topology/components/PodTopology.vue   | 15 ++++++++++++---
 src/views/dashboard/related/trace/Filter.vue      | 11 ++++++++++-
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 3a21969f..d3ebe2de 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -165,11 +165,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => [
-        selectorStore.currentService,
-        selectorStore.currentDestService,
-        appStore.durationTime,
-      ],
+      () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
         if (
           dashboardStore.entity === EntityType[0].value ||
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 77613db7..c2d107ee 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -64,7 +64,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
+import { ref, onMounted, onBeforeUnmount, reactive, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
@@ -95,8 +95,8 @@ const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
 const dashboardStore = useDashboardStore();
-const height = ref<number>(0);
-const width = ref<number>(0);
+const height = ref<number>(100);
+const width = ref<number>(100);
 const loading = ref<boolean>(false);
 const simulation = ref<any>(null);
 const svg = ref<Nullable<any>>(null);
@@ -120,7 +120,6 @@ const items = ref<
 const depth = ref<number>(props.config.graph.depth || 2);
 
 onMounted(async () => {
-  console.log(props.config.graph);
   loading.value = true;
   const resp = await getTopology();
   loading.value = false;
@@ -473,6 +472,12 @@ async function changeDepth(opt: Option[] | any) {
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resize);
 });
+watch(
+  () => [selectorStore.currentService, selectorStore.currentDestService],
+  () => {
+    freshNodes();
+  }
+);
 </script>
 <style lang="scss">
 .topo-svg {
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 4b791a06..57d951e1 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -71,6 +71,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { watch } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { ref, onMounted, reactive } from "vue";
@@ -96,8 +97,8 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
 const loading = ref<boolean>(false);
-const height = ref<number>(0);
-const width = ref<number>(0);
+const height = ref<number>(100);
+const width = ref<number>(100);
 const showSettings = ref<boolean>(false);
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
@@ -215,11 +216,19 @@ function handleClick(event: any) {
     topologyStore.setLink(null);
   }
 }
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    loadTopology(selectorStore.currentPod.id);
+    topologyStore.setNode(null);
+    topologyStore.setLink(null);
+  }
+);
 </script>
 <style lang="scss" scoped>
 .sankey {
   margin-top: 10px;
-  background-color: #333840;
+  background-color: #333840 !important;
   color: #ddd;
 }
 
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 7c72741e..b28a4aa5 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -210,7 +210,16 @@ function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
   tagsMap.value = data.tagsMap;
 }
 watch(
-  () => selectorStore.currentService,
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      return;
+    }
+    init();
+  }
+);
+watch(
+  () => [selectorStore.currentService],
   () => {
     if (dashboardStore.entity !== EntityType[0].value) {
       return;