From 7defc19d1a925972a21536adc338653ae6f5e11b Mon Sep 17 00:00:00 2001
From: David Stotijn <dstotijn@gmail.com>
Date: Mon, 21 Sep 2020 22:27:10 +0200
Subject: [PATCH] Add `Proto` to request detail, update theme

---
 .../src/components/reqlog/HttpStatusCode.tsx  |  4 +-
 admin/src/components/reqlog/LogDetail.tsx     |  9 ++--
 admin/src/components/reqlog/RequestDetail.tsx |  5 +-
 admin/src/components/reqlog/RequestList.tsx   |  4 +-
 admin/src/lib/theme.ts                        | 15 ++++--
 pkg/api/generated.go                          | 48 +++++++++++++++++++
 pkg/api/models_gen.go                         |  1 +
 pkg/api/resolvers.go                          |  1 +
 pkg/api/schema.graphql                        |  1 +
 9 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/admin/src/components/reqlog/HttpStatusCode.tsx b/admin/src/components/reqlog/HttpStatusCode.tsx
index 4155d90..f57687a 100644
--- a/admin/src/components/reqlog/HttpStatusCode.tsx
+++ b/admin/src/components/reqlog/HttpStatusCode.tsx
@@ -1,4 +1,4 @@
-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 {
@@ -6,7 +6,7 @@ function HttpStatusIcon({ status }: { status: number }): JSX.Element {
   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
index db4dae0..a49f7d8 100644
--- 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
index 3f5334f..645cf57 100644
--- 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
index 49b8b79..6663cac 100644
--- 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
index 38c4ee5..5e7543e 100644
--- 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
index 6239efb..f7f9903 100644
--- a/pkg/api/generated.go
+++ b/pkg/api/generated.go
@@ -46,6 +46,7 @@ type ComplexityRoot struct {
 		Body      func(childComplexity int) int
 		ID        func(childComplexity int) int
 		Method    func(childComplexity int) int
+		Proto     func(childComplexity int) int
 		Response  func(childComplexity int) int
 		Timestamp func(childComplexity int) int
 		URL       func(childComplexity int) int
@@ -106,6 +107,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.HTTPRequestLog.Method(childComplexity), true
 
+	case "HttpRequestLog.proto":
+		if e.complexity.HTTPRequestLog.Proto == nil {
+			break
+		}
+
+		return e.complexity.HTTPRequestLog.Proto(childComplexity), true
+
 	case "HttpRequestLog.response":
 		if e.complexity.HTTPRequestLog.Response == nil {
 			break
@@ -235,6 +243,7 @@ var sources = []*ast.Source{
   id: ID!
   url: String!
   method: HttpMethod!
+  proto: String!
   body: String
   timestamp: Time!
   response: HttpResponseLog
@@ -440,6 +449,40 @@ func (ec *executionContext) _HttpRequestLog_method(ctx context.Context, field gr
 	return ec.marshalNHttpMethod2githubᚗcomᚋdstotijnᚋgurpᚋpkgᚋapiᚐHTTPMethod(ctx, field.Selections, res)
 }
 
+func (ec *executionContext) _HttpRequestLog_proto(ctx context.Context, field graphql.CollectedField, obj *HTTPRequestLog) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "HttpRequestLog",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Proto, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _HttpRequestLog_body(ctx context.Context, field graphql.CollectedField, obj *HTTPRequestLog) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -1933,6 +1976,11 @@ func (ec *executionContext) _HttpRequestLog(ctx context.Context, sel ast.Selecti
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}
+		case "proto":
+			out.Values[i] = ec._HttpRequestLog_proto(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
 		case "body":
 			out.Values[i] = ec._HttpRequestLog_body(ctx, field, obj)
 		case "timestamp":
diff --git a/pkg/api/models_gen.go b/pkg/api/models_gen.go
index f237e81..85b4738 100644
--- a/pkg/api/models_gen.go
+++ b/pkg/api/models_gen.go
@@ -13,6 +13,7 @@ type HTTPRequestLog struct {
 	ID        string           `json:"id"`
 	URL       string           `json:"url"`
 	Method    HTTPMethod       `json:"method"`
+	Proto     string           `json:"proto"`
 	Body      *string          `json:"body"`
 	Timestamp time.Time        `json:"timestamp"`
 	Response  *HTTPResponseLog `json:"response"`
diff --git a/pkg/api/resolvers.go b/pkg/api/resolvers.go
index a3ce340..91e3164 100644
--- 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
index 5245811..3e4d91e 100644
--- 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