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;