fix: edit widget config

src/components/Graph.vue

@@ -28,6 +28,7 @@ import {
 import type { PropType } from "vue";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
+
 /*global Nullable*/
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
 const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
@@ -45,7 +46,7 @@ onMounted(() => {
   if (!chartRef.value) {
     return;
   }
-  window.addEventListener("resize", resize);
+  setOptions(props.option);
   addResizeListener(unref(chartRef), resize);
 });
 
@@ -60,7 +61,6 @@ onBeforeUnmount(() => {
   if (!chartRef.value) {
     return;
   }
-  window.removeEventListener("resize", resize);
   removeResizeListener(unref(chartRef), resize);
 });
 </script>

src/components/index.ts

@@ -20,7 +20,6 @@ import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
 import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
-import { ElLoading } from "element-plus";
 
 const components: { [key: string]: any } = {
   Icon,
@@ -28,7 +27,6 @@ const components: { [key: string]: any } = {
   VueGridLayout,
   Selector,
   Graph,
-  ElLoading,
 };
 const componentsName: string[] = Object.keys(components);
 

src/store/modules/dashboard.ts

@@ -29,13 +29,25 @@ 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 => ({
     layout: [ConfigData],
     showConfig: false,
-    selectedGrid: ConfigData,
+    selectedGrid: null,
     entity: "",
     layerId: "",
     activedGridItem: "",
@@ -44,36 +56,15 @@ export const dashboardStore = defineStore({
     setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
-    addWidget() {
+    addControl(type: string) {
       const newWidget: LayoutConfig = {
-        x: 0,
+        ...newControl,
-        y: 0,
-        w: 24,
-        h: 12,
         i: String(this.layout.length),
-        type: "Widget",
+        type,
-        widget: {
-          title: "Title",
-        },
-        graph: {},
-        standard: {},
       };
-      this.layout = this.layout.map((d: LayoutConfig) => {
+      if (type === "Tab") {
-        d.y = d.y + newWidget.h;
+        newWidget.h = 24;
-        return d;
+        newWidget.children = [
-      });
-      this.layout.push(newWidget);
-      this.activedGridItem = newWidget.i;
-    },
-    addTab() {
-      const newWidget: LayoutConfig = {
-        x: 0,
-        y: 0,
-        w: 24,
-        h: 20,
-        i: String(this.layout.length),
-        type: "Tab",
-        children: [
           {
             name: "Tab1",
             children: [],
@@ -82,11 +73,8 @@ export const dashboardStore = defineStore({
             name: "Tab2",
             children: [],
           },
-        ],
+        ];
-        widget: {},
+      }
-        graph: {},
-        standard: {},
-      };
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;
         return d;
@@ -153,7 +141,7 @@ export const dashboardStore = defineStore({
       this.showConfig = show;
     },
     selectWidget(widget: Nullable<LayoutConfig>) {
-      this.selectedGrid = ConfigData || widget; //todo
+      this.selectedGrid = widget;
     },
     setLayer(id: string) {
       this.layerId = id;
@@ -176,9 +164,10 @@ export const dashboardStore = defineStore({
       return res.data;
     },
     async fetchMetricValue(config: LayoutConfig) {
-      if (!config.queryMetricType) {
+      // if (!config.queryMetricType) {
-        return;
+      //   return;
-      }
+      // }
+      config.queryMetricType = "readMetricsValues";
       const appStoreWithOut = useAppStoreWithOut();
       const variable = {
         condition: {

src/utils/is.ts

@@ -92,3 +92,9 @@ export function isElement(val: unknown): val is Element {
 export function isMap(val: unknown): val is Map<any, any> {
   return is(val, "Map");
 }
+export function isEmptyObject<T = unknown>(val: T): val is T {
+  if (isObject(val)) {
+    return Object.keys(val).length === 0;
+  }
+  return false;
+}

src/views/dashboard/New.vue

@@ -56,7 +56,6 @@ limitations under the License. -->
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import router from "@/router";
-import { ElInput, ElButton } from "element-plus";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType, Options } from "./data";
 import uuid from "@/utils/uuid";

src/views/dashboard/configuration/ConfigEdit.vue

@@ -18,22 +18,22 @@ limitations under the License. -->
       <div class="header">{{ title }}</div>
       <div class="render-chart">
         <component
-          :is="chartType"
+          :is="states.chartType"
           :intervalTime="appStoreWithOut.intervalTime"
-          :data="source"
+          :data="states.source"
         />
+        <div v-show="!states.chartType" class="no-data">{{ t("noData") }}</div>
       </div>
-      <span v-show="!source">{{ t("noData") }}</span>
     </div>
     <div class="collapse" :style="{ height: configHeight + 'px' }">
       <el-collapse
-        v-model="activeNames"
+        v-model="states.activeNames"
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('metricName')" name="1">
           <div>
             <Selector
-              :value="metrics"
+              :value="states.metrics"
               :options="metricOpts"
               :multiple="true"
               size="mini"
@@ -42,9 +42,9 @@ limitations under the License. -->
               class="selectors"
             />
             <Selector
-              v-if="valueType"
+              v-if="states.valueType"
-              :value="valueType"
+              :value="states.valueType"
-              :options="valueTypes"
+              :options="states.valueTypes"
               size="mini"
               placeholder="Select a metric"
               @change="changeValueType"
@@ -59,7 +59,7 @@ limitations under the License. -->
               v-for="(type, index) in ChartTypes"
               :key="index"
               @click="changeChartType(type)"
-              :class="{ active: type.value === chartType }"
+              :class="{ active: type.value === states.chartType }"
             >
               {{ type.label }}
             </span>
@@ -67,7 +67,7 @@ limitations under the License. -->
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
           <component
-            :is="`${chartType}Config`"
+            :is="`${states.chartType}Config`"
             :config="dashboardStore.selectedGrid.graph"
           />
         </el-collapse-item>
@@ -94,13 +94,14 @@ import { reactive, defineComponent, toRefs, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { ElMessage, ElButton, ElCollapse, ElCollapseItem } from "element-plus";
+import { ElMessage } from "element-plus";
 import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
 import { Option } from "@/types/app";
 import graphs from "../graphs";
 import configs from "./graph-styles";
 import WidgetOptions from "./WidgetOptions.vue";
 import StandardOptions from "./StandardOptions.vue";
+import { isEmptyObject } from "@/utils/is";
 
 export default defineComponent({
   name: "ConfigEdit",
@@ -109,9 +110,6 @@ export default defineComponent({
     ...configs,
     WidgetOptions,
     StandardOptions,
-    ElButton,
-    ElCollapse,
-    ElCollapseItem,
   },
   setup() {
     const loading = ref<boolean>(false);
@@ -148,7 +146,9 @@ export default defineComponent({
       tips: selectedGrid.widget.tips,
       title: selectedGrid.widget.title,
     });
+    if (states.metrics[0]) {
       queryMetricType(states.metrics[0]);
+    }
 
     async function changeMetrics(arr: Option[]) {
       if (!arr.length) {
@@ -157,8 +157,10 @@ export default defineComponent({
         return;
       }
       states.metrics = arr.map((d: Option) => String(d.value));
+      if (arr[0].value) {
         queryMetricType(String(arr[0].value));
       }
+    }
 
     async function queryMetricType(metric: string) {
       loading.value = true;
@@ -171,11 +173,13 @@ export default defineComponent({
       const { typeOfMetrics } = resp.data;
       states.valueTypes = ValuesTypes[typeOfMetrics];
       states.valueType = ValuesTypes[typeOfMetrics][0].value;
+      queryMetrics();
     }
 
     function changeValueType(val: Option[]) {
       states.valueType = String(val[0].value);
       states.metricQueryType = (MetricQueryTypes as any)[states.valueType];
+      queryMetrics();
     }
 
     function changeChartType(item: Option) {
@@ -207,6 +211,9 @@ export default defineComponent({
       const json = await dashboardStore.fetchMetricValue(
         dashboardStore.selectedGrid
       );
+      if (!json) {
+        return;
+      }
 
       if (json.error) {
         return;
@@ -214,9 +221,7 @@ export default defineComponent({
       const metricVal = json.data.readMetricsValues.values.values.map(
         (d: { value: number }) => d.value
       );
-      const m =
+      const m = states.metrics[0];
-        dashboardStore.selectedGrid.metrics &&
-        dashboardStore.selectedGrid.metrics[0];
       if (!m) {
         return;
       }
@@ -251,7 +256,7 @@ export default defineComponent({
 
     return {
       ...toRefs(widgetOpt),
-      ...toRefs(states),
+      states,
       changeChartType,
       changeValueType,
       changeMetrics,
@@ -325,6 +330,12 @@ export default defineComponent({
   }
 }
 
+.no-data {
+  font-size: 14px;
+  text-align: center;
+  line-height: 350px;
+}
+
 span.active {
   background-color: #409eff;
   color: #fff;

src/views/dashboard/controls/Tab.vue

@@ -37,12 +37,16 @@ limitations under the License. -->
         />
       </span>
       <span class="tab-icons">
+        <el-tooltip effect="dark" content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
           </i>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="Add widgets" placement="bottom">
           <i @click="addTabWidget">
             <Icon size="middle" iconName="playlist_add" />
           </i>
+        </el-tooltip>
       </span>
     </div>
     <div class="operations">
@@ -73,7 +77,7 @@ limitations under the License. -->
         <Widget :data="item" :active="activeTabWidget === item.i" />
       </grid-item>
     </grid-layout>
-    <div class="no-data-tips" v-else>No widgets, plase add widgets</div>
+    <div class="no-data-tips" v-else>Please add widgets.</div>
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/controls/Widget.vue

@@ -25,10 +25,10 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </template>
         <div class="tools" @click="editConfig">
-          <span>Edit</span>
+          <span>{{ t("edit") }}</span>
         </div>
         <div class="tools" @click="removeWidget">
-          <span>Delete</span>
+          <span>{{ t("delete") }}</span>
         </div>
       </el-popover>
     </div>
@@ -39,7 +39,7 @@ limitations under the License. -->
         :data="state.source"
       />
     </div>
-    <div v-else class="no-data">No data</div>
+    <div v-else class="no-data">{{ t("noData") }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -50,7 +50,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import graphs from "../graphs";
 import { ElMessage } from "element-plus";
-// import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 const props = {
   data: {
@@ -64,7 +64,7 @@ export default defineComponent({
   components: { ...graphs },
   props,
   setup(props) {
-    // const { t } = useI18n();
+    const { t } = useI18n();
     const loading = ref<boolean>(false);
     const state = reactive({
       source: {},
@@ -110,6 +110,7 @@ export default defineComponent({
       editConfig,
       data,
       loading,
+      t,
     };
   },
 });

src/views/dashboard/data.ts

@@ -26,7 +26,6 @@ export const ChartTypes = [
   { label: "Endpoint List", value: "EndpointList" },
   { label: "Instance List", value: "InstanceList" },
   // { label: "Image", value: "Image" },
-  // { label: "Tab", value: "Tabs" },
 ];
 export enum MetricQueryTypes {
   ReadMetricsValue = "readMetricsValue",
@@ -123,7 +122,7 @@ export const SortOrder = [
 export const ToolIcons = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
-  { name: "insert_image", content: "Add Image", id: "addImage" },
+  // { name: "insert_image", content: "Add Image", id: "addImage" },
   { name: "save_alt", content: "Export", id: "export" },
   { name: "folder_open", content: "Import", id: "import" },
   { name: "settings", content: "Settings", id: "settings" },

src/views/dashboard/panel/Layout.vue

@@ -32,11 +32,7 @@ limitations under the License. -->
       @click="clickGrid(item)"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
     >
-      <component
+      <component :is="item.type" :data="item" />
-        :is="item.type"
-        :data="item"
-        :active="dashboardStore.activedGridItem === item.i"
-      />
     </grid-item>
   </grid-layout>
 </template>
@@ -46,6 +42,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
 import Widget from "../controls/Widget.vue";
 import Tab from "../controls/Tab.vue";
+
 export default defineComponent({
   name: "Layout",
   components: { Widget, Tab },

src/views/dashboard/panel/Tool.vue

@@ -79,7 +79,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive } from "vue";
 import { useRoute } from "vue-router";
-import { ElTooltip, ElCascader } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Options, SelectOpts, EntityType, ToolIcons } from "../data";
 
@@ -113,17 +112,19 @@ function changeService(val: { value: string; label: string }) {
 function clickIcons(t: { id: string; content: string; name: string }) {
   switch (t.id) {
     case "addWidget":
-      dashboardStore.addWidget();
+      dashboardStore.addControl("Widget");
       break;
     case "addTab":
-      dashboardStore.addTab();
+      dashboardStore.addControl("Tab");
       break;
     case "addImage":
-      dashboardStore.addWidget();
+      dashboardStore.addControl("Image");
       break;
     case "settings":
       dashboardStore.setConfigPanel(true);
       break;
+    default:
+      dashboardStore.addControl("Widget");
   }
 }
 </script>