From 02ef776eda5e88dd1e1879bcdec9c1bc8705f244 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Sun, 29 Oct 2023 15:16:05 +0530 Subject: [PATCH 1/3] fix: empty widget is updated --- .../ListOfDashboard/ImportJSON/index.tsx | 5 ++++ .../src/lib/dashboard/getUpdatedLayout.ts | 23 +++++++++++++++++++ .../src/providers/Dashboard/Dashboard.tsx | 20 ++++------------ 3 files changed, 32 insertions(+), 16 deletions(-) create mode 100644 frontend/src/lib/dashboard/getUpdatedLayout.ts diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx index aa658d56cc..4ec0c262e1 100644 --- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx +++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx @@ -6,6 +6,7 @@ import Editor from 'components/Editor'; import ROUTES from 'constants/routes'; import { MESSAGE } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; +import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout'; import history from 'lib/history'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -65,6 +66,10 @@ function ImportJSON({ setDashboardCreating(true); const dashboardData = JSON.parse(editorValue) as DashboardData; + if (dashboardData.layout) { + dashboardData.layout = getUpdatedLayout(dashboardData.layout); + } + const response = await createDashboard({ ...dashboardData, uploadedGrafana, diff --git a/frontend/src/lib/dashboard/getUpdatedLayout.ts b/frontend/src/lib/dashboard/getUpdatedLayout.ts new file mode 100644 index 0000000000..4334ef1e56 --- /dev/null +++ b/frontend/src/lib/dashboard/getUpdatedLayout.ts @@ -0,0 +1,23 @@ +import { PANEL_TYPES } from 'constants/queryBuilder'; +import { Layout } from 'react-grid-layout'; + +export const getUpdatedLayout = (layout?: Layout[]): Layout[] => { + let widgetLayout = layout; + + // filter empty from i from i due to previous version of signoz + widgetLayout = layout?.filter((i) => i.i !== 'empty'); + + const seen = new Set(); + + // filter duplicate i values + widgetLayout = widgetLayout?.filter((i) => { + const duplicate = seen.has(i.i); + seen.add(i.i); + return !duplicate; + }); + + // filter EMPTY_WIDGET from i due to previous version of signoz + widgetLayout = widgetLayout?.filter((i) => i.i !== PANEL_TYPES.EMPTY_WIDGET); + + return widgetLayout || []; +}; diff --git a/frontend/src/providers/Dashboard/Dashboard.tsx b/frontend/src/providers/Dashboard/Dashboard.tsx index 9b4da727ae..1074465d0b 100644 --- a/frontend/src/providers/Dashboard/Dashboard.tsx +++ b/frontend/src/providers/Dashboard/Dashboard.tsx @@ -1,11 +1,11 @@ import { Modal } from 'antd'; import get from 'api/dashboard/get'; -import { PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import ROUTES from 'constants/routes'; import { getMinMax } from 'container/TopNav/AutoRefresh/config'; import dayjs, { Dayjs } from 'dayjs'; import useTabVisibility from 'hooks/useTabFocus'; +import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout'; import { createContext, PropsWithChildren, @@ -107,11 +107,7 @@ export function DashboardProvider({ dashboardRef.current = data; - setLayouts( - data.data.layout?.filter( - (layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET, - ) || [], - ); + setLayouts(getUpdatedLayout(data.data.layout)); } if ( @@ -147,11 +143,7 @@ export function DashboardProvider({ updatedTimeRef.current = dayjs(data.updated_at); - setLayouts( - data.data.layout?.filter( - (layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET, - ) || [], - ); + setLayouts(getUpdatedLayout(data.data.layout)); }, }); @@ -164,11 +156,7 @@ export function DashboardProvider({ setSelectedDashboard(data); - setLayouts( - data.data.layout?.filter( - (layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET, - ) || [], - ); + setLayouts(getUpdatedLayout(data.data.layout)); } }, }, From e0b3f35d9605ee47ac3e65fa725ba3266dbbb316 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Sun, 29 Oct 2023 15:22:53 +0530 Subject: [PATCH 2/3] chore: widget is updated --- frontend/src/container/GridCardLayout/GridCardLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index b99f2396c9..57b1f4222d 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx @@ -125,7 +125,7 @@ function GraphLayout({ From d9895ddb0ecfb263e4dfa0919091798dca5734d1 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Mon, 30 Oct 2023 22:19:42 +0530 Subject: [PATCH 3/3] fix: handling is updated --- frontend/src/container/ListOfDashboard/ImportJSON/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx index 4ec0c262e1..9db99c29e8 100644 --- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx +++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx @@ -66,8 +66,10 @@ function ImportJSON({ setDashboardCreating(true); const dashboardData = JSON.parse(editorValue) as DashboardData; - if (dashboardData.layout) { + if (dashboardData?.layout) { dashboardData.layout = getUpdatedLayout(dashboardData.layout); + } else { + dashboardData.layout = []; } const response = await createDashboard({