feat: update page with changing times

src/views/dashboard/controls/Widget.vue

@@ -137,7 +137,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => [selectorStore.currentService],
+      () => selectorStore.currentService,
       () => {
         if (dashboardStore.entity === EntityType[0].value) {
           queryMetrics();
@@ -145,7 +145,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => [selectorStore.currentPod],
+      () => selectorStore.currentPod,
       () => {
         if (dashboardStore.entity === EntityType[0].value) {
           return;

src/views/dashboard/data.ts

@@ -144,16 +144,10 @@ export const EntityType = [
   { value: "All", label: "All", key: 10 },
   { value: "Endpoint", label: "Service Endpoint", key: 3 },
   { value: "ServiceInstance", label: "Service Instance", key: 3 },
-  { value: "ServiceRelationClient", label: "Service Relation(client)", key: 2 },
-  { value: "ServiceRelationServer", label: "Service Relation(server)", key: 2 },
+  { value: "ServiceRelation", label: "Service Relation", key: 2 },
   {
-    value: "ServiceInstanceRelationClient",
-    label: "Service Instance Relation(client)",
-    key: 4,
-  },
-  {
-    value: "ServiceInstanceRelationServer",
-    label: "Service Instance Relation(server)",
+    value: "ServiceInstanceRelation",
+    label: "Service Instance Relation",
     key: 4,
   },
   { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },

src/views/dashboard/panel/Tool.vue

@@ -84,9 +84,10 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import { EntityType, ToolIcons } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
@@ -95,6 +96,7 @@ import { Service } from "@/types/selector";
 
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
+const appStore = useAppStoreWithOut();
 const params = useRoute().params;
 const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
 const states = reactive<{
@@ -114,10 +116,14 @@ const states = reactive<{
 dashboardStore.setLayer(String(params.layerId));
 dashboardStore.setEntity(String(params.entity));
 
-if (params.serviceId) {
-  setSelector();
-} else {
-  getServices();
+initSelector();
+
+function initSelector() {
+  if (params.serviceId) {
+    setSelector();
+  } else {
+    getServices();
+  }
 }
 
 async function setSelector() {
@@ -230,6 +236,12 @@ async function fetchPods(type: string, setPod: boolean) {
     return;
   }
 }
+watch(
+  () => appStore.durationTime,
+  () => {
+    initSelector();
+  }
+);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {