fix: edit widget config

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"
-              :value="valueType"
-              :options="valueTypes"
+              v-if="states.valueType"
+              :value="states.valueType"
+              :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,
     });
-    queryMetricType(states.metrics[0]);
+    if (states.metrics[0]) {
+      queryMetricType(states.metrics[0]);
+    }
 
     async function changeMetrics(arr: Option[]) {
       if (!arr.length) {
@@ -157,7 +157,9 @@ export default defineComponent({
         return;
       }
       states.metrics = arr.map((d: Option) => String(d.value));
-      queryMetricType(String(arr[0].value));
+      if (arr[0].value) {
+        queryMetricType(String(arr[0].value));
+      }
     }
 
     async function queryMetricType(metric: string) {
@@ -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 =
-        dashboardStore.selectedGrid.metrics &&
-        dashboardStore.selectedGrid.metrics[0];
+      const m = states.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">
-        <i @click="addTabItem">
-          <Icon size="middle" iconName="add" />
-        </i>
-        <i @click="addTabWidget">
-          <Icon size="middle" iconName="playlist_add" />
-        </i>
+        <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
-        :is="item.type"
-        :data="item"
-        :active="dashboardStore.activedGridItem === item.i"
-      />
+      <component :is="item.type" :data="item" />
     </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>