GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-09-20 02:23:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/container/GridGraphLayout/Graph/index.tsx
View File

@ -23,7 +23,7 @@ import { Widgets } from 'types/api/dashboard/getAll';
import Bar from './Bar'; import Bar from './Bar';
import FullView from './FullView'; import FullView from './FullView';
import { Modal, FullViewContainer } from './styles'; import { Modal, FullViewContainer, ErrorContainer } from './styles';
const GridCardGraph = ({ const GridCardGraph = ({
widget, 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(() => { const onDeleteHandler = useCallback(() => {
deleteWidget({ widgetId: widget.id }); deleteWidget({ widgetId: widget.id });
onToggleModal(setDeletModal); onToggleModal(setDeletModal);
@ -131,7 +163,18 @@ const GridCardGraph = ({
}, [deleteWidget, widget, onToggleModal, isDeleted]); }, [deleteWidget, widget, onToggleModal, isDeleted]);
if (state.error) { 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) { if (state.loading === true || state.payload === undefined) {
@ -146,31 +189,7 @@ const GridCardGraph = ({
onDeleteHandler={(): void => onToggleModal(setDeletModal)} onDeleteHandler={(): void => onToggleModal(setDeletModal)}
/> />
<Modal {getModals()}
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>
<GridGraphComponent <GridGraphComponent
{...{ {...{

6
frontend/src/container/GridGraphLayout/Graph/styles.ts
View File

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