From b9b50df3d6bb5887a06b1a507e74ef26d3e4cebe Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sun, 20 Mar 2022 18:57:18 +0800
Subject: [PATCH] query data due to changing duration

---
 src/store/modules/dashboard.ts                     |  4 ++--
 src/views/dashboard/controls/Widget.vue            | 14 +++++++++-----
 src/views/dashboard/data.ts                        |  1 -
 src/views/dashboard/graphs/EndpointList.vue        |  6 +++++-
 src/views/dashboard/graphs/InstanceList.vue        |  6 +++++-
 src/views/dashboard/related/log/Header.vue         |  8 ++++++++
 src/views/dashboard/related/profile/Header.vue     | 13 +++++++++++++
 .../related/topology/components/Graph.vue          | 10 ++++++++++
 .../related/topology/components/PodTopology.vue    | 10 ++++++++++
 src/views/dashboard/related/trace/Filter.vue       |  8 ++++++++
 10 files changed, 70 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 3ed9a3fd..48392963 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -98,9 +98,9 @@ export const dashboardStore = defineStore({
           showDepth: true,
           depth:
             this.entity === EntityType[1].value
-              ? 2
-              : this.entity === EntityType[0].value
               ? 1
+              : this.entity === EntityType[0].value
+              ? 2
               : 3,
         };
       }
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index d3ebe2de..e1838247 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -108,11 +108,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (
-      dashboardStore.entity === EntityType[1].value ||
-      props.needQuery ||
-      !dashboardStore.currentDashboard.id
-    ) {
+    if (props.needQuery || !dashboardStore.currentDashboard.id) {
       queryMetrics();
     }
 
@@ -184,6 +180,14 @@ export default defineComponent({
         queryMetrics();
       }
     );
+    watch(
+      () => appStore.durationTime,
+      () => {
+        if (dashboardStore.entity === EntityType[1].value) {
+          queryMetrics();
+        }
+      }
+    );
 
     return {
       state,
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index d0be14cb..da2d6712 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -186,7 +186,6 @@ export const ServiceTools = [
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
-  { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "save", content: "Apply", id: "apply" },
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 38b01fc2..27fbd7eb 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -35,7 +35,11 @@ limitations under the License. -->
           <template #default="scope">
             <router-link
               class="link"
-              :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+              :to="`/dashboard/${dashboardStore.layerId}/${
+                EntityType[2].value
+              }/${selectorStore.currentService.id}/${
+                scope.row.id
+              }/${config.dashboardName.split(' ').join('-')}`"
               :style="{ fontSize: `${config.fontSize}px` }"
             >
               {{ scope.row.label }}
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 4d844b69..06e7a23f 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -35,7 +35,11 @@ limitations under the License. -->
           <template #default="scope">
             <router-link
               class="link"
-              :to="`/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+              :to="`/dashboard/${dashboardStore.layerId}/${
+                EntityType[3].value
+              }/${selectorStore.currentService.id}/${
+                scope.row.id
+              }/${config.dashboardName.split(' ').join('-')}`"
               :style="{ fontSize: `${config.fontSize}px` }"
             >
               {{ scope.row.label }}
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 5051aa90..71d6d922 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -299,6 +299,14 @@ watch(
     init();
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      init();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .inputs {
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 80fc3233..6fd3333f 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -56,9 +56,14 @@ import { useProfileStore } from "@/store/modules/profile";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import NewTask from "./components/NewTask.vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { EntityType } from "../../data";
 
 const profileStore = useProfileStore();
+const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
 const { t } = useI18n();
 // const service = ref<any>({});
 const endpointName = ref<string>("");
@@ -104,6 +109,14 @@ watch(
     searchTasks();
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      searchTasks();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .header {
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index aee84bf8..2058640b 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -84,6 +84,7 @@ import { ElMessage } from "element-plus";
 import Settings from "./Settings.vue";
 import { Option } from "@/types/app";
 import { Service } from "@/types/selector";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -96,6 +97,7 @@ const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
 const dashboardStore = useDashboardStore();
+const appStore = useAppStoreWithOut();
 const height = ref<number>(100);
 const width = ref<number>(100);
 const loading = ref<boolean>(false);
@@ -479,6 +481,14 @@ watch(
     freshNodes();
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      init();
+    }
+  }
+);
 </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 43e6bfbe..e9a36bc1 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -80,6 +80,7 @@ import { Option } from "@/types/app";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType, DepthList } from "../../../data";
 import { ElMessage } from "element-plus";
 import Sankey from "./Sankey.vue";
@@ -97,6 +98,7 @@ const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
+const appStore = useAppStoreWithOut();
 const loading = ref<boolean>(false);
 const height = ref<number>(100);
 const width = ref<number>(100);
@@ -225,6 +227,14 @@ watch(
     topologyStore.setLink(null);
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    loadTopology(selectorStore.currentPod.id);
+    topologyStore.setNode(null);
+    topologyStore.setLink(null);
+  }
+);
 </script>
 <style lang="scss" scoped>
 .sankey {
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index b28a4aa5..251b7e6c 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -227,6 +227,14 @@ watch(
     init();
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      init();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 .inputs {