capture/dashboard.go

296 lines
8.6 KiB
Go
Raw Normal View History

2017-11-08 00:10:54 +01:00
package main
const dashboardHTML = `
<!DOCTYPE html>
<html ng-app="app">
<head>
2018-07-26 12:47:28 +02:00
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
2018-08-04 01:53:54 +02:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.slim.js"></script>
2018-07-25 01:36:56 +02:00
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<title>Dashboard</title>
<style>
2018-07-21 19:50:53 +02:00
:root {
2018-07-25 01:36:56 +02:00
--bg: #282c34;
--list-item-bg: #2c313a;
--list-item-fg: #abb2bf;
2018-09-07 16:45:02 +02:00
--list-item-sel-bg: hsl(219, 22%, 25%);
2018-07-25 01:36:56 +02:00
--req-res-bg: #2c313a;
--req-res-fg: #abb2bf;
2018-07-26 00:31:34 +02:00
--links: #55b5c1;
2018-07-25 01:36:56 +02:00
--method-get: #98c379;
--method-post: #c678dd;
--method-put: #d19a66;
--method-patch: #a7afbc;
--method-delete: #e06c75;
--status-ok: #98c379;
--status-warn: #d19a66;
--status-error: #e06c75;
2018-09-07 16:45:02 +02:00
--btn-bg: var(--list-item-bg);
--btn-hover: var(--list-item-sel-bg);
2018-07-21 19:50:53 +02:00
}
* { padding: 0; margin: 0; box-sizing: border-box }
html, body, .dashboard {
height: 100%;
2018-07-25 01:36:56 +02:00
font-family: 'Inconsolata', monospace;
font-size: 1em;
font-weight: 400;
2018-09-07 16:45:02 +02:00
background: var(--bg);
}
2018-09-07 16:45:02 +02:00
body { padding: .5rem; }
2018-09-07 16:45:02 +02:00
div { display: flex; position: relative }
.list, .req, .res {
flex: 0 0 37%;
overflow: auto;
2018-09-07 16:45:02 +02:00
flex-direction: column;
padding: .5rem;
}
2018-09-07 16:45:02 +02:00
.list, .req { padding-right: .5rem; }
.req, .res { padding-left: .5rem; }
2018-07-25 01:36:56 +02:00
.list-inner, .req-inner, .res-inner {
overflow-x: hidden;
overflow-y: auto;
flex: 1;
}
2018-09-07 16:45:02 +02:00
.req-inner, .res-inner {
2018-07-25 01:36:56 +02:00
background: var(--req-res-bg);
2018-09-07 16:45:02 +02:00
}
.req, .res {
2018-07-25 01:36:56 +02:00
color: var(--req-res-fg);
}
.list { flex: 0 0 26% }
.list-inner { flex-direction: column }
.list-item {
flex-shrink: 0;
2018-07-25 01:36:56 +02:00
font-size: 1.2em;
2018-07-25 00:04:30 +02:00
font-weight: 400;
2018-09-16 16:02:04 +02:00
height: 50px;
padding: 1rem;
2018-07-25 01:36:56 +02:00
background: var(--list-item-bg);
color: var(--list-item-fg);
cursor: pointer;
margin-bottom: .5rem;
align-items: center;
2018-07-26 00:25:23 +02:00
transition: background .15s linear;
}
.list-item:hover { }
.list-item, .req-inner, .res-inner {
2018-07-21 19:50:53 +02:00
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.list-item.selected {
2018-09-07 16:45:02 +02:00
background: var(--list-item-sel-bg);
}
2018-07-25 01:36:56 +02:00
.GET { color: var(--method-get) }
.POST { color: var(--method-post) }
.PUT { color: var(--method-put) }
.PATCH { color: var(--method-patch) }
.DELETE { color: var(--method-delete) }
.ok { color: var(--status-ok) }
.warn { color: var(--status-warn) }
.error { color: var(--status-error) }
.method { font-size: 0.7em; margin-right: 1rem; padding: .25rem .5rem }
.status { font-size: 0.8em; padding-left: 1rem }
2018-07-21 19:50:53 +02:00
.path { font-size: 0.8em; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl }
2018-07-25 00:04:30 +02:00
pre {
flex: 1;
word-break: normal; word-wrap: break-word; white-space: pre-wrap;
2018-09-07 16:45:02 +02:00
z-index: 2;
padding: 1rem;
2018-09-17 17:51:05 +02:00
width: 100%;
2018-10-12 01:15:51 +02:00
font-family: inherit;
font-weight: 400;
line-height: 1.2em;
2018-07-25 00:04:30 +02:00
}
2018-09-07 16:45:02 +02:00
.req:before, .res:before {
bottom: .5rem;
left: 1rem;
2018-07-25 01:36:56 +02:00
font-size: 5em;
color: var(--bg);
2018-09-07 16:45:02 +02:00
position: absolute;
2018-07-25 01:36:56 +02:00
font-weight: 700;
2018-09-07 16:45:02 +02:00
z-index: 1;
2018-07-21 19:50:53 +02:00
}
2018-09-07 16:45:02 +02:00
.req:before {
2018-07-26 12:47:28 +02:00
content: "↑REQUEST";
2018-07-21 19:50:53 +02:00
}
2018-09-07 16:45:02 +02:00
.res:before {
2018-07-26 12:47:28 +02:00
content: "↓RESPONSE";
2018-07-21 19:50:53 +02:00
}
2018-07-22 20:14:27 +02:00
2018-09-07 16:45:02 +02:00
.controls {
margin-bottom: .5rem;
}
.controls > * {
margin-right: .5rem;
}
button {
background: var(--btn-bg);
border: 0;
padding: .5rem 1rem;
2018-07-22 20:14:27 +02:00
font-size: .75em;
2018-09-07 16:45:02 +02:00
font-family: inherit;
2018-07-25 01:36:56 +02:00
color: var(--links);
2018-09-07 16:45:02 +02:00
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);
2018-07-22 20:14:27 +02:00
}
</style>
</head>
<body>
<div class="dashboard" ng-controller="controller">
<div class="list">
2018-09-07 16:45:02 +02:00
<div class="controls">
<button ng-disabled="items.length == 0" ng-click="clearDashboard()">clear</button>
</div>
<div class="list-inner">
2018-08-04 01:53:54 +02:00
<div class="list-item" ng-repeat="item in items | orderBy: '-id' track by $index" ng-click="show(item)"
2018-07-21 19:50:53 +02:00
ng-class="{selected: isItemSelected(item)}">
<span class="method" ng-class="item.method">{{item.method}}</span>
2018-07-21 19:50:53 +02:00
<span class="path">&lrm;{{item.path}}&lrm;</span>
<span class="status" ng-class="statusColor(item)">{{item.status}}</span>
</div>
</div>
</div>
<div class="req">
2018-09-07 16:45:02 +02:00
<div class="controls">
<button ng-disabled="!canPrettifyBody('request')" ng-click="prettifyBody('request')">prettify</button>
2018-11-24 18:51:33 +01:00
<button ng-disabled="!canGenerateCurl()" ng-click="generateCurl()">curl</button>
2018-09-07 16:45:02 +02:00
</div>
<div class="req-inner">
2018-07-27 00:59:38 +02:00
<pre>{{request}}</pre>
</div>
</div>
<div class="res">
2018-09-07 16:45:02 +02:00
<div class="controls">
<button ng-disabled="!canPrettifyBody('response')" ng-click="prettifyBody('response')">prettify</button>
</div>
<div class="res-inner">
<pre>{{response}}</pre>
</div>
</div>
2018-09-07 16:45:02 +02:00
<div class="welcome" ng-show="items.length == 0">
Waiting for requests on http://localhost:{{config.proxyPort}}/
</div>
</div>
<script type="text/javascript">
angular.module('app', [])
2018-07-21 19:50:53 +02:00
.controller('controller', function($scope, $http) {
$scope.show = item => {
2018-07-21 19:50:53 +02:00
$scope.path = item.path;
$scope.selectedId = item.id;
2018-09-16 16:18:39 +02:00
let path = $scope.config.dashboardItemInfoPath + item.id;
$http.get(path).then(r => {
2018-07-21 19:50:53 +02:00
$scope.request = r.data.request;
$scope.response = r.data.response;
2018-11-24 18:51:33 +01:00
$scope.curl = r.data.curl;
2018-07-21 19:50:53 +02:00
});
}
2018-07-21 19:50:53 +02:00
$scope.statusColor = item => {
2017-11-21 23:30:25 +01:00
let status = (item.status + '')[0] - 2;
return ['ok', 'warn', 'error', 'error'][status] || '';
}
2018-07-21 19:50:53 +02:00
$scope.isItemSelected = item => {
return $scope.selectedId == item.id;
}
2018-09-07 16:45:02 +02:00
$scope.clearDashboard = () => {
2018-09-16 16:18:39 +02:00
$http.get($scope.config.dashboardClearPath).then(clearRequestAndResponse);
}
function clearRequestAndResponse() {
$scope.request = $scope.response = null;
2018-09-07 16:45:02 +02:00
}
$scope.canPrettifyBody = name => {
if (!$scope[name]) {
return false;
}
return $scope[name].indexOf('Content-Type: application/json') != -1;
}
2018-11-24 18:51:33 +01:00
$scope.canGenerateCurl = () => {
return $scope['request'] != null;
}
$scope.generateCurl = () => {
let e = document.createElement('textarea');
e.value = $scope.curl;
document.body.appendChild(e);
e.select();
document.execCommand('copy');
document.body.removeChild(e);
}
2018-07-22 20:14:27 +02:00
$scope.prettifyBody = key => {
2018-07-26 17:39:27 +02:00
let regex = /\n([\{\[](.*\s*)*[\}\]])/;
2018-07-22 20:14:27 +02:00
let data = $scope[key];
let match = regex.exec(data);
let body = match[1];
let prettyBody = JSON.stringify(JSON.parse(body), null, ' ');
$scope[key] = data.replace(body, prettyBody);
}
let socket = io();
socket.on('connect', () => {
2018-09-16 16:18:39 +02:00
clearRequestAndResponse();
2018-09-07 18:36:08 +02:00
socket.off('config');
socket.off('captures');
2018-09-07 16:45:02 +02:00
socket.on('config', args => {
$scope.config = args;
});
socket.on('captures', captures => {
$scope.items = captures;
$scope.$apply();
});
});
});
</script>
</body>
</html>`