summaryrefslogtreecommitdiffstats
path: root/static/table.html
diff options
context:
space:
mode:
authorSimon Rettberg2019-01-29 16:06:26 +0100
committerSimon Rettberg2019-01-29 16:06:26 +0100
commit1e8ef96e022883f056610d55055622fb22016c0c (patch)
treee932d9a1320181e11c264905eaf91babb9dba115 /static/table.html
parentSmall labeling change (diff)
downloaddnbd3-status-1e8ef96e022883f056610d55055622fb22016c0c.tar.gz
dnbd3-status-1e8ef96e022883f056610d55055622fb22016c0c.tar.xz
dnbd3-status-1e8ef96e022883f056610d55055622fb22016c0c.zip
Make colors more good and less bad
Diffstat (limited to 'static/table.html')
-rw-r--r--static/table.html229
1 files changed, 229 insertions, 0 deletions
diff --git a/static/table.html b/static/table.html
new file mode 100644
index 0000000..ad7835f
--- /dev/null
+++ b/static/table.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<head>
+ <style type="text/css">
+
+ html, body {
+ height: 100%;
+ margin: 0;
+ }
+
+ #app {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .server-container {
+ display: flex;
+ justify-content: center;
+ overflow-y: auto;
+ }
+
+ .server {
+ border-spacing: 2px 4px;
+ background-color: #eee;
+ border: 1px solid #888;
+ flex: 1;
+ white-space: nowrap;
+ max-width: 360px;
+ margin: 5px;
+ }
+
+ .first-row {
+ font-weight: bold;
+ }
+
+ .server-ip {
+ text-align: center;
+ }
+
+ .client-label, .client-speed {
+ border: 1px solid #888;
+ text-align: center;
+ text-shadow: #fff 1.2px 1.2px;
+ }
+
+ .expand {
+ width: 99%;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div id="app">
+ <div class="server-container">
+ <table v-for="(server, index) in servers" class="server" :style="{ border: '2px 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>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>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <canvas ref="chart" :width="this.canvasWidth"></canvas>
+ </div>
+
+<script src="vue.min.js"></script>
+<script src="smoothie.js"></script>
+
+<script>
+
+var app = new Vue({
+ el: '#app',
+ data: {
+ rawData: {},
+ servers: [],
+ logs: {},
+ timespan: 120,
+ peak: false,
+ canvasWidth: 0,
+ smoothie: null,
+ graphLines: {},
+ GRAPH_COLORS: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]
+ },
+ watch: {
+ rawData () {
+ if (this.rawData.servers) {
+ const servers = this.rawData.servers.slice(0)
+ servers.sort(this.compareObjectIps)
+ const currentTime = new Date().getTime()
+ servers.forEach((server, index) => {
+ this.calcSpeed(server)
+
+ // Update the graph
+ if (!this.graphLines[server.address]) {
+ Vue.set(this.graphLines, server.address, new TimeSeries({ logarithmicScale: true }))
+ this.smoothie.addTimeSeries(this.graphLines[server.address], { lineWidth: 2, strokeStyle: this.GRAPH_COLORS[index] })
+ }
+ this.graphLines[server.address].append(currentTime, server.uploadSpeed)
+
+ // Update clients
+ server.clients.forEach(client => {
+ client.timestamp = server.timestamp
+ this.calcSpeed(client)
+ })
+ if (this.peak) {
+ server.clients = server.clients.filter(client => client.peakUploadSpeed > 0)
+ server.clients.sort((a, b) => b.peakUploadSpeed - a.peakUploadSpeed)
+ } else {
+ server.clients = server.clients.filter(client => client.avgUploadSpeed > 0)
+ server.clients.sort((a, b) => b.avgUploadSpeed - a.avgUploadSpeed)
+ }
+ })
+ this.servers = servers
+ }
+ }
+ },
+ methods: {
+ async updateData () {
+ const response = await fetch('/data2.json')
+ this.rawData = await response.json()
+ setTimeout(this.updateData, 2000)
+ },
+ calcSpeed (obj) {
+ // Create a log for this ip if it doesn't exist already
+ if(!this.logs[obj.address]) Vue.set(this.logs, obj.address, [])
+ // Remove outdated values
+ this.logs[obj.address] = this.logs[obj.address].filter(x => x.timestamp > this.rawData.timestamp - this.timespan * 1000)
+ // Get the all the old values accumulated over the timespan
+ const log = this.logs[obj.address]
+ // Add new values to the log
+ if (log.length === 0 || obj.timestamp > log[log.length - 1].timestamp) log.push(obj)
+
+ if (log.length > 1) {
+ // Calculate current speeds
+ var a = log[log.length - 2]
+ const b = log[log.length - 1]
+ var time = (b.timestamp - a.timestamp) / 1000
+ obj.uploadSpeed = (b.bytesSent - a.bytesSent) / time
+ obj.downloadSpeed = (b.bytesReceived - a.bytesReceived) / time
+
+ // Calculate peak speeds
+ obj.peakUploadSpeed = Math.max(...log.map(x => x.uploadSpeed || 0))
+ obj.peakDownloadSpeed = Math.max(...log.map(x => x.downloadSpeed || 0))
+
+ // Calculate average speeds
+ a = log[0]
+ time = (b.timestamp - a.timestamp) / 1000
+ obj.avgUploadSpeed = (b.bytesSent - a.bytesSent) / time
+ 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'
+ },
+ formatSeconds (seconds) {
+ return ( Math.floor(seconds / ( 3600 * 24 ) ) + 'd '
+ + Math.floor(seconds / 3600 ) % 24 + 'h '
+ + Math.floor(seconds / 60 ) % 60 + 'min' )
+ },
+ calcBackgroundStyle (speed) {
+ const colors = ['#eee', '#cfc', '#6f6', '#7c0', '#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)))
+ return { background: `linear-gradient(90deg, ${colors[i+1]} ${percent}%, ${colors[i]} ${percent}%)` }
+ },
+ compareObjectIps (obj1, obj2) {
+ const parts1 = obj1.address.split('.').map(str => parseInt(str))
+ const parts2 = obj2.address.split('.').map(str => parseInt(str))
+ var result = parts1[0] - parts2[0]
+ if (result === 0) result = parts1[1] - parts2[1]
+ if (result === 0) result = parts1[2] - parts2[2]
+ if (result === 0) result = parts1[3] - parts2[3]
+ return result
+ },
+ logScale (value) {
+ return Math.log(value/100000 + 1)
+ }
+ },
+ created () {
+ const urlParams = new URLSearchParams(window.location.search)
+ this.timespan = parseInt(urlParams.get('timespan')) || 120
+ this.peak = urlParams.get('peak') === 'true' || urlParams.get('peak') === ''
+ this.updateData()
+ },
+ mounted () {
+ this.canvasWidth = window.innerWidth
+ window.addEventListener('resize', () => {
+ this.canvasWidth = window.innerWidth
+ })
+ this.smoothie = new SmoothieChart({
+ 'millisPerPixel': 300,
+ 'grid': { 'millisPerLine': 30000 },
+ timestampFormatter: SmoothieChart.timeFormatter,
+ yMaxFormatter: this.formatSpeed,
+ yMinFormatter: this.formatSpeed,
+ valueTransformFunction: this.logScale,
+ minValue: 0,
+ maxValue: 262144000,
+ labels: { fontSize: 13 }
+ })
+ this.smoothie.streamTo(this.$refs.chart, 2000)
+ }
+})
+
+</script>
+</body>
+</html>