Add Layout component, syntax highlighting and tidy up

admin/src/components/reqlog/HttpStatusCode.tsx

@@ -0,0 +1,19 @@
+import { green, orange, red } from "@material-ui/core/colors";
+import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
+
+function HttpStatusIcon({ status }: { status: number }): JSX.Element {
+  const style = { marginTop: "-.25rem", verticalAlign: "middle" };
+  switch (Math.floor(status / 100)) {
+    case 2:
+    case 3:
+      return <FiberManualRecordIcon style={{ ...style, color: green[400] }} />;
+    case 4:
+      return <FiberManualRecordIcon style={{ ...style, color: orange[400] }} />;
+    case 5:
+      return <FiberManualRecordIcon style={{ ...style, color: red[400] }} />;
+    default:
+      return <FiberManualRecordIcon style={style} />;
+  }
+}
+
+export default HttpStatusIcon;

admin/src/components/reqlog/LogDetail.tsx

@@ -39,14 +39,16 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
     <div>
       <Grid container item spacing={2}>
         <Grid item xs={6}>
-          <Box component={Paper} m={2} maxHeight="63vh" overflow="scroll">
+          <Box component={Paper} maxHeight="60vh" overflow="scroll">
             <RequestDetail request={{ method, url, body }} />
           </Box>
         </Grid>
         <Grid item xs={6}>
-          <Box component={Paper} m={2} maxHeight="63vh" overflow="scroll">
-            <ResponseDetail response={response} />
-          </Box>
+          {response && (
+            <Box component={Paper} maxHeight="65vh" overflow="scroll">
+              <ResponseDetail response={response} />
+            </Box>
+          )}
         </Grid>
       </Grid>
     </div>

admin/src/components/reqlog/LogsOverview.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { Box, Paper, Container, Typography } from "@material-ui/core";
+
+import RequestList from "./RequestList";
+import LogDetail from "./LogDetail";
+
+function LogsOverview(): JSX.Element {
+  const [detailReqLogId, setDetailReqLogId] = useState<string | null>(null);
+
+  const handleLogClick = (reqId: string) => setDetailReqLogId(reqId);
+
+  return (
+    <Box style={{ padding: 8 }}>
+      <Box mb={2}>
+        <RequestList onLogClick={handleLogClick} />
+      </Box>
+      <Box>
+        {detailReqLogId ? (
+          <LogDetail requestId={detailReqLogId} />
+        ) : (
+          <Paper
+            elevation={0}
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "60vh",
+            }}
+          >
+            <Typography>Select a log entry…</Typography>
+          </Paper>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default LogsOverview;

admin/src/components/reqlog/RequestDetail.tsx

@@ -11,11 +11,20 @@ interface Props {
 }
 
 function RequestDetail({ request }: Props): JSX.Element {
+  const { method, url, body } = request;
+
+  const parsedUrl = new URL(url);
+  console.log(parsedUrl);
+
   return (
     <div>
       <Box m={3}>
-        <Typography variant="h5">
-          {request.method} {request.url}
+        <Typography
+          variant="h6"
+          style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
+        >
+          {request.method}{" "}
+          {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}
         </Typography>
       </Box>
       <Box>

admin/src/components/reqlog/RequestList.tsx

@@ -7,9 +7,11 @@ import {
   TableRow,
   TableCell,
   TableBody,
-  makeStyles,
+  Typography,
 } from "@material-ui/core";
 
+import HttpStatusIcon from "./HttpStatusCode";
+
 const HTTP_REQUEST_LOGS = gql`
   query HttpRequestLogs {
     httpRequestLogs {
@@ -17,6 +19,10 @@ const HTTP_REQUEST_LOGS = gql`
       method
       url
       timestamp
+      response {
+        status
+        statusCode
+      }
     }
   }
 `;
@@ -34,21 +40,51 @@ function RequestList({ onLogClick }: Props): JSX.Element {
   const { httpRequestLogs: logs } = data;
 
   return (
-    <TableContainer component={Paper}>
-      <Table>
+    <TableContainer
+      component={Paper}
+      style={{ minHeight: 200, height: "24vh" }}
+    >
+      <Table stickyHeader size="small">
         <TableHead>
           <TableRow>
             <TableCell>Method</TableCell>
-            <TableCell>URL</TableCell>
+            <TableCell>Origin</TableCell>
+            <TableCell>Path</TableCell>
+            <TableCell>Status</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {logs.map(({ id, method, url }) => (
-            <TableRow key={id} onClick={() => onLogClick(id)}>
-              <TableCell>{method}</TableCell>
-              <TableCell>{url}</TableCell>
-            </TableRow>
-          ))}
+          {logs.map(({ id, method, url, response }) => {
+            const { origin, pathname, search, hash } = new URL(url);
+
+            const cellStyle = {
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            } as any;
+
+            return (
+              <TableRow key={id} onClick={() => onLogClick(id)}>
+                <TableCell style={{ ...cellStyle, width: "100px" }}>
+                  {method}
+                </TableCell>
+                <TableCell style={{ ...cellStyle, maxWidth: "100px" }}>
+                  {origin}
+                </TableCell>
+                <TableCell style={{ ...cellStyle, maxWidth: "200px" }}>
+                  {decodeURIComponent(pathname + search + hash)}
+                </TableCell>
+                <TableCell style={{ maxWidth: "100px" }}>
+                  {response && (
+                    <div>
+                      <HttpStatusIcon status={response.statusCode} />{" "}
+                      {response.status}
+                    </div>
+                  )}
+                </TableCell>
+              </TableRow>
+            );
+          })}
         </TableBody>
       </Table>
     </TableContainer>

admin/src/components/reqlog/ResponseDetail.tsx

@@ -1,9 +1,9 @@
 import { Typography, Box } from "@material-ui/core";
-import { green } from "@material-ui/core/colors";
-import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
+import HttpStatusIcon from "./HttpStatusCode";
+
 interface Props {
   response: {
     proto: string;
@@ -17,15 +17,28 @@ function ResponseDetail({ response }: Props): JSX.Element {
   return (
     <div>
       <Box m={3}>
-        <Typography variant="h5">
-          {statusIcon(response.statusCode)} {response.proto} {response.status}
+        <Typography
+          variant="h6"
+          style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
+        >
+          <HttpStatusIcon status={response.statusCode} /> {response.proto}{" "}
+          {response.status}
         </Typography>
       </Box>
       <Box>
         <SyntaxHighlighter
           language="markup"
           showLineNumbers={true}
+          showInlineLineNumbers={true}
           style={materialLight}
+          lineProps={{
+            style: {
+              display: "block",
+              wordBreak: "break-all",
+              whiteSpace: "pre-wrap",
+            },
+          }}
+          wrapLines={true}
         >
           {response.body}
         </SyntaxHighlighter>
@@ -34,19 +47,4 @@ function ResponseDetail({ response }: Props): JSX.Element {
   );
 }
 
-function statusIcon(status: number): JSX.Element {
-  const style = { marginTop: ".2rem", verticalAlign: "top" };
-  switch (Math.floor(status / 100)) {
-    case 2:
-    case 3:
-      return <FiberManualRecordIcon style={{ ...style, color: green[400] }} />;
-    case 4:
-      return <FiberManualRecordIcon style={style} htmlColor={"#f00"} />;
-    case 5:
-      return <FiberManualRecordIcon style={style} htmlColor={"#f00"} />;
-    default:
-      return <FiberManualRecordIcon />;
-  }
-}
-
 export default ResponseDetail;