2 var labelType, useGradients, nativeTextSupport, animate;
5 var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i)
6 || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport
7 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
8 // I'm setting this based on the fact that ExCanvas provides text support
10 // and that as of today iPhone/iPad current text support is lame
11 labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native'
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
21 one.topology.option = {
22 navigation : function(enable, panning, zooming) {
24 option["enable"] = enable;
25 option["panning"] = panning;
26 option["zooming"] = zooming;
29 node : function(overridable, color, height, dim) {
31 option["overridable"] = overridable;
32 option["color"] = color;
33 option["height"] = height;
37 edge : function(overridable, color, lineWidth, epsilon) {
39 option["overridable"] = overridable;
40 option["color"] = color;
41 option["lineWidth"] = lineWidth;
42 if (epsilon != undefined)
43 option["epsilon"] = epsilon;
46 label : function(style, node) {
47 var marginTop, minWidth;
48 if (node.data["$type"] == "switch") {
51 } else if (node.data["$type"] == "host") {
54 } else if (node.data["$type"].indexOf("monitor") == 0) {
58 style.marginTop = marginTop;
59 style.minWidth = minWidth;
60 style.background = "rgba(68,68,68,0.7)";
61 style.borderRadius = "4px";
63 style.cursor = "default";
67 one.topology.init = function(json) {
68 if (json.length == 0) {
69 $div = $(document.createElement('div'));
70 $img = $(document.createElement('div'));
71 $img.css('height', '128px');
72 $img.css('width', '128px');
73 $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
74 $img.css('clear', 'both');
75 $img.css('margin', '0 auto');
76 $p = $(document.createElement('p'));
77 $p.addClass('text-center');
78 $p.addClass('text-info');
79 $p.css('width', '100%');
80 $p.css('padding', '10px 0');
81 $p.css('cursor', 'default');
82 $p.append('No Network Elements Connected');
83 $div.css('position', 'absolute');
84 $div.css('top', '25%');
85 $div.css('margin', '0 auto');
86 $div.css('width', '100%');
87 $div.css('text-align', 'center');
88 $div.append($img).append($p);
89 $("#topology").append($div);
92 one.topology.graph = new $jit.MultiTopology(
94 injectInto : 'topology',
95 Navigation : one.topology.option.navigation(true,
97 Node : one.topology.option.node(true, '#444', 25, 27),
98 Edge : one.topology.option.edge(true, '23A4FF', 1.5),
104 onShow : function(tip, node) {
105 if (node.name != undefined)
106 tip.innerHTML = "Name : " + node.name + "<br>";
107 if(node.data["$type"]!=undefined)
108 tip.innerHTML = tip.innerHTML + "Type : " + node.data["$type"] + "<br>";
109 if(node.data["$desc"]!=undefined)
110 tip.innerHTML = tip.innerHTML + "Description : " + node.data["$desc"];
116 onMouseEnter : function(node, eventInfo, e) {
118 if (node.id != undefined) {
119 one.topology.graph.canvas.getElement().style.cursor = 'move';
120 } else if (eventInfo.edge != undefined
121 && eventInfo.edge.nodeTo.data["$type"] == "switch"
122 && eventInfo.edge.nodeFrom.data["$type"] == "switch") {
123 one.topology.graph.canvas.getElement().style.cursor = 'pointer';
126 onMouseLeave : function(node, eventInfo, e) {
127 one.topology.graph.canvas.getElement().style.cursor = '';
129 // Update node positions when dragged
130 onDragMove : function(node, eventInfo, e) {
131 var pos = eventInfo.getPos();
132 node.pos.setc(pos.x, pos.y);
133 one.topology.graph.plot();
134 one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
136 // Implement the same handler for touchscreens
137 onTouchMove : function(node, eventInfo, e) {
138 $jit.util.event.stop(e); // stop default touchmove
140 this.onDragMove(node, eventInfo, e);
142 onDragEnd : function(node, eventInfo, e) {
143 var ps = eventInfo.getPos();
148 $.post('/controller/web/topology/node/' + did, data);
150 onClick : function(node, eventInfo, e) {
151 if (one.f.topology === undefined) {
154 one.f.topology.Events.onClick(node, eventInfo);
160 onCreateLabel : function(domElement, node) {
161 var nameContainer = document.createElement('span'), closeButton = document
162 .createElement('span'), style = nameContainer.style;
163 nameContainer.className = 'name';
164 var nodeDesc = node.data["$desc"];
165 if (nodeDesc == "None" || nodeDesc == ""
166 || nodeDesc == "undefined" || nodeDesc == undefined) {
167 nameContainer.innerHTML = "<small>" + node.name
170 nameContainer.innerHTML = nodeDesc;
172 domElement.appendChild(nameContainer);
173 style.fontSize = "1.0em";
174 style.color = "#000";
175 style.fontWeight = "bold";
176 style.width = "100%";
177 style.padding = "1.5px 4px";
178 style.display = "block";
180 one.topology.option.label(style, node);
182 onPlaceLabel : function(domElement, node) {
183 var style = domElement.style;
184 var left = parseInt(style.left);
185 var top = parseInt(style.top);
186 var w = domElement.offsetWidth;
187 style.left = (left - w / 2) + 'px';
188 style.top = (top - 15) + 'px';
190 style.minWidth = "28px";
191 style.width = "auto";
192 style.height = "28px";
193 style.textAlign = "center";
197 one.topology.graph.loadJSON(json);
198 // compute positions incrementally and animate.
199 one.topology.graph.computeIncremental({
202 onStep : function(perc) {
203 console.log(perc + '% loaded');
205 onComplete : function() {
206 for ( var idx in one.topology.graph.graph.nodes) {
207 var node = one.topology.graph.graph.nodes[idx];
208 if (node.getData("x") && node.getData("y")) {
209 var x = node.getData("x");
210 var y = node.getData("y");
211 node.setPos(new $jit.Complex(x, y), "end");
215 one.topology.graph.animate({
216 modes : [ 'linear' ],
217 transition : $jit.Trans.Elastic.easeOut,
222 one.topology.graph.canvas.setZoom(0.8, 0.8);
225 one.topology.update = function() {
226 $('#topology').empty();
227 $.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
229 one.topology.init(data);
234 $.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
236 one.topology.init(data);