summaryrefslogblamecommitdiffstats
path: root/static/status-dnbd3.html
blob: 1ac61553bf6f76099fd765985e944d974c52b15f (plain) (tree)
1
2
3
4
5
6
7
8
9







                                                                      
                                                           







                                                                                 
                            



                                                                    
                                                 


                                                                                                                                            
                                                

                                      




                                                 

                      
                        



                                                                 
                             



                                    
                                        
                    
                                                                                                                                   



                                               

                                                           
 

                                     
                              
                               
 


                                                                



             
                                                            

                                                     
                                           






                                                                                                            
                                

                                                     
                                         



                                   
                                


         












                                                                                           

                                                  


                                         



                                                                       






                                                                                       



                                  
                                                





                                                  




                                                                                       











                                              

                                                     
                      

                                                                




                                
                                                         
                                                                                           

                                                                   





                                                        
                                         
                                 
                                      
                     
                                
                                                                                      
                                
                          
                                            
                                                                            
                                       


                      
 



                               
                             








                                                      
 



                                                    






                                                                                         




                                                                  






                                                                                              









                                                                  

































































                                                                                                           

                 
               
                         
                                        

                                                                 




                                        





                                  





















                                                                                                                                 
                 













                                                                                  




                                                                                                                           

                                                                   


         
 
 





                                                   

                                                                                                                                          
                                                                                                 
                                       
             


                                                                                    
             



                                                                                                                                        
             


















                                                                  

     

         
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <script src="d3.v3.min.js"></script>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script src="smoothie.js"></script>
    <style type="text/css">
        #graph, #statistics, #traffic {position: absolute }
        .circle, .link { stroke: #56f; stroke-width: 3px; stroke-opacity: 0.75; }
        .nodetext { pointer-events: none; font: 10px sans-serif; }
        body { width:100%; height:100%; margin:0; padding:0; overflow: hidden; }
        svg, div, canvas { margin:0; padding:0; }
    </style>
</head>
<body>
<div id="graph"></div>
<div id="statistics"> </div>
<div> <canvas id="traffic" width="100%" height="150"></canvas></div>
</body>
<script type="text/javascript">

// Initialize the statistics chart at the bottom.
var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter});
smoothie.streamTo(document.getElementById("traffic"), 2000);

// For coloring the servers and the chart-lines.
var colorList = d3.scale.category20();

// IDs need to begin with a letter.
function makeId(prefix, text) {
        return prefix + text.replace(/\./g, "-");
}

