bum 0.0.4 → 0.0.12

data/public/testdata/one.js

@@ -0,0 +1,79 @@
+var data = {  
+    "links": [    
+    {      "type": "slaves",      "target": 5,      "source": 1,      "state": "active"    },
+    {
+      "type": "slaves",
+      "target": 0,
+      "source": 1,
+      "state": "active"
+    },
+    {
+      "type": "stats_backends",
+      "target": 4,
+      "source": 2,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 3,
+      "source": 2,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 5,
+      "source": 3,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 3,
+      "state": "active"
+    },
+    {
+      "type": "db_write",
+      "target": 1,
+      "source": 3,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 5,
+      "source": 4,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 4,
+      "state": "active"
+    }
+  ],
+  "nodes": [
+    {
+      "role": "db",
+      "addr": "172.16.168.7"
+    },
+    {
+      "role": "db",
+      "addr": "172.16.168.6"
+    },
+    {
+      "role": "proxy",
+      "addr": "172.16.168.17"
+    },
+    {
+      "role": "rails",
+      "addr": "172.16.168.18"
+    },
+    {
+      "role": "stats",
+      "addr": "172.16.168.80"
+    },
+    {
+      "role": "db",
+      "addr": "172.16.168.15"
+    }
+  ]
+};

data/public/testdata/withnames.js

@@ -0,0 +1,198 @@
+window.data = {  "links": [    {      "type": "db_read",      "target": 9,      "source": 1,      "state": "active"    },    {
+      "type": "db_read",
+      "target": 0,
+      "source": 1,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 9,
+      "source": 2,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 2,
+      "state": "active"
+    },
+    {
+      "type": "db_write",
+      "target": 3,
+      "source": 2,
+      "state": "active"
+    },
+    {
+      "type": "slaves",
+      "target": 9,
+      "source": 3,
+      "state": "active"
+    },
+    {
+      "type": "slaves",
+      "target": 0,
+      "source": 3,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 9,
+      "source": 4,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 4,
+      "state": "active"
+    },
+    {
+      "type": "db_write",
+      "target": 3,
+      "source": 4,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 9,
+      "source": 5,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 5,
+      "state": "active"
+    },
+    {
+      "type": "db_write",
+      "target": 3,
+      "source": 5,
+      "state": "active"
+    },
+    {
+      "type": "stats_backends",
+      "target": 7,
+      "source": 6,
+      "state": "active"
+    },
+    {
+      "type": "stats_backends",
+      "target": 1,
+      "source": 6,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 2,
+      "source": 6,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 5,
+      "source": 6,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 4,
+      "source": 6,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 9,
+      "source": 7,
+      "state": "active"
+    },
+    {
+      "type": "db_read",
+      "target": 0,
+      "source": 7,
+      "state": "active"
+    },
+    {
+      "type": "stats_backends",
+      "target": 7,
+      "source": 8,
+      "state": "active"
+    },
+    {
+      "type": "stats_backends",
+      "target": 1,
+      "source": 8,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 2,
+      "source": 8,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 5,
+      "source": 8,
+      "state": "active"
+    },
+    {
+      "type": "backends",
+      "target": 4,
+      "source": 8,
+      "state": "active"
+    }
+  ],
+  "nodes": [
+    {
+      "name": "tyler",
+      "role": "db",
+      "addr": "172.16.168.81"
+    },
+    {
+      "name": "tyler",
+      "role": "stats",
+      "addr": "172.16.168.20"
+    },
+    {
+      "name": "tyler",
+      "role": "rails",
+      "addr": "172.16.168.8"
+    },
+    {
+      "name": "tyler",
+      "role": "db",
+      "addr": "172.16.168.80"
+    },
+    {
+      "name": "tyler",
+      "role": "rails",
+      "addr": "172.16.168.15"
+    },
+    {
+      "name": "tyler",
+      "role": "rails",
+      "addr": "172.16.168.7"
+    },
+    {
+      "name": "tyler",
+      "role": "proxy",
+      "addr": "172.16.168.6"
+    },
+    {
+      "name": "tyler",
+      "role": "stats",
+      "addr": "172.16.168.17"
+    },
+    {
+      "name": "tyler",
+      "role": "proxy",
+      "addr": "172.16.168.18"
+    },
+    {
+      "name": "tyler",
+      "role": "db",
+      "addr": "172.16.168.1"
+    }
+  ]
+};

data/public/viz.js

@@ -0,0 +1,289 @@
+/*
+ * Distributed Network Visualization
+ * d3 visualization
+ * By Ryan Sandor Richards (ryan@fastly.com)
+ */
+
+// Basic options for the visualization
+function viz(data) {
+var w = 974,
+  h = 718,
+  nodeRadius = 36;
+  
+// Set the width and height of the svg container
+$('#network').css({ width: w, height: h });
+
+
+/*
+ * Events
+ */
+var events = {
+  'mouseenter .node': function(e) {
+  },
+  
+  'mouseleave .node': function(e) {
+  },
+  
+  'click .node': function(e) {
+      var ele = e.currentTarget;
+      var index = ele.getAttribute('data-index');
+      if (index !== undefined) {
+          var node = data.nodes[index];
+          if (node) {
+              if (node.status == 'enabled') {
+                  for (var k in ele.className) {
+                      ele.className[k] += ' disabled'
+                  }
+                  $.post('/disable', { addr: node.addr });
+                  node.status = 'disabled';
+              } else {
+                  for (var k in ele.className) {
+                      ele.className[k] = ele.className[k].replace('disabled','');
+                  }
+                  $.post('/enable', { addr: node.addr });
+                  node.status = 'enabled';
+              }
+          }
+      }
+  },
+  
+  'click .link': function(e) {
+      var ele = e.currentTarget;
+      var index = ele.getAttribute('data-index');
+      if (index !== undefined) {
+          var link = data.links[index];
+          if (link) {
+              if (link.state == 'active') {
+                  for (var k in ele.className) {
+                      ele.className[k] += ' disabled'
+                  }
+                  $.post('/disable_link', { addr: link.source.addr, link_addr: link.target.addr, type: link.type });
+                  link.state = 'disabled';
+              } else {
+                  for (var k in ele.className) {
+                      ele.className[k] = ele.className[k].replace('disabled','');
+                  }
+                  $.post('/enable_link', { addr: link.source.addr, link_addr: link.target.addr, type: link.type });
+                  link.state = 'active';
+              }
+          }
+      }
+  },
+  
+    'click .name': function(e) {
+        var index = e.currentTarget.getAttribute('data-index');
+        if (index !== undefined) {
+            var node = data.nodes[index];
+            if (node) {
+                window.open('http://' + node.addr + ':9400/two', '_blank');
+            }
+        }
+    }
+};
+
+for (var k in events) {
+  var callback = events[k],
+    parts = k.match(/([^\s]+)\s+(.*)/),
+    name = parts[1],
+    sel = parts[2];
+  $('#network ' + sel).live(name, callback);
+}
+
+$(window).keydown(function(e) {
+  // t == 84
+});
+
+
+function addNode(n) {
+  data.nodes.push(n);
+  force.start();
+  
+  var newNode = vis.selectAll("circle.node")
+    .data(data.nodes)
+    .enter().append("svg:circle")
+    .attr("class", function(d) { return "node " + d.role; })
+    .attr("cx", function(d) { return d.x; })
+    .attr("cy", function(d) { return d.y; })
+    .attr("r", nodeRadius)
+    .call(force.drag);
+  
+  force.on("tick", function() {
+    newNode.attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+  });
+}
+
+function addLink(l) {
+  data.links.push(l);
+  force.start();
+  
+  var newLink = vis.selectAll("line.link")
+    .data(data.links)
+    .enter().insert("svg:line", ".link")
+    .attr("class", function(d) { return 'link ' + d.state; })
+    .attr("x1", function(d) { return d.source.x; })
+    .attr("y1", function(d) { return d.source.y; })
+    .attr("x2", function(d) { return d.target.x; })
+    .attr("y2", function(d) { return d.target.y; });
+  
+  force.on('tick', function() {
+    newLink.attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  });
+}
+
+
+// Add Node behavior
+$('.add_node').click(function(e) {  
+  addNode({ "role": null, "addr": "172.16.168.255" });
+});
+
+$('.add_node_with_link').click(function(e) {
+  addNode({ "role": null, "addr": "172.16.168.255" });
+  addLink({
+    "type": "db_read",
+    "target": 0,
+    "source": data.nodes.length -1,
+    "state": "active"
+  });  
+});
+
+
+/*
+ * Build the SVG container
+ */
+var vis = d3.select("#network")
+  .append("svg:svg")
+  .attr("width", w)
+  .attr("height", h);
+
+/*
+ * The force layout
+ */
+var force = d3.layout.force()
+  .charge(-3600)
+  .gravity(0.18)
+  .friction(0.75)
+  .linkDistance(function(link) {
+    var source = link.source.role,
+        target = link.target.role;
+      
+    if (source == target)
+      return 130;
+      
+    if (source == 'proxy' || target == 'proxy') 
+      return 300;
+      
+    return 260;
+  })
+  .nodes(data.nodes)
+  .links(data.links)
+  .size([w, h])
+  .start();
+
+/*
+ * Link (Graph Edge) Generator
+ */
+var link = vis.selectAll("line.link")
+  .data(data.links)
+  .enter().append("svg:line")
+  .attr("class", function(d) { return 'link ' + d.state; })
+  .attr('data-index', function(d, i) { return i; })
+  .attr("x1", function(d) { return d.source.x; })
+  .attr("y1", function(d) { return d.source.y; })
+  .attr("x2", function(d) { return d.target.x; })
+  .attr("y2", function(d) { return d.target.y; });
+
+
+/*
+ * Nodes
+ */
+var node = vis.selectAll("circle.node")
+  .data(data.nodes)
+  .enter().append("svg:circle")
+  .attr("class", function(d) { return "node " + d.role; })
+  .attr("cx", function(d) { return d.x; })
+  .attr("cy", function(d) { return d.y; })
+  .attr("r", nodeRadius)
+  .attr('data-index', function(d, i) { return i; })
+  .call(force.drag);
+
+node.append("svg:title")
+  .text(function(d) { return d.name; });
+
+/*
+ * Names and Roles
+ */
+var names = vis.selectAll("text.name")
+  .data(data.nodes)
+  .enter().append('svg:text')
+  .attr('class', 'name')
+  .attr('x', function(d) { return d.x; })
+  .attr('y', function(d) { return d.y; })
+  .attr('text-anchor', 'middle')
+  .attr('dy', -(nodeRadius+8))
+  .attr('data-index', function(d, i) { return i; })
+  .text(function(d) {
+    return d.name;
+  })
+  .call(force.drag);
+
+var roles = vis.selectAll("text.role")
+  .data(data.nodes)
+  .enter().append('svg:text')
+  .attr('class', 'role')
+  .attr('x', function(d) { return d.x; })
+  .attr('y', function(d) { return d.y; })
+  .attr('text-anchor', 'middle')
+  .attr('dy', 3)
+  .attr('data-index', function(d, i) { return i; })
+  .text(function(d) {
+    return d.role;
+  })
+  .call(force.drag);
+
+/*
+ * Opacity transition for the visualization.
+ */
+vis.style("opacity", 1e-3)
+  .transition()
+  .duration(1000)
+  .style("opacity", 1);
+
+/*
+ * Set the initial force listeners.
+ */
+force.on("tick", function() {
+  link.attr("x1", function(d) { return d.source.x; })
+    .attr("y1", function(d) { return d.source.y; })
+    .attr("x2", function(d) { return d.target.x; })
+    .attr("y2", function(d) { return d.target.y; });
+
+  names.attr("x", function(d) { return d.x; })
+      .attr("y", function(d) { return d.y; });
+
+  roles.attr("x", function(d) { return d.x; })
+      .attr("y", function(d) { return d.y; });
+
+  node.attr("cx", function(d) { return d.x; })
+    .attr("cy", function(d) { return d.y; });
+});
+
+
+    setInterval(function() {
+        $.get('/new_nodes', function(data) {
+            var len = data.length;
+            for(var i = 0; i < len; i++) {
+                addNode(data[i]);
+            }
+        });
+    }, 2000);
+
+}
+/*
+d3.json("miserables.json", function(data) {
+  
+});
+*/