convert space to tab
This commit is contained in:
Fabricio
parent
027f3de7d2
commit
c8a22ab589
380
dashboard.go
380
dashboard.go
|
|
@ -4,223 +4,223 @@ const dashboardHTML = `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html ng-app="app">
|
<html ng-app="app">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
|
||||||
<title>Dashboard</title>
|
<title>Dashboard</title>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg: #282c34;
|
--bg: #282c34;
|
||||||
--list-item-bg: #2c313a;
|
--list-item-bg: #2c313a;
|
||||||
--list-item-fg: #abb2bf;
|
--list-item-fg: #abb2bf;
|
||||||
--list-item-sel-bg: hsl(219, 22%, 25%);
|
--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;
|
||||||
--method-get: #98c379;
|
--method-get: #98c379;
|
||||||
--method-post: #c678dd;
|
--method-post: #c678dd;
|
||||||
--method-put: #d19a66;
|
--method-put: #d19a66;
|
||||||
--method-patch: #a7afbc;
|
--method-patch: #a7afbc;
|
||||||
--method-delete: #e06c75;
|
--method-delete: #e06c75;
|
||||||
--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-bg: var(--list-item-bg);
|
||||||
--btn-hover: var(--list-item-sel-bg);
|
--btn-hover: var(--list-item-sel-bg);
|
||||||
--disabled: hsl(187, 5%, 50%);
|
--disabled: hsl(187, 5%, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
* { padding: 0; margin: 0; box-sizing: border-box }
|
* { padding: 0; margin: 0; box-sizing: border-box }
|
||||||
|
|
||||||
html, body, .dashboard {
|
html, body, .dashboard {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'Inconsolata', monospace;
|
font-family: 'Inconsolata', monospace;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
body { padding: .5rem; }
|
body { padding: .5rem; }
|
||||||
|
|
||||||
div { display: flex; position: relative }
|
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;
|
flex-direction: column;
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list, .req { padding-right: .5rem; }
|
.list, .req { padding-right: .5rem; }
|
||||||
.req, .res { padding-left: .5rem; }
|
.req, .res { padding-left: .5rem; }
|
||||||
|
|
||||||
.list-inner, .req-inner, .res-inner {
|
.list-inner, .req-inner, .res-inner {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.req-inner, .res-inner {
|
.req-inner, .res-inner {
|
||||||
background: var(--req-res-bg);
|
background: var(--req-res-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.req, .res {
|
.req, .res {
|
||||||
color: var(--req-res-fg);
|
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 }
|
||||||
.list-item {
|
.list-item {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background: var(--list-item-bg);
|
background: var(--list-item-bg);
|
||||||
color: var(--list-item-fg);
|
color: var(--list-item-fg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: background .15s linear;
|
transition: background .15s linear;
|
||||||
}
|
}
|
||||||
.list-item:hover { }
|
.list-item:hover { }
|
||||||
.list-item, .req-inner, .res-inner {
|
.list-item, .req-inner, .res-inner {
|
||||||
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: var(--list-item-sel-bg);
|
background: var(--list-item-sel-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.GET { color: var(--method-get) }
|
.GET { color: var(--method-get) }
|
||||||
.POST { color: var(--method-post) }
|
.POST { color: var(--method-post) }
|
||||||
.PUT { color: var(--method-put) }
|
.PUT { color: var(--method-put) }
|
||||||
.PATCH { color: var(--method-patch) }
|
.PATCH { color: var(--method-patch) }
|
||||||
.DELETE { color: var(--method-delete) }
|
.DELETE { color: var(--method-delete) }
|
||||||
.ok { color: var(--status-ok) }
|
.ok { color: var(--status-ok) }
|
||||||
.warn { color: var(--status-warn) }
|
.warn { color: var(--status-warn) }
|
||||||
.error { color: var(--status-error) }
|
.error { color: var(--status-error) }
|
||||||
|
|
||||||
.method { font-size: 0.7em; margin-right: 1rem; padding: .25rem .5rem }
|
.method { font-size: 0.7em; margin-right: 1rem; padding: .25rem .5rem }
|
||||||
.status { font-size: 0.8em; padding-left: 1rem }
|
.status { font-size: 0.8em; padding-left: 1rem }
|
||||||
.path { 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 }
|
||||||
.time { font-size: 0.7em; padding-left: 1rem; color: var(--disabled) }
|
.time { font-size: 0.7em; padding-left: 1rem; color: var(--disabled) }
|
||||||
|
|
||||||
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: 2;
|
z-index: 2;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
}
|
}
|
||||||
.req:before, .res:before {
|
.req:before, .res:before {
|
||||||
bottom: .5rem;
|
bottom: .5rem;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
color: var(--bg);
|
color: var(--bg);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.req:before {
|
.req:before {
|
||||||
content: "↑REQUEST";
|
content: "↑REQUEST";
|
||||||
}
|
}
|
||||||
.res:before {
|
.res:before {
|
||||||
content: "↓RESPONSE";
|
content: "↓RESPONSE";
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
.controls > * {
|
.controls > * {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
background: var(--btn-bg);
|
background: var(--btn-bg);
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
font-size: .75em;
|
font-size: .75em;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
color: var(--links);
|
color: var(--links);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
button:disabled {
|
button:disabled {
|
||||||
color: var(--disabled);
|
color: var(--disabled);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
button:hover:enabled {
|
button:hover:enabled {
|
||||||
background: var(--btn-hover);
|
background: var(--btn-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome {
|
.welcome {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, .5);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
transform: translate(0%, -50%);
|
transform: translate(0%, -50%);
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.welcome span {
|
.welcome span {
|
||||||
font-size: .5em;
|
font-size: .5em;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="dashboard" id="app">
|
<div class="dashboard" id="app">
|
||||||
|
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button :disabled="items.length == 0" @click="clearDashboard">clear</button>
|
<button :disabled="items.length == 0" @click="clearDashboard">clear</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-inner">
|
<div class="list-inner">
|
||||||
<div class="list-item" v-for="item in items" :key="item.id" @click="show(item)"
|
<div class="list-item" v-for="item in items" :key="item.id" @click="show(item)"
|
||||||
:class="{selected: selectedItem.id == item.id}">
|
:class="{selected: selectedItem.id == item.id}">
|
||||||
<span class="method" :class="item.method">{{item.method}}</span>
|
<span class="method" :class="item.method">{{item.method}}</span>
|
||||||
<span class="path">‎{{item.path}}‎</span>
|
<span class="path">‎{{item.path}}‎</span>
|
||||||
<span class="status" :class="statusColor(item)">{{item.status == 999 ? 'failed' : item.status}}</span>
|
<span class="status" :class="statusColor(item)">{{item.status == 999 ? 'failed' : item.status}}</span>
|
||||||
<span class="time">{{item.elapsed}}ms</span>
|
<span class="time">{{item.elapsed}}ms</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="req">
|
<div class="req">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button :disabled="!canPrettifyBody('request')" @click="prettifyBody('request')">prettify</button>
|
<button :disabled="!canPrettifyBody('request')" @click="prettifyBody('request')">prettify</button>
|
||||||
<button :disabled="selectedItem.id == null" @click="copyCurl">curl</button>
|
<button :disabled="selectedItem.id == null" @click="copyCurl">curl</button>
|
||||||
<button :disabled="selectedItem.id == null" @click="retry">retry</button>
|
<button :disabled="selectedItem.id == null" @click="retry">retry</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="req-inner">
|
<div class="req-inner">
|
||||||
<pre>{{selectedItem.request}}</pre>
|
<pre>{{selectedItem.request}}</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="res">
|
<div class="res">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button :disabled="!canPrettifyBody('response')" @click="prettifyBody('response')">prettify</button>
|
<button :disabled="!canPrettifyBody('response')" @click="prettifyBody('response')">prettify</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="res-inner">
|
<div class="res-inner">
|
||||||
<pre :class="{error: selectedItem.status == 999}">{{selectedItem.response}}</pre>
|
<pre :class="{error: selectedItem.status == 999}">{{selectedItem.response}}</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="welcome" v-if="items.length == 0">
|
<div class="welcome" v-if="items.length == 0">
|
||||||
<p>Waiting for requests on http://localhost:<<.ProxyPort>>/<br>
|
<p>Waiting for requests on http://localhost:<<.ProxyPort>>/<br>
|
||||||
<span>Proxying <<.TargetURL>></span></p>
|
<span>Proxying <<.TargetURL>></span></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue