query data due to changing duration

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,
         };
       }

src/views/dashboard/controls/Widget.vue

@@ -108,11 +108,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (
+    if (props.needQuery || !dashboardStore.currentDashboard.id) {
-      dashboardStore.entity === EntityType[1].value ||
-      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,

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" },

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 }}

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 }}

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 {

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 {

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 {

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 {

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 {