diff options
| -rw-r--r-- | static/table.html | 46 |
1 files changed, 28 insertions, 18 deletions
diff --git a/static/table.html b/static/table.html index ad7835f..eb4ca4c 100644 --- a/static/table.html +++ b/static/table.html @@ -25,11 +25,10 @@ .server { border-spacing: 2px 4px; background-color: #eee; - border: 1px solid #888; flex: 1; white-space: nowrap; max-width: 360px; - margin: 5px; + margin: 3px; } .first-row { @@ -38,6 +37,7 @@ .server-ip { text-align: center; + font-size: 150%; } .client-label, .client-speed { @@ -56,20 +56,30 @@ <div id="app"> <div class="server-container"> - <table v-for="(server, index) in servers" class="server" :style="{ border: '2px solid ' + GRAPH_COLORS[index] }"> + <table v-for="(server, index) in servers" class="server" :style="{ border: '4px solid ' + GRAPH_COLORS[index] }"> <tbody> <tr class="first-row"><td colspan="2" class="server-ip">{{ server.address }}</td></tr> <tr><td>Uptime:</td><td class="expand">{{ formatSeconds(server.uptime) }}</td></tr> - <tr><td>Upload speed:</td><td>{{ formatSpeed(peak ? server.peakUploadSpeed : server.avgUploadSpeed) }}</td></tr> - <tr><td>Download speed:</td><td>{{ formatSpeed(peak ? server.peakDownloadSpeed : server.avgDownloadSpeed) }}</td></tr> - <tr><td>Total sent:</td><td>{{ formatSpeed(server.bytesSent) }}</td></tr> - <tr><td>Total received:</td><td>{{ formatSpeed(server.bytesReceived) }}</td></tr> + <tr> + <td>Upload speed:</td> + <td class="client-speed" :style="calcBackgroundStyle(peak ? server.peakUploadSpeed : server.avgUploadSpeed)"> + <span>{{ formatBytes(peak ? server.peakUploadSpeed : server.avgUploadSpeed) }}/s</span> + </td> + </tr> + <tr> + <td>Download speed:</td> + <td class="client-speed" :style="calcBackgroundStyle(peak ? server.peakDownloadSpeed : server.avgDownloadSpeed)"> + <span>{{ formatBytes(peak ? server.peakDownloadSpeed : server.avgDownloadSpeed) }}/s</span> + </td> + </tr> + <tr><td>Total sent:</td><td>{{ formatBytes(server.bytesSent) }}</td></tr> + <tr><td>Total received:</td><td>{{ formatBytes(server.bytesReceived) }}</td></tr> <tr><td>Client count:</td><td>{{ server.clientCount }}</td></tr> <tr><td>Server count:</td><td>{{ server.serverCount }}</td></tr> <tr v-for="client in server.clients"> <td class="client-label">{{ client.address.split( ":" )[0] }}</td> <td class="client-speed" :style="calcBackgroundStyle(peak ? client.peakUploadSpeed : client.avgUploadSpeed)"> - <span>{{ formatSpeed(peak ? client.peakUploadSpeed : client.avgUploadSpeed) }}</span> + <span>{{ formatBytes(peak ? client.peakUploadSpeed : client.avgUploadSpeed) }}/s</span> </td> </tr> </tbody> @@ -164,12 +174,12 @@ var app = new Vue({ obj.avgDownloadSpeed = (b.bytesReceived - a.bytesReceived) / time } }, - formatSpeed (bytes) { - if (bytes < 1024) return bytes.toFixed(2) + ' B/s' - else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KiB/s' - else if (bytes < 1073741824) return (bytes / 1048576).toFixed(2) + ' MiB/s' - else if (bytes < 1099511627776) return (bytes / 1073741824).toFixed(2) + ' GiB/s' - else return (bytes / 1099511627776).toFixed(2) + ' TiB/s' + formatBytes (bytes) { + if (bytes < 1024) return bytes.toFixed(2) + ' B' + else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KiB' + else if (bytes < 1073741824) return (bytes / 1048576).toFixed(2) + ' MiB' + else if (bytes < 1099511627776) return (bytes / 1073741824).toFixed(2) + ' GiB' + else return (bytes / 1099511627776).toFixed(2) + ' TiB' }, formatSeconds (seconds) { return ( Math.floor(seconds / ( 3600 * 24 ) ) + 'd ' @@ -177,12 +187,12 @@ var app = new Vue({ + Math.floor(seconds / 60 ) % 60 + 'min' ) }, calcBackgroundStyle (speed) { - const colors = ['#eee', '#cfc', '#6f6', '#7c0', '#f00', '#f65'] + const colors = ['#eee', '#cfc', '#6f6', '#70bf30', '#f00', '#f65'] const limits = [1048576, 10485760, 104857600, 1073741824, 10737418240] for (var i = 0; i < 4; ++i) { if (speed < limits[i]) break } - const percent = Math.round(Math.max(0, Math.min(100, this.logScale(speed) / this.logScale(limits[i]) * 100))) + const percent = Math.round(Math.max(0, Math.min(100, speed / limits[i] * 100))) return { background: `linear-gradient(90deg, ${colors[i+1]} ${percent}%, ${colors[i]} ${percent}%)` } }, compareObjectIps (obj1, obj2) { @@ -213,8 +223,8 @@ var app = new Vue({ 'millisPerPixel': 300, 'grid': { 'millisPerLine': 30000 }, timestampFormatter: SmoothieChart.timeFormatter, - yMaxFormatter: this.formatSpeed, - yMinFormatter: this.formatSpeed, + yMaxFormatter: this.formatBytes, + yMinFormatter: this.formatBytes, valueTransformFunction: this.logScale, minValue: 0, maxValue: 262144000, |