From 41246ba34b0cf3cbd0aa91d6ae7a201cfef7cd16 Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Mon, 24 Feb 2025 14:45:03 +0900 Subject: [PATCH 1/2] fix(dashboard): solve dashboard toolset dropdown issue & small fix Signed-off-by: samuel.park --- .../modules/widgets/_components/WidgetFormOverlayStep1.vue | 1 + .../composables/use-dashboard-control-menu-items.ts | 6 ++++-- .../dashboards/stores/dashboard-detail-info-store.ts | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue index a7164e1620..b5a5b2a111 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue @@ -200,6 +200,7 @@ onMounted(async () => { /> diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts index b0a9ea9b0c..0b42263b9c 100644 --- a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts +++ b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts @@ -1,3 +1,4 @@ +import { toValue } from '@vueuse/core'; import type { ComputedRef } from 'vue'; import { reactive, computed } from 'vue'; @@ -73,6 +74,7 @@ export const useDashboardControlMenuItems = ({ const _isDeprecated = _dashboard.version === '1.0'; const _isDashboardManageable = _getDashboardManageable(_dashboard); + if (!_isDashboardManageable) { if (_isDeprecated) return []; return computed(() => ([ @@ -159,8 +161,8 @@ export const useDashboardControlMenuItems = ({ ])); }; const getControlMenuItems = (id: string): ComputedRef|MenuItem[] => { - if (id.includes('folder')) return _getFolderControlMenuItems(id); - return _getDashboardControlMenuItems(id); + if (id.includes('folder')) return toValue(_getFolderControlMenuItems(id)); + return toValue(_getDashboardControlMenuItems(id)); }; return { diff --git a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts b/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts index 31e75014d7..694fd5a96d 100644 --- a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts +++ b/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts @@ -27,7 +27,8 @@ import WorkspaceVariableModel from '@/lib/variable-models/managed-model/resource import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboards/constants/dashboard-managed-variables-schema'; -const DEFAULT_REFRESH_INTERVAL = '5m'; +// const DEFAULT_REFRESH_INTERVAL = '5m'; +const DEFAULT_REFRESH_INTERVAL = 'off'; export const DASHBOARD_DEFAULT = Object.freeze<{ options: DashboardOptions }>({ options: { date_range: { From c1e772e8a2db0b704ed0673efaab8b26a9c036f9 Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Mon, 24 Feb 2025 15:26:02 +0900 Subject: [PATCH 2/2] fix(dashboard): solve widget creating bug Signed-off-by: samuel.park --- .../_components/WidgetFormOverlayStep2.vue | 15 +++++++++++---- .../dashboard-detail/DashboardDetailHeader.vue | 2 +- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue index b4c817e0ae..5b181b7b56 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue @@ -62,6 +62,7 @@ const storeState = reactive({ /* Query */ const { dashboard, + widgetList, keys, fetcher, queryClient, @@ -129,6 +130,10 @@ const state = reactive({ varsSnapshot: {} as DashboardVars, dashboardOptionsSnapshot: {} as DashboardOptions, isSharedDashboard: computed(() => !!dashboard.value?.shared && !storeState.isAdminMode), + isDashboardLayoutChanged: computed(() => { + const _layouts = dashboard.value?.layouts || []; + return !isEqual(_layouts?.[0]?.widgets, widgetList.value.map((w) => w.widget_id)); + }), }); const { @@ -168,7 +173,8 @@ const updateWidget = async () => { if (result) { state.fieldManager.updateOriginData(cloneDeep(result.options)); } - if (_isCreating) { + + if (_isCreating || state.isDashboardLayoutChanged) { const _layouts = cloneDeep(dashboard.value?.layouts || []); if (_layouts.length) { const _targetLayout = _layouts[0]; @@ -193,9 +199,10 @@ const updateWidget = async () => { const { mutate: updateDashboard } = useMutation( { mutationFn: fetcher.updateDashboardFn, - onSuccess: () => { + onSuccess: (data) => { const dashboardQueryKey = state.isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey; - queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value }); + // queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value }); + queryClient.setQueryData(dashboardQueryKey.value, () => data); }, }, ); @@ -257,7 +264,7 @@ watch(() => widget.value?.size, (widgetSize) => { }, { immediate: true }); watch(() => state.mounted, async (mounted) => { if (mounted) { - if (widget.value?.state === 'CREATING') { + if (widget.value?.state === 'CREATING' || state.isDashboardLayoutChanged) { await updateWidget(); } // await loadOverlayWidget(); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue index 1999bab3a1..c46139823e 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue @@ -162,7 +162,7 @@ const handleSelectItem = (item: MenuItem) => { style-type="tertiary-icon-button" button-icon="ic_ellipsis-horizontal" size="sm" - :menu="getControlMenuItems(props.dashboardId).value" + :menu="getControlMenuItems(props.dashboardId)" :selected="[]" use-fixed-menu-style reset-selection-on-menu-close