From 77821a12474d8e9584d3e051ce405ea7b2d02976 Mon Sep 17 00:00:00 2001
From: Fabricio <fabriciogiac@gmail.com>
Date: Sat, 21 Jul 2018 14:50:53 -0300
Subject: [PATCH] two step item fetch

---
 args.go      | 20 ++++++++---
 capture.go   | 38 ++++++++++++++++-----
 dashboard.go | 94 ++++++++++++++++++++++++++++++++++++----------------
 main.go      | 72 ++++++++++++++++++++++++++++------------
 4 files changed, 162 insertions(+), 62 deletions(-)

diff --git a/args.go b/args.go
index 503631d..f6342fb 100644
--- a/args.go
+++ b/args.go
@@ -6,12 +6,24 @@ import (
 	"strconv"
 )
 
-func parseFlags() (*url.URL, string, string, int) {
-	target := flag.String("url", "https://jsonplaceholder.typicode.com", "Required. Set the base url you want to capture")
+type Args struct {
+	url         *url.URL
+	port        string
+	dashboard   string
+	maxCaptures int
+}
+
+var args Args
+
+func parseArgs() {
+	proxyURL := flag.String("url", "https://jsonplaceholder.typicode.com", "Required. Set the base url you want to capture")
 	proxyPort := flag.Int("port", 9000, "Set the proxy port")
 	dashboard := flag.String("dashboard", "dashboard", "Set the dashboard name")
 	maxCaptures := flag.Int("max-captures", 16, "Set the max number of captures to show in the dashboard")
 	flag.Parse()
-	targetURL, _ := url.Parse(*target)
-	return targetURL, strconv.Itoa(*proxyPort), *dashboard, *maxCaptures
+	args = Args{}
+	args.url, _ = url.Parse(*proxyURL)
+	args.port = strconv.Itoa(*proxyPort)
+	args.dashboard = *dashboard
+	args.maxCaptures = *maxCaptures
 }
diff --git a/capture.go b/capture.go
index 6d887d2..b5bee86 100644
--- a/capture.go
+++ b/capture.go
@@ -1,21 +1,43 @@
 package main
 
+import "strconv"
+
 type Capture struct {
-	Url      string `json:"url"`
+	Path     string `json:"path"`
 	Method   string `json:"method"`
 	Status   int    `json:"status"`
 	Request  string `json:"request"`
 	Response string `json:"response"`
 }
 
-type Captures struct {
-	items []Capture
-	max   int
+type CaptureRef struct {
+	ID      int    `json:"id"`
+	Path    string `json:"path"`
+	Method  string `json:"method"`
+	Status  int    `json:"status"`
+	ItemUrl string `json:"itemUrl"`
 }
 
-func (c *Captures) Add(capture Capture) {
-	c.items = append([]Capture{capture}, c.items...)
-	if len(c.items) > c.max {
-		c.items = c.items[:len(c.items)-1]
+type Captures []Capture
+
+func (items *Captures) Add(capture Capture) {
+	*items = append(*items, capture)
+	size := len(*items)
+	if size > args.maxCaptures {
+		*items = (*items)[1:]
 	}
 }
+
+func (items *Captures) GetRefs(itemBaseUrl string) []CaptureRef {
+	refs := make([]CaptureRef, len(*items))
+	for i, item := range *items {
+		refs[i] = CaptureRef{
+			ID:      i,
+			Path:    item.Path,
+			Method:  item.Method,
+			Status:  item.Status,
+			ItemUrl: itemBaseUrl + strconv.Itoa(i),
+		}
+	}
+	return refs
+}
diff --git a/dashboard.go b/dashboard.go
index 32cba0f..6b20e2c 100644
--- a/dashboard.go
+++ b/dashboard.go
@@ -21,6 +21,28 @@ const dashboardHTML = `
     <title>Dashboard</title>
     <style>
 
+    :root {
+        --b00: #fafafa;
+        --b01: #f0f0f1;
+        --b02: #e5e5e6;
+        --b03: #a0a1a7;
+        --b04: #696c77;
+        --b05: #383a42;
+        --b06: #202227;
+        --b07: #090a0b;
+        --b08: #ca1243;
+        --b09: #d75f00;
+        --b0A: #c18401;
+        --b0B: #50a14f;
+        --b0C: #0184bc;
+        --b0D: #4078f2;
+        --b0E: #a626a4;
+        --b0F: #986801;
+
+        --e0C: #82aaff;
+        --e0E: #c792ea;
+    }
+
     * { padding: 0; margin: 0; box-sizing: border-box }
 
     html, body, .dashboard {
@@ -30,7 +52,7 @@ const dashboardHTML = `
 
     div { display: flex; position: relative }
 
-    .dashboard { background: #eceff1 }
+    .dashboard { background: var(--b06) }
 
     .list, .req, .res {
         flex: 0 0 37%;
@@ -44,7 +66,7 @@ const dashboardHTML = `
         flex: 1;
     }
     .req-inner, .res-inner {
-        background: #fefefe;
+        background: var(--b05);
         padding: 1rem;
     }
     .req-inner { margin: 1rem 0 }
@@ -54,40 +76,48 @@ const dashboardHTML = `
     .list-item {
         flex-shrink: 0;
         padding: 1rem;
-        color: #767676;
-        background: #fefefe;
+        color:  var(--e0C);
+        background: var(--b07);
         cursor: pointer;
         margin-bottom: 0.5rem;
         align-items: center;
     }
-    .list-item:hover { background: #eceff1 }
+    .list-item:hover { background: var(--b07) }
     .list-item, .req-inner, .res-inner {
-        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
     }
-    .selected { background: #ff4081 !important; color: #fff }
-    .list-item.selected .method,
-    .list-item.selected .status { color: #fff  }
+    .list-item.selected { outline: 1px solid var(--b0D); outline-offset: -1px }
 
     .ok,
-    .GET    { color: #88d43f }
-    .POST   { color: #ef9c26 }
+    .GET    { color: var(--b0B) }
+    .POST   { color: var(--b09) }
     .warn,
-    .PUT    { color: #4c87dd }
-    .PATCH  { color: #767676 }
+    .PUT    { color: var(--b0A) }
+    .PATCH  { color: var(--b04) }
     .error,
-    .DELETE { color: #e53f42 }
+    .DELETE { color: var(--b08) }
 
     .method { font-size: 0.7em; margin-right: 1rem; padding: .25rem .5rem }
     .status { font-size: 0.8em; padding-left: 1rem }
-    .url    { font-size: 0.8em; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl }
+    .path   { font-size: 0.8em; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl }
 
     .req-inner, .res-inner { flex-direction: column  }
 
-    .url-big { flex-shrink: 0; line-height: 1.5em; word-break: break-all; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #eee }
-    .url-big:empty { border: 0 }
-
-    pre { flex: 1; color: #555; word-break: normal; word-wrap: break-word; white-space: pre-wrap; }
-
+    pre { flex: 1; color: var(--b03); word-break: normal; word-wrap: break-word; white-space: pre-wrap; z-index: 1 }
+    .req-inner:before, .res-inner:before {
+        bottom: 1rem;
+        font-size: 4em;
+        color: var(--b06);
+        position: fixed;
+        font-weight: bolder;
+        font-family: impact;
+    }
+    .req-inner:before {
+        content: "REQUEST";
+    }
+    .res-inner:before {
+        content: "RESPONSE";
+    }
     </style>
 </head>
 <body>
@@ -96,10 +126,10 @@ const dashboardHTML = `
 
     <div class="list">
         <div class="list-inner">
-            <div class="list-item" ng-repeat="item in items" ng-click="show(item)"
-                 ng-class="{selected: selected == item}">
+            <div class="list-item" ng-repeat="item in items | orderBy: '-id' track by item.id" ng-click="show(item)"
+                 ng-class="{selected: isItemSelected(item)}">
                 <span class="method" ng-class="item.method">{{item.method}}</span>
-                <span class="url">&lrm;{{item.url}}&lrm;</span>
+                <span class="path">&lrm;{{item.path}}&lrm;</span>
                 <span class="status" ng-class="statusColor(item)">{{item.status}}</span>
             </div>
         </div>
@@ -107,7 +137,6 @@ const dashboardHTML = `
 
     <div class="req">
         <div class="req-inner">
-            <div class="url-big">{{url}}</div>
             <pre>{{request}}</pre>
         </div>
     </div>
@@ -122,19 +151,26 @@ const dashboardHTML = `
 
 <script type="text/javascript">
     angular.module('app', [])
-        .controller('controller', function($scope) {
+        .controller('controller', function($scope, $http) {
 
             $scope.show = item => {
-                $scope.request  = item.request;
-                $scope.response = item.response;
-                $scope.url = item.url;
-                $scope.selected = item;
+                $scope.path = item.path;
+                $scope.selectedId = item.id;
+                $http.get(item.itemUrl).then(r => {
+                    $scope.request  = r.data.request;
+                    $scope.response = r.data.response;
+                });
             }
+
             $scope.statusColor = item => {
                 let status = (item.status + '')[0] - 2;
                 return ['ok', 'warn', 'error', 'error'][status] || '';
             }
 
+            $scope.isItemSelected = item => {
+                return $scope.selectedId == item.id;
+            }
+
             let socket = io();
             socket.on('connect', () => {
                 socket.on('captures', captures => {
diff --git a/main.go b/main.go
index 40a8a44..6cb207c 100644
--- a/main.go
+++ b/main.go
@@ -3,6 +3,7 @@ package main
 import (
 	"bytes"
 	"compress/gzip"
+	"encoding/json"
 	"errors"
 	"fmt"
 	"io"
@@ -10,32 +11,54 @@ import (
 	"log"
 	"net/http"
 	"net/http/httputil"
+	"strconv"
+	"strings"
 
 	"github.com/googollee/go-socket.io"
 )
 
-var captures Captures
-var socket socketio.Socket
-
 type Transport struct {
 	http.RoundTripper
 }
 
-func main() {
-	targetURL, proxyPort, dashboard, maxCaptures := parseFlags()
-	captures.max = maxCaptures
+var captures Captures
 
-	proxy := httputil.NewSingleHostReverseProxy(targetURL)
+var socket socketio.Socket
+
+var host string
+var dashboardPath string
+var dashboardItemsPath string
+
+func main() {
+	parseArgs()
+
+	proxy := httputil.NewSingleHostReverseProxy(args.url)
 	proxy.Transport = Transport{http.DefaultTransport}
 
+	dashboardPath = "/" + args.dashboard + "/"
+	dashboardItemsPath = dashboardPath + "items/"
+
 	http.Handle("/", getProxyHandler(proxy))
 	http.Handle("/socket.io/", getSocketHandler())
-	http.Handle("/"+dashboard+"/", getDashboardHandler())
+	http.Handle(dashboardItemsPath, getCapturesHandler())
+	http.Handle(dashboardPath, getDashboardHandler())
 
-	fmt.Printf("\nListening on http://localhost:%s", proxyPort)
-	fmt.Printf("\n             http://localhost:%s/%s\n\n", proxyPort, dashboard)
+	host = "http://localhost:" + args.port
 
-	http.ListenAndServe(":"+proxyPort, nil)
+	fmt.Printf("\nListening on %s", host)
+	fmt.Printf("\n             %s/%s\n\n", host, args.dashboard)
+
+	http.ListenAndServe(":"+args.port, nil)
+}
+
+func getCapturesHandler() http.Handler {
+	return http.HandlerFunc(func(res http.ResponseWriter, req *http.Request) {
+		id := strings.TrimPrefix(req.URL.Path, dashboardItemsPath)
+		i, _ := strconv.Atoi(id)
+		json, _ := json.Marshal(captures[i])
+		res.Header().Add("Content-Type", "application/json")
+		res.Write([]byte(json))
+	})
 }
 
 func getProxyHandler(handler http.Handler) http.Handler {
@@ -61,14 +84,14 @@ func getSocketHandler() http.Handler {
 }
 
 func (t Transport) RoundTrip(req *http.Request) (*http.Response, error) {
-	reqDump, err := httputil.DumpRequest(req, true)
-	if err != nil {
-		return nil, err
-	}
-
 	res, err := t.RoundTripper.RoundTrip(req)
 	if err != nil {
-		return nil, errors.New(err.Error() + ": " + req.URL.String())
+		return nil, errors.New("uh oh | " + err.Error() + " | " + req.URL.String())
+	}
+
+	reqDump, err := DumpRequest(req)
+	if err != nil {
+		return nil, err
 	}
 
 	resDump, err := DumpResponse(res)
@@ -76,9 +99,12 @@ func (t Transport) RoundTrip(req *http.Request) (*http.Response, error) {
 		return nil, err
 	}
 
-	capture := Capture{req.URL.Path, req.Method, res.StatusCode,
-		string(reqDump),
-		string(resDump),
+	capture := Capture{
+		Path:     req.URL.Path,
+		Method:   req.Method,
+		Status:   res.StatusCode,
+		Request:  string(reqDump),
+		Response: string(resDump),
 	}
 
 	captures.Add(capture)
@@ -87,6 +113,10 @@ func (t Transport) RoundTrip(req *http.Request) (*http.Response, error) {
 	return res, nil
 }
 
+func DumpRequest(req *http.Request) ([]byte, error) {
+	return httputil.DumpRequest(req, true)
+}
+
 func DumpResponse(res *http.Response) ([]byte, error) {
 	var originalBody bytes.Buffer
 	res.Body = ioutil.NopCloser(io.TeeReader(res.Body, &originalBody))
@@ -102,5 +132,5 @@ func emit() {
 	if socket == nil {
 		return
 	}
-	socket.Emit("captures", captures.items)
+	socket.Emit("captures", captures.GetRefs(host+dashboardItemsPath))
 }