src/emuvim/dashboard/js/graph.js

   1 var width = 960,
   2     height = 500,
   3     color = d3.scale.category10();
   4
   5 var svg = d3.select("#table_graph").append("svg")
   6     .attr("width", width)
   7     .attr("height", height);
   8
   9 var force = d3.layout.force()
  10     .gravity(0.05)
  11     .distance(100)
  12     .charge(-100)
  13     .size([width, height]);
  14
  15 d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json) {
  16   if (error) throw error;
  17
  18   force
  19       .nodes(json.nodes)
  20       .links(json.links)
  21       .start();
  22
  23   var link = svg.selectAll(".link")
  24       .data(json.links)
  25     .enter().append("line")
  26       .attr("class", "link");
  27
  28   var node = svg.selectAll(".node")
  29       .data(json.nodes)
  30       .enter().append("g")
  31       .attr("class", "node")
  32       .call(force.drag)
  33       .on("dblclick", dblclick)
  34
  35   node.append("circle")
  36     .attr("r", 10)
  37     .style("fill", function(d) { return color(d.group); });
  38
  39   node.append("text")
  40       .attr("dx", 12)
  41       .attr("dy", ".35em")
  42       .text(function(d) { return d.name });
  43
  44   force.on("tick", function() {
  45     link.attr("x1", function(d) { return d.source.x; })
  46         .attr("y1", function(d) { return d.source.y; })
  47         .attr("x2", function(d) { return d.target.x; })
  48         .attr("y2", function(d) { return d.target.y; });
  49
  50     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  51   });
  52
  53   // action to take on double mouse click, call rest api to start xterm
  54   function dblclick() {
  55       var vnf_name = d3.select(this).text()
  56       console.debug(vnf_name)
  57       var rest_url = "http://127.0.0.1:5001/restapi/monitor/term?vnf_list=" + vnf_name
  58
  59       d3.json(rest_url, function(error, json) {
  60         if (error) throw error;
  61         console.debug(json)
  62       });
  63   }
  64
  65
  66 });