function myGraph(el) {

    var changed = false;

    // Add and remove elements on the graph object
    this.addNode = function (id, radius, color, distance, x, y) {
        title = id;
        id = makeId("a", id);
        if (!distance) distance = 5;
        distance *= w / 2000;
        if (!radius) radius = 5;
        var node = findNode(id);
        // Add node, if it doesn't exist
        if (!node) {
            nodes.push({"id":id, "title": title, "distance":distance, "radius":radius, "lifetime":2, "x":x, "y":y, "color":color});
            changed = true;
        } else {
            var visNode = vis.select("#" + id);
            if (visNode) {
                visNode.select("circle").attr("r", radius);
            }

            node.distance = distance;
            node.radius = radius;
            node.lifetime = 2;
            node.color = color;

            var s = servers[title];
            if (s && visNode) {
                visNode.select("circle").style("fill", s.color);
            }
        }
    }

    // Remove nodes/edges that haven't reported for a while.
    this.decay = function () {
        for (var i = nodes.length - 1; i >= 0; --i) {
            if ( nodes[i].lifetime <= 0 ) {
                for (var j = links.length - 1; j >= 0; --j) {
                    if ((links[j].source === nodes[i]) || (links[j].target === nodes[i])) links.splice(j,1);
                }
                nodes.splice(i, 1);
                changed = true;
                continue;
            }
            nodes[i].lifetime--;
        }
        for (var i = links.length - 1; i >= 0; --i) {
            if (links[i].lifetime <= 0) {
                links.splice(i, 1);
                changed = true;
                continue;
            }
            links[i].lifetime--;
        }
    }

//    this.removeNode = function (id) {
//        var i = 0;
//        var n = findNode(id);
//        while (i < links.length) {
//            if ((links[i]['source'] === n)||(links[i]['target'] == n)) links.splice(i,1);
//            else i++;
//        }
//        var index = findNodeIndex(id);
//        if(index !== undefined) {
//            nodes.splice(index, 1);
//            changed = true;
//        }
//    }

    this.addLink = function (sourceId, targetId) {

        sourceId = makeId("a", sourceId);
        targetId = makeId("a", targetId);
        var sourceNode = findNode(sourceId);
        var targetNode = findNode(targetId);

        if ((sourceNode !== undefined) && (targetNode !== undefined)) {
            var link = findLink(sourceNode, targetNode);
            if (!link) {
                links.push({"source": sourceNode, "target": targetNode, "lifetime":5});
                changed = true;
            } else {
                link.lifetime = 5;
            }
        }
    }

    var findNode = function (id) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].id === id)
                return nodes[i]
        }
    }

    var findLink = function (sourceId, targetId) {
        for (var i = 0; i < links.length; ++i) {
            if ( (links[i].source === sourceId && links[i].target === targetId)
                    || (links[i].source === targetId && links[i].target === sourceId) )
                return links[i];
        }
    }

    var findNodeIndex = function (id) {
        for (var i=0; i < nodes.length; i++) {
            if (nodes[i].id === id)
                return i
        };
    }

    var w = 100, h = 100;

    var updateBounds = function() {
        var width = window.innerWidth;
        // Width for the graph and the statistics div
        w = width/3*2;
        // Chart needs to fit under the graph and the statistics
        h = window.innerHeight - 150;
        vis.attr("width", w);
        vis.attr("height", h);
        force.size([w, h]);
        $(el).attr("width", w);
        $(el).attr("height", h);
        // Positions for statistics and the traffic graph
        $("#statistics").attr("width", w/2).css("width", w/2 + "px").css("left", w + "px");
        $("#statistics").attr("height", h).css("height", h + "px");
        $("#traffic").attr("width", width).css("top", h + "px");
    }

    var vis = this.vis = d3.select(el).append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    // Settings for movement of the graph
    var force = d3.layout.force()
        // Force of center gravitation
        .gravity(.02)
        // Distance of the links
        .distance(function(bla) { return bla.source.distance * bla.target.distance; })
        // Strength of the links
        .linkStrength(0.5)
        // Force with which the links "pull"
        .charge(function(bla) { return -bla.distance * 10 * bla.distance; })
        // Friction for the graph nodes
        .friction(0.6)
        .size([w, h]);


    var nodes = force.nodes(),
        links = force.links();

    this.update = function () {
        if (!changed) return;
            update();
    }

    var update = function () {
        changed = false;

        var node = vis.selectAll("g.node")
            .data(nodes, function(d) { return d.id;});


        var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .attr("id", function(d) { return d.id;})
            .on("mouseover", function(d) {
                // Highlight statistics div
                var statDiv = document.getElementById(makeId("b", d.title))
                if (statDiv){
                    statDiv.setAttribute("style", "background-color:blue; color:white;");
                }

                // Increase line width of server in chart
                var s = servers[d.title];
                if (!s) return;
                smoothie.seriesSet[s.index].options.lineWidth = 4;
            })
            .on("mouseout", function(d) {
                // Make statistics div normal again
                var statDiv = document.getElementById(makeId("b", d.title))
                if (statDiv){
                        statDiv.setAttribute("style", "background-color:white; color:black;");
                }

                // Reset line width
                var s = servers[d.title];
                if (!s) return;
                smoothie.seriesSet[s.index].options.lineWidth = 2;
            });

        nodeEnter.append("circle")
            .attr("class", "circle")
            .attr("r", function(d) { return d.radius; })
            .style("fill", function(d) { return d.color; });


        nodeEnter.append("text")
            .attr("class", "nodetext")
            .attr("dx", -32)
            .attr("dy", "-1em")
            .text(function(d) {return d.title});

        node.exit().remove();

        var link = vis.selectAll("line.link")
            .data(links, function(d) { return d.source.id + "-" + d.target.id; });

        link.enter().insert("line")
            .attr("class", "link");

        link.exit().remove();

        vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').append(e)});

        var render = function() {
            var fixX = function(x) {
                return (x - lx) * scale + 20 + offX;
            }
            var fixY = function(y) {
                return (y - ly) * scale + 20 + offY;
            }
            var lx = 1000, ly = 1000, ux = -1000, uy = -1000;
            for (var i = 0; i < nodes.length; ++i) {
                if (nodes[i].x < lx) lx = nodes[i].x;
                if (nodes[i].x > ux) ux = nodes[i].x;
                if (nodes[i].y < ly) ly = nodes[i].y;
                if (nodes[i].y > uy) uy = nodes[i].y;
            }
            var width = (ux - lx), height = (uy - ly);
            var scale;
            var offX = 0, offY = 0;
            if ( (width / w) > (height / h) ) {
                    scale = (w - 40) / width;
                    offY = (h - (height * scale + 20)) / 2;
            } else {
                    scale = (h - 40) / height;
                    offX = (w - (width * scale + 20)) / 2;
            }
          link.attr("x1", function(d) { return fixX(d.source.x); })
              .attr("y1", function(d) { return fixY(d.source.y); })
              .attr("x2", function(d) { return fixX(d.target.x); })
              .attr("y2", function(d) { return fixY(d.target.y); });

          node.attr("transform", function(d) { return "translate(" + fixX(d.x) + "," + fixY(d.y) + ")"; });
        };

        force.on("tick", render);

        updateBounds();
        force.start();
    }

    update();
    $( window ).resize( update );
}

