From ceac2b0f5784fca54bbc912878bdf82db3bccec8 Mon Sep 17 00:00:00 2001 From: ktx-kirtan <124270523+ktx-kirtan@users.noreply.github.com> Date: Thu, 28 Nov 2024 12:49:13 +0530 Subject: [PATCH] fix: dashboard org redirection fixes (#5169) - #5163 - #2236 ## Summary by CodeRabbit - **New Features** - Enhanced logic to prevent navigation to empty dashboards. - Improved routing when returning to the dashboard list. - Added organization identifier to routing for adding panels. - **Bug Fixes** - Added checks to handle undefined or empty dashboard data in the `AddPanel` component. - Refined error handling for panel operations, ensuring better user feedback. - **Documentation** - Updated method signatures to reflect changes in navigation and data handling logic. --------- Co-authored-by: ktx-abhay Co-authored-by: ktx-vaidehi --- web/src/utils/commons.ts | 4 +-- .../Dashboards/RenderDashboardCharts.vue | 1 + web/src/views/Dashboards/ViewDashboard.vue | 11 +++++++- .../views/Dashboards/addPanel/AddPanel.vue | 27 +++++++++++++++++-- 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/web/src/utils/commons.ts b/web/src/utils/commons.ts index 0eb2855a0e..1f379f2bdf 100644 --- a/web/src/utils/commons.ts +++ b/web/src/utils/commons.ts @@ -197,7 +197,7 @@ function findDashboard(dashboardId: string, store: any, folderId: any) { export const getTabDataFromTabId = (dashboardData: any, tabId: any) => { // find tab from tabId - return dashboardData.tabs.find((tab: any) => tab.tabId == tabId); + return dashboardData?.tabs?.find((tab: any) => tab.tabId == tabId); }; const getMaxIAndMaxYFromTab = (tab: any) => { @@ -575,7 +575,7 @@ export const getPanel = async ( // find tab from tabId const tab = getTabDataFromTabId(currentDashboard, tabId); - const paneldata = tab.panels?.find((it: any) => it.id == panelId); + const paneldata = tab?.panels?.find((it: any) => it?.id == panelId); return paneldata; } catch (error) { throw error; diff --git a/web/src/views/Dashboards/RenderDashboardCharts.vue b/web/src/views/Dashboards/RenderDashboardCharts.vue index 21121d0f54..38f84779f4 100644 --- a/web/src/views/Dashboards/RenderDashboardCharts.vue +++ b/web/src/views/Dashboards/RenderDashboardCharts.vue @@ -441,6 +441,7 @@ export default defineComponent({ return router.push({ path: "/dashboards/add_panel", query: { + org_identifier: store.state.selectedOrganization.identifier, dashboard: route.query.dashboard, folder: route.query.folder ?? "default", tab: route.query.tab ?? props.dashboardData.panels[0]?.tabId, diff --git a/web/src/views/Dashboards/ViewDashboard.vue b/web/src/views/Dashboards/ViewDashboard.vue index 4a58114d21..7daaf4f702 100644 --- a/web/src/views/Dashboards/ViewDashboard.vue +++ b/web/src/views/Dashboards/ViewDashboard.vue @@ -534,6 +534,15 @@ export default defineComponent({ route.query.folder ?? "default", ); + if ( + !currentDashboardData?.data || + typeof currentDashboardData.data !== "object" || + !Object.keys(currentDashboardData.data).length + ) { + goBackToDashboardList(); + return; + } + // set selected tab from query params const selectedTab = currentDashboardData?.data?.tabs?.find( (tab: any) => tab.tabId === route.query.tab, @@ -683,7 +692,6 @@ export default defineComponent({ return router.push({ path: "/dashboards", query: { - dashboard: route.query.dashboard, folder: route.query.folder ?? "default", }, }); @@ -694,6 +702,7 @@ export default defineComponent({ return router.push({ path: "/dashboards/add_panel", query: { + org_identifier: store.state.selectedOrganization.identifier, dashboard: route.query.dashboard, folder: route.query.folder ?? "default", tab: route.query.tab ?? currentDashboardData.data.tabs[0].tabId, diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue index 2e38179fd4..95ef1db044 100644 --- a/web/src/views/Dashboards/addPanel/AddPanel.vue +++ b/web/src/views/Dashboards/addPanel/AddPanel.vue @@ -563,7 +563,7 @@ export default defineComponent({ Object.assign( dashboardPanelData.data, - JSON.parse(JSON.stringify(panelData)) + JSON.parse(JSON.stringify(panelData ?? {})), ); // check if vrl function exists @@ -636,6 +636,18 @@ export default defineComponent({ // console.time("AddPanel:loadDashboard:after"); currentDashboardData.data = data; + + if ( + !currentDashboardData?.data || + typeof currentDashboardData.data !== "object" || + !Object.keys(currentDashboardData.data).length + ) { + window.removeEventListener("beforeunload", beforeUnloadHandler); + forceSkipBeforeUnloadListener = true; + goBack(); + return; + } + // if variables data is null, set it to empty list if ( !( @@ -814,7 +826,7 @@ export default defineComponent({ org_identifier: store.state.selectedOrganization.identifier, dashboard: route.query.dashboard, folder: route.query.folder, - tab: route.query.tab ?? currentDashboardData.data.tabs[0].tabId, + tab: route.query.tab ?? currentDashboardData?.data?.tabs?.[0]?.tabId, }, }); }; @@ -843,7 +855,18 @@ export default defineComponent({ return; }; + // this is used to set to true, when we know we have to force the navigation + // in cases where org is changed, we need to force a nvaigation, without warning + let forceSkipBeforeUnloadListener = false; + onBeforeRouteLeave((to, from, next) => { + // check if it is a force navigation, then allow + if(forceSkipBeforeUnloadListener) { + next() + return; + } + + // else continue to warn user if (from.path === "/dashboards/add_panel" && isPanelConfigChanged.value) { const confirmMessage = t("dashboard.unsavedMessage"); if (window.confirm(confirmMessage)) {