refactor: set selectedGrid

src/views/dashboard/configuration/ConfigEdit.vue

@@ -16,21 +16,23 @@ limitations under the License. -->
   <div class="widget-config flex-v">
     <div class="graph" v-loading="loading">
       <div class="header">
-        <span>{{ states.widget.title }}</span>
-        <div class="tips" v-show="states.widget.tips">
-          <el-tooltip :content="states.widget.tips">
+        <span>{{ selectedGrid.widget.title }}</span>
+        <div class="tips" v-show="selectedGrid.widget.tips">
+          <el-tooltip :content="selectedGrid.widget.tips">
             <Icon iconName="info_outline" size="sm" />
           </el-tooltip>
         </div>
       </div>
       <div class="render-chart">
         <component
-          :is="states.graph.type"
+          :is="selectedGrid.graph.type"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
-          :config="states.graph"
+          :config="selectedGrid.graph"
         />
-        <div v-show="!states.graph.type" class="no-data">{{ t("noData") }}</div>
+        <div v-show="!selectedGrid.graph.type" class="no-data">
+          {{ t("noData") }}
+        </div>
       </div>
     </div>
     <div class="collapse" :style="{ height: configHeight + 'px' }">
@@ -39,12 +41,7 @@ limitations under the License. -->
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('metricName')" name="1">
-          <MetricOptions
-            :graph="states.graph"
-            @update="getSource"
-            @apply="getMetricsConfig"
-            @loading="setLoading"
-          />
+          <MetricOptions @update="getSource" @loading="setLoading" />
         </el-collapse-item>
         <el-collapse-item :title="t('selectVisualization')" name="2">
           <div class="chart-types">
@@ -52,34 +49,20 @@ limitations under the License. -->
               v-for="(type, index) in states.visType"
               :key="index"
               @click="changeChartType(type)"
-              :class="{ active: type.value === states.graph.type }"
+              :class="{ active: type.value === selectedGrid.graph.type }"
             >
               {{ type.label }}
             </span>
           </div>
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
-          <component
-            :is="`${states.graph.type}Config`"
-            :config="{
-              ...states.graph,
-              metrics: states.metrics,
-              metricTypes: states.metricTypes,
-            }"
-            @update="updateGraphOptions"
-          />
+          <component :is="`${selectedGrid.graph.type}Config`" />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
-          <WidgetOptions
-            :config="states.widget"
-            @update="updateWidgetOptions"
-          />
+          <WidgetOptions />
         </el-collapse-item>
         <el-collapse-item :title="t('standardOptions')" name="5">
-          <StandardOptions
-            :config="states.standard"
-            @update="updateStandardOptions"
-          />
+          <StandardOptions />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -106,7 +89,6 @@ import {
   EntityType,
 } from "../data";
 import { Option } from "@/types/app";
-import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard";
 import graphs from "../graphs";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