graph = new myGraph("#graph");

var servers = {};
var serverCount = 0;

var lastTime = 0;

// Get new data
setInterval( function() {
    $.get('/data.json', function(data) {
        if (data.timestamp < lastTime) lastTime = data.timestamp;
        if(data.timestamp === lastTime) return;
        var g = data.graph;
        var stats = data.servers;
        updateGraph(g, data);
        updateTrafficGraph(stats, data);
        updateTextStatistics(stats);
        lastTime = data.timestamp;
}, 'json').always(function() {
    graph.decay();
    graph.update();
    });
}, 2000);

// Update data of the graph
function updateGraph(g, data){
    if (g) {
        for (var i = 0; i < g.nodes.length; ++i) {
            graph.addNode(g.nodes[i].name, g.nodes[i].radius, g.nodes[i].color, g.nodes[i].distance, g.nodes[i].x, g.nodes[i].y);
        }
        for (var i = 0; i < g.edges.length; ++i) {
            graph.addLink(g.edges[i].source, g.edges[i].target);
        }
    }
}

// Update data of the statistics divs
function updateTextStatistics(stats){
    if (stats) {
        for (var i = 0; i < stats.length; ++i) {
            var server = document.getElementById(makeId("b", stats[i].address));
                if (!server){
                    $("#statistics").append("<div id=" + makeId ("b", stats[i].address) + "></div>");
                    server = document.getElementById(makeId("b", stats[i].address));

                }
            var sent = Math.floor(stats[i].bytesSent / Math.pow(1024, 3));
            var received = Math.floor(stats[i].bytesReceived / Math.pow(1024, 3));
            var unitSent = " GiB";
            var unitReceived = " GiB";
            if (sent > 1024) {
                sent = Math.round((sent/1024)*100)/100;
                unitSent = " TiB";
            }
            if (received > 1024) {
                received = Math.round((received/1024)*100)/100;
                unitReceived = " TiB";
            }

            // Generate the HTML string
            server.innerHTML = "<p><b> Server: " + stats[i].address + "</b><br>"
                + "Number of clients: "
                + stats[i].clientCount + "<br>"
                + "uptime: " + Math.floor(stats[i].uptime / (3600 * 24)) + "d "
                + Math.floor(stats[i].uptime / 3600) % 24 + "h " + Math.floor((stats[i].uptime) / 60) % 60 + "min" + "<br>"
                + "Sent: " + sent + unitSent  + " <br>"
                + "Received: " + received + unitReceived + " </p>";
        }
    }
}


// Update the traffic graph
function updateTrafficGraph(stats, data){
    if (stats) {
        for (var i = 0; i < stats.length; ++i) {
            var server = servers[stats[i].address];
            if (!server) {
                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ };
                server.color = colorList(stats[i].address);
                smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
//                console.log("Added");
            }
            // Server seems to have rebootet, redo values but add no point to chart.
            if (server['lastUptime'] > stats[i].uptime) {
                server['lastUptime'] = 0;
            }

            // Add points to graph
            if (server['lastUptime'] != 0) {
                server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - lastTime));
            }

            server['lastUptime'] = stats[i].uptime;
            server['lastSent'] = stats[i].bytesSent;

//            if (Math.random() > .8){
//                var delServ = server;
//                setTimeout(function() {
//                        smoothie.removeTimeSeries(delServ.line);
//                        for (var srv in servers) {
//                                if (srv.index > delServ.index)
//                                        srv.index--;
//                        }
//                        serverCount--;
//                }, 30000);
//                delete servers[stats[i].address];
//                console.log("Baleeted");
//                console.log(servers);
//            }
        }
    }
}

</script>