watch selector for widgets

src/views/dashboard/controls/Widget.vue

@@ -165,11 +165,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => [
+      () => [selectorStore.currentService, selectorStore.currentDestService],
-        selectorStore.currentService,
-        selectorStore.currentDestService,
-        appStore.durationTime,
-      ],
       () => {
         if (
           dashboardStore.entity === EntityType[0].value ||

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 height = ref<number>(100);
-const width = ref<number>(0);
+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 {

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 height = ref<number>(100);
-const width = ref<number>(0);
+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;
 }
 

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;