summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSimon Rettberg2019-02-08 15:30:55 +0100
committerSimon Rettberg2019-02-08 15:30:55 +0100
commitb84590b4332a865293428425f9bcd0bd27bd5086 (patch)
tree065bc1e4cd9ea1772b7abf80ed7531ad3cf269e9
parentMake colors more good and less bad (diff)
downloaddnbd3-status-b84590b4332a865293428425f9bcd0bd27bd5086.tar.gz
dnbd3-status-b84590b4332a865293428425f9bcd0bd27bd5086.tar.xz
dnbd3-status-b84590b4332a865293428425f9bcd0bd27bd5086.zip
table.html: Fix bytes/s for counter; design tweaks
-rw-r--r--static/table.html46
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,