chrissewell/hetty
1
0
Fork 0
mirror of https://github.com/dstotijn/hetty.git synced 2025-07-01 18:47:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add Proto to request detail, update theme

Browse Source
This commit is contained in:
David Stotijn
2020-09-21 22:27:10 +02:00
parent fe1ddabda3
commit 7defc19d1a
9 changed files with 75 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
admin/src/components/reqlog/HttpStatusCode.tsx
View File

@ -1,4 +1,4 @@
import { green, orange, red } from "@material-ui/core/colors";
import { teal, orange, red } from "@material-ui/core/colors";
import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
function HttpStatusIcon({ status }: { status: number }): JSX.Element {
@ -6,7 +6,7 @@ function HttpStatusIcon({ status }: { status: number }): JSX.Element {
switch (Math.floor(status / 100)) {
case 2:
case 3:
return <FiberManualRecordIcon style={{ ...style, color: green[400] }} />;
return <FiberManualRecordIcon style={{ ...style, color: teal[400] }} />;
case 4:
return <FiberManualRecordIcon style={{ ...style, color: orange[400] }} />;
case 5:

9
admin/src/components/reqlog/LogDetail.tsx
View File

@ -10,6 +10,7 @@ const HTTP_REQUEST_LOG = gql`
id
method
url
proto
body
response {
proto
@ -30,17 +31,17 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
variables: { id },
});
if (loading) return "Loading...";
if (error) return `Error: ${error.message}`;
if (loading) return <div>"Loading..."</div>;
if (error) return <div>`Error: ${error.message}`</div>;
const { method, url, body, response } = data.httpRequestLog;
const { method, url, proto, body, response } = data.httpRequestLog;
return (
<div>
<Grid container item spacing={2}>
<Grid item xs={6}>
<Box component={Paper} maxHeight="60vh" overflow="scroll">
<RequestDetail request={{ method, url, body }} />
<RequestDetail request={{ method, url, proto, body }} />
</Box>
</Grid>
<Grid item xs={6}>

5
admin/src/components/reqlog/RequestDetail.tsx
View File

@ -6,12 +6,13 @@ interface Props {
request: {
method: string;
url: string;
proto: string;
body?: string;
};
}
function RequestDetail({ request }: Props): JSX.Element {
const { method, url, body } = request;
const { method, url, proto, body } = request;
const parsedUrl = new URL(url);
console.log(parsedUrl);
@ -24,7 +25,7 @@ function RequestDetail({ request }: Props): JSX.Element {
style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
>
{request.method}{" "}
{decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}
{decodeURIComponent(parsedUrl.pathname + parsedUrl.search)} {proto}
</Typography>
</Box>
<Box>

4
admin/src/components/reqlog/RequestList.tsx
View File

@ -34,8 +34,8 @@ interface Props {
function RequestList({ onLogClick }: Props): JSX.Element {
const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
if (loading) return "Loading...";
if (error) return `Error: ${error.message}`;
if (loading) return <div>"Loading..."</div>;
if (error) return <div>`Error: ${error.message}`</div>;
const { httpRequestLogs: logs } = data;

15
admin/src/lib/theme.ts
View File

@ -1,7 +1,16 @@
import { createMuiTheme } from "@material-ui/core/styles";
import { red } from "@material-ui/core/colors";
import teal from "@material-ui/core/colors/teal";
import green from "@material-ui/core/colors/green";
// Create a theme instance.
const theme = createMuiTheme({});
const theme = createMuiTheme({
palette: {
primary: {
main: teal[500],
},
secondary: {
main: green[500],
},
},
});
export default theme;