First rough version of proxy logs frontend

admin/src/components/reqlog/LogDetail.tsx

@@ -0,0 +1,56 @@
+import { gql, useQuery } from "@apollo/client";
+import { Box, Grid, Paper } from "@material-ui/core";
+
+import ResponseDetail from "./ResponseDetail";
+import RequestDetail from "./RequestDetail";
+
+const HTTP_REQUEST_LOG = gql`
+  query HttpRequestLog($id: ID!) {
+    httpRequestLog(id: $id) {
+      id
+      method
+      url
+      body
+      response {
+        proto
+        status
+        statusCode
+        body
+      }
+    }
+  }
+`;
+
+interface Props {
+  requestId: string;
+}
+
+function LogDetail({ requestId: id }: Props): JSX.Element {
+  const { loading, error, data } = useQuery(HTTP_REQUEST_LOG, {
+    variables: { id },
+  });
+
+  if (loading) return "Loading...";
+  if (error) return `Error: ${error.message}`;
+
+  const { method, url, body, response } = data.httpRequestLog;
+
+  return (
+    <div>
+      <Grid container item spacing={2}>
+        <Grid item xs={6}>
+          <Box component={Paper} m={2} maxHeight="63vh" 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>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default LogDetail;

admin/src/components/reqlog/RequestDetail.tsx

@@ -0,0 +1,36 @@
+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";
+
+interface Props {
+  request: {
+    method: string;
+    url: string;
+    body?: string;
+  };
+}
+
+function RequestDetail({ request }: Props): JSX.Element {
+  return (
+    <div>
+      <Box m={3}>
+        <Typography variant="h5">
+          {request.method} {request.url}
+        </Typography>
+      </Box>
+      <Box>
+        {request.body && (
+          <SyntaxHighlighter
+            language="markup"
+            showLineNumbers={true}
+            style={materialLight}
+          >
+            {request.body}
+          </SyntaxHighlighter>
+        )}
+      </Box>
+    </div>
+  );
+}
+
+export default RequestDetail;

admin/src/components/reqlog/RequestList.tsx

@@ -0,0 +1,58 @@
+import { gql, useQuery } from "@apollo/client";
+import {
+  TableContainer,
+  Paper,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  makeStyles,
+} from "@material-ui/core";
+
+const HTTP_REQUEST_LOGS = gql`
+  query HttpRequestLogs {
+    httpRequestLogs {
+      id
+      method
+      url
+      timestamp
+    }
+  }
+`;
+
+interface Props {
+  onLogClick(requestId: string): void;
+}
+
+function RequestList({ onLogClick }: Props): JSX.Element {
+  const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
+
+  if (loading) return "Loading...";
+  if (error) return `Error: ${error.message}`;
+
+  const { httpRequestLogs: logs } = data;
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Method</TableCell>
+            <TableCell>URL</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {logs.map(({ id, method, url }) => (
+            <TableRow key={id} onClick={() => onLogClick(id)}>
+              <TableCell>{method}</TableCell>
+              <TableCell>{url}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default RequestList;

admin/src/components/reqlog/ResponseDetail.tsx

@@ -0,0 +1,52 @@
+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";
+
+interface Props {
+  response: {
+    proto: string;
+    statusCode: number;
+    status: string;
+    body?: string;
+  };
+}
+
+function ResponseDetail({ response }: Props): JSX.Element {
+  return (
+    <div>
+      <Box m={3}>
+        <Typography variant="h5">
+          {statusIcon(response.statusCode)} {response.proto} {response.status}
+        </Typography>
+      </Box>
+      <Box>
+        <SyntaxHighlighter
+          language="markup"
+          showLineNumbers={true}
+          style={materialLight}
+        >
+          {response.body}
+        </SyntaxHighlighter>
+      </Box>
+    </div>
+  );
+}
+
+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;