add clear button and fix layout
This commit is contained in:
parent
9e0ae17760
commit
fc01ff23f1
8
args.go
8
args.go
|
@ -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 {
|
||||||
|
|
118
dashboard.go
118
dashboard.go
|
@ -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
41
main.go
|
@ -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())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue