summaryrefslogtreecommitdiffstats
path: root/static/new_status-dnbd3.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/new_status-dnbd3.html')
-rw-r--r--static/new_status-dnbd3.html666
1 files changed, 124 insertions, 542 deletions
diff --git a/static/new_status-dnbd3.html b/static/new_status-dnbd3.html
index eec291a..b4049bb 100644
--- a/static/new_status-dnbd3.html
+++ b/static/new_status-dnbd3.html
@@ -2,551 +2,133 @@
<meta charset="utf-8">
<html>
<head>
- <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
- <script src="smoothie.js"></script>
-
- <style type="text/css">
- body { width:100%; height:100%; margin:0; padding:0; overflow: scroll; }
-
- svg, div, canvas { margin:0; padding:0; }
-
- table, td { border: 1px solid black; text-align: center; }
- .clientTable
- {
- display: table;
- width:auto;
- background-color:#eee;
- border:1px solid #666666;
- border-spacing:5px;
- }
- .speed
- {
- align-content: right;/*fix for buggy browsers*/
- width:240px;
- background-color:#E0E0E0;
- background: linear-gradient(90deg, #E0E0E0 100%, #9DA7AE 0%);
-
- }
-
- .noBorder
- {
- text-align: left;
- border: none;
- }
-
- .serverTd
- {
- border:none;
- font-weight: bold;
- }
-
- .serverLTd
- {
- border:none;
- font-weight: bold;
- text-align: left;
- }
-
-
- </style>
+ <style type="text/css">
+
+ body { margin: 0; }
+
+ .container {
+ display: flex;
+ }
+
+ .server {
+ border-spacing: 5px;
+ background-color: #eee;
+ border: 1px solid #666;
+ }
+
+ .first-row {
+ font-weight: bold;
+ }
+
+ .server-ip {
+ text-align: center;
+ }
+
+ .client-label, .client-speed {
+ border: 1px solid black;
+ text-align: center;
+ }
+
+ .client-speed {
+ width: 240px;
+ }
+
+ </style>
</head>
<body>
- <div id="bigDiv">
+ <div id="app">
+ <div class="container">
+ <table v-for="server in servers" class="server">
+ <tbody>
+ <tr class="first-row"><td>Server IP:</td><td class="server-ip">{{ server.address }}</td></tr>
+ <tr><td>Uptime:</td><td>{{ formatSeconds(server.uptime) }}</td></tr>
+ <tr><td>Upload speed:</td><td>{{ formatBytes(server.uploadSpeed) +'/s' }}</td></tr>
+ <tr><td>Download speed:</td><td>{{ formatBytes(server.downloadSpeed) +'/s' }}</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 v-for="client in server.clients">
+ <td class="client-label">{{ client.address.split( ":" )[0] }}</td>
+ <td class="client-speed" :style="calcBackgroundStyle(client.uploadSpeed)"><span>{{ formatBytes(client.uploadSpeed) + '/s' }}</span></td>
+ </tr>
+ </tbody>
+ </table>
</div>
-
-</body>
-
-<script type="text/javascript">
-
-
-var lock = false;
-var lastTime = 0;
-var posibleNrOfRows = 23;
-
-var newAndOld = { 'new':{}, 'old':{} };
-var servClSpeeds = {'fresh':0};
-
-var sortedClSpeeds = {'fresh':0, 'nrOfServers':0};
-
-var serverStats = {};
-var serverNewAndOld = { 'new':{}, 'old':{} };
-
-// Get new data
-setInterval( function() {
- $.get('/data2.json', function(data) {
- if (data.timestamp < lastTime) lastTime = data.timestamp;
- if(data.timestamp === lastTime) return;
-
- var servers = data.servers;
- // take what we need; give nothing back
- var parsedServers = parseServers( servers );
-
- var parsedServersForStats = parseServersForStats( servers );
-
- newAndOld['new'] = parsedServers;
-
- serverNewAndOld['new'] = parsedServersForStats;
-
- update_servClSpeeds( newAndOld );
-
- update_serverStats( serverNewAndOld );
-
- if ( servClSpeeds.fresh !== 0 ) { update_sortedClSpeeds(servClSpeeds); }
-
- if ( sortedClSpeeds.fresh !== 0 ) {
-
- dostuff( sortedClSpeeds, serverStats );
- }
-
- servClSpeeds['fresh'] = 1;
- lastTime = data.timestamp;
- newAndOld['old'] = parsedServers;
- serverNewAndOld['old'] = parsedServersForStats;
-}, 'json').always(function() {
- });
-}, 2000);
-
-
-// changes the colors of the tds holding the download speed
-// color code and details follow bellow
-function makeItPretty( clArray ) {
- for ( var key in clArray ) {
- for ( var client in clArray[key]) {
- var wrappedIp = ipWrapper( client );
-
- var Bps = clArray[key][client];
- var td = $( "." + wrappedIp + " > " + ".speed");
- td.css("background", changeBackground1( Bps ) );
- }
- }
-}
-
-function changeBackground1 ( speed ) {
- var result = "";
- switch ( true ) {
- case speed < 1024:
- var proc = ( ( speed * 10 ) / 1024 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2)+"%, #8adb8b "+proc2+"%)";
- break;
- case ( speed >= 1024 && speed < 10240 ):
- var proc = ( ( speed * 10 ) / 10240 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2-10)+"%, #8adb8b "+(proc2+10)+"%)";
- break;
- case ( speed >= 10240 && speed < 102400 ):
- var proc = ((speed * 10) / 102400 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2-20)+"%, #8adb8b "+(proc2+20)+"%)";
- break;
-
- case ( speed >= 102400 && speed < 1048576 ):
- var proc = ((speed * 10) / 1048576 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2-30)+"%, #5cdb55 "+(proc2+30)+"%)";
- break;
- case ( speed >= 1048576 && speed < 10485760 ):
- var proc = ((speed * 10) / 10485760 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2-40)+"%, #5cdb55 "+(proc2+40)+"%)";
- break;
- case ( speed >= 10485760 && speed < 104857600 ):
- var proc = ( ( speed * 10 ) / 104857600 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #5cdb55 "+(proc2+50)+"%, #E0E0E0 "+(50-proc2)+"%)";
- break;
-
- case ( speed >= 104857600 && speed < 1073741824 ):
- var proc = ( ( speed * 10 ) / 1073741824 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #26a81f "+(proc2+60)+"%, #E0E0E0 "+(40-proc2)+"%)";
- break;
- case ( speed >= 1073741824 && speed <= 10737418240 ):
- var proc = ( ( speed * 10 ) / 10737418240 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #26a81f "+(proc2+70)+"%, #E0E0E0 "+(30-proc2)+"%)";
- break;
- case ( speed >= 10737418240 && speed <= 107374182400 ):
- var proc = ( ( speed * 10 ) / 107374182400 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #26a81f "+(proc2+80)+"%, #E0E0E0 "+(20-proc2)+"%)";
- break;
-
- case ( speed >= 107374182400 && speed < 1099511627776 ):
- var proc = ( ( speed * 10 ) / 1099511627776 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #056d00 "+(proc2+90)+"%, #E0E0E0 "+(10-proc2)+"%)";
- break;
- case ( speed > 10995116277760 ):
- var proc = ( ( speed * 10 ) / 10995116277760 );
- var proc2 = proc < 10 ? Math.round( proc ) : 10;
- result = " linear-gradient(90deg, #056d00 "+(proc2+90)+"%, #E0E0E0 "+(10-proc2)+"%)";
- break;
- }
- return result;
-}
-
-function changeBackground2 ( speed ) {
- var result = "";
- switch ( true ) {
- case speed < 524288:
- var proc = ( ( speed * 25 ) / 524288 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #E0E0E0 "+(100-proc2)+"%, #5fce33 "+proc2+"%)";
- break;
- case ( speed >= 524288 && speed < 1048576 ):
- var proc = ( ( speed * 25 ) / 1048576 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(-90deg, #5fce33 "+(100-proc2-25)+"%, #1f6b01 "+(proc2+25)+"%)";
- break;
-
- case ( speed >= 1048576 && speed < 536870912 ):
- var proc = ( ( speed * 25 ) / 536870912 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #ef396d "+(proc2+50)+"%, #1f6b01 "+(50-proc2)+"%)";
- break;
-
- case ( speed >= 536870912 && speed < 1073741824 ):
- var proc = ( ( speed * 25 ) / 1073741824 );
- var proc2 = Math.round( proc );
- result = " linear-gradient(90deg, #870014 "+(proc2+75)+"%, #ef396d "+(25-proc2)+"%)";
- break;
-
- case ( speed > 1073741824 ):
- result = " linear-gradient(90deg, #0285ea 100%, #ad001a 0%)";
- break;
- }
- return result;
-}
-// create as many divs as servers...append them to the bigDiv...if a small div already exists...move to
-// the next one
-function createTheDivz ( servArray ) {
- lock = true;
- for( i = 0; i < servArray.length; i++ ) {
-
- var wrappedIp = ipWrapper( servArray[i] );
- if ( $( "#div-" + wrappedIp ).length > 0 ) {
- $( "#div-" + wrappedIp ).remove();
- }
- var servDiv = $( '<div></div>' );
-
- servDiv.attr( 'id', "div-" + wrappedIp );
- servDiv.attr( 'style', "float:left" );
-
- $( "#bigDiv" ).append( servDiv );
- }
-}
-
-// simple function creates a table from a given server ip, its clients and a number of rows
-function buildTable ( servIp, clArray , nrOfRows, statsObj ) {
-
- // test to see if the number of rows to be shown exceeds the number of existing clients
- // if yes replace number of shown rows with the length of clients array(represents the nr of clients)
- var localRows = nrOfRows;
- if ( nrOfRows > clArray.length ) { localRows = clArray.length; }
-
-
- // if table object already exists delete it
- var wrappedIp = ipWrapper( servIp );
- if ( $( "#tbl-" + wrappedIp ).length > 0 ) {
- $( "#tbl-" + wrappedIp ).remove();
- }
- var servTable = $( "<table></table>" ).addClass( "clientTable" );
-
- servTable.attr( "id", "tbl-" + wrappedIp );
-
- var row1 = $( "<tr></tr>" ).addClass( 'row1' );
- var lCol1 = $( "<td></td>" ).addClass("serverLTd").text( "Server Ip: " );
- var rCol1 = $( "<td></td>" ).addClass("serverTd").text( servIp );
- row1.append( lCol1 );
- row1.append( rCol1 );
- servTable.append( row1 );
-
- for ( var key in statsObj[servIp] ) {
- if ( key === "address" || key === "timestamp") { continue; }
- var server = statsObj[servIp];
- var row = $( "<tr></tr>" );
- var lCol = $( "<td></td>" ).addClass("noBorder").text( key +": " );
- var value = server[key];
-
- var rCol = $( "<td></td>" ).addClass("noBorder").text( value );
-
- row.append( lCol );
- row.append( rCol );
- servTable.append( row );
- }
-
- for( var key in clArray ) {
-
-
- for( var client in clArray[key] ) {
- var row = $( "<tr></tr>" ).addClass( ipWrapper( client ) );
- var lCol = $( "<td></td>" ).text( client );
- var rCol = $( "<td></td>" ).addClass( 'speed' ).text( bytesToString( clArray[key][client] ) );
- }
- row.append( lCol );
- row.append( rCol );
-
- servTable.append( row );
- }
-
- $( "#div-" + wrappedIp ).append( servTable );
-}
-
-// do stuff stuff stuff stuffy stuff
-function dostuff( obj, statsObj ) {
- // the servers in an array sorted after the number of clients...index 0 the server with the most
- // clients...will also receive the leftmost table
- var leServers = sortServers( obj );
- if (lock == false ) { createTheDivz( leServers ) };
-
- for( i = 0; i < leServers.length; i++ ) {
-
- var wrappedIp = ipWrapper(leServers[i]);
- if(! $( "#div-" + wrappedIp ).length > 0 ) { continue; }
-
- var serverIp = leServers[i];
- var clientsArray = obj[serverIp];
-
- buildTable( serverIp, clientsArray, posibleNrOfRows, statsObj );
-
- makeItPretty( clientsArray );
- }
-}
-// little helper function to wrap the Ip and replace all the . with - and add a c at the start of the ip
-// needed for the html table because the rows cannot have an id with . in it
-function ipWrapper( givenIp ) {
- var localIp = givenIp.replace(/\./g, "-");
- return "c"+localIp;
-}
-
-// function that give us the servers ip which has the most clients
-function sortServers( obj ) {
-
- var keys = [];
-
- for(var key in obj) {
- if( key == 'fresh' || key == "nrOfServers" ) { continue; }
- keys.push( key );
- }
- var sortedKeys = keys.sort( function( a, b ) { return obj[b].length - obj[a].length; } );
-
- return sortedKeys;
-}
-
-
-function update_serverStats ( obj ) {
-
- for( var key in obj['new'] ) {
- var localObject = {};
- if( key in obj['old'] ) {
- var newObject = obj['new'][key];
-
- var oldObject = obj['old'][key];
-
- var stime = ( newObject.timestamp <= oldObject.timestamp ) ?
- 2 :
- ( newObject.timestamp - oldObject.timestamp ) / 1000;
-
- localObject['address'] = newObject.address;
- localObject['timestamp'] = newObject.timestamp < oldObject.timestamp ?
- newObject.timestamp :
- newObject.timestamp - oldObject.timestamp;
- localObject['uptime'] = Math.floor(newObject.uptime / ( 3600 * 24 ) ) + "d " +
- Math.floor(newObject.uptime / 3600 ) % 24 + "h " +
- Math.floor(newObject.uptime / 60 ) % 60 + "min";
-
- var uploadSpeed = newObject.bytesSent < oldObject.bytesSent ?
- 0 :
- Math.round(
- (newObject.bytesSent - oldObject.bytesSent)
- / stime);
- localObject['uploadSpeed'] = bytesToString(uploadSpeed);
-
- var downloadSpeed = newObject.bytesReceived < oldObject.bytesReceived ?
- 0 :
- Math.round(
- (newObject.bytesReceived - oldObject.bytesReceived)
- / stime);
- localObject['downloadSpeed'] = bytesToString(downloadSpeed);
-
- var localBytesSent = (newObject.bytesSent < oldObject.bytesSent) ?
- oldObject.bytesSent : newObject.bytesSent;
- localObject['Total sent'] = bytesToString( localBytesSent );
-
- var localBytesReceived = (newObject.bytesReceived < oldObject.bytesReceived) ?
- oldObject.bytesReceived : newObject.bytesReceived;
-
- localObject['Total received'] = bytesToString( localBytesReceived );
-
- serverStats[localObject.address] = localObject;
- }
- }
-}
-
-// update function for the servClSpeeds object
-function update_servClSpeeds ( obj ) {
- for( var key in obj['new'] ) {
- if( key in obj['old'] ) {
- var newObject = obj['new'][key];
- var oldObject = obj['old'][key];
- var resultObject = speedCalc( newObject, oldObject );
- servClSpeeds[key] = resultObject;
- }
+ </div>
+
+<script src="vue.min.js"></script>
+<script>
+
+var app = new Vue({
+ el: '#app',
+ data: {
+ data: {},
+ log: { server: {}, client: {} },
+ timespan: 120
+ },
+ computed: {
+ servers () {
+ if (!this.data.servers) return []
+ const servers = this.data.servers.slice(0)
+ servers.sort((a, b) => b.clients.length - a.clients.length)
+ servers.forEach(server => {
+ this.calcSpeed('server', server)
+ server.clients.forEach(client => {
+ this.calcSpeed('client', client, server.timestamp)
+ })
+ server.clients = server.clients.filter(client => client.uploadSpeed > 0)
+ server.clients.sort((a, b) => b.uploadSpeed - a.uploadSpeed)
+ })
+ return servers
}
-}
-
-// update function for the sortedClSpeeds
-function update_sortedClSpeeds ( obj ) {
- var nrOfServ = 0;
- for ( var key in obj ) {
- if ( key === 'fresh' ) { continue; }
- var clients = obj[key];
- var sortedArray = getSortedKeys( clients );
- sortedClSpeeds[key] = sortedArray;
- nrOfServ++;
- }
- sortedClSpeeds['fresh'] = 1;
- sortedClSpeeds['nrOfServers'] = nrOfServ;
-}
-
-// helper function for the sortIps() function
-function getSortedKeys( obj ) {
- sortedIps = [];
- var keys = [];
- for( var key in obj ) keys.push( key );
- var sortedKeys = keys.sort( function( a, b ) { return obj[b] - obj[a]; } );
-
- for( var i = 0; i < sortedKeys.length; i++) {
- var smallObj = {};
- var Ip = sortedKeys[i];
- var speed = obj[sortedKeys[i]];
- smallObj[Ip] = speed;
- sortedIps.push( smallObj );
+ },
+ methods: {
+ async updateData () {
+ const response = await fetch('/data2.json')
+ this.data = await response.json()
+ setTimeout(this.updateData, 2000)
+ },
+ calcSpeed (type, obj, timestamp) {
+ var log = this.log[type][obj.address]
+ log = this.log[type][obj.address] = log ? log.filter(x => x.timestamp > this.data.timestamp - this.timespan * 1000) : []
+ if (timestamp) obj.timestamp = timestamp
+ log.push(obj)
+ if (log.length > 0) {
+ const a = log[0]
+ const b = log[log.length - 1]
+ const time = (b.timestamp - a.timestamp) / 1000
+ obj.uploadSpeed = (b.bytesSent - a.bytesSent) / time
+ if (type === 'server') obj.downloadSpeed = (b.bytesReceived - a.bytesReceived) / time
+ }
+ },
+ formatBytes (bytes) {
+ if (bytes < 1024) return bytes.toFixed(2) + ' Bytes'
+ 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 '
+ + Math.floor(seconds / 3600 ) % 24 + 'h '
+ + Math.floor(seconds / 60 ) % 60 + 'min' )
+ },
+ calcBackgroundStyle (speed) {
+ const percent = Math.round(Math.max(0, Math.min(100, Math.log(1 + speed * (100000 / 1073741824)) / Math.log(100000) * 100)))
+ var color = '#056d00'
+ if (speed < 1048576) color = '#8adb8b'
+ else if (speed < 10485760) color = '#5cdb55'
+ else if (speed < 104857600) color = '#26a81f'
+ return { background: `linear-gradient(90deg, ${color} ${percent}%, #e0e0e0 ${percent}%)` }
}
- return sortedIps;
-}
-
-// function that takes the servers-with-clientspeeds object and returns another object that has
-// serverips as keys and as values an array of sorted ips with the leftmost element beeing the ip with the
-// greatest speed and the rightmost one, the one with the smallest speed
-// each element of the array is a string consisting of ip:socket#speedInBytesPerSecond
-function sortIps ( obj ) {
- var localObject = {};
- for( var servip in obj ) {
- var localObject = obj[servip];
- var localArray = getSortedKeys( localObject );
- localObject[serverip] = localArray;
- }
- return localObject;
-}
-
-// function takes new and old parsedServer object and returns a new object where the traffic of each
-// client is now replaced by speed in bytes/s
-function speedCalc( newO, oldO ){
- var localObject = {};
-
- // time in seconds calculated from the difference of timestamps or default 2
- var stime = ( newO.timestamp <= oldO.timestamp ) ?
- 2 :
- ( newO.timestamp - oldO.timestamp ) / 1000;
- for( var ip in newO.clients ) {
- if( ip in oldO.clients ) {
- var bitesDelta = newO.clients[ip] - oldO.clients[ip];
-
- if( bitesDelta < 0 ) { bitesDelta = newO.clients[ip]; }
- // take only the active clients
- if( bitesDelta != 0 ) {
- var speed = Math.round( bitesDelta / stime );
-
- var newClIp = ip.split( ":" )[0];
-
- if( newClIp in localObject ) {
- localObject[newClIp] = localObject[newClIp] + speed;
- } else {
- localObject[newClIp] = speed;
- }
- }
- }
- }
- return localObject;
-}
-
-function parseServersForStats( servers ) {
- var parsedServers = {};
- var numberOfClients = 0;
-
- for (var i in servers ) {
- numberOfClients += servers[i].clientCount;
- newServerObject = {};
- var timestamp = servers[i].timestamp;
- newServerObject['timestamp'] = timestamp;
-
- var serverIp = servers[i].address;
- newServerObject['address'] = serverIp;
-
- newServerObject['uptime'] = servers[i].uptime;
- newServerObject['bytesSent'] = servers[i].bytesSent;
- newServerObject['bytesReceived'] = servers[i].bytesReceived;
-
- parsedServers[serverIp] = newServerObject;
- }
- return parsedServers;
-}
-
-// takes the whole lot of servers and returnes an object whose keys are the server ip and each ip has
-// a timestamp and an adjecent clients object
-// clients object is just key:value pairs
-function parseServers( servers ) {
- var parsedServers = {};
- // servers is a array containing server objects
- for( var i in servers ) {
- // object has .clients argument and .timestamp argument
- newServerObject = {};
- // save and write timestamp of the server
- var timestamp = servers[i].timestamp;
- newServerObject['timestamp'] = timestamp;
- // iterate over clients array and save ip:bytes pairs in local object
- var clientsObject = {};
-
- var clients = servers[i].clients;
- for( var ii in clients ) {
- var key = clients[ii].address;
- var value = clients[ii].bytesSent;
- clientsObject[key] = value;
- }
- newServerObject['clients'] = clientsObject;
-
- var serverIp = servers[i].address;
- // object shoul know its own name; in this case its ip
- newServerObject['address'] = serverIp;
-
- parsedServers[serverIp] = newServerObject;
- }
- return parsedServers;
-}
-
-// Convert bytes to GiB or TiB and return a string in form "10,23 GiB"
-function bytesToString( bytes ) {
- var convertedValue;
- var unit;
- if( bytes >= 1099511627776 ) {
- convertedValue = Math.round( ( bytes / 1099511627776) * 100 ) / 100 ;
- unit = " TiB";
- } else if( bytes >= 1073741824 ) {
- convertedValue = Math.round( ( bytes / 1073741824) * 100 ) / 100 ;
- unit = " GiB";
- } else if( bytes >= 1048576 ) {
- convertedValue = Math.round( ( bytes / 1048576) * 100 ) / 100 ;
- unit = " MiB";
- } else if( bytes >= 1024 ) {
- convertedValue = Math.round( ( bytes / 1024) * 100 ) / 100 ;
- unit = " KiB";
- } else {
- convertedValue = Math.round( bytes );
- unit = " B";
- }
- return convertedValue + unit;
-}
-</script> \ No newline at end of file
+ },
+ created () {
+ const urlParams = new URLSearchParams(window.location.search)
+ this.timespan = parseInt(urlParams.get('timespan')) || 120
+ this.updateData()
+ }
+})
+
+</script>
+</body>
+</html>
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-11-21 14:31:42 +0100