First rough version of proxy logs frontend

admin/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

admin/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path",
+        destination: "http://localhost:8080/api/:path", // Matched parameters can be used in the destination
+      },
+    ];
+  },
+};

admin/package.json

@@ -9,8 +9,22 @@
     "export": "next build && next export -o build"
   },
   "dependencies": {
-    "next": "9.4.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "@apollo/client": "^3.2.0",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "graphql": "^15.3.0",
+    "next": "^9.5.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-syntax-highlighter": "^13.5.3"
+  },
+  "devDependencies": {
+    "@types/node": "^14.11.1",
+    "@types/react": "^16.9.49",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "prettier": "^2.1.2",
+    "typescript": "^4.0.3"
   }
 }

admin/pages/index.js

@@ -1,3 +0,0 @@
-const Page = () => <div>Gurp</div>
-
-export default Page

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;

admin/src/lib/graphql.ts

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { concatPagination } from "@apollo/client/utilities";
+
+let apolloClient;
+
+function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link: new HttpLink({
+      uri: "http://localhost:3000/api/graphql",
+    }),
+    cache: new InMemoryCache({
+      typePolicies: {
+        Query: {
+          fields: {
+            allPosts: concatPagination(),
+          },
+        },
+      },
+    }),
+  });
+}
+
+export function initializeApollo(initialState = null) {
+  const _apolloClient = apolloClient ?? createApolloClient();
+
+  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
+  // gets hydrated here
+  if (initialState) {
+    // Get existing cache, loaded during client side data fetching
+    const existingCache = _apolloClient.extract();
+    // Restore the cache using the data passed from getStaticProps/getServerSideProps
+    // combined with the existing cached data
+    _apolloClient.cache.restore({ ...existingCache, ...initialState });
+  }
+  // For SSG and SSR always create a new Apollo Client
+  if (typeof window === "undefined") return _apolloClient;
+  // Create the Apollo Client once in the client
+  if (!apolloClient) apolloClient = _apolloClient;
+
+  return _apolloClient;
+}
+
+export function useApollo(initialState) {
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
+}

admin/src/lib/theme.ts

@@ -0,0 +1,7 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import { red } from "@material-ui/core/colors";
+
+// Create a theme instance.
+const theme = createMuiTheme({});
+
+export default theme;

admin/src/pages/_app.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { AppProps } from "next/app";
+import { ApolloProvider } from "@apollo/client";
+import Head from "next/head";
+import { ThemeProvider } from "@material-ui/core/styles";
+import CssBaseline from "@material-ui/core/CssBaseline";
+
+import theme from "../lib/theme";
+import { useApollo } from "../lib/graphql";
+
+function App({ Component, pageProps }: AppProps): JSX.Element {
+  const apolloClient = useApollo(pageProps.initialApolloState);
+
+  React.useEffect(() => {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector("#jss-server-side");
+    if (jssStyles) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>gurp</title>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width"
+        />
+      </Head>
+      <ApolloProvider client={apolloClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </ApolloProvider>
+    </React.Fragment>
+  );
+}
+
+export default App;

admin/src/pages/_document.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { ServerStyleSheets } from "@material-ui/core/styles";
+
+import theme from "../lib/theme";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with server-side generation (SSG).
+MyDocument.getInitialProps = async (ctx) => {
+  // Render app and page and get the context of the page with collected side effects.
+  const sheets = new ServerStyleSheets();
+  const originalRenderPage = ctx.renderPage;
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      sheets.getStyleElement(),
+    ],
+  };
+};

admin/src/pages/index.tsx

@@ -0,0 +1,11 @@
+import RequestList from "../components/reqlog/RequestList";
+
+function Index(): JSX.Element {
+  return (
+    <div>
+      <h1>gurp</h1>
+    </div>
+  );
+}
+
+export default Index;

admin/src/pages/proxy/logs.tsx

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

admin/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["dist", ".next", "out", "next.config.js"],
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+}