1 {% extends "workflow/viewport-element.html" %}
3 <link href="/static/css/graph_common.css" rel="stylesheet">
4 <title>Pod Definition Prototype</title>
6 <!-- Loads and initializes the library -->
8 var mxLoadStylesheets = false;
10 <script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
17 <script type="text/javascript">
21 var netColors = ['red', 'blue', 'purple', 'green', 'orange', '#8CCDF5', '#1E9BAC'];
23 var lastHostBottom = 100;
24 var networks = new Set([]);
25 var network_names = new Set([]);
26 var has_public_net = false;
27 var vlans = {{vlans|default:'null'}};
30 function main(graphContainer, overviewContainer, toolbarContainer) {
32 for(var i=0; i<vlans.length-1; i++){
33 vlan_string += vlans[i] + ", ";
36 vlan_string += vlans[vlans.length-1];
39 var str = "Available vlans for your POD: " + vlan_string;
40 document.getElementById("vlan_notice").innerHTML = str;
42 //check if the browser is supported
43 if (!mxClient.isBrowserSupported()) {
44 mxUtils.error('Browser is not supported', 200, false);
48 // Workaround for Internet Explorer ignoring certain styles
49 if (mxClient.IS_QUIRKS) {
50 document.body.style.overflow = 'hidden';
51 new mxDivResizer(graphContainer);
53 var editor = new mxEditor();
54 var graph = editor.graph;
55 var model = graph.getModel();
56 editor.setGraphContainer(graphContainer);
59 editor.addAction('printXML', function(editor, cell) {
60 mxLog.write(encodeGraph(graph));
66 doGlobalConfig(graph);
70 restoreFromXml('{{xml|safe}}', editor);
72 {% for host in hosts %}
74 var host = {{host|safe}};
79 {% for host in added_hosts %}
80 var host = {{host|safe}}
86 addToolbarButton(editor, toolbarContainer, 'zoomIn', '', "/static/img/mxgraph/zoom_in.png", true);
87 addToolbarButton(editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
90 addToolbarButton(editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true);
93 var outline = new mxOutline(graph, overviewContainer);
96 var checkAllowed = function(edge, terminal, source) {
97 //check if other terminal is null, and that they are different
98 otherTerminal = edge.getTerminal(!source);
99 if(terminal != null && otherTerminal != null) {
100 if( terminal.getParent().getId().split('_')[0] == //'host' or 'network'
101 otherTerminal.getParent().getId().split('_')[0] ) {
103 graph.removeCells([edge]);
110 var colorEdge = function(edge, terminal, source) {
111 if(terminal.getParent().getId().indexOf('network') >= 0) {
112 styles = terminal.getParent().getStyle().split(';');
114 for(var i=0; i<styles.length; i++){
115 kvp = styles[i].split('=');
116 if(kvp[0] == "fillColor"){
120 edge.setStyle('strokeColor=' + color);
124 var alertVlan = function(edge, terminal, source) {
125 if( terminal == null || edge.getTerminal(!source) == null) {
128 var vlanHTML = '<form> <input type="radio" name="tagged" value="True" checked> Tagged<br>'
129 vlanHTML += '<input type="radio" name="tagged" value="False"> Untagged </form>'
130 vlanHTML += '<button onclick=parseVlanWindow(' + edge.getId() + ');>Okay</button>'
131 vlanHTML += '<button onclick=deleteVlanWindow(' + edge.getId() + ');>Cancel</button>'
132 content = document.createElement('div');
133 content.innerHTML = vlanHTML;
134 showWindow(graph, "Vlan Selection", content, 200, 200);
137 //sets the edge color to be the same as the network
138 graph.addListener(mxEvent.CELL_CONNECTED, function(sender, event){
139 edge = event.getProperty('edge');
140 terminal = event.getProperty('terminal')
141 source = event.getProperty('source');
142 if(checkAllowed(edge, terminal, source)) {
143 colorEdge(edge, terminal, source);
144 alertVlan(edge, terminal, source);
148 graph.dblClick = function(evt, cell) {
151 if( cell.getParent() != null && cell.getParent().getId().indexOf("network") > -1) {
152 cell = cell.getParent();
154 if( cell.isEdge() || cell.getId().indexOf("network") > -1 ) {
155 var content = document.createElement('div');
156 var innerHTML = "<button onclick=deleteCell('" + cell.getId() + "');>Remove</button>"
157 innerHTML += "<button onclick='currentWindow.destroy();'>Cancel</button>"
158 content.innerHTML = innerHTML;
159 showWindow(this, 'Delete?', content, 200, 200);
162 showDetailWindow(cell);
166 graph.setCellsSelectable(false);
167 graph.setCellsMovable(false);
169 updateHosts({{ removed_hosts|default:"[]"|safe }});
175 function showDetailWindow(cell) {
176 var info = JSON.parse(cell.getValue());
177 var content = document.createElement("div");
178 var inner = "<pre>Name: " + info.name + "\n";
179 inner += "Description:\n" + info.description + "</pre>";
180 inner += '<button onclick="currentWindow.destroy();">Okay</button>'
181 content.innerHTML = inner
182 showWindow(currentGraph, 'Details', content, 400, 400);
185 function restoreFromXml(xml, editor) {
186 var doc = mxUtils.parseXml(xml);
187 var node = doc.documentElement;
188 editor.readGraphModel(node);
190 //Iterate over all children, and parse the networks to add them to the sidebar
191 var root = currentGraph.getDefaultParent();
192 for( var i=0; i<root.getChildCount(); i++) {
193 var cell = root.getChildAt(i);
194 if(cell.getId().indexOf("network") > -1) {
195 var info = JSON.parse(cell.getValue());
196 var vlan_id = info['vlan_id'];
197 networks.add(vlan_id);
198 var name = info['name'];
199 network_names.add(name);
200 var styles = cell.getStyle().split(";");
202 for(var j=0; j< styles.length; j++){
203 var kvp = styles[j].split('=');
204 if(kvp[0] == "fillColor") {
211 has_public_net = true;
214 makeSidebarNetwork(name, vlan_id, color, cell.getId());
219 function deleteCell(cellId) {
220 var cell = currentGraph.getModel().getCell(cellId);
221 if( cellId.indexOf("network") > -1 ) {
222 elem = document.getElementById(cellId);
223 elem.parentElement.removeChild(elem);
225 currentGraph.removeCells([cell]);
226 currentWindow.destroy();
230 function newNetworkWindow() {
231 var innerHtml = 'Name: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>';
232 innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>';
233 innerHtml += '<button type="button" onclick="parseNetworkWindow()">Okay</button>';
234 innerHtml += '<button type="button" onclick="currentWindow.destroy();">Cancel</button><br>';
235 innerHtml += '<div id="current_window_vlans"/>';
236 innerHtml += '<div id="current_window_errors"/>';
237 var content = document.createElement("div");
238 content.innerHTML = innerHtml;
240 showWindow(currentGraph, "Network Creation", content, 300, 300);
243 vlan_notice = document.getElementById("current_window_vlans");
244 vlan_notice.appendChild(document.createTextNode("Available Vlans: " + vlan_string));
248 function parseNetworkWindow() {
249 var net_name = document.getElementById("net_name_input").value
250 var vlan_id = document.getElementById("vlan_id_input").value
251 var error_div = document.getElementById("current_window_errors");
252 var vlan_valid = Number.isInteger(Number(vlan_id)) && (vlan_id < 4095) && (vlan_id > 1)
254 vlan_valid = vlan_valid & vlans.indexOf(Number(vlan_id)) >= 0;
258 error_div.innerHTML = "Please only enter an integer in the valid range (default 1-4095) for the VLAN ID";
261 if( networks.has(vlan_id))
263 error_div.innerHTML = "All VLAN IDs must be unique";
266 if( network_names.has(net_name) ){
267 error_div.innerHTML = "All network names must be unique";
270 addNetwork(net_name, vlan_id);
271 currentWindow.destroy();
274 function addToolbarButton(editor, toolbar, action, label, image, isTransparent)
276 var button = document.createElement('button');
277 button.style.fontSize = '10';
280 var img = document.createElement('img');
281 img.setAttribute('src', image);
282 img.style.width = '16px';
283 img.style.height = '16px';
284 img.style.verticalAlign = 'middle';
285 img.style.marginRight = '2px';
286 button.appendChild(img);
290 button.style.background = 'transparent';
291 button.style.color = '#FFFFFF';
292 button.style.border = 'none';
294 mxEvent.addListener(button, 'click', function(evt)
296 editor.execute(action);
298 mxUtils.write(button, label);
299 toolbar.appendChild(button);
302 function encodeGraph(graph) {
303 var encoder = new mxCodec();
304 var xml = encoder.encode(graph.getModel());
305 return mxUtils.getXml(xml);
308 function doGlobalConfig(graph) {
309 //general graph stuff
310 graph.setMultigraph(false);
313 graph.setConnectable(true);
314 graph.setAllowDanglingEdges(false);
315 mxEdgeHandler.prototype.snapToTerminals = true;
316 mxConstants.MIN_HOTSPOT_SIZE = 16;
317 mxConstants.DEFAULT_HOTSPOT = 1;
318 //edge 'style' (still affects behavior greatly)
319 style = graph.getStylesheet().getDefaultEdgeStyle();
320 style[mxConstants.STYLE_EDGE] = mxConstants.EDGESTYLE_ELBOW;
321 style[mxConstants.STYLE_ENDARROW] = mxConstants.NONE;
322 style[mxConstants.STYLE_ROUNDED] = true;
323 style[mxConstants.STYLE_FONTCOLOR] = 'black';
324 style[mxConstants.STYLE_STROKECOLOR] = 'red';
326 style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
327 style[mxConstants.STYLE_STROKEWIDTH] = '3';
328 style[mxConstants.STYLE_ROUNDED] = true;
329 style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
331 // TODO: Proper override
332 graph.convertValueToString = function(cell) {
334 //changes value for edges with xml value
336 if(JSON.parse(cell.getValue())["tagged"]) {
341 return JSON.parse(cell.getValue())['name'];
345 return cell.getValue();
350 function showWindow(graph, title, content, width, height) {
351 //create transparent black background
352 var background = document.createElement('div');
353 background.style.position = 'absolute';
354 background.style.left = '0px';
355 background.style.top = '0px';
356 background.style.right = '0px';
357 background.style.bottom = '0px';
358 background.style.background = 'black';
359 mxUtils.setOpacity(background, 50);
360 document.body.appendChild(background);
363 if (mxClient.IS_IE) {
364 new mxDivResizer(background);
367 var x = Math.max(0, document.body.scrollWidth/2-width/2);
368 var y = Math.max(10, (document.body.scrollHeight ||
369 document.documentElement.scrollHeight)/2-height*2/3);
371 var wnd = new mxWindow(title, content, x, y, width, height, false, true);
372 wnd.setClosable(false);
374 wnd.addListener(mxEvent.DESTROY, function(evt) {
375 graph.setEnabled(true);
376 mxEffects.fadeOut(background, 50, true, 10, 30, true);
380 graph.setEnabled(false);
381 wnd.setVisible(true);
384 function closeWindow() {
385 //allows the current window to be destroyed
386 currentWindow.destroy();
389 function othersUntagged(edgeID) {
390 var edge = currentGraph.getModel().getCell(edgeID);
391 var end1 = edge.getTerminal(true);
392 var end2 = edge.getTerminal(false);
394 if( end1.getParent().getId().split('_')[0] == 'host' )
403 var edges = netint.edges;
405 for( var i=0; i < edges.length; i++ )
407 if( edges[i].getValue() )
409 var tagged = JSON.parse(edges[i].getValue()).tagged;
424 function deleteVlanWindow(edgeID) {
425 var cell = currentGraph.getModel().getCell(edgeID);
426 currentGraph.removeCells([cell]);
427 currentWindow.destroy();
430 function parseVlanWindow(edgeID) {
431 //do parsing and data manipulation
432 var radios = document.getElementsByName("tagged");
433 edge = currentGraph.getModel().getCell(edgeID);
435 for(var i=0; i<radios.length; i++) {
436 if(radios[i].checked) {
437 //set edge to be tagged or untagged
438 //cellValue.setAttribute("tagged", radios[i].value);
439 if( radios[i].value == "False")
441 if( othersUntagged(edgeID) )
443 alert("Only one untagged VLAN is allowed per interface");
448 edgeVal['tagged'] = radios[i].value == "True";
449 edge.setValue(JSON.stringify(edgeVal));
453 //edge.setValue(cellValue);
454 currentGraph.refresh(edge);
458 function makeMxNetwork(vlan_id, net_name) {
459 model = currentGraph.getModel();
462 xoff = 400 + (30 * netCount);
464 var color = netColors[netCount];
465 if( netCount > (netColors.length - 1)) {
466 color = Math.floor(Math.random() * 16777215); //int in possible color space
467 color = '#' + color.toString(16).toUpperCase(); //convert to hex
470 var net_val = Object();
471 net_val['vlan_id'] = vlan_id;
472 net_val['name'] = net_name;
473 net_val['public'] = vlan_id < 0;
474 net = currentGraph.insertVertex(
475 currentGraph.getDefaultParent(),
476 'network_' + netCount,
477 JSON.stringify(net_val),
482 'fillColor=' + color,
486 for(var i=0; i<num_ports; i++){
487 port = currentGraph.insertVertex(
495 'fillColor=black;opacity=0',
500 var retVal = Object();
501 retVal['color'] = color;
502 retVal['element_id'] = "network_" + netCount;
508 function addPublicNetwork() {
509 var net = makeMxNetwork(-1, "public");
510 makeSidebarNetwork("public", "", net['color'], net['element_id']);
513 function addNetwork(net_name, vlan_id) {
514 var ret = makeMxNetwork(vlan_id, net_name);
515 var color = ret['color'];
516 var net_id = ret['element_id'];
517 networks.add(vlan_id);
518 network_names.add(net_name);
519 makeSidebarNetwork(net_name, vlan_id, color, net_id);
522 function updateHosts(removed) {
523 for(var i=0; i < removed.length; i++)
525 var hoststring = removed[i];
526 var hostid = "host_" + hoststring.split("*")[0];
527 var cell = currentGraph.getModel().getCell(hostid);
528 currentGraph.removeCells([cell]);
531 var hosts = currentGraph.getChildVertices(currentGraph.getDefaultParent());
533 for(var i=0; i<hosts.length; i++)
536 if(!host.id.startsWith("host_"))
540 var geometry = host.getGeometry();
541 geometry.y = topdist + 50;
542 topdist = geometry.y + geometry.height;
543 host.setGeometry(geometry);
547 function makeSidebarNetwork(net_name, vlan_id, color, net_id){
548 var newNet = document.createElement("li");
552 text += " : " + vlan_id;
554 var newNetValue = document.createTextNode(text);
555 newNet.appendChild(newNetValue);
556 newNet.style['background'] = color;
557 document.getElementById("network_list").appendChild(newNet);
560 function makeHost(hostInfo) {
561 value = JSON.stringify(hostInfo['value']);
562 interfaces = hostInfo['interfaces'];
563 graph = currentGraph;
565 height = (25 * interfaces.length) + 10;
567 yoff = lastHostBottom + 50;
568 lastHostBottom = yoff + height;
569 host = graph.insertVertex(
570 graph.getDefaultParent(),
571 'host_' + hostInfo['id'],
580 host.setConnectable(false);
583 for(var i=0; i<interfaces.length; i++) {
584 port = graph.insertVertex(
587 JSON.stringify(interfaces[i]),
592 'fillColor=blue;editable=0',
598 function submitForm() {
599 var form = document.getElementById("xml_form");
600 var input_elem = document.getElementById("hidden_xml_input");
601 var s = encodeGraph(currentGraph);
602 input_elem.value = s;
603 req = new XMLHttpRequest();
604 req.open("POST", "/wf/workflow/", false);
605 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
606 req.onerror = function() { alert("problem with form submission"); }
607 var formData = $("#xml_form").serialize();
611 {% endblock extrahead %}
613 <!-- Calls the main function after the page has loaded. Container is dynamically created. -->
615 <div id="graphParent"
616 style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:65%;left:0px;">
617 <div id="graphContainer"
618 style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
622 <!-- Creates a container for the sidebar -->
623 <div id="toolbarContainer"
624 style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('/static/img/mxgraph/toolbar_bg.gif');">
627 <!-- Creates a container for the outline -->
628 <div id="outlineContainer"
629 style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
633 <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:35%;right:0px;left:auto;background:grey">
634 <button type="button" onclick="newNetworkWindow();">Add Network</button>
635 <ul id="network_list">
637 <p id="vlan_notice"></p>
638 <button type="button" style="display: none" onclick="submitForm();">Submit</button>
640 <form id="xml_form" method="post" action="/wf/workflow/">
642 <input type="hidden" id="hidden_xml_input" name="xml" />
647 document.getElementById('graphContainer'),
648 document.getElementById('outlineContainer'),
649 document.getElementById('toolbarContainer'),
650 document.getElementById('sidebarContainer')
653 {% endblock content %}