diff options
Diffstat (limited to 'modules-available/dnbd3/templates')
-rw-r--r-- | modules-available/dnbd3/templates/page-proxy-images.html | 86 | ||||
-rw-r--r-- | modules-available/dnbd3/templates/page-proxy-stats.html | 10 |
2 files changed, 92 insertions, 4 deletions
diff --git a/modules-available/dnbd3/templates/page-proxy-images.html b/modules-available/dnbd3/templates/page-proxy-images.html index ff420ffd..3ec4908c 100644 --- a/modules-available/dnbd3/templates/page-proxy-images.html +++ b/modules-available/dnbd3/templates/page-proxy-images.html @@ -21,7 +21,7 @@ {{size_s}} </td> <td class="text-right text-nowrap"> - {{complete}} % + <a data-imgid="{{id}}" class="cache-map" href="#">{{complete}} %</a> </td> <td class="text-right text-nowrap"> {{idle_s}} @@ -33,3 +33,87 @@ {{/images}} </table> </div> + +<style type="text/css"> + .cmbar { + display: flex; + width: 250px; + align-items: stretch; + padding: 0; + } + .cmbar b { + display: inline-block; + flex-grow: 1; + height: 1em; + margin: 0; + } + {{#colors}} + .cmbar .a{{i}} {background: linear-gradient({{dark}}, {{bright}}, {{dark}})} + {{/colors}} +</style> + +<script> + document.addEventListener('DOMContentLoaded', function () { + $('.cache-map').click(function (e) { + e.preventDefault(); + var $this = $(this); + // Use xhr directly as jQuery doesn't support arraybuffer + var xhr = new XMLHttpRequest(); + xhr.open('GET', '?do=dnbd3&action=cachemap&server={{serverId}}&id=' + $this.data('imgid') + '&raw=1&async=1', true); + xhr.responseType = 'arraybuffer'; + xhr.onload = function(e) { + if (this.readyState !== 4) + return; + var ua = new Uint8Array(this.response); + console.log(ua); + if (this.status !== 200) { + $this.replaceWith($('<span>').text(typeof TextDecoder !== 'undefined' ? new TextDecoder("utf-8").decode(ua) : 'HTTP ' + this.status)); + return; + } + var llast = -1; + var lcount = 0; + var genChunk = function(acc) { + var line; + if (acc !== false) { + if (acc > 15) acc = 15; else acc = (acc + 0.49) | 0; + if (llast === acc) { + lcount++; + return ''; + } + } + if (llast !== -1 || acc === false) { + if (lcount === 1) { + line = '<b class="a' + llast + '"></b>'; + } else { + line = '<b class="a' + llast + '" style="flex-grow:' + lcount + '"></b>'; + } + } else { + line = ''; + } + llast = acc; + lcount = 1; + return line; + }; + var l = ua.length; + var div; + if (l >= 240) { + div = l / 120; + } else { + div = 1; + } + var acc = 0, target = div, div16 = div * 16, html = ''; + for (var i = 0; i < l; ++i) { + acc += ua[i]; + if (i + 1 >= target) { + html += genChunk(acc / (div16)); + acc = 0; + target += div; + } + } + html += genChunk(false); + $this.replaceWith($('<div class="cmbar">').html(html)); + }; + xhr.send(); + }); + }); +</script> diff --git a/modules-available/dnbd3/templates/page-proxy-stats.html b/modules-available/dnbd3/templates/page-proxy-stats.html index a866903c..9c3a4a84 100644 --- a/modules-available/dnbd3/templates/page-proxy-stats.html +++ b/modules-available/dnbd3/templates/page-proxy-stats.html @@ -1,11 +1,15 @@ <div class="panel panel-default"> <div class="panel-body"> + <div class="pull-right"> + {{lang_uptime}}: <b>{{uptime_s}}</b> + </div> <div> {{lang_sessionTx}}: <b>{{bytesSent_s}}</b> - –– + – {{lang_sessionRx}}: <b>{{bytesReceived_s}}</b> - –– - {{lang_uptime}}: <b>{{uptime_s}}</b> + {{#ratio}} +   ({{lang_ratio}}: {{ratio}}) + {{/ratio}} </div> <div> {{lang_storageSize}}: <b>{{spaceTotal_s}}</b> |