fix: empty widget is handled (#3830)

* fix: empty widget is updated * chore: widget is updated * fix: handling is updated
SigNoz · Nov 2, 2023 · 2d60805 · 2d60805
1 parent 7603e0e
commit 2d60805
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -125,7 +125,7 @@ function GraphLayout({
 						<CardContainer isDarkMode={isDarkMode} key={id} data-grid={layout}>
 							<Card $panelType={currentWidget?.panelTypes || PANEL_TYPES.TIME_SERIES}>
 								<GridCard
-									widget={currentWidget || ({ id } as Widgets)}
+									widget={currentWidget || ({ id, query: {} } as Widgets)}
 									name={currentWidget?.id || ''}
 									headerMenuList={headerMenuList}
 								/>

diff --git 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,12 @@ function ImportJSON({
 			setDashboardCreating(true);
 			const dashboardData = JSON.parse(editorValue) as DashboardData;
 
+			if (dashboardData?.layout) {
+				dashboardData.layout = getUpdatedLayout(dashboardData.layout);
+			} else {
+				dashboardData.layout = [];
+			}
+
 			const response = await createDashboard({
 				...dashboardData,
 				uploadedGrafana,

diff --git a/frontend/src/lib/dashboard/getUpdatedLayout.ts 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
@@ -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));
 				}
 			},
 		},