Add headers to log details, add Monaco Editor

admin/src/components/reqlog/HttpHeadersTable.tsx

@@ -0,0 +1,58 @@
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+} from "@material-ui/core";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    table: {
+      tableLayout: "fixed",
+      width: "100%",
+    },
+    keyCell: {
+      verticalAlign: "top",
+      width: "30%",
+      fontWeight: "bold",
+    },
+    valueCell: {
+      width: "70%",
+      verticalAlign: "top",
+      wordBreak: "break-all",
+      whiteSpace: "pre-wrap",
+    },
+  })
+);
+
+interface Props {
+  headers: Array<{ key: string; value: string }>;
+}
+
+function HttpHeadersTable({ headers }: Props): JSX.Element {
+  const classes = useStyles();
+  return (
+    <TableContainer>
+      <Table className={classes.table} size="small">
+        <TableBody>
+          {headers.map(({ key, value }, index) => (
+            <TableRow key={index}>
+              <TableCell component="th" scope="row" className={classes.keyCell}>
+                <code>{key}</code>
+              </TableCell>
+              <TableCell className={classes.valueCell}>
+                <code>{value}</code>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default HttpHeadersTable;