Polish admin styles

This commit is contained in:
David Stotijn
2020-09-23 18:10:32 +02:00
parent a3c22b7f1f
commit e9367f7186
16 changed files with 178 additions and 97 deletions

View File

@ -1,8 +1,9 @@
import { gql, useQuery } from "@apollo/client";
import { Box, Grid, Paper } from "@material-ui/core";
import { Box, Grid, Paper, CircularProgress } from "@material-ui/core";
import ResponseDetail from "./ResponseDetail";
import RequestDetail from "./RequestDetail";
import Alert from "@material-ui/lab/Alert";
const HTTP_REQUEST_LOG = gql`
query HttpRequestLog($id: ID!) {
@ -31,8 +32,16 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
variables: { id },
});
if (loading) return <div>"Loading..."</div>;
if (error) return <div>`Error: ${error.message}`</div>;
if (loading) {
return <CircularProgress />;
}
if (error) {
return (
<Alert severity="error">
Error fetching logs details: {error.message}
</Alert>
);
}
const { method, url, proto, body, response } = data.httpRequestLog;
@ -40,13 +49,13 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
<div>
<Grid container item spacing={2}>
<Grid item xs={6}>
<Box component={Paper} maxHeight="60vh" overflow="scroll">
<Box component={Paper} maxHeight="62vh" overflow="scroll">
<RequestDetail request={{ method, url, proto, body }} />
</Box>
</Grid>
<Grid item xs={6}>
{response && (
<Box component={Paper} maxHeight="65vh" overflow="scroll">
<Box component={Paper} maxHeight="62vh" overflow="scroll">
<ResponseDetail response={response} />
</Box>
)}