@@ -133,26 +115,16 @@ export default defineComponent({
       activeNames: string;
       source: any;
       index: string;
-      graph: GraphConfig | any;
-      widget: WidgetConfig | any;
-      standard: StandardConfig;
       visType: Option[];
       isTable: boolean;
-      metrics: string[];
-      metricTypes: string[];
     }>({
       activeNames: "1",
       source: {},
       index: selectedGrid.i,
-      graph: selectedGrid.graph,
-      widget: selectedGrid.widget,
-      standard: selectedGrid.standard,
       visType: [],
       isTable: false,
-      metrics: [],
-      metricTypes: [],
     });
-    states.isTable = TableChartTypes.includes(states.graph.type || "");
+    states.isTable = TableChartTypes.includes(selectedGrid.graph.type || "");
 
     if (entity === EntityType[0].value) {
       states.visType = ChartTypes.filter(
@@ -169,62 +141,24 @@ export default defineComponent({
     }
 
     function changeChartType(item: Option) {
-      states.graph = {
+      const graph = {
+        ...selectedGrid.graph,
         ...DefaultGraphConfig[item.value],
       };
-      states.isTable = TableChartTypes.includes(states.graph.type);
-    }
-    function updateWidgetOptions(param: { [key: string]: unknown }) {
-      states.widget = {
-        ...states.widget,
-        ...param,
-      };
-    }
-
-    function updateGraphOptions(param: { [key: string]: unknown }) {
-      states.graph = {
-        ...states.graph,
-        ...param,
-      };
-    }
-
-    function updateStandardOptions(param: { [key: string]: unknown }) {
-      states.standard = {
-        ...states.standard,
-        ...param,
-      };
+      states.isTable = TableChartTypes.includes(selectedGrid.graph.type);
+      dashboardStore.selectWidget({ ...selectedGrid, graph });
     }
 
     function getSource(source: unknown) {
       states.source = source;
     }
 
-    function getMetricsConfig(opts: {
-      metrics?: string[];
-      metricTypes?: string[];
-    }) {
-      if (opts.metrics !== undefined) {
-        states.metrics = opts.metrics;
-      }
-      if (opts.metricTypes !== undefined) {
-        states.metricTypes = opts.metricTypes;
-      }
-    }
-
     function setLoading(load: boolean) {
       loading.value = load;
     }
 
     function applyConfig() {
-      const opts = {
-        ...dashboardStore.selectedGrid,
-        metrics: states.metrics,
-        metricTypes: states.metricTypes,
-        widget: states.widget,
-        graph: states.graph,
-        standard: states.standard,
-      };
-      dashboardStore.setConfigs(opts);
+      dashboardStore.setConfigs(dashboardStore.selectedGrid);
       dashboardStore.setConfigPanel(false);
     }
 
@@ -234,13 +168,10 @@ export default defineComponent({
       changeChartType,
       t,
       appStoreWithOut,
-      updateWidgetOptions,
       configHeight,
-      updateGraphOptions,
-      updateStandardOptions,
+      selectedGrid,
       applyConfig,
       getSource,
-      getMetricsConfig,
       setLoading,
     };
   },

src/views/dashboard/configuration/MetricOptions.vue

@@ -70,7 +70,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { reactive, watch } from "vue";
-import type { PropType } from "vue";
 import { Option } from "@/types/app";
 import { GraphConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -79,14 +78,8 @@ import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
 
-/*global defineProps, defineEmits */
-const props = defineProps({
-  graph: {
-    type: Object as PropType<GraphConfig>,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(["update", "apply", "loading"]);
+/*global defineEmits */
+const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const { selectedGrid, entity } = dashboardStore;
 const { metrics, metricTypes } = selectedGrid;
@@ -99,13 +92,13 @@ const states = reactive<{
   metricList: (Option & { type: string })[];
   graph: GraphConfig | any;
 }>({
-  metrics: metrics && metrics.length ? selectedGrid.metrics : [""],
+  metrics: metrics && metrics.length ? metrics : [""],
   metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
   metricTypeList: [],
   visType: [],
   isTable: false,
   metricList: [],
-  graph: props.graph,
+  graph: selectedGrid.graph,
 });
 states.isTable = TableChartTypes.includes(states.graph.type);
 
@@ -141,7 +134,6 @@ function changeMetrics(index: number, arr: (Option & { type: string })[]) {
   if (!arr.length) {
     states.metricTypeList = [];
     states.metricTypes = [];
-    emit("apply", { metricTypes: states.metricTypes });
     dashboardStore.selectWidget({
       ...selectedGrid,
       ...{ metricTypes: states.metricTypes, metrics: states.metrics },
@@ -157,7 +149,6 @@ function changeMetrics(index: number, arr: (Option & { type: string })[]) {
     ...selectedGrid,
     ...{ metricTypes: states.metricTypes, metrics: states.metrics },
   });
-  emit("apply", { metricTypes: states.metricTypes, metrics: states.metrics });
   queryMetrics();
 }
 
@@ -184,7 +175,6 @@ function changeMetricType(index: number, opt: Option[]) {
     ...selectedGrid,
     ...{ metricTypes: states.metricTypes },
   });
-  emit("apply", { metricTypes: states.metricTypes });
   queryMetrics();
 }
 async function queryMetrics() {
@@ -222,8 +212,8 @@ function deleteMetric(index: number) {
   states.metricTypes.splice(index, 1);
 }
 watch(
-  () => props.graph,
-  (data: any) => {
+  () => selectedGrid.graph,
+  (data: { type: string }) => {
     states.isTable = TableChartTypes.includes(data.type);
   }
 );

src/views/dashboard/configuration/StandardOptions.vue

@@ -119,20 +119,13 @@ limitations under the License. -->
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../data";
-import { StandardConfig } from "@/types/dashboard";
-import type { PropType } from "vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
-const props = defineProps({
-  config: {
-    type: Object as PropType<StandardConfig>,
-    default: () => ({ unit: "", sortOrder: "DES" }),
-  },
-});
-const emits = defineEmits(["update"]);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
 const { t } = useI18n();
 const state = reactive({
-  unit: props.config.unit,
+  unit: selectedGrid.standard.unit,
   max: "",
   min: "",
   plus: "",
@@ -141,11 +134,15 @@ const state = reactive({
   divide: "",
   milliseconds: "",
   seconds: "",
-  sortOrder: props.config.sortOrder,
+  sortOrder: selectedGrid.standard.sortOrder,
 });
 
 function changeStandardOpt(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const standard = {
+    ...selectedGrid.standard,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, standard });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/WidgetOptions.vue

@@ -37,23 +37,20 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { WidgetConfig } from "@/types/dashboard";
-import type { PropType } from "vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
-const props = defineProps({
-  config: {
-    type: Object as PropType<WidgetConfig>,
-    default: () => ({ title: "", tooltips: "" }),
-  },
-});
-const emits = defineEmits(["update"]);
 const { t } = useI18n();
-const title = ref<string>(props.config.title || "");
-const tips = ref<string>(props.config.tips || "");
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const title = ref<string>(selectedGrid.widget.title || "");
+const tips = ref<string>(selectedGrid.widget.tips || "");
 
 function updateWidgetConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const widget = {
+    ...selectedGrid.widget,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, widget });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/Area.vue

@@ -29,24 +29,21 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { AreaConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
 
-const props = defineProps({
-  config: {
-    type: Object as PropType<AreaConfig>,
-    default: () => ({ opacity: 0.4 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const opacity = ref(props.config.opacity);
+const opacity = ref(selectedGrid.graph.opacity);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/Bar.vue

@@ -25,24 +25,20 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { BarConfig } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 import { useI18n } from "vue-i18n";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-
-const props = defineProps({
-  config: {
-    type: Object as PropType<BarConfig>,
-    default: () => ({ showBackground: true, barWidth: 30 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const showBackground = ref(props.config.showBackground || false);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const showBackground = ref(selectedGrid.graph.showBackground || false);
 
 function changeConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/Card.vue

@@ -29,24 +29,20 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { CardConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-
-const props = defineProps({
-  config: {
-    type: Object as PropType<CardConfig>,
-    default: () => ({ fontSize: 12 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const fontSize = ref(props.config.fontSize);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/EndpointList.vue

@@ -29,24 +29,21 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { EndpointListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
 const { t } = useI18n();
 
-const props = defineProps({
-  config: {
-    type: Object as PropType<EndpointListConfig>,
-    default: () => ({ fontSize: 12 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const fontSize = ref(props.config.fontSize);
+const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/InstanceList.vue

@@ -29,24 +29,20 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { InstanceListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-
-const props = defineProps({
-  config: {
-    type: Object as PropType<InstanceListConfig>,
-    default: () => ({ fontSize: 12 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const fontSize = ref(props.config.fontSize);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/Line.vue

@@ -43,25 +43,22 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { LineConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-const props = defineProps({
-  config: {
-    type: Object as PropType<LineConfig>,
-    default: () => ({}),
-  },
-});
-const emits = defineEmits(["update"]);
-const smooth = ref(props.config.smooth);
-const showSymbol = ref(props.config.showSymbol);
-const step = ref(props.config.step);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const smooth = ref(selectedGrid.graph.smooth);
+const showSymbol = ref(selectedGrid.graph.showSymbol);
+const step = ref(selectedGrid.graph.step);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/ServiceList.vue

@@ -29,24 +29,20 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { ServiceListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-
-const props = defineProps({
-  config: {
-    type: Object as PropType<ServiceListConfig>,
-    default: () => ({ fontSize: 12 }),
-  },
-});
-const emits = defineEmits(["update"]);
-const fontSize = ref(props.config.fontSize);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/Table.vue

@@ -45,29 +45,22 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { TableConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-const props = defineProps({
-  config: {
-    type: Object as PropType<TableConfig>,
-    default: () => ({
-      showTableValues: true,
-      tableHeaderCol1: "",
-      tableHeaderCol2: "",
-    }),
-  },
-});
-const emits = defineEmits(["update"]);
-const showTableValues = ref(props.config.showTableValues);
-const tableHeaderCol1 = ref(props.config.tableHeaderCol1);
-const tableHeaderCol2 = ref(props.config.tableHeaderCol2);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const showTableValues = ref(selectedGrid.graph.showTableValues);
+const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
+const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/graph-styles/TopList.vue

@@ -29,25 +29,20 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import type { PropType } from "vue";
-import { TopListConfig } from "@/types/dashboard";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-/*global defineProps, defineEmits */
 const { t } = useI18n();
-const props = defineProps({
-  config: {
-    type: Object as PropType<TopListConfig>,
-    default: () => ({
-      topN: 10,
-    }),
-  },
-});
-const emits = defineEmits(["update"]);
-const topN = ref(props.config.topN);
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const topN = ref(selectedGrid.graph.topN);
 
 function updateConfig(param: { [key: string]: unknown }) {
-  emits("update", param);
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/graphs/Line.vue

@@ -20,7 +20,6 @@ import { computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
 import { LineConfig } from "@/types/dashboard";
-import { config } from "@vue/test-utils";
 
 /*global defineProps */
 const props = defineProps({