feat: apply dashboard config

src/store/modules/dashboard.ts

@@ -63,7 +63,7 @@ export const dashboardStore = defineStore({
       this.showConfig = show;
     },
     selectWidget(widget: Nullable<LayoutConfig>) {
-      this.selectedWidget = ConfigData || widget;
+      this.selectedWidget = ConfigData || widget; //todo
     },
     setLayer(id: string) {
       this.layerId = id;
@@ -71,6 +71,13 @@ export const dashboardStore = defineStore({
     setEntity(type: string) {
       this.entity = type;
     },
+    setConfigs(param: { [key: string]: unknown }) {
+      const index = this.layout.findIndex((d: LayoutConfig) => d.i === param.i);
+      this.layout[index] = {
+        ...this.layout[index],
+        ...param,
+      };
+    },
     async fetchMetricType(item: string) {
       const res: AxiosResponse = await graph
         .query("queryTypeOfMetrics")

src/store/modules/data.ts

@@ -25,8 +25,8 @@ export const ConfigData: LayoutConfig = {
   queryMetricType: "readMetricsValues",
   chart: "Line",
   widget: {
-    title: "Title",
+    title: "Title123",
-    tips: "Tooltip",
+    tips: "Tooltip123",
   },
   graph: {
     showBackground: true,

src/views/dashboard/configuration/ConfigEdit.vue

@@ -82,7 +82,7 @@ limitations under the License. -->
       <el-button size="mini">
         {{ t("cancel") }}
       </el-button>
-      <el-button size="mini" type="primary">
+      <el-button size="mini" type="primary" @click="applyConfig">
         {{ t("apply") }}
       </el-button>
     </div>
@@ -120,6 +120,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const { loading } = Loading();
+    const { selectedWidget } = dashboardStore;
     const states = reactive<{
       metrics: string[];
       valueTypes: Option[];
@@ -127,19 +128,27 @@ export default defineComponent({
       metricQueryType: string;
       chartType: string;
       activeNames: string;
-      tips: string;
       source: any;
-      title: string;
+      index: string;
     }>({
-      metrics: dashboardStore.selectedWidget.metrics || [],
+      metrics: selectedWidget.metrics || [],
       valueTypes: [],
       valueType: "",
       metricQueryType: "",
-      chartType: dashboardStore.selectedWidget.chart,
+      chartType: selectedWidget.chart,
       activeNames: "1",
       source: {},
-      tips: "",
+      index: selectedWidget.i,
-      title: "",
+    });
+    const widgetOpt = reactive<
+      | {
+          title: string;
+          tips: string;
+        }
+      | any
+    >({
+      tips: selectedWidget.widget.tips,
+      title: selectedWidget.widget.title,
     });
     queryMetricType(states.metrics[0]);
 
@@ -164,7 +173,6 @@ export default defineComponent({
       const { typeOfMetrics } = resp.data;
       states.valueTypes = ValuesTypes[typeOfMetrics];
       states.valueType = ValuesTypes[typeOfMetrics][0].value;
-      console.log(states.valueType);
     }
 
     function changeValueType(val: Option[]) {
@@ -190,13 +198,11 @@ export default defineComponent({
     ];
     const configHeight = document.documentElement.clientHeight - 520;
 
-    function updateWidgetOptions(param: any) {
+    function updateWidgetOptions(param: { label: string; value: string }) {
-      if (param.title !== undefined) {
+      if (widgetOpt[param.label] === undefined) {
-        states.title = param.title;
+        return;
-      }
-      if (param.tips !== undefined) {
-        states.tips = param.tips;
       }
+      widgetOpt[param.label] = param.value;
     }
 
     async function queryMetrics() {
@@ -208,7 +214,7 @@ export default defineComponent({
         return;
       }
       const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: any) => d.value
+        (d: { value: number }, index: number) => d.value + index // todo
       );
       const m =
         dashboardStore.selectedWidget.metrics &&
@@ -223,7 +229,30 @@ export default defineComponent({
 
     queryMetrics();
 
+    function applyConfig() {
+      const opts = {
+        ...dashboardStore.selectedWidget,
+        metrics: states.metrics,
+        queryMetricType: states.valueType,
+        chart: states.chartType,
+        widget: {
+          ...dashboardStore.selectedWidget.widget,
+          title: widgetOpt.title,
+          tips: widgetOpt.tips,
+        },
+        graph: {
+          ...dashboardStore.selectedWidget.graph,
+        },
+        standard: {
+          ...dashboardStore.selectedWidget.standard,
+        },
+      };
+      dashboardStore.setConfigs(opts);
+      dashboardStore.setConfigPanel(false);
+    }
+
     return {
+      ...toRefs(widgetOpt),
       ...toRefs(states),
       changeChartType,
       changeValueType,
@@ -235,6 +264,7 @@ export default defineComponent({
       updateWidgetOptions,
       configHeight,
       dashboardStore,
+      applyConfig,
     };
   },
 });

src/views/dashboard/configuration/WidgetOptions.vue

@@ -45,10 +45,10 @@ const title = ref<string>("");
 const tooltip = ref<string>("");
 
 function updateTitle(value: string) {
-  emits("update", { title: value });
+  emits("update", { value, label: "title" });
 }
 function updateTips(value: string) {
-  emits("update", { tips: value });
+  emits("update", { value, label: "tips" });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/data.ts

@@ -47,11 +47,11 @@ export const ValuesTypes: {
   [key: string]: Array<{ label: string; value: string }>;
 } = {
   REGULAR_VALUE: [
+    { label: "read all values in the duration", value: "readMetricsValues" },
     {
       label: "read the single value in the duration",
       value: "readMetricsValue",
     },
-    { label: "read all values in the duration", value: "readMetricsValues" },
     { label: "get sorted top N values", value: "sortMetrics" },
   ],
   LABELED_VALUE: [

src/views/dashboard/panel/Widget.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>Title</div>
+      <div>{{ item.widget.title || "" }}</div>
       <div class="operations">
         <Icon
           class="mr-5"
@@ -42,14 +42,23 @@ import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import graphs from "../graphs";
+import { ElMessage } from "element-plus";
+import Loading from "@/utils/loading";
+import { useI18n } from "vue-i18n";
+
 const props = {
-  item: { type: Object as PropType<LayoutConfig>, default: () => ({}) },
+  item: {
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ widget: {} }),
+  },
 };
 export default defineComponent({
   name: "Widget",
   components: { ...graphs },
   props,
   setup(props) {
+    const { t } = useI18n();
+    const { loading } = Loading();
     const state = reactive({
       source: {},
     });
@@ -58,9 +67,15 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     queryMetrics();
     async function queryMetrics() {
+      const loadingInstance = loading({
+        text: t("loading"),
+        fullscreen: false,
+      });
       const json = await dashboardStore.fetchMetricValue(props.item);
 
+      loadingInstance.close();
       if (json.error) {
+        ElMessage.error(json.error);
         return;
       }
       const metricVal = json.data.readMetricsValues.values.values.map(