blob: 53c8f2357f219e2f8d55ffcb0be28d9d6a487dbd [file] [log] [blame]
{{/*
Copyright 2016 The Vanadium Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/}}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Debugging {{.ServerName}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-blue.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.fixed-width {
font-family: monospace;
}
body header {
background-color: #00838F !important;
}
.mdl-data-table__cell--non-numeric pre {
margin: 0px;
white-space: pre-wrap;
}
.chart-container {
position: relative;
width: 800px;
height: 400px;
}
.area-chart {
position: absolute;
display: none;
}
.area-chart.selected {
display: block;
}
.duration-selector-container {
bottom: 8px;
right: 20px;
position: absolute;
display: flex;
line-height: 20px;
height: 20px;
}
.duration-selector {
cursor: pointer;
padding: 0px 4px 0px 4px;
}
.duration-selector:not(.selected):hover {
background-color: #CCC;
}
.duration-selector.selected {
background-color: #00838f;
color: white;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function drawHistoryGraphs(d) {
// Convert data.
var data = JSON.parse(d);
var keys = ['1m', '10m', '1h'];
keys.forEach(function(k) {
data[k] = data[k].map(function(ele) {
return [new Date(parseInt(ele[0] * 1000)), parseInt(ele[1])];
});
});
var defaultDuration = '1h';
// Create and setup graphs and duration selectors.
var container = document.currentScript.parentNode;
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(function() {
// Create container for charts.
var chartContainer = document.createElement('div');
chartContainer.className = 'chart-container';
container.appendChild(chartContainer);
// Create container for duration selectors.
var durationSelectorContainer = document.createElement('div');
durationSelectorContainer.className = 'duration-selector-container';
container.appendChild(durationSelectorContainer);
// Create graphs and duration selectors.
var graphs = {};
var selectors = {};
keys.forEach(function(k) {
// Create graph.
var graph = document.createElement('div');
graphs[k] = graph;
graph.className = 'area-chart';
if (k === defaultDuration) {
graph.className += ' selected';
}
chartContainer.appendChild(graph);
var dt = new google.visualization.DataTable();
dt.addColumn('datetime', '');
dt.addColumn('number', '');
dt.addRows(data[k]);
var options = {
width: 800,
height: 400,
legend: {
position: 'none'
},
series: {
0: {
color: '#00838F'
}
},
vAxis: {
format: 'short'
},
'chartArea': {
left: 80
},
backgroundColor: {fill: 'transparent'},
};
var chart = new google.visualization.AreaChart(graph);
chart.draw(dt, options);
// Create duration selector for this graph.
var selector= document.createElement('div');
selectors[k] = selector;
selector.className = 'duration-selector';
if (k === defaultDuration) {
selector.className += ' selected';
}
var selectorText = document.createTextNode(k);
selector.appendChild(selectorText);
durationSelectorContainer.appendChild(selector);
});
// Add click handler for each selector.
keys.forEach(function(k) {
var curKey = k;
selectors[k].addEventListener('click', function() {
keys.forEach(function(k) {
if (k == curKey) {
graphs[k].className = 'area-chart selected';
selectors[k].className = 'duration-selector selected';
} else {
graphs[k].className = 'area-chart'
selectors[k].className = 'duration-selector';
}
});
});
});
});
}
</script>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Debug</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="name?n={{.ServerName}}">Name</a>
<a class="mdl-navigation__link" href="blessings?n={{.ServerName}}">Blessings</a>
<a class="mdl-navigation__link" href="stats?n={{.ServerName}}">Stats</a>
<a class="mdl-navigation__link" href="logs?n={{.ServerName}}">Logs</a>
<a class="mdl-navigation__link" href="glob?n={{.ServerName}}">Glob</a>
<a class="mdl-navigation__link" href="profiles?n={{.ServerName}}">Profiles</a>
<a class="mdl-navigation__link" href="vtraces?n={{.ServerName}}">Traces</a>
<a class="mdl-navigation__link" href="syncbase?n={{.ServerName}}">Syncbase</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="name?n={{.ServerName}}">Name</a>
<a class="mdl-navigation__link" href="blessings?n={{.ServerName}}">Blessings</a>
<a class="mdl-navigation__link" href="stats?n={{.ServerName}}">Stats</a>
<a class="mdl-navigation__link" href="logs?n={{.ServerName}}">Logs</a>
<a class="mdl-navigation__link" href="glob?n={{.ServerName}}">Glob</a>
<a class="mdl-navigation__link" href="profiles?n={{.ServerName}}">Profiles</a>
<a class="mdl-navigation__link" href="vtraces?n={{.ServerName}}">Traces</a>
<a class="mdl-navigation__link" href="syncbase?n={{.ServerName}}">Syncbase</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="section--center mdl-grid">
<h5 class="fixed-width">{{.ServerName}}</h5>
</section>
{{block "content" .}}Main Content Here{{end}}
<hr/> {{with .CommandLine}}
<section class="section--center mdl-grid">
<h5>CommandLine</h5>
<div class="mdl-cell mdl-cell--12-col fixed-width">{{.}}</div>
</section>
{{end}} {{with printf "%v" .Vtrace}}
<section class="section--center mdl-grid">
<h5>Trace</h5>
<div class="mdl-cell mdl-cell--12-col"><pre>{{.}}</pre></div>
</section>
{{end}}
</main>
</div>
</body>
</html>