{{ define "console" }}

{{ template "header" .}}

<div class="row">

<div class="col-md-6 table-responsive">

<table id="request-table" class="table table-hover">

<thead class="thead-dark">

<tr>

<th scope="col">Date</th>

<th scope="col">Client IP</th>

<th scope="col">Method</th>

<th scope="col">Path</th>

<th scope="col">Status</th>

<th scope="col">Duration</th>

</tr>

</thead>

<tbody id="request-list" data-bind="foreach: requests">

<tr class="request-row" data-bind="click: showRequest, css: {'table-active' : active}">

<th scope="row" data-bind="text: startTimePretty"></th>

<th scope="row" data-bind="text: requestIP"></th>

<th scope="row" data-bind="text: requestMethod"></th>

<td data-bind="text: originalRequestURI"></td>

<td data-bind="text: responseStatus"></td>

<td data-bind="text: requestTime"></td>

</tr>

</tbody>

</table>

</div>

<div class="col-md-6">

<div class="row" data-bind="foreach: request">

<h2 id="request-info-h2">Request Info</h2>

<div class="container">

<h3>Headers</h3>

<div id="requestHeaders" class="dataContainers row">

<pre class="pre-scrollable w-100" data-bind="text: JSON.stringify(headers, null, 4)"></pre>

</div>

<h3>Body</h3>

<div id="requestBody" class="dataContainers row">

<pre class="pre-scrollable w-100" data-bind="text: atob(body)"></pre>

</div>

</div>

</div>

<hr>

<div class="row" data-bind="foreach: response">

<h2>Response Info:</h2>

<div class="container">

<h3>Headers</h3>

<div id="responseHeaders" class="dataContainers row">

<pre class="pre-scrollable w-100" data-bind="text: JSON.stringify(headers, null, 4)"></pre>

</div>

<h3>Body</h3>

<div id="responseBody" class="dataContainers row">

<pre class="pre-scrollable w-100" data-bind="text: atob(body)"></pre>

</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">

var requests = {

requests: ko.observableArray([]),

request: ko.observableArray([]),

response: ko.observableArray([]),

};

var Request = function(requestData) {

this.data = requestData;

this.startTimePretty = requestData.startTimePretty;

this.requestMethod = requestData.requestMethod;

this.requestUrl = requestData.requestUrl;

this.originalRequestURI = requestData.originalRequestURI;

this.responseStatus = requestData.responseStatus;

this.requestTime = requestData.requestTime;

this.requestIP = requestData.requestIP;

this.active = ko.observable(false);

this.showRequest = function() {

requests.request.removeAll();

requests.response.removeAll();

if ("Content-Type" in requestData.requestHeaders && requestData.requestHeaders["Content-Type"][0] == "application/json") {

requestData.requestBody = btoa(JSON.stringify(JSON.parse(atob(requestData.requestBody)), null, 4).toString('utf-8'));

}

if ("Content-Type" in requestData.responseHeaders && requestData.responseHeaders["Content-Type"][0] == "application/json") {

requestData.responseBody = btoa(JSON.stringify(JSON.parse(atob(requestData.responseBody)), null, 4).toString('utf-8'));

}

requests.request.push({

headers: requestData.requestHeaders,

body: requestData.requestBody

});

requests.response.push({

headers: requestData.responseHeaders,

body: requestData.responseBody

});

for (var request of requests.requests()) {

request.active(false);

}

this.active(true);

}.bind(this);

};

$(function() {

var ws = new WebSocket(window.location.href.replace('http', 'ws').replace('/console', '/console/ws'));

ko.applyBindings(requests);

ws.onmessage = function(event) {

var requestData = JSON.parse(event.data);

requests.requests.unshift(new Request(requestData));

};

});

</script>

<style>

.dataContainers {

padding-left: 16px;

}

</style>

{{ template "footer" .}}

{{ end }}