Merge pull request #706 from palash-signoz/700-widget-error

bug(FE): error state in the bar panel is added

frontend/src/container/GridGraphLayout/Graph/index.tsx

@@ -23,7 +23,7 @@ import { Widgets } from 'types/api/dashboard/getAll';
 
 import Bar from './Bar';
 import FullView from './FullView';
-import { Modal, FullViewContainer } from './styles';
+import { Modal, FullViewContainer, ErrorContainer } from './styles';
 
 const GridCardGraph = ({
 	widget,
@@ -124,28 +124,9 @@ const GridCardGraph = ({
 		[],
 	);
 
-	const onDeleteHandler = useCallback(() => {
+	const getModals = () => {
-		deleteWidget({ widgetId: widget.id });
-		onToggleModal(setDeletModal);
-		isDeleted.current = true;
-	}, [deleteWidget, widget, onToggleModal, isDeleted]);
-
-	if (state.error) {
-		return <div>{state.errorMessage}</div>;
-	}
-
-	if (state.loading === true || state.payload === undefined) {
-		return <Spinner height="20vh" tip="Loading..." />;
-	}
-
 		return (
 			<>
-			<Bar
-				onViewFullScreenHandler={(): void => onToggleModal(setModal)}
-				widget={widget}
-				onDeleteHandler={(): void => onToggleModal(setDeletModal)}
-			/>
-
 				<Modal
 					destroyOnClose
 					onCancel={(): void => onToggleModal(setDeletModal)}
@@ -171,6 +152,44 @@ const GridCardGraph = ({
 						<FullView name={name + 'expanded'} widget={widget} />
 					</FullViewContainer>
 				</Modal>
+			</>
+		);
+	};
+
+	const onDeleteHandler = useCallback(() => {
+		deleteWidget({ widgetId: widget.id });
+		onToggleModal(setDeletModal);
+		isDeleted.current = true;
+	}, [deleteWidget, widget, onToggleModal, isDeleted]);
+
+	if (state.error) {
+		return (
+			<>
+				{getModals()}
+				<Bar
+					onViewFullScreenHandler={(): void => onToggleModal(setModal)}
+					widget={widget}
+					onDeleteHandler={(): void => onToggleModal(setDeletModal)}
+				/>
+
+				<ErrorContainer>{state.errorMessage}</ErrorContainer>
+			</>
+		);
+	}
+
+	if (state.loading === true || state.payload === undefined) {
+		return <Spinner height="20vh" tip="Loading..." />;
+	}
+
+	return (
+		<>
+			<Bar
+				onViewFullScreenHandler={(): void => onToggleModal(setModal)}
+				widget={widget}
+				onDeleteHandler={(): void => onToggleModal(setDeletModal)}
+			/>
+
+			{getModals()}
 
 			<GridGraphComponent
 				{...{

frontend/src/container/GridGraphLayout/Graph/styles.ts

@@ -15,3 +15,9 @@ export const Modal = styled(ModalComponent)<Props>`
 export const FullViewContainer = styled.div`
 	height: 70vh;
 `;
+
+export const ErrorContainer = styled.div`
+	margin-top: 2rem;
+	padding-left: 2rem;
+	padding-right: 2rem;
+`;