From adb457d66093f1415705ea3e8771d2f1d85e0e7c Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 18 Aug 2022 16:29:36 +0800 Subject: [PATCH] fix: pick calendar with a wrong time range and set a unique value for dashboard grid key (#139) --- src/components/DateCalendar.vue | 2 +- src/components/Selector.vue | 6 ++--- src/hooks/useProcessor.ts | 5 +++- src/views/dashboard/List.vue | 4 +++ .../configuration/widget/AssociateOptions.vue | 27 ++++++++----------- src/views/dashboard/controls/Tab.vue | 2 +- src/views/dashboard/panel/Layout.vue | 2 +- src/views/dashboard/panel/Tool.vue | 4 ++- 8 files changed, 28 insertions(+), 24 deletions(-) diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index f331192e..7af98b76 100755 --- a/src/components/DateCalendar.vue +++ b/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"); diff --git a/src/components/Selector.vue b/src/components/Selector.vue index 515a2226..65c033b4 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -29,9 +29,9 @@ limitations under the License. --> > diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index c764d42e..a5b3f486 100644 --- a/src/hooks/useProcessor.ts +++ b/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] || []; diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 5dbe374f..e4072d0b 100644 --- a/src/views/dashboard/List.vue +++ b/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; } diff --git a/src/views/dashboard/configuration/widget/AssociateOptions.vue b/src/views/dashboard/configuration/widget/AssociateOptions.vue index feae7703..967bc337 100644 --- a/src/views/dashboard/configuration/widget/AssociateOptions.vue +++ b/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( 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, diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 2188862e..fbe0df99 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/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" diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue index 02b93fea..49722cd6 100644 --- a/src/views/dashboard/panel/Layout.vue +++ b/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" diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 87b483d3..46ee3a36 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/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(