Polish admin styles

admin/src/components/reqlog/HttpStatusCode.tsx

@@ -1,4 +1,4 @@
-import { teal, orange, red } from "@material-ui/core/colors";
+import { green, 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: teal[400] }} />;
+      return <FiberManualRecordIcon style={{ ...style, color: green[600] }} />;
     case 4:
       return <FiberManualRecordIcon style={{ ...style, color: orange[400] }} />;
     case 5:

admin/src/components/reqlog/LogDetail.tsx

@@ -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>
           )}

admin/src/components/reqlog/LogsOverview.tsx

@@ -1,37 +1,56 @@
+import { gql, useQuery } from "@apollo/client";
 import { useState } from "react";
-import { Box, Paper, Container, Typography } from "@material-ui/core";
+import { Box, Typography, CircularProgress } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
 
 import RequestList from "./RequestList";
 import LogDetail from "./LogDetail";
+import CenteredPaper from "../CenteredPaper";
+
+const HTTP_REQUEST_LOGS = gql`
+  query HttpRequestLogs {
+    httpRequestLogs {
+      id
+      method
+      url
+      timestamp
+      response {
+        status
+        statusCode
+      }
+    }
+  }
+`;
 
 function LogsOverview(): JSX.Element {
-  const [detailReqLogId, setDetailReqLogId] = useState<string | null>(null);
+  const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
 
+  const [detailReqLogId, setDetailReqLogId] = useState<string | null>(null);
   const handleLogClick = (reqId: string) => setDetailReqLogId(reqId);
 
+  if (loading) {
+    return <CircularProgress />;
+  }
+  if (error) {
+    return <Alert severity="error">Error fetching logs: {error.message}</Alert>;
+  }
+
+  const { httpRequestLogs: logs } = data;
+
   return (
-    <Box style={{ padding: 8 }}>
+    <div>
       <Box mb={2}>
-        <RequestList onLogClick={handleLogClick} />
+        <RequestList logs={logs} onLogClick={handleLogClick} />
       </Box>
       <Box>
-        {detailReqLogId ? (
-          <LogDetail requestId={detailReqLogId} />
-        ) : (
-          <Paper
-            elevation={0}
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "60vh",
-            }}
-          >
+        {detailReqLogId && <LogDetail requestId={detailReqLogId} />}
+        {logs.length !== 0 && !detailReqLogId && (
+          <CenteredPaper>
             <Typography>Select a log entry…</Typography>
-          </Paper>
+          </CenteredPaper>
         )}
       </Box>
-    </Box>
+    </div>
   );
 }
 

admin/src/components/reqlog/RequestDetail.tsx

@@ -1,6 +1,6 @@
 import { Typography, Box } from "@material-ui/core";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface Props {
   request: {
@@ -15,7 +15,6 @@ function RequestDetail({ request }: Props): JSX.Element {
   const { method, url, proto, body } = request;
 
   const parsedUrl = new URL(url);
-  console.log(parsedUrl);
 
   return (
     <div>
@@ -24,18 +23,18 @@ function RequestDetail({ request }: Props): JSX.Element {
           variant="h6"
           style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
         >
-          {request.method}{" "}
-          {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)} {proto}
+          {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
+          {proto}
         </Typography>
       </Box>
       <Box>
-        {request.body && (
+        {body && (
           <SyntaxHighlighter
             language="markup"
             showLineNumbers={true}
-            style={materialLight}
+            style={vscDarkPlus}
           >
-            {request.body}
+            {body}
           </SyntaxHighlighter>
         )}
       </Box>

admin/src/components/reqlog/RequestList.tsx

@@ -1,4 +1,3 @@
-import { gql, useQuery } from "@apollo/client";
 import {
   TableContainer,
   Paper,
@@ -7,42 +6,50 @@ import {
   TableRow,
   TableCell,
   TableBody,
+  CircularProgress,
   Typography,
+  Box,
 } from "@material-ui/core";
 
 import HttpStatusIcon from "./HttpStatusCode";
-
-const HTTP_REQUEST_LOGS = gql`
-  query HttpRequestLogs {
-    httpRequestLogs {
-      id
-      method
-      url
-      timestamp
-      response {
-        status
-        statusCode
-      }
-    }
-  }
-`;
+import CenteredPaper from "../CenteredPaper";
 
 interface Props {
+  logs: Array<any>;
   onLogClick(requestId: string): void;
 }
 
-function RequestList({ onLogClick }: Props): JSX.Element {
-  const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
+function RequestList({ logs, onLogClick }: Props): JSX.Element {
+  return (
+    <div>
+      <RequestListTable onLogClick={onLogClick} logs={logs} />
+      {logs.length === 0 && (
+        <Box my={1}>
+          <CenteredPaper>
+            <Typography>No logs found.</Typography>
+          </CenteredPaper>
+        </Box>
+      )}
+    </div>
+  );
+}
 
-  if (loading) return <div>"Loading..."</div>;
-  if (error) return <div>`Error: ${error.message}`</div>;
-
-  const { httpRequestLogs: logs } = data;
+interface RequestListTableProps {
+  logs?: any;
+  onLogClick(requestId: string): void;
+}
 
+function RequestListTable({
+  logs,
+  onLogClick,
+}: RequestListTableProps): JSX.Element {
   return (
     <TableContainer
       component={Paper}
-      style={{ minHeight: 200, height: "24vh" }}
+      style={{
+        minHeight: logs.length ? 200 : 0,
+        height: logs.length ? "24vh" : "inherit",
+      }}
     >
       <Table stickyHeader size="small">
         <TableHead>

admin/src/components/reqlog/ResponseDetail.tsx

@@ -1,6 +1,6 @@
 import { Typography, Box } from "@material-ui/core";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { materialLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 import HttpStatusIcon from "./HttpStatusCode";
 
@@ -26,22 +26,24 @@ function ResponseDetail({ response }: Props): JSX.Element {
         </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>
+        {response.body && (
+          <SyntaxHighlighter
+            language="markup"
+            showLineNumbers={true}
+            showInlineLineNumbers={true}
+            style={vscDarkPlus}
+            lineProps={{
+              style: {
+                display: "block",
+                wordBreak: "break-all",
+                whiteSpace: "pre-wrap",
+              },
+            }}
+            wrapLines={true}
+          >
+            {response.body}
+          </SyntaxHighlighter>
+        )}
       </Box>
     </div>
   );