From e9367f7186cd9b2dff0a2de6dd6a244e7e245d93 Mon Sep 17 00:00:00 2001 From: David Stotijn Date: Wed, 23 Sep 2020 18:10:32 +0200 Subject: [PATCH] Polish admin styles --- admin/package.json | 1 + admin/src/components/CenteredPaper.tsx | 25 +++++++++ admin/src/components/Layout.tsx | 4 +- .../src/components/reqlog/HttpStatusCode.tsx | 4 +- admin/src/components/reqlog/LogDetail.tsx | 19 +++++-- admin/src/components/reqlog/LogsOverview.tsx | 55 +++++++++++++------ admin/src/components/reqlog/RequestDetail.tsx | 13 ++--- admin/src/components/reqlog/RequestList.tsx | 53 ++++++++++-------- .../src/components/reqlog/ResponseDetail.tsx | 36 ++++++------ admin/src/lib/graphql.ts | 2 +- admin/src/lib/theme.ts | 5 +- admin/src/pages/index.tsx | 4 +- admin/src/pages/proxy/index.tsx | 9 +++ admin/src/pages/proxy/logs.tsx | 17 ------ admin/src/pages/proxy/logs/index.tsx | 17 ++++++ admin/yarn.lock | 11 ++++ 16 files changed, 178 insertions(+), 97 deletions(-) create mode 100644 admin/src/components/CenteredPaper.tsx create mode 100644 admin/src/pages/proxy/index.tsx delete mode 100644 admin/src/pages/proxy/logs.tsx create mode 100644 admin/src/pages/proxy/logs/index.tsx diff --git a/admin/package.json b/admin/package.json index c35e765..fc1bb22 100644 --- a/admin/package.json +++ b/admin/package.json @@ -12,6 +12,7 @@ "@apollo/client": "^3.2.0", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "^4.0.0-alpha.56", "graphql": "^15.3.0", "next": "^9.5.3", "react": "^16.13.1", diff --git a/admin/src/components/CenteredPaper.tsx b/admin/src/components/CenteredPaper.tsx new file mode 100644 index 0000000..3b4c1ea --- /dev/null +++ b/admin/src/components/CenteredPaper.tsx @@ -0,0 +1,25 @@ +import { Paper } from "@material-ui/core"; + +function CenteredPaper({ + children, +}: { + children: React.ReactNode; +}): JSX.Element { + return ( +
+ + {children} + +
+ ); +} + +export default CenteredPaper; diff --git a/admin/src/components/Layout.tsx b/admin/src/components/Layout.tsx index cba9852..435379a 100644 --- a/admin/src/components/Layout.tsx +++ b/admin/src/components/Layout.tsx @@ -86,7 +86,7 @@ const useStyles = makeStyles((theme: Theme) => }, content: { flexGrow: 1, - padding: theme.spacing(2), + padding: theme.spacing(3), }, listItem: { paddingLeft: 16, @@ -136,7 +136,7 @@ export function Layout(props: { children: React.ReactNode }): JSX.Element { - Hetty + ‍🧑‍🔧Hetty diff --git a/admin/src/components/reqlog/HttpStatusCode.tsx b/admin/src/components/reqlog/HttpStatusCode.tsx index f57687a..aa07fa6 100644 --- a/admin/src/components/reqlog/HttpStatusCode.tsx +++ b/admin/src/components/reqlog/HttpStatusCode.tsx @@ -1,4 +1,4 @@ -import { teal, orange, red } from "@material-ui/core/colors"; +import { green, orange, red } from "@material-ui/core/colors"; import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord"; function HttpStatusIcon({ status }: { status: number }): JSX.Element { @@ -6,7 +6,7 @@ function HttpStatusIcon({ status }: { status: number }): JSX.Element { switch (Math.floor(status / 100)) { case 2: case 3: - return ; + return ; case 4: return ; case 5: diff --git a/admin/src/components/reqlog/LogDetail.tsx b/admin/src/components/reqlog/LogDetail.tsx index a49f7d8..b482a2c 100644 --- a/admin/src/components/reqlog/LogDetail.tsx +++ b/admin/src/components/reqlog/LogDetail.tsx @@ -1,8 +1,9 @@ import { gql, useQuery } from "@apollo/client"; -import { Box, Grid, Paper } from "@material-ui/core"; +import { Box, Grid, Paper, CircularProgress } from "@material-ui/core"; import ResponseDetail from "./ResponseDetail"; import RequestDetail from "./RequestDetail"; +import Alert from "@material-ui/lab/Alert"; const HTTP_REQUEST_LOG = gql` query HttpRequestLog($id: ID!) { @@ -31,8 +32,16 @@ function LogDetail({ requestId: id }: Props): JSX.Element { variables: { id }, }); - if (loading) return
"Loading..."
; - if (error) return
`Error: ${error.message}`
; + if (loading) { + return ; + } + if (error) { + return ( + + Error fetching logs details: {error.message} + + ); + } const { method, url, proto, body, response } = data.httpRequestLog; @@ -40,13 +49,13 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
- + {response && ( - + )} diff --git a/admin/src/components/reqlog/LogsOverview.tsx b/admin/src/components/reqlog/LogsOverview.tsx index 5c53d79..97dcdda 100644 --- a/admin/src/components/reqlog/LogsOverview.tsx +++ b/admin/src/components/reqlog/LogsOverview.tsx @@ -1,37 +1,56 @@ +import { gql, useQuery } from "@apollo/client"; import { useState } from "react"; -import { Box, Paper, Container, Typography } from "@material-ui/core"; +import { Box, Typography, CircularProgress } from "@material-ui/core"; +import Alert from "@material-ui/lab/Alert"; import RequestList from "./RequestList"; import LogDetail from "./LogDetail"; +import CenteredPaper from "../CenteredPaper"; + +const HTTP_REQUEST_LOGS = gql` + query HttpRequestLogs { + httpRequestLogs { + id + method + url + timestamp + response { + status + statusCode + } + } + } +`; function LogsOverview(): JSX.Element { - const [detailReqLogId, setDetailReqLogId] = useState(null); + const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS); + const [detailReqLogId, setDetailReqLogId] = useState(null); const handleLogClick = (reqId: string) => setDetailReqLogId(reqId); + if (loading) { + return ; + } + if (error) { + return Error fetching logs: {error.message}; + } + + const { httpRequestLogs: logs } = data; + return ( - +
- + - {detailReqLogId ? ( - - ) : ( - + {detailReqLogId && } + {logs.length !== 0 && !detailReqLogId && ( + Select a log entry… - + )} - +
); } diff --git a/admin/src/components/reqlog/RequestDetail.tsx b/admin/src/components/reqlog/RequestDetail.tsx index 645cf57..fe534d7 100644 --- a/admin/src/components/reqlog/RequestDetail.tsx +++ b/admin/src/components/reqlog/RequestDetail.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"; interface Props { request: { @@ -15,7 +15,6 @@ function RequestDetail({ request }: Props): JSX.Element { const { method, url, proto, body } = request; const parsedUrl = new URL(url); - console.log(parsedUrl); return (
@@ -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"