diff --git a/admin/next.config.js b/admin/next.config.js
index d7dd50f..f6ac86a 100644
--- a/admin/next.config.js
+++ b/admin/next.config.js
@@ -1,4 +1,7 @@
-module.exports = {
+const withCSS = require("@zeit/next-css");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
+module.exports = withCSS({
async rewrites() {
return [
{
@@ -7,4 +10,24 @@ module.exports = {
},
];
},
-};
+ webpack: (config) => {
+ config.module.rules.push({
+ test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+ use: {
+ loader: "url-loader",
+ options: {
+ limit: 100000,
+ },
+ },
+ });
+
+ config.plugins.push(
+ new MonacoWebpackPlugin({
+ languages: ["html", "json", "javascript"],
+ filename: "static/[name].worker.js",
+ })
+ );
+
+ return config;
+ },
+});
diff --git a/admin/package.json b/admin/package.json
index fc1bb22..06e1a0a 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -13,10 +13,15 @@
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
+ "@zeit/next-css": "^1.0.1",
"graphql": "^15.3.0",
+ "monaco-editor": "^0.20.0",
+ "monaco-editor-webpack-plugin": "^1.9.0",
"next": "^9.5.3",
+ "next-fonts": "^1.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
+ "react-monaco-editor": "^0.34.0",
"react-syntax-highlighter": "^13.5.3"
},
"devDependencies": {
diff --git a/admin/src/components/reqlog/Editor.tsx b/admin/src/components/reqlog/Editor.tsx
new file mode 100644
index 0000000..c3f989f
--- /dev/null
+++ b/admin/src/components/reqlog/Editor.tsx
@@ -0,0 +1,55 @@
+import dynamic from "next/dynamic";
+const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });
+
+const monacoOptions = {
+ readOnly: true,
+ wordWrap: "on",
+ minimap: {
+ enabled: false,
+ },
+};
+
+type language = "html" | "typescript" | "json";
+
+function editorDidMount() {
+ return (window.MonacoEnvironment.getWorkerUrl = (moduleId, label) => {
+ if (label === "json") return "/_next/static/json.worker.js";
+ if (label === "html") return "/_next/static/html.worker.js";
+ if (label === "javascript") return "/_next/static/ts.worker.js";
+
+ return "/_next/static/editor.worker.js";
+ });
+}
+
+function languageForContentType(contentType: string): language {
+ switch (contentType) {
+ case "text/html":
+ return "html";
+ case "application/json":
+ return "json";
+ case "application/javascript":
+ return "typescript";
+ default:
+ return;
+ }
+}
+
+interface Props {
+ content: string;
+ contentType: string;
+}
+
+function Editor({ content, contentType }: Props): JSX.Element {
+ return (
+
+ );
+}
+
+export default Editor;
diff --git a/admin/src/components/reqlog/HttpHeadersTable.tsx b/admin/src/components/reqlog/HttpHeadersTable.tsx
new file mode 100644
index 0000000..233c249
--- /dev/null
+++ b/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 (
+
+
+
+ {headers.map(({ key, value }, index) => (
+
+
+ {key}
+
+
+ {value}
+
+
+ ))}
+
+
+
+ );
+}
+
+export default HttpHeadersTable;
diff --git a/admin/src/components/reqlog/LogDetail.tsx b/admin/src/components/reqlog/LogDetail.tsx
index b482a2c..01a9e3f 100644
--- a/admin/src/components/reqlog/LogDetail.tsx
+++ b/admin/src/components/reqlog/LogDetail.tsx
@@ -12,9 +12,17 @@ const HTTP_REQUEST_LOG = gql`
method
url
proto
+ headers {
+ key
+ value
+ }
body
response {
proto
+ headers {
+ key
+ value
+ }
status
statusCode
body
@@ -43,14 +51,14 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
);
}
- const { method, url, proto, body, response } = data.httpRequestLog;
+ const { method, url, proto, headers, body, response } = data.httpRequestLog;
return (
-
+
diff --git a/admin/src/components/reqlog/RequestDetail.tsx b/admin/src/components/reqlog/RequestDetail.tsx
index fe534d7..94f3aa8 100644
--- a/admin/src/components/reqlog/RequestDetail.tsx
+++ b/admin/src/components/reqlog/RequestDetail.tsx
@@ -1,43 +1,83 @@
-import { Typography, Box } from "@material-ui/core";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import React from "react";
+import {
+ Typography,
+ Box,
+ createStyles,
+ makeStyles,
+ Theme,
+ Divider,
+} from "@material-ui/core";
+
+import HttpHeadersTable from "./HttpHeadersTable";
+import Editor from "./Editor";
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ requestTitle: {
+ width: "calc(100% - 80px)",
+ fontSize: "1rem",
+ wordBreak: "break-all",
+ whiteSpace: "pre-wrap",
+ },
+ headersTable: {
+ tableLayout: "fixed",
+ width: "100%",
+ },
+ headerKeyCell: {
+ verticalAlign: "top",
+ width: "30%",
+ fontWeight: "bold",
+ },
+ headerValueCell: {
+ width: "70%",
+ verticalAlign: "top",
+ wordBreak: "break-all",
+ whiteSpace: "pre-wrap",
+ },
+ })
+);
interface Props {
request: {
method: string;
url: string;
proto: string;
+ headers: Array<{ key: string; value: string }>;
body?: string;
};
}
function RequestDetail({ request }: Props): JSX.Element {
- const { method, url, proto, body } = request;
+ const { method, url, proto, headers, body } = request;
+ const classes = useStyles();
+ const contentType = headers.find((header) => header.key === "Content-Type")
+ ?.value;
const parsedUrl = new URL(url);
return (
-
+
+ Request
+
+
{method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
- {proto}
+
+ {proto}
+
-
- {body && (
-
- {body}
-
- )}
-
+
+
+
+
+
+ {body && }
-
+
+
+ Response
+
- {response.proto}{" "}
+ {" "}
+
+ {response.proto}
+ {" "}
{response.status}
-
- {response.body && (
-
- {response.body}
-
- )}
-
+
+
+
+
+
+ {response.body && (
+
+ )}