two step item fetch

This commit is contained in:
Fabricio 2018-07-21 14:50:53 -03:00
parent e7cc764fcd
commit 77821a1247
4 changed files with 162 additions and 62 deletions

20
args.go
View file

@ -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
}

View file

@ -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
}

View file

@ -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 => {

72
main.go
View file

@ -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))
}