Merge "Renders Pod Destriptor File earlier"
[pharos-tools.git] / dashboard / src / templates / resource / steps / pod_definition.html
1 {% extends "workflow/viewport-element.html" %}
2 {% block extrahead %}
3 <link href="/static/css/graph_common.css" rel="stylesheet">
4 <title>Pod Definition Prototype</title>
5
6 <!-- Loads and initializes the library -->
7 <script>
8     var mxLoadStylesheets = false;
9 </script>
10 <script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
11 <style>
12 p {
13     word-break: normal;
14     white-space: normal;
15 }
16 </style>
17 <script type="text/javascript">
18 var currentWindow;
19 var currentGraph;
20 var netCount = 0;
21 var netColors = ['red', 'blue', 'purple', 'green', 'orange', '#8CCDF5', '#1E9BAC'];
22 var hostCount = 0;
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'}};
28 var vlan_string = "";
29
30 function main(graphContainer, overviewContainer, toolbarContainer) {
31     if(vlans){
32         for(var i=0; i<vlans.length-1; i++){
33             vlan_string += vlans[i] + ", ";
34         }
35         if(vlans.length > 0){
36             vlan_string += vlans[vlans.length-1];
37         }
38
39         var str = "Available vlans for your POD: " + vlan_string;
40         document.getElementById("vlan_notice").innerHTML = str;
41     }
42     //check if the browser is supported
43     if (!mxClient.isBrowserSupported()) {
44         mxUtils.error('Browser is not supported', 200, false);
45         return null;
46     }
47
48     // Workaround for Internet Explorer ignoring certain styles
49     if (mxClient.IS_QUIRKS) {
50         document.body.style.overflow = 'hidden';
51         new mxDivResizer(graphContainer);
52     }
53     var editor = new mxEditor();
54     var graph = editor.graph;
55     var model = graph.getModel();
56     editor.setGraphContainer(graphContainer);
57
58     {% if debug %}
59     editor.addAction('printXML', function(editor, cell) {
60         mxLog.write(encodeGraph(graph));
61         mxLog.show();
62     });
63     {% endif %}
64
65
66     doGlobalConfig(graph);
67     currentGraph = graph;
68
69     {% if xml %}
70         restoreFromXml('{{xml|safe}}', editor);
71     {% elif hosts %}
72         {% for host in hosts %}
73
74         var host = {{host|safe}};
75         makeHost(host);
76         {% endfor %}
77     {% endif %}
78     {% if added_hosts %}
79         {% for host in added_hosts %}
80         var host = {{host|safe}}
81         makeHost(host);
82         {% endfor %}
83         updateHosts([]);
84     {% endif %}
85
86     addToolbarButton(editor, toolbarContainer, 'zoomIn', '', "/static/img/mxgraph/zoom_in.png", true);
87     addToolbarButton(editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
88     addToolbarButton(editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true);
89     var outline = new mxOutline(graph, overviewContainer);
90
91
92     var checkAllowed = function(edge, terminal, source) {
93         //check if other terminal is null, and that they are different
94         otherTerminal = edge.getTerminal(!source);
95         if(terminal != null && otherTerminal != null) {
96             if( terminal.getParent().getId().split('_')[0] == //'host' or 'network'
97                 otherTerminal.getParent().getId().split('_')[0] ) {
98                     //not allowed
99                     graph.removeCells([edge]);
100                     return false;
101                 }
102         }
103         return true;
104     };
105
106     var colorEdge = function(edge, terminal, source) {
107         if(terminal.getParent().getId().indexOf('network') >= 0) {
108             styles = terminal.getParent().getStyle().split(';');
109             color = 'black';
110             for(var i=0; i<styles.length; i++){
111                 kvp = styles[i].split('=');
112                 if(kvp[0] == "fillColor"){
113                     color = kvp[1];
114                 }
115             }
116             edge.setStyle('strokeColor=' + color);
117         }
118     };
119
120     var alertVlan = function(edge, terminal, source) {
121         if( terminal == null || edge.getTerminal(!source) == null) {
122             return;
123         }
124         var vlanHTML = '<form> <input type="radio" name="tagged" value="True" checked> Tagged<br>'
125         vlanHTML += '<input type="radio" name="tagged" value="False"> Untagged </form>'
126         vlanHTML += '<button onclick=parseVlanWindow(' + edge.getId() + ');>Okay</button>'
127         vlanHTML += '<button onclick=deleteVlanWindow(' + edge.getId() + ');>Cancel</button>'
128         content = document.createElement('div');
129         content.innerHTML = vlanHTML;
130         showWindow(graph, "Vlan Selection", content, 200, 200);
131     }
132
133     //sets the edge color to be the same as the network
134     graph.addListener(mxEvent.CELL_CONNECTED, function(sender, event){
135         edge = event.getProperty('edge');
136         terminal = event.getProperty('terminal')
137         source = event.getProperty('source');
138         if(checkAllowed(edge, terminal, source)) {
139             colorEdge(edge, terminal, source);
140             alertVlan(edge, terminal, source);
141         }
142     });
143
144     graph.dblClick = function(evt, cell) {
145
146         if( cell != null ){
147             if( cell.getParent() != null && cell.getParent().getId().indexOf("network") > -1) {
148                 cell = cell.getParent();
149             }
150             if( cell.isEdge() || cell.getId().indexOf("network") > -1 ) {
151                 var content = document.createElement('div');
152                 var innerHTML = "<button onclick=deleteCell('" + cell.getId() + "');>Remove</button>"
153                 innerHTML += "<button onclick='currentWindow.destroy();'>Cancel</button>"
154                 content.innerHTML = innerHTML;
155                 showWindow(this, 'Delete?', content, 200, 200);
156             }
157             else {
158             showDetailWindow(cell);
159            }
160         }
161     };
162     graph.setCellsSelectable(false);
163     graph.setCellsMovable(false);
164
165     updateHosts({{ removed_hosts|default:"[]"|safe }});
166     if(!has_public_net){
167         addPublicNetwork();
168     }
169 }
170
171 function showDetailWindow(cell) {
172     var info = JSON.parse(cell.getValue());
173     var content = document.createElement("div");
174     var inner = "<pre>Name: " + info.name + "\n";
175     inner += "Description:\n" + info.description + "</pre>";
176     inner += '<button onclick="currentWindow.destroy();">Okay</button>'
177     content.innerHTML = inner
178     showWindow(currentGraph, 'Details', content, 400, 400);
179 }
180
181 function restoreFromXml(xml, editor) {
182     var doc = mxUtils.parseXml(xml);
183     var node = doc.documentElement;
184     editor.readGraphModel(node);
185
186     //Iterate over all children, and parse the networks to add them to the sidebar
187     var root = currentGraph.getDefaultParent();
188     for( var i=0; i<root.getChildCount(); i++) {
189         var cell = root.getChildAt(i);
190         if(cell.getId().indexOf("network") > -1) {
191             var info = JSON.parse(cell.getValue());
192             var vlan_id = info['vlan_id'];
193             networks.add(vlan_id);
194             var name = info['name'];
195             network_names.add(name);
196             var styles = cell.getStyle().split(";");
197             var color = null;
198             for(var j=0; j< styles.length; j++){
199                 var kvp = styles[j].split('=');
200                 if(kvp[0] == "fillColor") {
201                     color = kvp[1];
202                     break;
203                 }
204             }
205             if(info.public){
206                 vlan_id = "";
207                 has_public_net = true;
208             }
209             netCount++;
210             makeSidebarNetwork(name, vlan_id, color, cell.getId());
211         }
212     }
213 }
214
215 function deleteCell(cellId) {
216     var cell = currentGraph.getModel().getCell(cellId);
217     if( cellId.indexOf("network") > -1 ) {
218         elem = document.getElementById(cellId);
219         elem.parentElement.removeChild(elem);
220     }
221     currentGraph.removeCells([cell]);
222     currentWindow.destroy();
223
224 }
225
226 function newNetworkWindow() {
227     var innerHtml = 'Name: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>';
228     innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>';
229     innerHtml += '<button type="button" onclick="parseNetworkWindow()">Okay</button>';
230     innerHtml += '<button type="button" onclick="currentWindow.destroy();">Cancel</button><br>';
231     innerHtml += '<div id="current_window_vlans"/>';
232     innerHtml += '<div id="current_window_errors"/>';
233     var content = document.createElement("div");
234     content.innerHTML = innerHtml;
235
236     showWindow(currentGraph, "Network Creation", content, 300, 300);
237
238     if(vlans){
239         vlan_notice = document.getElementById("current_window_vlans");
240         vlan_notice.appendChild(document.createTextNode("Available Vlans: " + vlan_string));
241         }
242 }
243
244 function parseNetworkWindow() {
245     var net_name = document.getElementById("net_name_input").value
246     var vlan_id = document.getElementById("vlan_id_input").value
247     var error_div = document.getElementById("current_window_errors");
248     var vlan_valid = Number.isInteger(Number(vlan_id)) && (vlan_id < 4095) && (vlan_id > 1)
249     if(vlans){
250         vlan_valid = vlan_valid & vlans.indexOf(Number(vlan_id)) >= 0;
251     }
252     if( !vlan_valid)
253     {
254         error_div.innerHTML = "Please only enter an integer in the valid range (default 1-4095) for the VLAN ID";
255         return;
256     }
257     if( networks.has(vlan_id))
258     {
259         error_div.innerHTML = "All VLAN IDs must be unique";
260         return;
261     }
262     if( network_names.has(net_name) ){
263         error_div.innerHTML = "All network names must be unique";
264         return;
265     }
266     addNetwork(net_name, vlan_id);
267     currentWindow.destroy();
268 }
269
270 function addToolbarButton(editor, toolbar, action, label, image, isTransparent)
271 {
272     var button = document.createElement('button');
273     button.style.fontSize = '10';
274     if (image != null)
275     {
276         var img = document.createElement('img');
277         img.setAttribute('src', image);
278         img.style.width = '16px';
279         img.style.height = '16px';
280         img.style.verticalAlign = 'middle';
281         img.style.marginRight = '2px';
282         button.appendChild(img);
283     }
284     if (isTransparent)
285     {
286         button.style.background = 'transparent';
287         button.style.color = '#FFFFFF';
288         button.style.border = 'none';
289     }
290     mxEvent.addListener(button, 'click', function(evt)
291     {
292         editor.execute(action);
293     });
294     mxUtils.write(button, label);
295     toolbar.appendChild(button);
296 };
297
298 function encodeGraph(graph) {
299     var encoder = new mxCodec();
300     var xml = encoder.encode(graph.getModel());
301     return mxUtils.getXml(xml);
302 }
303
304 function doGlobalConfig(graph) {
305     //general graph stuff
306     graph.setMultigraph(false);
307
308     //edge behavior
309     graph.setConnectable(true);
310     graph.setAllowDanglingEdges(false);
311     mxEdgeHandler.prototype.snapToTerminals = true;
312     mxConstants.MIN_HOTSPOT_SIZE = 16;
313     mxConstants.DEFAULT_HOTSPOT = 1;
314     //edge 'style' (still affects behavior greatly)
315     style = graph.getStylesheet().getDefaultEdgeStyle();
316     style[mxConstants.STYLE_EDGE] = mxConstants.EDGESTYLE_ELBOW;
317     style[mxConstants.STYLE_ENDARROW] = mxConstants.NONE;
318     style[mxConstants.STYLE_ROUNDED] = true;
319     style[mxConstants.STYLE_FONTCOLOR] = 'black';
320     style[mxConstants.STYLE_STROKECOLOR] = 'red';
321
322     style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
323     style[mxConstants.STYLE_STROKEWIDTH] = '3';
324     style[mxConstants.STYLE_ROUNDED] = true;
325     style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
326
327     // TODO: Proper override
328     graph.convertValueToString = function(cell) {
329         try{
330             //changes value for edges with xml value
331             if(cell.isEdge()) {
332                 if(JSON.parse(cell.getValue())["tagged"]) {
333                     return "tagged";
334                 }
335                 return "untagged";
336             } else{
337                     return JSON.parse(cell.getValue())['name'];
338             }
339         }
340         catch(e){
341                 return cell.getValue();
342         }
343     };
344 }
345
346 function showWindow(graph, title, content, width, height) {
347     //create transparent black background
348     var background = document.createElement('div');
349     background.style.position = 'absolute';
350     background.style.left = '0px';
351     background.style.top = '0px';
352     background.style.right = '0px';
353     background.style.bottom = '0px';
354     background.style.background = 'black';
355     mxUtils.setOpacity(background, 50);
356     document.body.appendChild(background);
357
358     //deal with IE quirk
359     if (mxClient.IS_IE) {
360         new mxDivResizer(background);
361     }
362
363     var x = Math.max(0, document.body.scrollWidth/2-width/2);
364     var y = Math.max(10, (document.body.scrollHeight ||
365                 document.documentElement.scrollHeight)/2-height*2/3);
366
367     var wnd = new mxWindow(title, content, x, y, width, height, false, true);
368     wnd.setClosable(false);
369
370     wnd.addListener(mxEvent.DESTROY, function(evt) {
371         graph.setEnabled(true);
372         mxEffects.fadeOut(background, 50, true, 10, 30, true);
373     });
374     currentWindow = wnd;
375
376     graph.setEnabled(false);
377     wnd.setVisible(true);
378 };
379
380 function closeWindow() {
381     //allows the current window to be destroyed
382     currentWindow.destroy();
383 };
384
385 function othersUntagged(edgeID) {
386     var edge = currentGraph.getModel().getCell(edgeID);
387     var end1 = edge.getTerminal(true);
388     var end2 = edge.getTerminal(false);
389
390     if( end1.getParent().getId().split('_')[0] == 'host' )
391     {
392         var netint = end1;
393     }
394     else
395     {
396         var netint = end2;
397     }
398
399     var edges = netint.edges;
400
401     for( var i=0; i < edges.length; i++ )
402     {
403         if( edges[i].getValue() )
404         {
405             var tagged = JSON.parse(edges[i].getValue()).tagged;
406         }
407         else
408         {
409             var tagged = true;
410         }
411         if( !tagged )
412         {
413             return true;
414         }
415     }
416     return false;
417 };
418
419
420 function deleteVlanWindow(edgeID) {
421     var cell = currentGraph.getModel().getCell(edgeID);
422     currentGraph.removeCells([cell]);
423     currentWindow.destroy();
424 }
425
426 function parseVlanWindow(edgeID) {
427     //do parsing and data manipulation
428     var radios = document.getElementsByName("tagged");
429     edge = currentGraph.getModel().getCell(edgeID);
430
431     for(var i=0; i<radios.length; i++) {
432         if(radios[i].checked) {
433             //set edge to be tagged or untagged
434             //cellValue.setAttribute("tagged", radios[i].value);
435             if( radios[i].value == "False")
436             {
437                 if( othersUntagged(edgeID) )
438                 {
439                     alert("Only one untagged VLAN is allowed per interface");
440                     return;
441                 }
442             }
443             edgeVal = Object();
444             edgeVal['tagged'] = radios[i].value == "True";
445             edge.setValue(JSON.stringify(edgeVal));
446             break;
447         }
448     }
449     //edge.setValue(cellValue);
450     currentGraph.refresh(edge);
451     closeWindow();
452 }
453
454 function makeMxNetwork(vlan_id, net_name) {
455     model = currentGraph.getModel();
456     width = 10;
457     height = 1700;
458     xoff = 400 + (30 * netCount);
459     yoff = -10;
460     var color = netColors[netCount];
461     if( netCount > (netColors.length - 1)) {
462         color = Math.floor(Math.random() * 16777215); //int in possible color space
463         color = '#' + color.toString(16).toUpperCase(); //convert to hex
464         //alert(color);
465     }
466     var net_val = Object();
467     net_val['vlan_id'] = vlan_id;
468     net_val['name'] = net_name;
469     net_val['public'] = vlan_id < 0;
470     net = currentGraph.insertVertex(
471         currentGraph.getDefaultParent(),
472         'network_' + netCount,
473         JSON.stringify(net_val),
474         xoff,
475         yoff,
476         width,
477         height,
478         'fillColor=' + color,
479         false
480     );
481     var num_ports = 45;
482     for(var i=0; i<num_ports; i++){
483         port = currentGraph.insertVertex(
484             net,
485             null,
486             '',
487             0,
488             (1/num_ports) * i,
489             10,
490             height / num_ports,
491             'fillColor=black;opacity=0',
492             true
493         );
494     }
495
496     var retVal = Object();
497     retVal['color'] = color;
498     retVal['element_id'] = "network_" + netCount;
499
500     netCount++;
501     return retVal;
502 }
503
504 function addPublicNetwork() {
505     var net = makeMxNetwork(-1, "public");
506     makeSidebarNetwork("public", "", net['color'], net['element_id']);
507 }
508
509 function addNetwork(net_name, vlan_id) {
510     var ret = makeMxNetwork(vlan_id, net_name);
511     var color = ret['color'];
512     var net_id = ret['element_id'];
513     networks.add(vlan_id);
514     network_names.add(net_name);
515     makeSidebarNetwork(net_name, vlan_id, color, net_id);
516 }
517
518 function updateHosts(removed) {
519     for(var i=0; i < removed.length; i++)
520     {
521         var hoststring = removed[i];
522         var hostid = "host_" + hoststring.split("*")[0];
523         var cell = currentGraph.getModel().getCell(hostid);
524         currentGraph.removeCells([cell]);
525     }
526
527     var hosts = currentGraph.getChildVertices(currentGraph.getDefaultParent());
528     var topdist = 100;
529     for(var i=0; i<hosts.length; i++)
530     {
531         var host = hosts[i];
532         if(!host.id.startsWith("host_"))
533         {
534             continue;
535         }
536         var geometry = host.getGeometry();
537         geometry.y = topdist + 50;
538         topdist = geometry.y + geometry.height;
539         host.setGeometry(geometry);
540     }
541 }
542
543 function makeSidebarNetwork(net_name, vlan_id, color, net_id){
544     var newNet = document.createElement("li");
545     newNet.id = net_id;
546     var text = net_name;
547     if(vlan_id){
548         text += " : " + vlan_id;
549     }
550     var newNetValue = document.createTextNode(text);
551     newNet.appendChild(newNetValue);
552     newNet.style['background'] = color;
553     document.getElementById("network_list").appendChild(newNet);
554 }
555
556 function makeHost(hostInfo) {
557     value = JSON.stringify(hostInfo['value']);
558     interfaces = hostInfo['interfaces'];
559     graph = currentGraph;
560     width = 100;
561     height = (25 * interfaces.length) + 10;
562     xoff = 75;
563     yoff = lastHostBottom + 50;
564     lastHostBottom = yoff + height;
565     host = graph.insertVertex(
566         graph.getDefaultParent(),
567         'host_' + hostInfo['id'],
568         value,
569         xoff,
570         yoff,
571         width,
572         height,
573         'editable=0',
574         false
575     );
576     host.setConnectable(false);
577     hostCount++;
578
579     for(var i=0; i<interfaces.length; i++) {
580         port = graph.insertVertex(
581             host,
582             null,
583             JSON.stringify(interfaces[i]),
584             90,
585             (i * 25) + 5,
586             20,
587             20,
588             'fillColor=blue;editable=0',
589             false
590         );
591     }
592 }
593
594 function submitForm() {
595     var form = document.getElementById("xml_form");
596     var input_elem = document.getElementById("hidden_xml_input");
597     var s = encodeGraph(currentGraph);
598     input_elem.value = s;
599     req = new XMLHttpRequest();
600     req.open("POST", "/wf/workflow/", false);
601     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
602     req.onerror = function() { alert("problem with form submission"); }
603     var formData = $("#xml_form").serialize();
604     req.send(formData);
605 }
606 </script>
607 {% endblock extrahead %}
608
609 <!-- Calls the main function after the page has loaded. Container is dynamically created. -->
610 {% block content %}
611     <div id="graphParent"
612          style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:65%;left:0px;">
613         <div id="graphContainer"
614             style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
615         </div>
616
617
618         <!-- Creates a container for the sidebar -->
619         <div id="toolbarContainer"
620             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');">
621         </div>
622
623         <!-- Creates a container for the outline -->
624         <div id="outlineContainer"
625             style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
626         </div>
627     </div>
628
629     <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:35%;right:0px;left:auto;background:grey">
630         <button type="button" onclick="newNetworkWindow();">Add Network</button>
631         <ul id="network_list">
632         </ul>
633         <p id="vlan_notice"></p>
634         <button type="button" style="display: none" onclick="submitForm();">Submit</button>
635     </div>
636     <form id="xml_form" method="post" action="/wf/workflow/">
637         {% csrf_token %}
638         <input type="hidden" id="hidden_xml_input" name="xml" />
639     </form>
640
641 <script>
642     main(
643         document.getElementById('graphContainer'),
644         document.getElementById('outlineContainer'),
645         document.getElementById('toolbarContainer'),
646         document.getElementById('sidebarContainer')
647     )
648 </script>
649 {% endblock content %}
650 {% block onleave %}
651 submitForm();
652 {% endblock %}