@@ -24,18 +23,18 @@ function RequestDetail({ request }: Props): JSX.Element {
variant="h6"
style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
>
- {request.method}{" "}
- {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)} {proto}
+ {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
+ {proto}
- {request.body && (
+ {body && (
- {request.body}
+ {body}
)}
diff --git a/admin/src/components/reqlog/RequestList.tsx b/admin/src/components/reqlog/RequestList.tsx
index 6663cac..e1b389b 100644
--- a/admin/src/components/reqlog/RequestList.tsx
+++ b/admin/src/components/reqlog/RequestList.tsx
@@ -1,4 +1,3 @@
-import { gql, useQuery } from "@apollo/client";
import {
TableContainer,
Paper,
@@ -7,42 +6,50 @@ import {
TableRow,
TableCell,
TableBody,
+ CircularProgress,
Typography,
+ Box,
} from "@material-ui/core";
import HttpStatusIcon from "./HttpStatusCode";
-
-const HTTP_REQUEST_LOGS = gql`
- query HttpRequestLogs {
- httpRequestLogs {
- id
- method
- url
- timestamp
- response {
- status
- statusCode
- }
- }
- }
-`;
+import CenteredPaper from "../CenteredPaper";
interface Props {
+ logs: Array
;
onLogClick(requestId: string): void;
}
-function RequestList({ onLogClick }: Props): JSX.Element {
- const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
+function RequestList({ logs, onLogClick }: Props): JSX.Element {
+ return (
+
+
+ {logs.length === 0 && (
+
+
+ No logs found.
+
+
+ )}
+
+ );
+}
- if (loading) return "Loading..."
;
- if (error) return `Error: ${error.message}`
;
-
- const { httpRequestLogs: logs } = data;
+interface RequestListTableProps {
+ logs?: any;
+ onLogClick(requestId: string): void;
+}
+function RequestListTable({
+ logs,
+ onLogClick,
+}: RequestListTableProps): JSX.Element {
return (
diff --git a/admin/src/components/reqlog/ResponseDetail.tsx b/admin/src/components/reqlog/ResponseDetail.tsx
index 1f862c6..95e0f72 100644
--- a/admin/src/components/reqlog/ResponseDetail.tsx
+++ b/admin/src/components/reqlog/ResponseDetail.tsx
@@ -1,6 +1,6 @@
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";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
import HttpStatusIcon from "./HttpStatusCode";
@@ -26,22 +26,24 @@ function ResponseDetail({ response }: Props): JSX.Element {
-
- {response.body}
-
+ {response.body && (
+
+ {response.body}
+
+ )}
);
diff --git a/admin/src/lib/graphql.ts b/admin/src/lib/graphql.ts
index b590c64..ada1469 100644
--- a/admin/src/lib/graphql.ts
+++ b/admin/src/lib/graphql.ts
@@ -8,7 +8,7 @@ function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: new HttpLink({
- uri: "http://localhost:3000/api/graphql",
+ uri: "/api/graphql",
}),
cache: new InMemoryCache({
typePolicies: {
diff --git a/admin/src/lib/theme.ts b/admin/src/lib/theme.ts
index 5e7543e..1291989 100644
--- a/admin/src/lib/theme.ts
+++ b/admin/src/lib/theme.ts
@@ -1,11 +1,12 @@
import { createMuiTheme } from "@material-ui/core/styles";
-import teal from "@material-ui/core/colors/teal";
+import grey from "@material-ui/core/colors/grey";
import green from "@material-ui/core/colors/green";
const theme = createMuiTheme({
palette: {
+ type: "dark",
primary: {
- main: teal[500],
+ main: grey[900],
},
secondary: {
main: green[500],
diff --git a/admin/src/pages/index.tsx b/admin/src/pages/index.tsx
index 9164817..37579ff 100644
--- a/admin/src/pages/index.tsx
+++ b/admin/src/pages/index.tsx
@@ -1,9 +1,7 @@
-import RequestList from "../components/reqlog/RequestList";
-
function Index(): JSX.Element {
return (
-
Hetty
+ Hetty123
);
}
diff --git a/admin/src/pages/proxy/index.tsx b/admin/src/pages/proxy/index.tsx
new file mode 100644
index 0000000..c7a0de5
--- /dev/null
+++ b/admin/src/pages/proxy/index.tsx
@@ -0,0 +1,9 @@
+function Index(): JSX.Element {
+ return (
+
+
Proxy123
+
+ );
+}
+
+export default Index;
diff --git a/admin/src/pages/proxy/logs.tsx b/admin/src/pages/proxy/logs.tsx
deleted file mode 100644
index 2fe3de9..0000000
--- a/admin/src/pages/proxy/logs.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from "react";
-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 {
- return (
-
-
-
- );
-}
-
-export default Logs;
diff --git a/admin/src/pages/proxy/logs/index.tsx b/admin/src/pages/proxy/logs/index.tsx
new file mode 100644
index 0000000..c54c14d
--- /dev/null
+++ b/admin/src/pages/proxy/logs/index.tsx
@@ -0,0 +1,17 @@
+import { Typography, Box } from "@material-ui/core";
+
+import LogsOverview from "../../../components/reqlog/LogsOverview";
+import Layout from "../../../components/Layout";
+
+function ProxyLogs(): JSX.Element {
+ return (
+
+
+ Proxy logs
+
+
+
+ );
+}
+
+export default ProxyLogs;
diff --git a/admin/yarn.lock b/admin/yarn.lock
index ecb427c..e3da614 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -1085,6 +1085,17 @@
dependencies:
"@babel/runtime" "^7.4.4"
+"@material-ui/lab@^4.0.0-alpha.56":
+ version "4.0.0-alpha.56"
+ resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
+ integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.10.2"
+ clsx "^1.0.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0"
+
"@material-ui/styles@^4.10.0":
version "4.10.0"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"