diff options
Diffstat (limited to 'modules-available/vmstore/templates')
4 files changed, 209 insertions, 1 deletions
diff --git a/modules-available/vmstore/templates/benchmark-imgselect.html b/modules-available/vmstore/templates/benchmark-imgselect.html new file mode 100644 index 00000000..be81aa3e --- /dev/null +++ b/modules-available/vmstore/templates/benchmark-imgselect.html @@ -0,0 +1,59 @@ +<div class="page-header"> + <h1>{{lang_benchmark}}</h1> +</div> + +<form role="form" method="post" action="?do=vmstore"> + <input type="hidden" name="token" value="{{token}}"> + <input type="hidden" name="show" value="benchmark"> + <input type="hidden" name="id" value="{{id}}"> + + <h4>{{lang_selectServerOrNfs}}</h4> + {{#servers}} + <div class="radio"> + <input type="radio" id="s-{{idx}}" name="server" value="{{idx}}" {{checked}}> + <label for="s-{{idx}}">{{server}}</label> + </div> + {{/servers}} + + <div class="slx-space"></div> + + <h4>{{lang_selectImage}}</h4> + <div> + <table class="table table-condensed stupidtable"> + <thead> + <tr> + <th data-sort="string">{{lang_image}}</th> + <th class="slx-smallcol" data-sort="int" data-sort-default="desc">{{lang_users}}</th> + <th class="slx-smallcol" data-sort="int" data-sort-default="desc">{{lang_size}}</th> + </tr> + </thead> + <tbody> + {{#list}} + <tr> + <td> + <div class="radio radio-inline"> + <input type="radio" id="r-{{id}}" name="image" value="{{name}}"> + <label for="r-{{id}}">{{name}}</label> + </div> + </td> + <td class="text-right">{{users}}</td> + <td class="text-right" data-sort-value="{{size}}">{{size_s}}</td> + </tr> + {{/list}} + </tbody> + </table> + </div> + + <div class="slx-space"></div> + + <div style="position:fixed;bottom:0;right:0;padding:8px;background:#fff;width:100%;border-top:1px solid #ddd"> + <div class="buttonbar text-right"> + <button type="submit" name="action" value="start" class="btn btn-primary"> + <span class="glyphicon glyphicon-play"></span> + {{lang_start}} + </button> + </div> + </div> + + +</form>
\ No newline at end of file diff --git a/modules-available/vmstore/templates/benchmark-nothing.html b/modules-available/vmstore/templates/benchmark-nothing.html new file mode 100644 index 00000000..aeef9187 --- /dev/null +++ b/modules-available/vmstore/templates/benchmark-nothing.html @@ -0,0 +1,7 @@ +<div class="page-header"> + <h1>{{lang_benchmark}}</h1> +</div> + +<div class="alert alert-info"> + {{lang_benchmarkMainPageText}} +</div>
\ No newline at end of file diff --git a/modules-available/vmstore/templates/benchmark-result.html b/modules-available/vmstore/templates/benchmark-result.html new file mode 100644 index 00000000..28f31f12 --- /dev/null +++ b/modules-available/vmstore/templates/benchmark-result.html @@ -0,0 +1,141 @@ +<h1>{{lang_benchmark}}</h1> + +<h2>{{lang_benchmarkResult}}</h2> + +{{#remaining}} +<div class="alert alert-info"> + {{lang_benchmarkSecondsReminaing}}: <span id="remaining-seconds">{{remaining}}</span> +</div> +{{/remaining}} + +<div id="graphs"></div> + +<div id="errors"></div> + +<script> + document.addEventListener('DOMContentLoaded', function() { + var result = {{{result}}}; + var clients = {{{wanted}}}; + var graphs = {}; + function formatBytes(val) { + return Math.floor(val / 1024 / 1024) + "\u2009MiB/s"; + } + function renderX(val, index) { + return Math.floor(val / 1000) + '\u2009s'; + } + function makeGraph(typeKey, resourceKey, caption) { + var uuid; + var ds = []; + var gmin = 0, rmax = 0; + var colors = []; + var cnt = 0; + for (uuid in result) { + if (!result[uuid][typeKey]) { + delete result[uuid]; + continue; + } + if (gmin === 0 || result[uuid][typeKey].start < gmin) { + gmin = result[uuid][typeKey].start; + } + cnt++; + } + if (cnt === 1) { + colors.push('rgb(0, 128, 0)'); + } else { + for (i = 0; i < cnt; ++i) { + colors.push('rgb(0, 128, ' + (i / (cnt - 1)) * 255 + ')'); + } + } + var v, i, o, idx; + var sums = []; + for (uuid in result) { + o = result[uuid][typeKey].start - gmin; // Adjust according to earliest client + v = result[uuid][typeKey].values[resourceKey]; + for (i = 0; i < v.length; ++i) { + v[i].x += o; + if (cnt > 1) { + idx = Math.round(v[i].x / 250); + if (sums[idx]) { + sums[idx] += v[i].y | 0; + } else { + sums[idx] = v[i].y | 0; + } + } + } + if (v[v.length-1].x > rmax) rmax = v[v.length-1].x; // Get max value + ds.push({data: v, label: result[uuid].name, borderColor: colors[ds.length], fill: false}); + } + if (cnt > 1) { + ds.push({data: sums, label: 'Sum', borderColor: '#c00'}); + } + if (!graphs[typeKey]) { + var $e = $('#graphs'); + var $c = $('<canvas style="width:100%;height:250px">'); + $e.append($('<h3>').text(caption)); + $e.append($c); + var ls = []; + for (i = 0; i <= rmax; i += 250) ls.push(i); // Generate steps for graph + graphs[typeKey] = new Chart($c[0].getContext('2d'), {data: {datasets: ds, labels: ls}, type: 'scatter', options: { + animation: false, + responsive: true, + borderWidth: 2, + pointBorderWidth: 0, + showLine: true, + scales: { y: { ticks: { callback: formatBytes }}, x: { ticks: { callback: renderX }, max: rmax } }, + plugins: { + tooltip: { callbacks: { label: function(context) { + if (context.parsed.y !== null) { + return context.dataset.label + ": " + formatBytes(context.parsed.y); + } + return context.dataset.label; + } + }}, + legend: { position: 'left'} + } + }}); + } else { + graphs[typeKey].data.datasets = ds; + graphs[typeKey].update(); + } + } + + var $err = $('#errors'); + for (var uuid in result) { + if (result[uuid].stdout || result[uuid].stderr) { + var $frame = $('<div class="panel panel-body">'); + $frame.append($('<h5>').text(result[uuid].name)); + if (result[uuid].stdout) { + $frame.append($('<label>').text('stdout')); + $frame.append($('<pre>').text(result[uuid].stdout)); + } + if (result[uuid].stderr) { + $frame.append($('<label>').text('stderr')); + $frame.append($('<pre>').text(result[uuid].stderr)); + } + $err.append($frame); + } + } + + makeGraph('SEQ', 'net', 'Sequential Reads'); + makeGraph('RND', 'net', 'Random 1M'); + + {{#refresh}} + setTimeout(function() { + window.location.reload(); + }, {{refresh}} * 1000); + {{#remaining}} + var remaining = {{remaining}}; + function updateRemainingCounter() { + if (remaining > 0) { + setTimeout(updateRemainingCounter, 1000); + } else { + window.location.reload(); + } + $('#remaining-seconds').text(remaining--); + } + updateRemainingCounter(); + {{/remaining}} + {{/refresh}} + + }); +</script>
\ No newline at end of file diff --git a/modules-available/vmstore/templates/page-vmstore.html b/modules-available/vmstore/templates/page-vmstore.html index 0e1ad601..fa222631 100644 --- a/modules-available/vmstore/templates/page-vmstore.html +++ b/modules-available/vmstore/templates/page-vmstore.html @@ -1,10 +1,11 @@ +<h1>{{lang_vmLocation}}</h1> + <form role="form" method="post" action="?do=VmStore"> <input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1"> <input type="password" name="password_fake" id="password_fake" value="" style="position:absolute;top:-2000px" tabindex="-1"> <input type="hidden" name="token" value="{{token}}"> <input type="hidden" name="action" value="setstore"> - <h1>{{lang_vmLocation}}</h1> <p>{{lang_vmLocationChoose}} <a class="btn btn-default" data-toggle="modal" data-target="#help-store"><span class="glyphicon glyphicon-question-sign"></span></a></p> |