diff options
| -rw-r--r-- | static/new_status-dnbd3.html | 581 |
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 |