feat: change metric graph with selectors

src/graph/fragments/selector.ts

@@ -23,6 +23,7 @@ export const Services = {
       label: name
       group
       layers
+      normal
   }
   `,
 };

src/views/dashboard/configuration/ConfigEdit.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="widget-config flex-v">
-    <div class="graph">
+    <div class="graph" v-loading="loading">
       <div class="header">
         <span>{{ states.widget.title }}</span>
         <div class="tips" v-show="states.widget.tips">
@@ -43,6 +43,7 @@ limitations under the License. -->
             :graph="states.graph"
             @update="getSource"
             @apply="getMetricsConfig"
+            @loading="setLoading"
           />
         </el-collapse-item>
         <el-collapse-item :title="t('selectVisualization')" name="2">
@@ -89,7 +90,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent } from "vue";
+import { reactive, defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -123,6 +124,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const { selectedGrid, entity } = dashboardStore;
+    const loading = ref<boolean>(false);
     const states = reactive<{
       activeNames: string;
       source: any;
@@ -192,6 +194,7 @@ export default defineComponent({
     function getSource(source: unknown) {
       states.source = source;
     }
+
     function getMetricsConfig(opts: {
       metrics?: string[];
       metricTypes?: string[];
@@ -204,6 +207,10 @@ export default defineComponent({
       }
     }
 
+    function setLoading(load: boolean) {
+      loading.value = load;
+    }
+
     function applyConfig() {
       const opts = {
         ...dashboardStore.selectedGrid,
@@ -229,6 +236,7 @@ export default defineComponent({
       applyConfig,
       getSource,
       getMetricsConfig,
+      setLoading,
     };
   },
 });

src/views/dashboard/configuration/MetricOptions.vue

@@ -78,7 +78,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const emit = defineEmits(["update", "apply"]);
+const emit = defineEmits(["update", "apply", "loading"]);
 const dashboardStore = useDashboardStore();
 const { selectedGrid, entity, metrics, metricTypes } = dashboardStore;
 const states = reactive<{
@@ -173,7 +173,9 @@ async function queryMetrics() {
     return;
   }
 
+  emit("loading", true);
   const json = await dashboardStore.fetchMetricValue(params);
+  emit("loading", false);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;

src/views/dashboard/controls/Tab.vue

@@ -150,9 +150,12 @@ function clickTabGrid(e: Event, item: LayoutConfig) {
   );
 }
 document.body.addEventListener("click", handleClick, false);
+
+const children = ref(
+  dashboardStore.layout[props.data.i].children[activeTabIndex.value].children
+);
 watch(
-  () =>
+  () => children.value,
-    dashboardStore.layout[props.data.i].children[activeTabIndex.value].children,
   (data) => {
     state.layout = data;
   }

src/views/dashboard/controls/Widget.vue

@@ -59,8 +59,8 @@ import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
 import graphs from "../graphs";
 import { useI18n } from "vue-i18n";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
@@ -87,9 +87,6 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (props.data.metrics && props.data.metrics[0]) {
-      queryMetrics();
-    }
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
       if (!params) {
@@ -118,14 +115,19 @@ export default defineComponent({
       }
     }
     watch(
-      () => [props.data.metricTypes, props.data.metrics],
+      () => [
+        props.data.metricTypes,
+        props.data.metrics,
+        selectorStore.currentService,
+      ],
       (data, old) => {
-        if (data[0] === old[0] && data[1] === old[1]) {
+        if (data[0] === old[0] && data[1] === old[1] && data[2] === old[2]) {
           return;
         }
         queryMetrics();
       }
     );
+
     return {
       state,
       appStore,

src/views/dashboard/graphs/InstanceList.vue

@@ -69,7 +69,8 @@ import { InstanceListConfig } from "@/types/dashboard";
 /*global defineProps */
 defineProps({
   data: {
-    type: Object,
+    type: Object as PropType<{ [key: string]: number[] }>,
+    default: () => ({}),
   },
   config: {
     type: Object as PropType<InstanceListConfig>,