Add Layout component, syntax highlighting and tidy up

admin/src/components/Layout.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  useTheme,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Typography,
+  Drawer,
+  Divider,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  Tooltip,
+} from "@material-ui/core";
+import MenuIcon from "@material-ui/icons/Menu";
+import HomeIcon from "@material-ui/icons/Home";
+import SettingsEthernetIcon from "@material-ui/icons/SettingsEthernet";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import clsx from "clsx";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: "flex",
+      width: "100%",
+    },
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+    },
+    appBarShift: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    menuButton: {
+      marginRight: 36,
+    },
+    hide: {
+      display: "none",
+    },
+    drawer: {
+      width: drawerWidth,
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+    },
+    drawerOpen: {
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    },
+    drawerClose: {
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      overflowX: "hidden",
+      width: theme.spacing(7) + 1,
+      [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(7) + 8,
+      },
+    },
+    toolbar: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
+      ...theme.mixins.toolbar,
+    },
+    content: {
+      flexGrow: 1,
+      padding: theme.spacing(2),
+    },
+    listItem: {
+      paddingLeft: 16,
+      paddingRight: 16,
+      [theme.breakpoints.up("sm")]: {
+        paddingLeft: 20,
+        paddingRight: 20,
+      },
+    },
+    listItemIcon: {
+      minWidth: 42,
+    },
+  })
+);
+
+export function Layout(props: { children: React.ReactNode }): JSX.Element {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open,
+        })}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            className={clsx(classes.menuButton, {
+              [classes.hide]: open,
+            })}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h5" noWrap>
+            <Box component="span" mr={1} display="inline-block">
+              🥥
+            </Box>{" "}
+            Coco
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        className={clsx(classes.drawer, {
+          [classes.drawerOpen]: open,
+          [classes.drawerClose]: !open,
+        })}
+        classes={{
+          paper: clsx({
+            [classes.drawerOpen]: open,
+            [classes.drawerClose]: !open,
+          }),
+        }}
+      >
+        <div className={classes.toolbar}>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          <ListItem button key="home" className={classes.listItem}>
+            <Tooltip title="Home">
+              <ListItemIcon className={classes.listItemIcon}>
+                <HomeIcon />
+              </ListItemIcon>
+            </Tooltip>
+            <ListItemText primary="Home" />
+          </ListItem>
+          <ListItem button key="proxy" className={classes.listItem}>
+            <Tooltip title="Proxy">
+              <ListItemIcon className={classes.listItemIcon}>
+                <SettingsEthernetIcon />
+              </ListItemIcon>
+            </Tooltip>
+            <ListItemText primary="Proxy" />
+          </ListItem>
+        </List>
+      </Drawer>
+      <main className={classes.content}>
+        <div className={classes.toolbar} />
+        {props.children}
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

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">
+          {response && (
-            <ResponseDetail response={response} />
+            <Box component={Paper} maxHeight="65vh" overflow="scroll">
-          </Box>
+              <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">
+        <Typography
-          {request.method} {request.url}
+          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}>
+    <TableContainer
-      <Table>
+      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 }) => (
+          {logs.map(({ id, method, url, response }) => {
-            <TableRow key={id} onClick={() => onLogClick(id)}>
+            const { origin, pathname, search, hash } = new URL(url);
-              <TableCell>{method}</TableCell>
+
-              <TableCell>{url}</TableCell>
+            const cellStyle = {
-            </TableRow>
+              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">
+        <Typography
-          {statusIcon(response.statusCode)} {response.proto} {response.status}
+          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;

admin/src/pages/proxy/logs.tsx

@@ -3,19 +3,14 @@ import { Box } from "@material-ui/core";
 
 import RequestList from "../../components/reqlog/RequestList";
 import LogDetail from "../../components/reqlog/LogDetail";
+import LogsOverview from "../../components/reqlog/LogsOverview";
+import Layout from "../../components/Layout";
 
 function Logs(): JSX.Element {
-  const [detailReqLogId, setDetailReqLogId] = useState<string>();
-
-  const handleLogClick = (reqId: string) => setDetailReqLogId(reqId);
-
   return (
-    <div>
+    <Layout>
-      <Box minHeight="375px" maxHeight="33vh" overflow="scroll">
+      <LogsOverview />
-        <RequestList onLogClick={handleLogClick} />
+    </Layout>
-      </Box>
-      <Box>{detailReqLogId && <LogDetail requestId={detailReqLogId} />}</Box>
-    </div>
   );
 }