fix: pick calendar with a wrong time range and set a unique value for dashboard grid key (#139)

src/components/DateCalendar.vue

@@ -552,7 +552,7 @@ const ok = (info: any) => {
   if (props.right && _time.getTime() / 100000 > start.value) {
     emit("setDates", _time, "right");
   }
-  if (!(props.left && props.right)) {
+  if (!(props.left || props.right)) {
     emit("setDates", _time);
   }
   emit("ok", info === "h");

src/components/Selector.vue

@@ -29,9 +29,9 @@ limitations under the License. -->
   >
     <el-option
       v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
+      :key="item.value || ''"
+      :label="item.label || ''"
+      :value="item.value || ''"
     >
     </el-option>
   </el-select>

src/hooks/useProcessor.ts

@@ -154,7 +154,10 @@ export function useSourceProcessor(
     const c = (config.metricConfig && config.metricConfig[index]) || {};
 
     if (type === MetricQueryTypes.ReadMetricsValues) {
-      source[m] = calculateExp(resp.data[keys[index]].values.values, c);
+      source[m] =
+        (resp.data[keys[index]] &&
+          calculateExp(resp.data[keys[index]].values.values, c)) ||
+        [];
     }
     if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
       const resVal = Object.values(resp.data)[0] || [];

src/views/dashboard/List.vue

@@ -238,6 +238,8 @@ function optimizeTemplate(
   children: (LayoutConfig & {
     moved?: boolean;
     standard?: unknown;
+    label?: string;
+    value?: string;
   })[]
 ) {
   for (const child of children || []) {
@@ -245,6 +247,8 @@ function optimizeTemplate(
     delete child.activedTabIndex;
     delete child.standard;
     delete child.id;
+    delete child.label;
+    delete child.value;
     if (isEmptyObject(child.graph)) {
       delete child.graph;
     }

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -31,7 +31,6 @@ import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import getDashboard from "@/hooks/useDashboardsSession";
-import { LayoutConfig } from "@/types/dashboard";
 import { Option } from "@/types/app";
 
 const { t } = useI18n();
@@ -40,24 +39,20 @@ const associate = dashboardStore.selectedGrid.associate || [];
 const widgetIds = ref<string[]>(
   associate.map((d: { widgetId: string }) => d.widgetId)
 );
-const widgets = computed(() => {
+const widgets: any = computed(() => {
   const all = getDashboard(dashboardStore.currentDashboard).widgets;
-  const items = all.filter(
-    (d: { value: string; label: string } & LayoutConfig) => {
-      const isLinear = ["Bar", "Line", "Area"].includes(
-        (d.graph && d.graph.type) || ""
-      );
-      if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
-        d.value = d.id;
-        d.label = (d.widget && d.widget.name) || d.id;
-        return d;
-      }
+  const items = all.filter((d: any) => {
+    const isLinear = ["Bar", "Line", "Area"].includes(
+      (d.graph && d.graph.type) || ""
+    );
+    if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
+      return { value: d.id, label: (d.widget && d.widget.name) || d.id };
     }
-  );
+  });
   return items;
 });
 function updateWidgetConfig(options: Option[]) {
-  const { widgets } = getDashboard(dashboardStore.currentDashboard);
+  const arr: any = getDashboard(dashboardStore.currentDashboard).widgets;
   const opt = options.map((d: Option) => {
     return { widgetId: d.value };
   });
@@ -72,7 +67,7 @@ function updateWidgetConfig(options: Option[]) {
   // remove unuse association widget option
   for (const id of widgetIds.value) {
     if (!newVal.includes(id)) {
-      const w = widgets.find((d: { id: string }) => d.id === id);
+      const w = arr.find((d: { id: string }) => d.id === id);
       const config = {
         ...w,
         associate: [],
@@ -84,7 +79,7 @@ function updateWidgetConfig(options: Option[]) {
   for (let i = 0; i < opt.length; i++) {
     const item = JSON.parse(JSON.stringify(opt));
     item[i] = { widgetId: dashboardStore.selectedGrid.id };
-    const w = widgets.find((d: { id: string }) => d.id === opt[i].widgetId);
+    const w = arr.find((d: { id: string }) => d.id === opt[i].widgetId);
     const config = {
       ...w,
       associate: item,

src/views/dashboard/controls/Tab.vue

@@ -87,7 +87,7 @@ limitations under the License. -->
         :w="item.w"
         :h="item.h"
         :i="item.i"
-        :key="item.i"
+        :key="item.id"
         @click="clickTabGrid($event, item)"
         :class="{ active: activeTabWidget === item.i }"
         :drag-ignore-from="dragIgnoreFrom"

src/views/dashboard/panel/Layout.vue

@@ -28,7 +28,7 @@ limitations under the License. -->
       :w="item.w"
       :h="item.h"
       :i="item.i"
-      :key="item.i"
+      :key="item.id"
       @click="clickGrid(item, $event)"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
       :drag-ignore-from="dragIgnoreFrom"

src/views/dashboard/panel/Tool.vue

@@ -308,7 +308,9 @@ async function setSourceSelector() {
   }
   selectorStore.setCurrentPod(currentPod);
   states.currentPod = currentPod.label;
-  const process = params.processId || selectorStore.processes[0].id;
+  const process =
+    params.processId ||
+    (selectorStore.processes.length && selectorStore.processes[0].id);
   let currentProcess;
   if (states.currentProcess) {
     currentProcess = selectorStore.processes.find(