feat: add widget and standard config

src/assets/icons/info_outline.svg

@@ -0,0 +1,18 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>info_outline</title>
+<path d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93zM11.016 17.016v-6h1.969v6h-1.969z"></path>
+</svg>

src/types/dashboard.ts

@@ -39,9 +39,15 @@ export interface StandardConfig {
   unit?: string;
   max?: string;
   min?: string;
+  plus: string;
+  minus: string;
+  multiply: string;
+  divide: string;
+  milliseconds: string;
+  seconds: string;
 }
 
-type GraphConfig = BarConfig | LineConfig;
+export type GraphConfig = BarConfig | LineConfig;
 export interface BarConfig {
   type?: string;
   showBackground?: boolean;

src/views/dashboard/configuration/ConfigEdit.vue

@@ -15,7 +15,14 @@ limitations under the License. -->
 <template>
   <div class="widget-config flex-v">
     <div class="graph">
-      <div class="header">{{ states.widget.title }}</div>
+      <div class="header">
+        <span>{{ states.widget.title }}</span>
+        <div class="tips">
+          <el-tooltip :content="states.widget.tips">
+            <Icon iconName="info_outline" size="sm" />
+          </el-tooltip>
+        </div>
+      </div>
       <div class="render-chart">
         <component
           :is="states.chartType"
@@ -80,7 +87,10 @@ limitations under the License. -->
           />
         </el-collapse-item>
         <el-collapse-item :title="t('standardOptions')" name="5">
-          <StandardOptions />
+          <StandardOptions
+            :config="states.standard"
+            @update="updateStandardOptions"
+          />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -107,7 +117,7 @@ import {
   DefaultGraphConfig,
 } from "../data";
 import { Option } from "@/types/app";
-import { WidgetConfig, GraphConfig } from "@/types/dashboard";
+import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard";
 import graphs from "../graphs";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
@@ -138,6 +148,7 @@ export default defineComponent({
       index: string;
       graph: GraphConfig;
       widget: WidgetConfig | any;
+      standard: StandardConfig;
     }>({
       metrics: selectedGrid.metrics || [],
       valueTypes: [],
@@ -148,10 +159,8 @@ export default defineComponent({
       source: {},
       index: selectedGrid.i,
       graph: {},
-      widget: {
+      widget: selectedGrid.widget,
-        tips: selectedGrid.widget.tips,
+      standard: selectedGrid.standard,
-        title: selectedGrid.widget.title,
-      },
     });
     if (states.metrics[0]) {
       queryMetricType(states.metrics[0]);
@@ -210,21 +219,27 @@ export default defineComponent({
     ];
     const configHeight = document.documentElement.clientHeight - 520;
 
-    function updateWidgetOptions(param: { label: string; value: string }) {
+    function updateWidgetOptions(param: { [key: string]: unknown }) {
-      if (states.widget[param.label] === undefined) {
+      states.widget = {
-        return;
+        ...states.widget,
-      }
+        ...param,
-      states.widget[param.label] = param.value;
+      };
     }
 
-    function updateGraphOptions(param: { label: string; value: unknown }) {
+    function updateGraphOptions(param: { [key: string]: unknown }) {
-      console.log(param);
       states.graph = {
         ...states.graph,
         ...param,
       };
     }
 
+    function updateStandardOptions(param: { [key: string]: unknown }) {
+      states.standard = {
+        ...states.standard,
+        ...param,
+      };
+    }
+
     async function queryMetrics() {
       const json = await dashboardStore.fetchMetricValue(
         dashboardStore.selectedGrid
@@ -284,6 +299,7 @@ export default defineComponent({
       updateWidgetOptions,
       configHeight,
       updateGraphOptions,
+      updateStandardOptions,
       applyConfig,
       loading,
     };
@@ -311,6 +327,13 @@ export default defineComponent({
   text-align: center;
   background-color: aliceblue;
   font-size: 12px;
+  position: relative;
+}
+
+.tips {
+  position: absolute;
+  right: 5px;
+  top: 0;
 }
 
 .render-chart {

src/views/dashboard/configuration/StandardOptions.vue

@@ -20,6 +20,7 @@ limitations under the License. -->
       v-model="state.unit"
       size="mini"
       placeholder="Please input Unit"
+      @change="changeStandardOpt({ unit: state.unit })"
     />
   </div>
   <div class="item">
@@ -30,6 +31,7 @@ limitations under the License. -->
       size="mini"
       placeholder="Select a sort order"
       class="selector"
+      @change="changeStandardOpt({ sortOrder: state.sortOrder })"
     />
   </div>
   <div class="item">
@@ -39,6 +41,7 @@ limitations under the License. -->
       v-model="state.max"
       size="mini"
       placeholder="auto"
+      @change="changeStandardOpt({ max: state.max })"
     />
   </div>
   <div class="item">
@@ -48,6 +51,7 @@ limitations under the License. -->
       v-model="state.min"
       size="mini"
       placeholder="auto"
+      @change="changeStandardOpt({ min: state.min })"
     />
   </div>
   <div class="item">
@@ -57,6 +61,7 @@ limitations under the License. -->
       v-model="state.plus"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ plus: state.plus })"
     />
   </div>
   <div class="item">
@@ -66,6 +71,7 @@ limitations under the License. -->
       v-model="state.minus"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ minus: state.minus })"
     />
   </div>
   <div class="item">
@@ -75,6 +81,7 @@ limitations under the License. -->
       v-model="state.multiply"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ multiply: state.multiply })"
     />
   </div>
   <div class="item">
@@ -84,6 +91,7 @@ limitations under the License. -->
       v-model="state.divide"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ divide: state.divide })"
     />
   </div>
   <div class="item">
@@ -93,6 +101,7 @@ limitations under the License. -->
       v-model="state.milliseconds"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ milliseconds: state.milliseconds })"
     />
   </div>
   <div class="item">
@@ -102,17 +111,27 @@ limitations under the License. -->
       v-model="state.seconds"
       size="mini"
       placeholder="none"
+      @change="changeStandardOpt({ seconds: state.seconds })"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, defineProps, defineEmits } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../data";
+import { StandardConfig } from "@/types/dashboard";
+import type { PropType } from "vue";
 
+const props = defineProps({
+  config: {
+    type: Object as PropType<StandardConfig>,
+    default: () => ({ unit: "", sortOrder: "DES" }),
+  },
+});
+const emits = defineEmits(["update"]);
 const { t } = useI18n();
 const state = reactive({
-  unit: "",
+  unit: props.config.unit,
   max: "",
   min: "",
   plus: "",
@@ -121,8 +140,12 @@ const state = reactive({
   divide: "",
   milliseconds: "",
   seconds: "",
-  sortOrder: "DES",
+  sortOrder: props.config.sortOrder,
 });
+
+function changeStandardOpt(param: { [key: string]: unknown }) {
+  emits("update", param);
+}
 </script>
 <style lang="scss" scoped>
 .label {

src/views/dashboard/configuration/WidgetOptions.vue

@@ -20,40 +20,39 @@ limitations under the License. -->
       v-model="title"
       size="mini"
       placeholder="Please input title"
-      @change="updateTitle"
+      @change="updateWidgetConfig({ title })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("tooltipsContent") }}</span>
     <el-input
       class="input"
-      v-model="tooltip"
+      v-model="tips"
       size="mini"
       placeholder="Please input tips"
-      @change="updateTips"
+      @change="updateWidgetConfig({ tips })"
     />
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, defineEmits, defineProps } from "vue";
 import { useI18n } from "vue-i18n";
+import { WidgetConfig } from "@/types/dashboard";
+import type { PropType } from "vue";
 
-defineProps({
+const props = defineProps({
   config: {
-    type: Object,
+    type: Object as PropType<WidgetConfig>,
     default: () => ({ title: "", tooltips: "" }),
   },
 });
 const emits = defineEmits(["update"]);
 const { t } = useI18n();
-const title = ref<string>("");
+const title = ref<string>(props.config.title);
-const tooltip = ref<string>("");
+const tips = ref<string>(props.config.tips);
 
-function updateTitle(value: string) {
+function updateWidgetConfig(param: { [key: string]: unknown }) {
-  emits("update", { value, label: "title" });
+  emits("update", param);
-}
-function updateTips(value: string) {
-  emits("update", { value, label: "tips" });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/data.ts

@@ -25,7 +25,6 @@ export const ChartTypes = [
   { label: "Table", value: "Table" },
   { label: "Endpoint List", value: "EndpointList" },
   { label: "Instance List", value: "InstanceList" },
-  // { label: "Image", value: "Image" },
 ];
 export const DefaultGraphConfig: { [key: string]: any } = {
   Bar: {