fix: update selector params and list graphs (#54)

src/components/Graph.vue

@@ -53,6 +53,9 @@ const available = computed(
     (Array.isArray(props.option.series.data) && props.option.series.data[0])
 );
 onMounted(async () => {
+  if (!available.value) {
+    return;
+  }
   await setOptions(props.option);
   chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {
@@ -70,6 +73,9 @@ onMounted(async () => {
 watch(
   () => props.option,
   (newVal, oldVal) => {
+    if (!available.value) {
+      return;
+    }
     if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
       return;
     }

src/views/dashboard/configuration/Widget.vue

@@ -37,6 +37,7 @@ limitations under the License. -->
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
           }"
+          :needQuery="true"
         />
         <div v-show="!graph.type" class="no-data">
           {{ t("noData") }}

src/views/dashboard/graphs/EndpointList.vue

@@ -111,9 +111,10 @@ const props = defineProps({
       i: "",
     }),
   },
+  needQuery: { type: Boolean, default: false },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
-// const emit = defineEmits(["changeOpt"]);
+
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -121,8 +122,9 @@ const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
 const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
 
-queryEndpoints();
-
+if (props.needQuery) {
+  queryEndpoints();
+}
 async function queryEndpoints() {
   chartLoading.value = true;
   const resp = await selectorStore.getEndpoints({

src/views/dashboard/graphs/InstanceList.vue

@@ -48,6 +48,7 @@ limitations under the License. -->
             getLabel(metric, index)
           )} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
+          min-width="120"
         >
           <template #default="scope">
             <div class="chart">
@@ -70,7 +71,7 @@ limitations under the License. -->
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="Attributes" :width="100">
+        <el-table-column label="Attributes">
           <template #default="scope">
             <el-popover placement="left" :width="400" trigger="click">
               <template #reference>
@@ -142,7 +143,6 @@ const props = defineProps({
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   needQuery: { type: Boolean, default: false },
-  isEdit: { type: Boolean, default: false },
 });
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
@@ -152,8 +152,10 @@ const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
 const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+if (props.needQuery) {
+  queryInstance();
+}
 
-queryInstance();
 async function queryInstance() {
   chartLoading.value = true;
   const resp = await selectorStore.getServiceInstances();

src/views/dashboard/panel/Tool.vue

@@ -120,7 +120,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref, computed } from "vue";
+import { reactive, ref, computed, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -169,7 +169,6 @@ const key = computed(() => {
   const type = EntityType.find(
     (d: Option) => d.value === dashboardStore.entity
   );
-
   return (type && type.key) || 0;
 });
 
@@ -268,9 +267,9 @@ async function setDestSelector() {
     return;
   }
   const destPod = params.destPodId || selectorStore.destPods[0].id;
-  const currentDestPod = selectorStore.destPods.filter(
+  const currentDestPod = selectorStore.destPods.find(
     (d: { id: string }) => d.id === destPod
-  )[0];
+  );
   if (currentDestPod) {
     selectorStore.setCurrentDestPod(currentDestPod);
     states.currentDestPod = currentDestPod.label;
@@ -278,20 +277,20 @@ async function setDestSelector() {
 }
 
 async function getServices() {
-  if (key.value === 10 || key.value === 0) {
+  if (!dashboardStore.entity) {
     return;
   }
   if (!dashboardStore.layerId) {
     return;
   }
+  if (dashboardStore.entity === EntityType[1].value) {
+    return;
+  }
   const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
-  if (dashboardStore.entity === EntityType[1].value) {
-    return;
-  }
   selectorStore.setCurrentService(
     selectorStore.services.length ? selectorStore.services[0] : null
   );
@@ -539,6 +538,15 @@ function searchDestPods(query: string) {
     param
   );
 }
+watch(
+  () => dashboardStore.entity,
+  (newVal, oldVal) => {
+    if (newVal === oldVal) {
+      return;
+    }
+    getServices();
+  }
+);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {