Servo/templates/console.tmpl

{{ 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 }}