Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First rough version of proxy logs frontend
- Loading branch information
Showing
22 changed files
with
2,251 additions
and
1,356 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/types/global" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}, | ||
]; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(), | ||
], | ||
}; | ||
}; |
Oops, something went wrong.