feat: update config

src/store/data.ts

@@ -14,6 +14,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export const NewControl = {
+  x: 0,
+  y: 0,
+  w: 24,
+  h: 12,
+  i: "0",
+  type: "Widget",
+  widget: {
+    title: "Title",
+  },
+  graph: {},
+  standard: {},
+};
 export const ConfigData = {
   x: 0,
   y: 0,
@@ -24,8 +37,8 @@ export const ConfigData = {
   queryMetricType: "readMetricsValues",
   type: "Widget",
   widget: {
-    title: "Title123",
+    title: "Title",
-    tips: "Tooltip123",
+    tips: "Tooltip",
   },
   graph: {
     showBackground: true,
@@ -34,7 +47,7 @@ export const ConfigData = {
   },
   standard: {
     sortOrder: "DEC",
-    unit: "s",
+    unit: "min",
   },
   children: [],
 };

src/store/modules/dashboard.ts

@@ -19,8 +19,9 @@ import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graph from "@/graph";
 import { AxiosResponse } from "axios";
-import { ConfigData } from "./data";
+import { ConfigData } from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { NewControl } from "../data";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -29,19 +30,7 @@ interface DashboardState {
   layerId: string;
   activedGridItem: string;
 }
-const newControl: LayoutConfig = {
+
-  x: 0,
-  y: 0,
-  w: 24,
-  h: 12,
-  i: "0",
-  type: "Widget",
-  widget: {
-    title: "Title",
-  },
-  graph: {},
-  standard: {},
-};
 export const dashboardStore = defineStore({
   id: "dashboard",
   state: (): DashboardState => ({
@@ -58,7 +47,7 @@ export const dashboardStore = defineStore({
     },
     addControl(type: string) {
       const newWidget: LayoutConfig = {
-        ...newControl,
+        ...NewControl,
         i: String(this.layout.length),
         type,
       };

src/types/dashboard.ts

@@ -30,14 +30,8 @@ export interface LayoutConfig {
 }
 
 export interface WidgetConfig {
-  title?: string;
+  title: string;
-  tips?: string;
+  tips: string;
-}
-
-export interface GraphConfig {
-  type?: string;
-  showBackground?: boolean;
-  barWidth?: number;
 }
 
 export interface StandardConfig {
@@ -46,3 +40,15 @@ export interface StandardConfig {
   max?: string;
   min?: string;
 }
+
+export type GraphConfig = BarConfig | LineConfig;
+interface BarConfig {
+  type?: string;
+  showBackground?: boolean;
+  barWidth?: number;
+}
+interface LineConfig {
+  type?: string;
+  showBackground?: boolean;
+  barWidth?: number;
+}

src/views/dashboard/Edit.vue

@@ -20,6 +20,7 @@ limitations under the License. -->
       v-model="dashboardStore.showConfig"
       title="Edit Graph Options"
       fullscreen
+      :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
       <widget-config />

src/views/dashboard/configuration/ConfigEdit.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="widget-config flex-v">
     <div class="graph">
-      <div class="header">{{ title }}</div>
+      <div class="header">{{ states.widget.title }}</div>
       <div class="render-chart">
         <component
           :is="states.chartType"
@@ -66,13 +66,13 @@ limitations under the License. -->
           </div>
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
-          <component
+          <component :is="`${states.chartType}Config`" :config="states.graph" />
-            :is="`${states.chartType}Config`"
-            :config="dashboardStore.selectedGrid.graph"
-          />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
-          <WidgetOptions @update="updateWidgetOptions" />
+          <WidgetOptions
+            :config="states.widget"
+            @update="updateWidgetOptions"
+          />
         </el-collapse-item>
         <el-collapse-item :title="t('standardOptions')" name="5">
           <StandardOptions />
@@ -90,13 +90,19 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent, toRefs, ref } 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";
 import { ElMessage } from "element-plus";
-import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
+import {
+  ValuesTypes,
+  MetricQueryTypes,
+  ChartTypes,
+  DefaultGraphConfig,
+} from "../data";
 import { Option } from "@/types/app";
+import { WidgetConfig, GraphConfig } from "@/types/dashboard";
 import graphs from "../graphs";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
@@ -125,6 +131,8 @@ export default defineComponent({
       activeNames: string;
       source: any;
       index: string;
+      graph: GraphConfig;
+      widget: WidgetConfig | any;
     }>({
       metrics: selectedGrid.metrics || [],
       valueTypes: [],
@@ -134,16 +142,11 @@ export default defineComponent({
       activeNames: "1",
       source: {},
       index: selectedGrid.i,
-    });
+      graph: {},
-    const widgetOpt = reactive<
+      widget: {
-      | {
+        tips: selectedGrid.widget.tips,
-          title: string;
+        title: selectedGrid.widget.title,
-          tips: string;
+      },
-        }
-      | any
-    >({
-      tips: selectedGrid.widget.tips,
-      title: selectedGrid.widget.title,
     });
     if (states.metrics[0]) {
       queryMetricType(states.metrics[0]);
@@ -183,6 +186,9 @@ export default defineComponent({
 
     function changeChartType(item: Option) {
       states.chartType = String(item.value);
+      states.graph = {
+        ...DefaultGraphConfig[item.value],
+      };
     }
 
     const metricOpts = [
@@ -200,10 +206,10 @@ export default defineComponent({
     const configHeight = document.documentElement.clientHeight - 520;
 
     function updateWidgetOptions(param: { label: string; value: string }) {
-      if (widgetOpt[param.label] === undefined) {
+      if (states.widget[param.label] === undefined) {
         return;
       }
-      widgetOpt[param.label] = param.value;
+      states.widget[param.label] = param.value;
     }
 
     async function queryMetrics() {
@@ -239,8 +245,8 @@ export default defineComponent({
         chart: states.chartType,
         widget: {
           ...dashboardStore.selectedGrid.widget,
-          title: widgetOpt.title,
+          title: states.widget.title,
-          tips: widgetOpt.tips,
+          tips: states.widget.tips,
         },
         graph: {
           ...dashboardStore.selectedGrid.graph,
@@ -254,7 +260,6 @@ export default defineComponent({
     }
 
     return {
-      ...toRefs(widgetOpt),
       states,
       changeChartType,
       changeValueType,

src/views/dashboard/configuration/StandardOptions.vue

@@ -106,7 +106,6 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ElInput } from "element-plus";
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../data";

src/views/dashboard/configuration/WidgetOptions.vue

@@ -35,10 +35,15 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ElInput } from "element-plus";
+import { ref, defineEmits, defineProps } from "vue";
-import { ref, defineEmits } from "vue";
 import { useI18n } from "vue-i18n";
 
+defineProps({
+  config: {
+    type: Object,
+    default: () => ({ title: "", tooltips: "" }),
+  },
+});
 const emits = defineEmits(["update"]);
 const { t } = useI18n();
 const title = ref<string>("");

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

@@ -12,7 +12,45 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
-<template>bar config</template>
+<template>
+  <div>
+    <span class="label">Bar Width</span>
+    <el-slider
+      class="bar-width"
+      v-model="barWidth"
+      show-input
+      input-size="small"
+    />
+  </div>
+  <div>
+    <span class="label">Show Background</span>
+    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
+  </div>
+</template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { defineProps, ref } from "vue";
+import type { PropType } from "vue";
+import { BarConfig } from "./types";
+
+const props = defineProps({
+  config: {
+    type: Object as PropType<BarConfig>,
+    default: () => ({ showBackground: true, barWidth: 30 }),
+  },
+});
+const barWidth = ref(props.config.barWidth);
+const showBackground = ref(props.config.showBackground);
 </script>
+<style lang="scss" scoped>
+.bar-width {
+  width: 500px;
+  margin-top: -13px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+</style>

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

@@ -24,18 +24,13 @@ limitations under the License. -->
   </div>
   <div>
     <span class="label">Show Background</span>
-    <el-switch
+    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
-      v-model="showBackground"
-      active-text="Yes"
-      inactive-text="No"
-    ></el-switch>
   </div>
 </template>
 <script lang="ts" setup>
 import { defineProps, ref } from "vue";
 import type { PropType } from "vue";
 import { BarConfig } from "./types";
-import { ElSlider, ElSwitch } from "element-plus";
 
 const props = defineProps({
   config: {

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

@@ -24,18 +24,13 @@ limitations under the License. -->
   </div>
   <div>
     <span class="label">Show Background</span>
-    <el-switch
+    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
-      v-model="showBackground"
-      active-text="Yes"
-      inactive-text="No"
-    ></el-switch>
   </div>
 </template>
 <script lang="ts" setup>
 import { defineProps, ref } from "vue";
 import type { PropType } from "vue";
 import { BarConfig } from "./types";
-import { ElSlider, ElSwitch } from "element-plus";
 
 const props = defineProps({
   config: {

src/views/dashboard/data.ts

@@ -27,6 +27,24 @@ export const ChartTypes = [
   { label: "Instance List", value: "InstanceList" },
   // { label: "Image", value: "Image" },
 ];
+export const DefaultGraphConfig: { [key: string]: any } = {
+  Bar: {
+    type: "Bar",
+    showBackground: true,
+    barWidth: 30,
+  },
+  Line: {
+    type: "Line",
+    showBackground: true,
+    barWidth: 30,
+  },
+  Area: {
+    type: "Area",
+    showBackground: true,
+    barWidth: 30,
+  },
+};
+
 export enum MetricQueryTypes {
   ReadMetricsValue = "readMetricsValue",
   ReadMetricsValues = "readMetricsValues",