summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVictor Mocanu2017-02-09 14:14:34 +0100
committerVictor Mocanu2017-02-09 14:14:34 +0100
commitaea45b75782d4cbe686b89723a980ea21cd59ffe (patch)
tree17496055de067c7712368cf4a93fae77de2e9c01
parentAddresses changed (should be configurable...) (diff)
downloaddnbd3-status-aea45b75782d4cbe686b89723a980ea21cd59ffe.tar.gz
dnbd3-status-aea45b75782d4cbe686b89723a980ea21cd59ffe.tar.xz
dnbd3-status-aea45b75782d4cbe686b89723a980ea21cd59ffe.zip
added new_dnbd3-status.html
Diffstat
-rw-r--r--static/new_status-dnbd3.html581
1 files changed, 581 insertions, 0 deletions
diff --git a/static/new_status-dnbd3.html b/static/new_status-dnbd3.html
new file mode 100644
index 0000000..f4505c4
--- /dev/null
+++ b/static/new_status-dnbd3.html
@@ -0,0 +1,581 @@
+<!DOCTYPE html>
+<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>
+</head>
+<body>
+ <div id="bigDiv">
+ <!-- <div style="float:left" >
+ <table class="clientTable" id="Table">
+ <tbody>
+ <tr class="firstRow">
+ <td>Client Ip</td><td class='speed'>Download Speed from </td>
+ </tr>
+ </tbody>
+ </table> -->
+ </div>
+ <!--
+ <div style="float:left">
+ <table class="clientTable" id="otherTable">
+ <tbody>
+ <tr class="firstRow">
+ <td>Client Ip</td><td class='speed'>Client Speed</td>
+ </tr>
+ </tbody>
+ </table>
+ </div> -->
+ <div id="statistics"><div id="debug"></div></div>
+
+ <div> <canvas id="traffic" width="100%" height="150"></canvas></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 ) {
+ // TODO:
+ // do stuff with the sorted stuff and stuff and stuff
+ 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 );
+ // -- TODO figure a way to play with the colours again...consider using the whole object or just each array
+ // try both...
+ }
+}
+// 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;
+ }
+ }
+}
+
+// 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 );
+ }
+ 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
+ // TODO: ask about same timestamp
+ 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;
+}
+
+
+function serversForStats( servers ) {
+
+}
+// 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
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-11-21 10:35:00 +0100