query metrics with standard config

src/views/dashboard/configuration/Widget.vue

@@ -31,12 +31,7 @@ limitations under the License. -->
           :is="dashboardStore.selectedGrid.graph.type"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
-          :config="{
-            ...dashboardStore.selectedGrid.graph,
-            i: dashboardStore.selectedGrid.i,
-            metrics: dashboardStore.selectedGrid.metrics,
-            metricTypes: dashboardStore.selectedGrid.metricTypes,
-          }"
+          :config="dashboardStore.selectedGrid"
         />
         <div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
           {{ t("noData") }}
@@ -58,7 +53,7 @@ limitations under the License. -->
           <WidgetOptions />
         </el-collapse-item>
         <el-collapse-item :title="t('standardOptions')" name="4">
-          <StandardOptions />
+          <StandardOptions @update="getSource" />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -101,7 +96,7 @@ export default defineComponent({
     const loading = ref<boolean>(false);
     const states = reactive<{
       activeNames: string;
-      source: any;
+      source: unknown;
       index: string;
       visType: Option[];
     }>({
@@ -120,7 +115,6 @@ export default defineComponent({
     }
 
     function applyConfig() {
-      console.log(dashboardStore.selectedGrid);
       dashboardStore.setConfigs(dashboardStore.selectedGrid);
       dashboardStore.setConfigPanel(false);
     }

src/views/dashboard/configuration/widget/StandardOptions.vue

@@ -40,6 +40,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.metricLabels"
       size="small"
       placeholder="auto"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item" v-show="percentile">
@@ -49,6 +50,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.labelsIndex"
       size="small"
       placeholder="auto"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -58,6 +60,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.plus"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -67,6 +70,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.minus"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -76,6 +80,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.multiply"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -85,6 +90,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.divide"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -94,6 +100,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.milliseconds"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
   <div class="item">
@@ -103,6 +110,7 @@ limitations under the License. -->
       v-model="selectedGrid.standard.seconds"
       size="small"
       placeholder="none"
+      @change="changeStandardOpt"
     />
   </div>
 </template>
@@ -111,21 +119,46 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
+import { ElMessage } from "element-plus";
 
+/*global defineEmits */
+const { t } = useI18n();
+const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
-const { t } = useI18n();
 const percentile = ref<boolean>(
   selectedGrid.metricTypes.includes("readLabeledMetricsValues")
 );
 const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");
 
-function changeStandardOpt(param: { [key: string]: unknown }) {
-  const standard = {
-    ...selectedGrid.standard,
-    ...param,
-  };
-  dashboardStore.selectWidget({ ...selectedGrid, standard });
+function changeStandardOpt(param?: any) {
+  let standard = dashboardStore.selectedGrid.standard;
+  if (param) {
+    standard = {
+      ...dashboardStore.selectedGrid.standard,
+      ...param,
+    };
+    dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, standard });
+  }
+  queryMetrics();
+}
+async function queryMetrics() {
+  const params = useQueryProcessor(dashboardStore.selectedGrid);
+  if (!params) {
+    emit("update", {});
+    return;
+  }
+
+  emit("loading", true);
+  const json = await dashboardStore.fetchMetricValue(params);
+  emit("loading", false);
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return;
+  }
+  const source = useSourceProcessor(json, dashboardStore.selectedGrid);
+  emit("update", source);
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/controls/Widget.vue

@@ -139,7 +139,7 @@ export default defineComponent({
       }
     }
     watch(
-      () => [props.data.metricTypes, props.data.metrics],
+      () => [props.data.metricTypes, props.data.metrics, props.data.standard],
       () => {
         if (!dashboardStore.selectedGrid) {
           return;

src/views/dashboard/graphs/Line.vue

@@ -37,8 +37,6 @@ const props = defineProps({
       smooth: false,
       showSymbol: false,
       opacity: 0.4,
-      showXAxis: true,
-      showYAxis: true,
     }),
   },
 });
@@ -175,7 +173,7 @@ function getOption() {
     },
     xAxis: {
       type: "category",
-      show: props.config.showXAxis,
+      show: true,
       axisTick: {
         lineStyle: { color: "#c1c5ca41" },
         alignWithLabel: true,
@@ -192,7 +190,7 @@ function getOption() {
       axisLabel: {
         color: "#9da5b2",
         fontSize: "11",
-        show: props.config.showYAxis,
+        show: true,
       },
     },
     series: temp,