From ad1e500c5447c27f91540d0b5497cd536f850082 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 12 Jan 2022 11:44:54 +0800
Subject: [PATCH] feat: update config

---
 src/store/{modules => }/data.ts               | 19 +++++--
 src/store/modules/dashboard.ts                | 19 ++-----
 src/types/dashboard.ts                        | 22 +++++---
 src/views/dashboard/Edit.vue                  |  1 +
 .../dashboard/configuration/ConfigEdit.vue    | 51 ++++++++++---------
 .../configuration/StandardOptions.vue         |  1 -
 .../dashboard/configuration/WidgetOptions.vue |  9 +++-
 .../configuration/graph-styles/Area.vue       | 42 ++++++++++++++-
 .../configuration/graph-styles/Bar.vue        |  7 +--
 .../configuration/graph-styles/Line.vue       |  7 +--
 src/views/dashboard/data.ts                   | 18 +++++++
 11 files changed, 130 insertions(+), 66 deletions(-)
 rename src/store/{modules => }/data.ts (83%)

diff --git a/src/store/modules/data.ts b/src/store/data.ts
similarity index 83%
rename from src/store/modules/data.ts
rename to src/store/data.ts
index f56c16cf..c09a465f 100644
--- a/src/store/modules/data.ts
+++ b/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",
-    tips: "Tooltip123",
+    title: "Title",
+    tips: "Tooltip",
   },
   graph: {
     showBackground: true,
@@ -34,7 +47,7 @@ export const ConfigData = {
   },
   standard: {
     sortOrder: "DEC",
-    unit: "s",
+    unit: "min",
   },
   children: [],
 };
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 35f3502c..7897a1aa 100644
--- a/src/store/modules/dashboard.ts
+++ b/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,
       };
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index c6a99b76..f4fee79b 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -30,14 +30,8 @@ export interface LayoutConfig {
 }
 
 export interface WidgetConfig {
-  title?: string;
-  tips?: string;
-}
-
-export interface GraphConfig {
-  type?: string;
-  showBackground?: boolean;
-  barWidth?: number;
+  title: string;
+  tips: string;
 }
 
 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;
+}
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 34621048..5dda9a57 100644
--- a/src/views/dashboard/Edit.vue
+++ b/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 />
diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index 48cc055f..337f6614 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/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
-            :is="`${states.chartType}Config`"
-            :config="dashboardStore.selectedGrid.graph"
-          />
+          <component :is="`${states.chartType}Config`" :config="states.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,
-    });
-    const widgetOpt = reactive<
-      | {
-          title: string;
-          tips: string;
-        }
-      | any
-    >({
-      tips: selectedGrid.widget.tips,
-      title: selectedGrid.widget.title,
+      graph: {},
+      widget: {
+        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,
-          tips: widgetOpt.tips,
+          title: states.widget.title,
+          tips: states.widget.tips,
         },
         graph: {
           ...dashboardStore.selectedGrid.graph,
@@ -254,7 +260,6 @@ export default defineComponent({
     }
 
     return {
-      ...toRefs(widgetOpt),
       states,
       changeChartType,
       changeValueType,
diff --git a/src/views/dashboard/configuration/StandardOptions.vue b/src/views/dashboard/configuration/StandardOptions.vue
index 4c09cb78..be2d949d 100644
--- a/src/views/dashboard/configuration/StandardOptions.vue
+++ b/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";
diff --git a/src/views/dashboard/configuration/WidgetOptions.vue b/src/views/dashboard/configuration/WidgetOptions.vue
index 8b956d00..0a801d43 100644
--- a/src/views/dashboard/configuration/WidgetOptions.vue
+++ b/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 } from "vue";
+import { ref, defineEmits, defineProps } 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>("");
diff --git a/src/views/dashboard/configuration/graph-styles/Area.vue b/src/views/dashboard/configuration/graph-styles/Area.vue
index 32b9abf3..a5ecc100 100644
--- a/src/views/dashboard/configuration/graph-styles/Area.vue
+++ b/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>
diff --git a/src/views/dashboard/configuration/graph-styles/Bar.vue b/src/views/dashboard/configuration/graph-styles/Bar.vue
index f4ce7a3d..a5ecc100 100644
--- a/src/views/dashboard/configuration/graph-styles/Bar.vue
+++ b/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
-      v-model="showBackground"
-      active-text="Yes"
-      inactive-text="No"
-    ></el-switch>
+    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
   </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: {
diff --git a/src/views/dashboard/configuration/graph-styles/Line.vue b/src/views/dashboard/configuration/graph-styles/Line.vue
index f4ce7a3d..a5ecc100 100644
--- a/src/views/dashboard/configuration/graph-styles/Line.vue
+++ b/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
-      v-model="showBackground"
-      active-text="Yes"
-      inactive-text="No"
-    ></el-switch>
+    <el-switch v-model="showBackground" active-text="Yes" inactive-text="No" />
   </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: {
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 7d1ded98..3fc28418 100644
--- a/src/views/dashboard/data.ts
+++ b/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",