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

bug(FE): error state in the bar panel is added
This commit is contained in:
Ankit Nayan 2022-02-11 16:03:44 +05:30 committed by GitHub
commit 4b9ef95f7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 27 deletions

View File

@ -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,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 + 'expanded'} widget={widget} />
</FullViewContainer>
</Modal>
</>
);
};
const onDeleteHandler = useCallback(() => {
deleteWidget({ widgetId: widget.id });
onToggleModal(setDeletModal);
@ -131,7 +163,18 @@ const GridCardGraph = ({
}, [deleteWidget, widget, onToggleModal, isDeleted]);
if (state.error) {
return <div>{state.errorMessage}</div>;
return (
<>
{getModals()}
<Bar
onViewFullScreenHandler={(): void => onToggleModal(setModal)}
widget={widget}
onDeleteHandler={(): void => onToggleModal(setDeletModal)}
/>
<ErrorContainer>{state.errorMessage}</ErrorContainer>
</>
);
}
if (state.loading === true || state.payload === undefined) {
@ -146,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 + 'expanded'} widget={widget} />
</FullViewContainer>
</Modal>
{getModals()}
<GridGraphComponent
{...{

View File

@ -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;
`;