Added text with statistics about servers to the html file.

author: Stephan Schwaer 2015-05-22 18:28:38 +0200
committer: Stephan Schwaer 2015-05-22 18:28:38 +0200
commit: f86634a2dfb7997b8673fffbb092fd80ad897f80 (patch)
tree: ad8eebf98f1bd52c3e29cbdf9ea46c794dfa12ed /static
parent: Added the html file and needed libraries. (diff)
download: dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.tar.gz
dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.tar.xz
dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.zip
1 files changed, 144 insertions, 79 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 5e81657..5f02fa3 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -6,6 +6,7 @@
     <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; }
@@ -14,53 +15,61 @@
 </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);
 
-//var line1 = new TimeSeries();
-//smoothie.addTimeSeries(line1);
+// 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;
+    var changed = false;
 
     // Add and remove elements on the graph object
     this.addNode = function (id, radius, color, distance, x, y) {
         title = id;
-        id = 'a' + id.replace(/\./g, "-");
+        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, "active":2, "x":x, "y":y, "color":color});
+            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("title").text(id);
                 visNode.select("circle").attr("r", radius);
             }
+
             node.distance = distance;
             node.radius = radius;
-            node.active = 2;
+            node.lifetime = 2;
             node.color = color;
+
             var s = servers[title];
             if (s && visNode) {
                 visNode.select("circle").style("fill", s.color);
-                //visNode.select("#" + id).select("circle").style("stroke", 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].active <= 0 ) {
+            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);
                 }
@@ -68,64 +77,63 @@ function myGraph(el) {
                 changed = true;
                 continue;
             }
-            nodes[i].active--;
+            nodes[i].lifetime--;
         }
         for (var i = links.length - 1; i >= 0; --i) {
-            if (links[i].active <= 0) {
+            if (links[i].lifetime <= 0) {
                 links.splice(i, 1);
                 changed = true;
                 continue;
             }
-            links[i].active--;
+            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;
-            //update();
-        }
-    }
+//    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 = 'a' + sourceId.replace(/\./g, "-");
-        targetId = 'a' + targetId.replace(/\./g, "-");
+
+        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, "active":5});
-                    //update();
-                    changed = true;
-                } else {
-                        link.active = 5;
-                }
+            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++) {
+        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];
-            }
+        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) {
@@ -138,34 +146,46 @@ function myGraph(el) {
     var w = 100, h = 100;
 
     var updateBounds = function() {
-        w = window.innerWidth;
-        h = window.innerHeight - 150 - 10;
+        var width = window.innerWidth;
+        // Width for the graph and the statistics div
+        w = width/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);
-        $("#traffic").attr("width", w);
+        // Positions for statistics and the traffic graph
+        $("#statistics").attr("width", w).css("width", w + "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;
+        if (!changed) return;
             update();
     }
 
@@ -175,15 +195,30 @@ function myGraph(el) {
         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;
@@ -194,7 +229,6 @@ function myGraph(el) {
             .attr("r", function(d) { return d.radius; })
             .style("fill", function(d) { return d.color; });
 
-        nodeEnter.append("title");
 
         nodeEnter.append("text")
             .attr("class", "nodetext")
@@ -261,39 +295,70 @@ graph = new myGraph("#graph");
 var servers = {};
 var serverCount = 0;
 
+// Get new data
 setInterval( function() {
-        $.get('/data.json', function(data) {
-                var g = data.graph;
-                var stats = data.servers;
-                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);
-                    }
-                }
-                if (stats) {
-                    for (var i = 0; i < stats.length; ++i) {
-                        var server = servers[stats[i].address];
-                        if (!server) {
-                            servers[stats[i].address] = server = { 'lastTime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ };
-                            server.color = colorList(server.index);
-                            smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
-                        }
-                        if (server['lastTime'] != 0) {
-                            server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - server.lastTime));
-                            //smoothie.seriesSet[server.index].options.strokeStyle = 'rgba(0,255,0,0.93)';
-                        }
-                        server['lastTime'] = data.timestamp;
-                        server['lastSent'] = stats[i].bytesSent;
-                    }
+    $.get('/data.json', function(data) {
+        var g = data.graph;
+        var stats = data.servers;
+        updateGraph(g, data);
+        updateTrafficGraph(stats, data);
+        updateTextStatistics(stats);
+        }, '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));
+
                 }
+            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: " + Math.floor(stats[i].bytesSent / Math.pow(1024, 3)) + "GiB <br>"
+                + "Received: " + Math.floor(stats[i].bytesReceived / Math.pow(1024, 3)) + "GiB </p>";
+        }
+    }
+}
 
-                }, 'json').always(function() {
-                        graph.decay();
-                        graph.update();
-                });
-        }, 2000);
+// 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 = { 'lastTime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ };
+                server.color = colorList(server.index);
+                smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
+            }
+            if (server['lastTime'] != 0) {
+                server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - server.lastTime));
+            }
+            server['lastTime'] = data.timestamp;
+            server['lastSent'] = stats[i].bytesSent;
+            }
+    }
+}
 
 </script>
author	Stephan Schwaer	2015-05-22 18:28:38 +0200
committer	Stephan Schwaer	2015-05-22 18:28:38 +0200
commit	f86634a2dfb7997b8673fffbb092fd80ad897f80 (patch)
tree	ad8eebf98f1bd52c3e29cbdf9ea46c794dfa12ed /static
parent	Added the html file and needed libraries. (diff)
download	dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.tar.gz dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.tar.xz dnbd3-status-f86634a2dfb7997b8673fffbb092fd80ad897f80.zip