add clear button and fix layout

This commit is contained in:
Fabricio 2018-09-07 11:45:02 -03:00
parent 9e0ae17760
commit fc01ff23f1
3 changed files with 124 additions and 43 deletions

View file

@ -6,10 +6,10 @@ import (
) )
type Args struct { type Args struct {
targetURL *url.URL TargetURL *url.URL `json:"targetURL"`
proxyPort string ProxyPort string `json:"proxyPort"`
dashboard string Dashboard string `json:"dashboard"`
maxCaptures int MaxCaptures int `json:"maxCaptures"`
} }
func ParseArgs() Args { func ParseArgs() Args {

View file

@ -16,7 +16,7 @@ const dashboardHTML = `
--bg: #282c34; --bg: #282c34;
--list-item-bg: #2c313a; --list-item-bg: #2c313a;
--list-item-fg: #abb2bf; --list-item-fg: #abb2bf;
--list-item-sel-bg: #61afef; --list-item-sel-bg: hsl(219, 22%, 25%);
--req-res-bg: #2c313a; --req-res-bg: #2c313a;
--req-res-fg: #abb2bf; --req-res-fg: #abb2bf;
--links: #55b5c1; --links: #55b5c1;
@ -28,6 +28,8 @@ const dashboardHTML = `
--status-ok: #98c379; --status-ok: #98c379;
--status-warn: #d19a66; --status-warn: #d19a66;
--status-error: #e06c75; --status-error: #e06c75;
--btn-bg: var(--list-item-bg);
--btn-hover: var(--list-item-sel-bg);
} }
* { padding: 0; margin: 0; box-sizing: border-box } * { padding: 0; margin: 0; box-sizing: border-box }
@ -37,31 +39,36 @@ const dashboardHTML = `
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
background: var(--bg);
} }
div { display: flex; position: relative } body { padding: .5rem; }
.dashboard { background: var(--bg) } div { display: flex; position: relative }
.list, .req, .res { .list, .req, .res {
flex: 0 0 37%; flex: 0 0 37%;
overflow: auto; overflow: auto;
flex-direction: column;
padding: .5rem;
} }
.list, .req { padding-right: .5rem; }
.req, .res { padding-left: .5rem; }
.list-inner, .req-inner, .res-inner { .list-inner, .req-inner, .res-inner {
margin: 1rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
} }
.req-inner, .res-inner { .req-inner, .res-inner {
flex-direction: column;
background: var(--req-res-bg); background: var(--req-res-bg);
color: var(--req-res-fg);
padding: 1rem;
font-size: 1.1em;
} }
.req-inner { margin: 1rem 0 }
.req, .res {
color: var(--req-res-fg);
}
.list { flex: 0 0 26% } .list { flex: 0 0 26% }
.list-inner { flex-direction: column } .list-inner { flex-direction: column }
@ -69,7 +76,7 @@ const dashboardHTML = `
flex-shrink: 0; flex-shrink: 0;
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
height: 52px; height: 51px;
padding: 1rem; padding: 1rem;
background: var(--list-item-bg); background: var(--list-item-bg);
color: var(--list-item-fg); color: var(--list-item-fg);
@ -83,7 +90,7 @@ const dashboardHTML = `
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.list-item.selected { .list-item.selected {
background: hsl(219, 22%, 25%); background: var(--list-item-sel-bg);
} }
.GET { color: var(--method-get) } .GET { color: var(--method-get) }
@ -102,29 +109,62 @@ const dashboardHTML = `
pre { pre {
flex: 1; flex: 1;
word-break: normal; word-wrap: break-word; white-space: pre-wrap; word-break: normal; word-wrap: break-word; white-space: pre-wrap;
z-index: 1; z-index: 2;
padding: 1rem;
} }
.req-inner:before, .res-inner:before { .req:before, .res:before {
bottom: 1rem; bottom: .5rem;
left: 1rem;
font-size: 5em; font-size: 5em;
color: var(--bg); color: var(--bg);
position: fixed; position: absolute;
font-weight: 700; font-weight: 700;
z-index: 1;
} }
.req-inner:before { .req:before {
content: "↑REQUEST"; content: "↑REQUEST";
} }
.res-inner:before { .res:before {
content: "↓RESPONSE"; content: "↓RESPONSE";
} }
.bt-pretty { .controls {
position: absolute; margin-bottom: .5rem;
right: .5rem; }
top: 0.25rem; .controls > * {
margin-right: .5rem;
}
button {
background: var(--btn-bg);
border: 0;
padding: .5rem 1rem;
font-size: .75em; font-size: .75em;
font-family: inherit;
color: var(--links); color: var(--links);
text-decoration: none; cursor: pointer;
outline: 0;
}
button:disabled {
color: hsl(187, 5%, 50%);
cursor: default;
}
button:hover:enabled {
background: var(--btn-hover);
}
.welcome {
position: absolute;
background: rgba(0, 0, 0, .5);
justify-content: center;
z-index: 9;
color: #fff;
font-size: 2em;
top: 50%;
right: 1rem;
left: 1rem;
transform: translate(0%, -50%);
padding: 3rem;
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
} }
</style> </style>
</head> </head>
@ -133,6 +173,9 @@ const dashboardHTML = `
<div class="dashboard" ng-controller="controller"> <div class="dashboard" ng-controller="controller">
<div class="list"> <div class="list">
<div class="controls">
<button ng-disabled="items.length == 0" ng-click="clearDashboard()">clear</button>
</div>
<div class="list-inner"> <div class="list-inner">
<div class="list-item" ng-repeat="item in items | orderBy: '-id' track by $index" ng-click="show(item)" <div class="list-item" ng-repeat="item in items | orderBy: '-id' track by $index" ng-click="show(item)"
ng-class="{selected: isItemSelected(item)}"> ng-class="{selected: isItemSelected(item)}">
@ -144,19 +187,27 @@ const dashboardHTML = `
</div> </div>
<div class="req"> <div class="req">
<div class="controls">
<button ng-disabled="!canPrettifyBody('request')" ng-click="prettifyBody('request')">prettify</button>
</div>
<div class="req-inner"> <div class="req-inner">
<a ng-show="canPrettifyRequestBody" ng-click="prettifyBody('request')" href="#" class="bt-pretty">prettify</a>
<pre>{{request}}</pre> <pre>{{request}}</pre>
</div> </div>
</div> </div>
<div class="res"> <div class="res">
<div class="controls">
<button ng-disabled="!canPrettifyBody('response')" ng-click="prettifyBody('response')">prettify</button>
</div>
<div class="res-inner"> <div class="res-inner">
<a ng-show="canPrettifyResponseBody" ng-click="prettifyBody('response')" href="#" class="bt-pretty">prettify</a>
<pre>{{response}}</pre> <pre>{{response}}</pre>
</div> </div>
</div> </div>
<div class="welcome" ng-show="items.length == 0">
Waiting for requests on http://localhost:{{config.proxyPort}}/
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -169,8 +220,6 @@ const dashboardHTML = `
$http.get(item.infoPath).then(r => { $http.get(item.infoPath).then(r => {
$scope.request = r.data.request; $scope.request = r.data.request;
$scope.response = r.data.response; $scope.response = r.data.response;
$scope.canPrettifyRequestBody = r.data.request.indexOf('Content-Type: application/json') != -1;
$scope.canPrettifyResponseBody = r.data.response.indexOf('Content-Type: application/json') != -1;
}); });
} }
@ -183,6 +232,19 @@ const dashboardHTML = `
return $scope.selectedId == item.id; return $scope.selectedId == item.id;
} }
$scope.clearDashboard = () => {
$http.get('/' + $scope.config.dashboard + '/clear').then(() => {
$scope.request = $scope.response = null;
});
}
$scope.canPrettifyBody = name => {
if (!$scope[name]) {
return false;
}
return $scope[name].indexOf('Content-Type: application/json') != -1;
}
$scope.prettifyBody = key => { $scope.prettifyBody = key => {
let regex = /\n([\{\[](.*\s*)*[\}\]])/; let regex = /\n([\{\[](.*\s*)*[\}\]])/;
let data = $scope[key]; let data = $scope[key];
@ -194,6 +256,10 @@ const dashboardHTML = `
let socket = io(); let socket = io();
socket.on('connect', () => { socket.on('connect', () => {
socket.on('config', args => {
$scope.config = args;
$scope.$apply();
});
socket.on('captures', captures => { socket.on('captures', captures => {
$scope.items = captures; $scope.items = captures;
$scope.$apply(); $scope.$apply();

41
main.go
View file

@ -30,36 +30,39 @@ var dashboardSocket socketio.Socket
func main() { func main() {
args := ParseArgs() args := ParseArgs()
proxyHost := fmt.Sprintf("http://localhost:%s", args.proxyPort) proxyHost := fmt.Sprintf("http://localhost:%s", args.ProxyPort)
dashboardPath := fmt.Sprintf("/%s/", args.dashboard) dashboardPath := fmt.Sprintf("/%s/", args.Dashboard)
dashboardItemInfoPath := fmt.Sprintf("/%s/items/", args.dashboard) dashboardClearPath := fmt.Sprintf("/%s/clear/", args.Dashboard)
dashboardItemInfoPath := fmt.Sprintf("/%s/items/", args.Dashboard)
transp := &transport{ transp := &transport{
RoundTripper: http.DefaultTransport, RoundTripper: http.DefaultTransport,
itemInfoPath: dashboardItemInfoPath, itemInfoPath: dashboardItemInfoPath,
maxItems: args.maxCaptures, maxItems: args.MaxCaptures,
currItemID: 0, currItemID: 0,
} }
http.Handle("/", getProxyHandler(args.targetURL, transp)) http.Handle("/", getProxyHandler(args.TargetURL, transp))
http.Handle("/socket.io/", getDashboardSocketHandler()) http.Handle("/socket.io/", getDashboardSocketHandler(args))
http.Handle(dashboardPath, getDashboardHandler()) http.Handle(dashboardPath, getDashboardHandler())
http.Handle(dashboardClearPath, getDashboardClearHandler())
http.Handle(dashboardItemInfoPath, getDashboardItemInfoHandler()) http.Handle(dashboardItemInfoPath, getDashboardItemInfoHandler())
fmt.Printf("\nListening on %s", proxyHost) fmt.Printf("\nListening on %s", proxyHost)
fmt.Printf("\n %s/%s\n\n", proxyHost, args.dashboard) fmt.Printf("\n %s/%s\n\n", proxyHost, args.Dashboard)
fmt.Println(http.ListenAndServe(":"+args.proxyPort, nil)) fmt.Println(http.ListenAndServe(":"+args.ProxyPort, nil))
} }
func getDashboardSocketHandler() http.Handler { func getDashboardSocketHandler(args Args) http.Handler {
server, err := socketio.NewServer(nil) server, err := socketio.NewServer(nil)
if err != nil { if err != nil {
fmt.Println("socket server error", err) fmt.Println("socket server error", err)
} }
server.On("connection", func(so socketio.Socket) { server.On("connection", func(so socketio.Socket) {
dashboardSocket = so dashboardSocket = so
dashboardSocket.Emit("captures", captures.MetadataOnly()) dashboardSocket.Emit("config", args)
emitToDashboard(captures)
}) })
server.On("error", func(so socketio.Socket, err error) { server.On("error", func(so socketio.Socket, err error) {
fmt.Println("socket error", err) fmt.Println("socket error", err)
@ -67,6 +70,14 @@ func getDashboardSocketHandler() http.Handler {
return server return server
} }
func getDashboardClearHandler() http.Handler {
return http.HandlerFunc(func(res http.ResponseWriter, req *http.Request) {
captures = nil
emitToDashboard(captures)
res.Write([]byte(""))
})
}
func getDashboardHandler() http.Handler { func getDashboardHandler() http.Handler {
return http.HandlerFunc(func(res http.ResponseWriter, req *http.Request) { return http.HandlerFunc(func(res http.ResponseWriter, req *http.Request) {
res.Header().Add("Content-Type", "text/html") res.Header().Add("Content-Type", "text/html")
@ -122,9 +133,7 @@ func (t *transport) RoundTrip(req *http.Request) (*http.Response, error) {
captures.Add(capture) captures.Add(capture)
captures.RemoveLastAfterReaching(t.maxItems) captures.RemoveLastAfterReaching(t.maxItems)
if dashboardSocket != nil { emitToDashboard(captures)
dashboardSocket.Emit("captures", captures.MetadataOnly())
}
return res, nil return res, nil
} }
@ -148,3 +157,9 @@ func dumpResponse(res *http.Response) ([]byte, error) {
res.Body = ioutil.NopCloser(&originalBody) res.Body = ioutil.NopCloser(&originalBody)
return resDump, err return resDump, err
} }
func emitToDashboard(captures Captures) {
if dashboardSocket != nil {
dashboardSocket.Emit("captures", captures.MetadataOnly())
}
}