2017-11-08 00:10:54 +01:00
|
|
|
package main
|
|
|
|
|
|
2017-11-15 15:37:54 +01:00
|
|
|
const dashboardHTML = `
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html ng-app="app">
|
|
|
|
|
<head>
|
2018-07-26 12:47:28 +02:00
|
|
|
<meta charset="utf-8">
|
2017-11-15 15:37:54 +01:00
|
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
|
2018-07-25 01:36:56 +02:00
|
|
|
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
|
2017-11-15 15:37:54 +01:00
|
|
|
<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;
|
|
|
|
|
--list-item-sel-bg: #61afef;
|
|
|
|
|
--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-07-21 19:50:53 +02:00
|
|
|
}
|
|
|
|
|
|
2017-11-15 15:37:54 +01: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;
|
2018-07-24 01:42:34 +02:00
|
|
|
font-weight: 400;
|
2017-11-15 15:37:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div { display: flex; position: relative }
|
|
|
|
|
|
2018-07-25 01:36:56 +02:00
|
|
|
.dashboard { background: var(--bg) }
|
2017-11-15 15:37:54 +01:00
|
|
|
|
|
|
|
|
.list, .req, .res {
|
|
|
|
|
flex: 0 0 37%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-25 01:36:56 +02:00
|
|
|
.list-inner, .req-inner, .res-inner {
|
2017-11-15 15:37:54 +01:00
|
|
|
margin: 1rem;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
.req-inner, .res-inner {
|
2018-07-25 01:36:56 +02:00
|
|
|
flex-direction: column;
|
|
|
|
|
background: var(--req-res-bg);
|
|
|
|
|
color: var(--req-res-fg);
|
2017-11-15 15:37:54 +01:00
|
|
|
padding: 1rem;
|
2018-07-25 01:36:56 +02:00
|
|
|
font-size: 1.1em;
|
2017-11-15 15:37:54 +01:00
|
|
|
}
|
|
|
|
|
.req-inner { margin: 1rem 0 }
|
|
|
|
|
|
|
|
|
|
.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-07-24 01:42:34 +02:00
|
|
|
height: 52px;
|
2017-11-15 15:37:54 +01:00
|
|
|
padding: 1rem;
|
2018-07-25 01:36:56 +02:00
|
|
|
background: var(--list-item-bg);
|
|
|
|
|
color: var(--list-item-fg);
|
2017-11-15 15:37:54 +01:00
|
|
|
cursor: pointer;
|
2018-07-24 01:42:34 +02:00
|
|
|
margin-bottom: .5rem;
|
2017-11-15 15:37:54 +01:00
|
|
|
align-items: center;
|
2018-07-26 00:25:23 +02:00
|
|
|
transition: background .15s linear;
|
2017-11-15 15:37:54 +01:00
|
|
|
}
|
2018-07-24 01:42:34 +02:00
|
|
|
.list-item:hover { }
|
2017-11-15 15:37:54 +01:00
|
|
|
.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);
|
2017-11-15 15:37:54 +01:00
|
|
|
}
|
2018-07-24 01:42:34 +02:00
|
|
|
.list-item.selected {
|
2018-07-26 00:25:23 +02:00
|
|
|
background: hsl(219, 22%, 25%);
|
2018-07-24 01:42:34 +02:00
|
|
|
}
|
2017-11-15 15:37:54 +01:00
|
|
|
|
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) }
|
2017-11-15 15:37:54 +01:00
|
|
|
|
|
|
|
|
.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 }
|
2017-11-15 15:37:54 +01:00
|
|
|
|
2018-07-25 00:04:30 +02:00
|
|
|
pre {
|
|
|
|
|
flex: 1;
|
|
|
|
|
word-break: normal; word-wrap: break-word; white-space: pre-wrap;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
2018-07-21 19:50:53 +02:00
|
|
|
.req-inner:before, .res-inner:before {
|
|
|
|
|
bottom: 1rem;
|
2018-07-25 01:36:56 +02:00
|
|
|
font-size: 5em;
|
|
|
|
|
color: var(--bg);
|
2018-07-21 19:50:53 +02:00
|
|
|
position: fixed;
|
2018-07-25 01:36:56 +02:00
|
|
|
font-weight: 700;
|
2018-07-21 19:50:53 +02:00
|
|
|
}
|
|
|
|
|
.req-inner:before {
|
2018-07-26 12:47:28 +02:00
|
|
|
content: "↑REQUEST";
|
2018-07-21 19:50:53 +02:00
|
|
|
}
|
|
|
|
|
.res-inner: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
|
|
|
|
|
|
|
|
.bt-pretty {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: .5rem;
|
|
|
|
|
top: 0.25rem;
|
|
|
|
|
font-size: .75em;
|
2018-07-25 01:36:56 +02:00
|
|
|
color: var(--links);
|
2018-07-22 20:14:27 +02:00
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
2017-11-15 15:37:54 +01:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="dashboard" ng-controller="controller">
|
|
|
|
|
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div class="list-inner">
|
2018-07-21 19:50:53 +02:00
|
|
|
<div class="list-item" ng-repeat="item in items | orderBy: '-id' track by item.id" ng-click="show(item)"
|
|
|
|
|
ng-class="{selected: isItemSelected(item)}">
|
2017-11-15 15:37:54 +01:00
|
|
|
<span class="method" ng-class="item.method">{{item.method}}</span>
|
2018-07-21 19:50:53 +02:00
|
|
|
<span class="path">‎{{item.path}}‎</span>
|
2017-11-15 15:37:54 +01:00
|
|
|
<span class="status" ng-class="statusColor(item)">{{item.status}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="req">
|
|
|
|
|
<div class="req-inner">
|
2018-07-27 00:59:38 +02:00
|
|
|
<a ng-show="canPrettifyRequestBody" ng-click="prettifyBody('request')" href="#" class="bt-pretty">prettify</a>
|
|
|
|
|
<pre>{{request}}</pre>
|
2017-11-15 15:37:54 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="res">
|
|
|
|
|
<div class="res-inner">
|
2018-07-22 20:14:27 +02:00
|
|
|
<a ng-show="canPrettifyResponseBody" ng-click="prettifyBody('response')" href="#" class="bt-pretty">prettify</a>
|
2017-11-15 15:37:54 +01:00
|
|
|
<pre>{{response}}</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
angular.module('app', [])
|
2018-07-21 19:50:53 +02:00
|
|
|
.controller('controller', function($scope, $http) {
|
2017-11-15 15:37:54 +01:00
|
|
|
|
|
|
|
|
$scope.show = item => {
|
2018-07-21 19:50:53 +02:00
|
|
|
$scope.path = item.path;
|
|
|
|
|
$scope.selectedId = item.id;
|
|
|
|
|
$http.get(item.itemUrl).then(r => {
|
|
|
|
|
$scope.request = r.data.request;
|
|
|
|
|
$scope.response = r.data.response;
|
2018-07-22 20:14:27 +02:00
|
|
|
$scope.canPrettifyRequestBody = r.data.request.indexOf('Content-Type: application/json') != -1;
|
|
|
|
|
$scope.canPrettifyResponseBody = r.data.response.indexOf('Content-Type: application/json') != -1;
|
2018-07-21 19:50:53 +02:00
|
|
|
});
|
2017-11-15 15:37:54 +01:00
|
|
|
}
|
2018-07-21 19:50:53 +02:00
|
|
|
|
2017-11-15 15:37:54 +01:00
|
|
|
$scope.statusColor = item => {
|
2017-11-21 23:30:25 +01:00
|
|
|
let status = (item.status + '')[0] - 2;
|
2017-11-15 15:37:54 +01:00
|
|
|
return ['ok', 'warn', 'error', 'error'][status] || '';
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-21 19:50:53 +02:00
|
|
|
$scope.isItemSelected = item => {
|
|
|
|
|
return $scope.selectedId == item.id;
|
|
|
|
|
}
|
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-15 15:37:54 +01:00
|
|
|
let socket = io();
|
|
|
|
|
socket.on('connect', () => {
|
|
|
|
|
socket.on('captures', captures => {
|
|
|
|
|
$scope.items = captures;
|
|
|
|
|
$scope.$apply();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>`
|
