From 744dfd010a361a82f29691344cd96393abc8a434 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Fri, 11 Feb 2022 12:00:46 +0530
Subject: [PATCH] chore: modal is updated in the error state

---
 .../container/GridGraphLayout/Graph/index.tsx | 59 +++++++++++--------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index 74ff7c8511..977b274ac0 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -124,6 +124,38 @@ const GridCardGraph = ({
 		[],
 	);
 
+	const getModals = () => {
+		return (
+			<>
+				<Modal
+					destroyOnClose
+					onCancel={(): void => onToggleModal(setDeletModal)}
+					visible={deleteModal}
+					title="Delete"
+					height="10vh"
+					onOk={onDeleteHandler}
+					centered
+				>
+					<Typography>Are you sure you want to delete this widget</Typography>
+				</Modal>
+
+				<Modal
+					title="View"
+					footer={[]}
+					centered
+					visible={modal}
+					onCancel={(): void => onToggleModal(setModal)}
+					width="85%"
+					destroyOnClose
+				>
+					<FullViewContainer>
+						<FullView name={name} widget={widget} />
+					</FullViewContainer>
+				</Modal>
+			</>
+		);
+	};
+
 	const onDeleteHandler = useCallback(() => {
 		deleteWidget({ widgetId: widget.id });
 		onToggleModal(setDeletModal);
@@ -133,6 +165,7 @@ const GridCardGraph = ({
 	if (state.error) {
 		return (
 			<>
+				{getModals()}
 				<Bar
 					onViewFullScreenHandler={(): void => onToggleModal(setModal)}
 					widget={widget}
@@ -156,31 +189,7 @@ const GridCardGraph = ({
 				onDeleteHandler={(): void => onToggleModal(setDeletModal)}
 			/>
 
-			<Modal
-				destroyOnClose
-				onCancel={(): void => onToggleModal(setDeletModal)}
-				visible={deleteModal}
-				title="Delete"
-				height="10vh"
-				onOk={onDeleteHandler}
-				centered
-			>
-				<Typography>Are you sure you want to delete this widget</Typography>
-			</Modal>
-
-			<Modal
-				title="View"
-				footer={[]}
-				centered
-				visible={modal}
-				onCancel={(): void => onToggleModal(setModal)}
-				width="85%"
-				destroyOnClose
-			>
-				<FullViewContainer>
-					<FullView name={name} widget={widget} />
-				</FullViewContainer>
-			</Modal>
+			{getModals()}
 
 			<GridGraphComponent
 				{...{