diff options
author | Parker Berberian <pberberian@iol.unh.edu> | 2019-03-14 15:51:19 -0400 |
---|---|---|
committer | Parker Berberian <pberberian@iol.unh.edu> | 2019-04-15 11:04:18 -0400 |
commit | f446907704b9cc0fee83cf4b4633cbfda03d2430 (patch) | |
tree | d18f606c447cd7eb7725521d336be2e6b184c795 /src/templates/resource | |
parent | d03ddca358c1f48389069e351be217fac514c69e (diff) |
Fixing Network Models
Change-Id: Ia2cdf069e90c8091e8d984c368e47f375aed02ea
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
Diffstat (limited to 'src/templates/resource')
-rw-r--r-- | src/templates/resource/steps/pod_definition.html | 146 |
1 files changed, 48 insertions, 98 deletions
diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html index 8599bb0..2cb6257 100644 --- a/src/templates/resource/steps/pod_definition.html +++ b/src/templates/resource/steps/pod_definition.html @@ -22,23 +22,9 @@ var netColors = ['red', 'blue', 'purple', 'green', 'orange', '#8CCDF5', '#1E9BAC var hostCount = 0; var lastHostBottom = 100; var networks = new Set([]); -var network_names = new Set([]); var has_public_net = false; -var vlans = {{vlans|default:'null'}}; -var vlan_string = ""; function main(graphContainer, overviewContainer, toolbarContainer) { - if(vlans){ - for(var i=0; i<vlans.length-1; i++){ - vlan_string += vlans[i] + ", "; - } - if(vlans.length > 0){ - vlan_string += vlans[vlans.length-1]; - } - - var str = "Available vlans for your POD: " + vlan_string; - document.getElementById("vlan_notice").innerHTML = str; - } //check if the browser is supported if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported', 200, false); @@ -55,14 +41,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) { var model = graph.getModel(); editor.setGraphContainer(graphContainer); - {% if debug %} - editor.addAction('printXML', function(editor, cell) { - mxLog.write(encodeGraph(graph)); - mxLog.show(); - }); - {% endif %} - - doGlobalConfig(graph); currentGraph = graph; @@ -70,7 +48,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) { restoreFromXml('{{xml|safe}}', editor); {% elif hosts %} {% for host in hosts %} - var host = {{host|safe}}; makeHost(host); {% endfor %} @@ -87,12 +64,15 @@ function main(graphContainer, overviewContainer, toolbarContainer) { addToolbarButton(editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true); {% if debug %} + editor.addAction('printXML', function(editor, cell) { + mxLog.write(encodeGraph(graph)); + mxLog.show(); + }); addToolbarButton(editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true); {% endif %} var outline = new mxOutline(graph, overviewContainer); - var checkAllowed = function(edge, terminal, source) { //check if other terminal is null, and that they are different otherTerminal = edge.getTerminal(!source); @@ -145,14 +125,14 @@ function main(graphContainer, overviewContainer, toolbarContainer) { } }); - createDeleteDialog = function(id) - { - var content = document.createElement('div'); - var innerHTML = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>" - innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>" - content.innerHTML = innerHTML; - showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62); + createDeleteDialog = function(id) { + var content = document.createElement('div'); + var innerHTML = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>" + innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>" + content.innerHTML = innerHTML; + showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62); } + graph.dblClick = function(evt, cell) { if( cell != null ){ @@ -167,8 +147,6 @@ function main(graphContainer, overviewContainer, toolbarContainer) { } } }; - graph.setCellsSelectable(false); - graph.setCellsMovable(false); updateHosts({{ removed_hosts|default:"[]"|safe }}); if(!has_public_net){ @@ -197,10 +175,8 @@ function restoreFromXml(xml, editor) { var cell = root.getChildAt(i); if(cell.getId().indexOf("network") > -1) { var info = JSON.parse(cell.getValue()); - var vlan_id = info['vlan_id']; - networks.add(vlan_id); var name = info['name']; - network_names.add(name); + networks.add(name); var styles = cell.getStyle().split(";"); var color = null; for(var j=0; j< styles.length; j++){ @@ -211,11 +187,10 @@ function restoreFromXml(xml, editor) { } } if(info.public){ - vlan_id = ""; has_public_net = true; } netCount++; - makeSidebarNetwork(name, vlan_id, color, cell.getId()); + makeSidebarNetwork(name, color, cell.getId()); } } } @@ -228,50 +203,27 @@ function deleteCell(cellId) { } currentGraph.removeCells([cell]); currentWindow.destroy(); - } function newNetworkWindow() { var innerHtml = 'Name: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>'; - innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>'; innerHtml += '<button style="width: 46%;" onclick="parseNetworkWindow()">Okay</button>'; innerHtml += '<button style="width: 46%;" onclick="currentWindow.destroy();">Cancel</button><br>'; - innerHtml += '<div id="current_window_vlans"/>'; innerHtml += '<div id="current_window_errors"/>'; var content = document.createElement("div"); content.innerHTML = innerHtml; showWindow(currentGraph, "Network Creation", content, 300, 300); - - if(vlans){ - vlan_notice = document.getElementById("current_window_vlans"); - vlan_notice.appendChild(document.createTextNode("Available Vlans: " + vlan_string)); - } } function parseNetworkWindow() { var net_name = document.getElementById("net_name_input").value - var vlan_id = document.getElementById("vlan_id_input").value var error_div = document.getElementById("current_window_errors"); - var vlan_valid = Number.isInteger(Number(vlan_id)) && (vlan_id < 4095) && (vlan_id > 1) - if(vlans){ - vlan_valid = vlan_valid & vlans.indexOf(Number(vlan_id)) >= 0; - } - if( !vlan_valid) - { - error_div.innerHTML = "Please only enter an integer in the valid range (default 1-4095) for the VLAN ID"; - return; - } - if( networks.has(vlan_id)) - { - error_div.innerHTML = "All VLAN IDs must be unique"; - return; - } - if( network_names.has(net_name) ){ + if( networks.has(net_name) ){ error_div.innerHTML = "All network names must be unique"; return; } - addNetwork(net_name, vlan_id); + addNetwork(net_name); currentWindow.destroy(); } @@ -312,6 +264,12 @@ function encodeGraph(graph) { function doGlobalConfig(graph) { //general graph stuff graph.setMultigraph(false); + graph.setCellsSelectable(false); + graph.setCellsMovable(false); + + //testing + graph.vertexLabelIsMovable = true; + //edge behavior graph.setConnectable(true); @@ -332,6 +290,9 @@ function doGlobalConfig(graph) { style[mxConstants.STYLE_ROUNDED] = true; style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; + hostStyle = graph.getStylesheet().getDefaultVertexStyle(); + hostStyle[mxConstants.STYLE_ROUNDED] = 1; + // TODO: Proper override graph.convertValueToString = function(cell) { try{ @@ -395,29 +356,21 @@ function othersUntagged(edgeID) { var end1 = edge.getTerminal(true); var end2 = edge.getTerminal(false); - if( end1.getParent().getId().split('_')[0] == 'host' ) - { + if( end1.getParent().getId().split('_')[0] == 'host' ){ var netint = end1; - } - else - { + } else { var netint = end2; } var edges = netint.edges; - for( var i=0; i < edges.length; i++ ) - { - if( edges[i].getValue() ) - { + for( var i=0; i < edges.length; i++ ) { + if( edges[i].getValue() ) { var tagged = JSON.parse(edges[i].getValue()).tagged; - } - else - { + } else { var tagged = true; } - if( !tagged ) - { + if( !tagged ) { return true; } } @@ -454,12 +407,11 @@ function parseVlanWindow(edgeID) { break; } } - //edge.setValue(cellValue); currentGraph.refresh(edge); closeWindow(); } -function makeMxNetwork(vlan_id, net_name) { +function makeMxNetwork(net_name, public = false) { model = currentGraph.getModel(); width = 10; height = 1700; @@ -472,9 +424,8 @@ function makeMxNetwork(vlan_id, net_name) { //alert(color); } var net_val = Object(); - net_val['vlan_id'] = vlan_id; net_val['name'] = net_name; - net_val['public'] = vlan_id < 0; + net_val['public'] = public; net = currentGraph.insertVertex( currentGraph.getDefaultParent(), 'network_' + netCount, @@ -505,23 +456,23 @@ function makeMxNetwork(vlan_id, net_name) { retVal['color'] = color; retVal['element_id'] = "network_" + netCount; + networks.add(net_name); + netCount++; return retVal; } function addPublicNetwork() { - var net = makeMxNetwork(-1, "public"); - network_names.add("public"); - makeSidebarNetwork("public", "", net['color'], net['element_id']); + var net = makeMxNetwork("public", true); + makeSidebarNetwork("public", net['color'], net['element_id']); + has_public_net = true; } -function addNetwork(net_name, vlan_id) { - var ret = makeMxNetwork(vlan_id, net_name); +function addNetwork(net_name) { + var ret = makeMxNetwork(net_name); var color = ret['color']; var net_id = ret['element_id']; - networks.add(vlan_id); - network_names.add(net_name); - makeSidebarNetwork(net_name, vlan_id, color, net_id); + makeSidebarNetwork(net_name, color, net_id); } function updateHosts(removed) { @@ -535,8 +486,7 @@ function updateHosts(removed) { var hosts = currentGraph.getChildVertices(currentGraph.getDefaultParent()); var topdist = 100; - for(var i=0; i<hosts.length; i++) - { + for(var i=0; i<hosts.length; i++) { var host = hosts[i]; if(!host.id.startsWith("host_")) { @@ -549,7 +499,7 @@ function updateHosts(removed) { } } -function makeSidebarNetwork(net_name, vlan_id, color, net_id){ +function makeSidebarNetwork(net_name, color, net_id){ var newNet = document.createElement("li"); var colorBlob = document.createElement("div"); colorBlob.className = "colorblob"; @@ -565,9 +515,6 @@ function makeSidebarNetwork(net_name, vlan_id, color, net_id){ createDeleteDialog(net_id); }, false); var text = net_name; - if(vlan_id){ - text += " : " + vlan_id; - } var newNetValue = document.createTextNode(text); textContainer.appendChild(newNetValue); colorBlob.style['background'] = color; @@ -585,7 +532,7 @@ function makeHost(hostInfo) { interfaces = hostInfo['interfaces']; graph = currentGraph; width = 100; - height = (25 * interfaces.length) + 10; + height = (25 * interfaces.length) + 25; xoff = 75; yoff = lastHostBottom + 50; lastHostBottom = yoff + height; @@ -600,6 +547,7 @@ function makeHost(hostInfo) { 'editable=0', false ); + host.getGeometry().offset = new mxPoint(-50,0); host.setConnectable(false); hostCount++; @@ -609,13 +557,16 @@ function makeHost(hostInfo) { null, JSON.stringify(interfaces[i]), 90, - (i * 25) + 5, + (i * 25) + 12, 20, 20, 'fillColor=blue;editable=0', false ); + port.getGeometry().offset = new mxPoint(-4*interfaces[i].name.length -2,0); + currentGraph.refresh(port); } + currentGraph.refresh(host); } function submitForm() { @@ -709,7 +660,6 @@ function submitForm() { </div> <ul id="network_list"> </ul> - <p id="vlan_notice"></p> <button type="button" style="display: none" onclick="submitForm();">Submit</button> </div> <form id="xml_form" method="post" action="/wf/workflow/"> |