From ead66842366bb0e61fef6b87aae51501daa335fe Mon Sep 17 00:00:00 2001
From: Parker Berberian <pberberian@iol.unh.edu>
Date: Thu, 14 Mar 2019 15:51:19 -0400
Subject: Fixing Network Models

Change-Id: Ia2cdf069e90c8091e8d984c368e47f375aed02ea
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
---
 .../templates/resource/steps/pod_definition.html   | 146 +++++++--------------
 1 file changed, 48 insertions(+), 98 deletions(-)

(limited to 'dashboard/src/templates/resource/steps')

diff --git a/dashboard/src/templates/resource/steps/pod_definition.html b/dashboard/src/templates/resource/steps/pod_definition.html
index 8599bb0..2cb6257 100644
--- a/dashboard/src/templates/resource/steps/pod_definition.html
+++ b/dashboard/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/">
-- 
cgit 1.2.3-korg