| {{/* |
| 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> |