Add Proto to request detail, update theme

dstotijn · Sep 21, 2020 · 7defc19 · 7defc19
1 parent fe1ddab
commit 7defc19
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 13 deletions.
diff --git a/admin/src/components/reqlog/HttpStatusCode.tsx b/admin/src/components/reqlog/HttpStatusCode.tsx
@@ -1,12 +1,12 @@
-import { green, orange, red } from "@material-ui/core/colors";
+import { teal, orange, red } from "@material-ui/core/colors";
 import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
 
 function HttpStatusIcon({ status }: { status: number }): JSX.Element {
   const style = { marginTop: "-.25rem", verticalAlign: "middle" };
   switch (Math.floor(status / 100)) {
     case 2:
     case 3:
-      return <FiberManualRecordIcon style={{ ...style, color: green[400] }} />;
+      return <FiberManualRecordIcon style={{ ...style, color: teal[400] }} />;
     case 4:
       return <FiberManualRecordIcon style={{ ...style, color: orange[400] }} />;
     case 5:

diff --git a/admin/src/components/reqlog/LogDetail.tsx b/admin/src/components/reqlog/LogDetail.tsx
@@ -10,6 +10,7 @@ const HTTP_REQUEST_LOG = gql`
       id
       method
       url
+      proto
       body
       response {
         proto
@@ -30,17 +31,17 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
     variables: { id },
   });
 
-  if (loading) return "Loading...";
-  if (error) return `Error: ${error.message}`;
+  if (loading) return <div>"Loading..."</div>;
+  if (error) return <div>`Error: ${error.message}`</div>;
 
-  const { method, url, body, response } = data.httpRequestLog;
+  const { method, url, proto, body, response } = data.httpRequestLog;
 
   return (
     <div>
       <Grid container item spacing={2}>
         <Grid item xs={6}>
           <Box component={Paper} maxHeight="60vh" overflow="scroll">
-            <RequestDetail request={{ method, url, body }} />
+            <RequestDetail request={{ method, url, proto, body }} />
           </Box>
         </Grid>
         <Grid item xs={6}>

diff --git a/admin/src/components/reqlog/RequestDetail.tsx b/admin/src/components/reqlog/RequestDetail.tsx
@@ -6,12 +6,13 @@ interface Props {
   request: {
     method: string;
     url: string;
+    proto: string;
     body?: string;
   };
 }
 
 function RequestDetail({ request }: Props): JSX.Element {
-  const { method, url, body } = request;
+  const { method, url, proto, body } = request;
 
   const parsedUrl = new URL(url);
   console.log(parsedUrl);
@@ -24,7 +25,7 @@ function RequestDetail({ request }: Props): JSX.Element {
           style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
         >
           {request.method}{" "}
-          {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}
+          {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)} {proto}
         </Typography>
       </Box>
       <Box>

diff --git a/admin/src/components/reqlog/RequestList.tsx b/admin/src/components/reqlog/RequestList.tsx
@@ -34,8 +34,8 @@ interface Props {
 function RequestList({ onLogClick }: Props): JSX.Element {
   const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS);
 
-  if (loading) return "Loading...";
-  if (error) return `Error: ${error.message}`;
+  if (loading) return <div>"Loading..."</div>;
+  if (error) return <div>`Error: ${error.message}`</div>;
 
   const { httpRequestLogs: logs } = data;
 

diff --git a/admin/src/lib/theme.ts b/admin/src/lib/theme.ts
@@ -1,7 +1,16 @@
 import { createMuiTheme } from "@material-ui/core/styles";
-import { red } from "@material-ui/core/colors";
+import teal from "@material-ui/core/colors/teal";
+import green from "@material-ui/core/colors/green";
 
-// Create a theme instance.
-const theme = createMuiTheme({});
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: teal[500],
+    },
+    secondary: {
+      main: green[500],
+    },
+  },
+});
 
 export default theme;
diff --git a/pkg/api/generated.go b/pkg/api/generated.go
diff --git a/pkg/api/models_gen.go b/pkg/api/models_gen.go
diff --git a/pkg/api/resolvers.go b/pkg/api/resolvers.go
@@ -58,6 +58,7 @@ func parseRequestLog(req reqlog.Request) (HTTPRequestLog, error) {
 	log := HTTPRequestLog{
 		ID:        req.ID.String(),
 		URL:       req.Request.URL.String(),
+		Proto:     req.Request.Proto,
 		Method:    method,
 		Timestamp: req.Timestamp,
 	}

diff --git a/pkg/api/schema.graphql b/pkg/api/schema.graphql
@@ -2,6 +2,7 @@ type HttpRequestLog {
   id: ID!
   url: String!
   method: HttpMethod!
+  proto: String!
   body: String
   timestamp: Time!
   response: HttpResponseLog