opendaylight/web/root/src/main/resources/js/one-topology.js

   1 /** COMMON **/
   2 var labelType, useGradients, nativeTextSupport, animate;
   3
   4 (function() {
   5         var ua = navigator.userAgent,
   6         iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
   7         typeOfCanvas = typeof HTMLCanvasElement,
   8         nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
   9         textSupport = nativeCanvasSupport
  10         && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  11         //I'm setting this based on the fact that ExCanvas provides text support for IE
  12         //and that as of today iPhone/iPad current text support is lame
  13         labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  14         nativeTextSupport = labelType == 'Native';
  15         useGradients = nativeCanvasSupport;
  16         animate = !(iStuff || !nativeCanvasSupport);
  17 })();
  18
  19 /** TOPOLOGY **/
  20 one.topology = {};
  21
  22 one.topology.option = {
  23         navigation : function(enable, panning, zooming) {
  24                 var option = {};
  25                 option["enable"] = enable;
  26                 option["panning"] = panning;
  27                 option["zooming"] = zooming;
  28                 return option;
  29         },
  30         node : function(overridable, color, height, dim) {
  31                 var option = {};
  32                 option["overridable"] = overridable;
  33                 option["color"] = color;
  34                 option["height"] = height;
  35                 option["dim"] = dim;
  36                 return option;
  37         },
  38         edge : function(overridable, color, lineWidth, epsilon) {
  39                 var option = {};
  40                 option["overridable"] = overridable;
  41                 option["color"] = color;
  42                 option["lineWidth"] = lineWidth;
  43                 if (epsilon != undefined)
  44                         option["epsilon"] = epsilon;
  45                 return option;
  46         },
  47         label : function(style, node) {
  48                 var marginTop, minWidth;
  49                 if (node.data["$type"] == "swtch") {
  50                         marginTop = "42px";
  51                         minWidth = "65px";
  52                 } else if (node.data["$type"] == "host") {
  53                         marginTop = "48px";
  54                         minWidth = "";
  55                 } else if (node.data["$type"].indexOf("monitor") == 0) {
  56                         marginTop = "52px";
  57                         minWidth = "";
  58                 }
  59                 style.marginTop = marginTop;
  60                 style.minWidth = minWidth;
  61                 style.background = "rgba(68,68,68,0.7)";
  62                 style.borderRadius = "4px";
  63                 style.color = "#fff";
  64                 style.cursor = "default";
  65         }
  66 };
  67
  68 one.topology.init = function(json) {
  69         if (json.length == 0) {
  70                 $div = $(document.createElement('div'));
  71                 $img = $(document.createElement('div'));
  72                 $img.css('height', '128px');
  73                 $img.css('width', '128px');
  74                 $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
  75                 $img.css('clear', 'both');
  76                 $img.css('margin', '0 auto');
  77                 $p = $(document.createElement('p'));
  78                 $p.addClass('text-center');
  79                 $p.addClass('text-info');
  80                 $p.css('width', '100%');
  81                 $p.css('padding', '10px 0');
  82                 $p.css('cursor', 'default');
  83                 $p.append('No Network Elements Connected');
  84                 $div.css('position', 'absolute');
  85                 $div.css('top', '25%');
  86                 $div.css('margin', '0 auto');
  87                 $div.css('width', '100%');
  88                 $div.css('text-align', 'center');
  89                 $div.append($img).append($p);
  90                 $("#topology").append($div);
  91                 return false;
  92         }
  93         one.topology.graph = new $jit.MultiTopology({
  94                 injectInto: 'topology',
  95                 Navigation: one.topology.option.navigation(true, 'avoid nodes', 10),
  96                 Node: one.topology.option.node(true, '#444', 25, 27),
  97                 Edge: one.topology.option.edge(true, '23A4FF', 1.5),
  98                 Tips: {
  99                         enable: true,
 100                         type: 'Native',
 101                         onShow: function(tip, node) {
 102                                 if (node.name != undefined)
 103                                         tip.innerHTML = "";
 104                                 //tipsOnShow(tip, node);
 105                         }
 106                 },
 107                 Events: {
 108                         enable: true,
 109                         type: 'Native',
 110                         onMouseEnter: function(node, eventInfo, e) {
 111                                 // if node
 112                                 if (node.id != undefined) {
 113                                         one.topology.graph.canvas.getElement().style.cursor = 'move';
 114                                 } else if (eventInfo.edge != undefined &&
 115                                                 eventInfo.edge.nodeTo.data["$type"] == "swtch" &&
 116                                                 eventInfo.edge.nodeFrom.data["$type"] == "swtch") {
 117                                         one.topology.graph.canvas.getElement().style.cursor = 'pointer';
 118                                 }
 119                         },
 120                         onMouseLeave: function(node, eventInfo, e) {
 121                                 one.topology.graph.canvas.getElement().style.cursor = '';
 122                         },
 123                         //Update node positions when dragged
 124                         onDragMove: function(node, eventInfo, e) {
 125                                 var pos = eventInfo.getPos();
 126                                 node.pos.setc(pos.x, pos.y);
 127                                 one.topology.graph.plot();
 128                                 one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
 129                         },
 130                         //Implement the same handler for touchscreens
 131                         onTouchMove: function(node, eventInfo, e) {
 132                                 $jit.util.event.stop(e); //stop default touchmove event
 133                                 this.onDragMove(node, eventInfo, e);
 134                         },
 135                         onDragEnd: function(node, eventInfo, e) {
 136                                 var ps = eventInfo.getPos();
 137                                 var did = node.id;
 138                                 var data = {};
 139                                 data['x'] = ps.x;
 140                                 data['y'] = ps.y;
 141                                 $.post('/controller/web/topology/node/' + did, data);
 142                         },
 143                         onClick: function(node, eventInfo, e) {
 144                                 if(one.f.topology === undefined) {
 145                                         return false;
 146                                 } else {
 147                                         one.f.topology.Events.onClick(node, eventInfo);
 148                                 }
 149                         }
 150                 },
 151                 iterations: 200,
 152                 levelDistance: 130,
 153                 onCreateLabel: function(domElement, node){
 154                         var nameContainer = document.createElement('span'),
 155                         closeButton = document.createElement('span'),
 156                         style = nameContainer.style;
 157                         nameContainer.className = 'name';
 158                         var nodeDesc = node.data["$desc"];
 159                         if (nodeDesc == "None" || nodeDesc == "" || nodeDesc == "undefined" || nodeDesc == undefined) {
 160                                 nameContainer.innerHTML = "<small>"+node.name+"</small>";
 161                         } else {
 162                                 nameContainer.innerHTML = nodeDesc;
 163                         }
 164                         domElement.appendChild(nameContainer);
 165                         style.fontSize = "1.0em";
 166                         style.color = "#000";
 167                         style.fontWeight = "bold";
 168                         style.width = "100%";
 169                         style.padding = "1.5px 4px";
 170                         style.display = "block";
 171
 172                         one.topology.option.label(style, node);
 173                 },
 174                 onPlaceLabel: function(domElement, node){
 175                         var style = domElement.style;
 176                         var left = parseInt(style.left);
 177                         var top = parseInt(style.top);
 178                         var w = domElement.offsetWidth;
 179                         style.left = (left - w / 2) + 'px';
 180                         style.top = (top - 15) + 'px';
 181                         style.display = '';
 182                         style.minWidth = "28px";
 183                         style.width = "auto";
 184                         style.height = "28px";
 185                         style.textAlign = "center";
 186                 }
 187         });
 188
 189         one.topology.graph.loadJSON(json);
 190         // compute positions incrementally and animate.
 191         one.topology.graph.computeIncremental({
 192                 iter: 40,
 193                 property: 'end',
 194                 onStep: function(perc){
 195                         console.log(perc + '% loaded');
 196                 },
 197                 onComplete: function(){
 198                         for (var idx in one.topology.graph.graph.nodes) {
 199                                 var node = one.topology.graph.graph.nodes[idx];
 200                                 if(node.getData("x") && node.getData("y")) {
 201                                         var x = node.getData("x");
 202                                         var y = node.getData("y");
 203                                         node.setPos(new $jit.Complex(x, y), "end");
 204                                 }
 205                         }
 206                         console.log('done');
 207                         one.topology.graph.animate({
 208                                 modes: ['linear'],
 209                                 transition: $jit.Trans.Elastic.easeOut,
 210                                 duration: 0
 211                         });
 212                 }
 213         });
 214         one.topology.graph.canvas.setZoom(0.8,0.8);
 215 }
 216
 217 one.topology.update = function() {
 218         $('#topology').empty();
 219         $.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
 220                 one.topology.init(data);
 221         });
 222 }
 223
 224 /** INIT */
 225 $.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
 226         one.topology.init(data);
 227 });