diff options
Diffstat (limited to 'dashboard/src/templates')
17 files changed, 408 insertions, 268 deletions
diff --git a/dashboard/src/templates/base.html b/dashboard/src/templates/base.html index 02c67dc..f48a201 100644 --- a/dashboard/src/templates/base.html +++ b/dashboard/src/templates/base.html @@ -134,6 +134,7 @@ <button class="btn drop_btn" onclick="cwf(1)">Design a Pod</button> <button class="btn drop_btn" onclick="cwf(2)">Configure a Pod</button> <button class="btn drop_btn" onclick="cwf(3)">Create a Snapshot</button> + <button class="btn drop_btn" onclick="cwf(4)">Configure OPNFV</button> </div> </li> <li> diff --git a/dashboard/src/templates/booking/booking_table.html b/dashboard/src/templates/booking/booking_table.html index e0c5f49..32a0146 100644 --- a/dashboard/src/templates/booking/booking_table.html +++ b/dashboard/src/templates/booking/booking_table.html @@ -30,7 +30,7 @@ {{ booking.end }} </td> <td> - {{ booking.resource.get_host.config.image.os.name }} + {{ booking.resource.get_head_node.config.image.os.name }} </td> </tr> {% endfor %} diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html index 819bf05..38294b2 100644 --- a/dashboard/src/templates/booking/quick_deploy.html +++ b/dashboard/src/templates/booking/quick_deploy.html @@ -26,6 +26,14 @@ .grid_element_2third { grid-column-start: span 8; } + #id_length { + -moz-appearance: none; + border: none; + box-shadow: none; + } + input[type=range]::-moz-range-track { + background: #cccccc; + } </style> {% bootstrap_form_errors form type='non_fields' %} <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form"> @@ -108,6 +116,12 @@ $('#id_image').children().hide(); + for( var i = 0; i < drop.childNodes.length; i++ ) + { + drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright + } + + var empty_map = {} for ( var i=0; i < drop.childNodes.length; i++ ) @@ -130,12 +144,13 @@ if( image_object.host_profile == host_pk && image_object.lab == lab_pk ) { drop.childNodes[i].style.display = "inherit"; + drop.childNodes[i].disabled = false; } } } } - $('#id_image').children().hide(); + imageHider(); $('#id_installer').children().hide(); $('#id_scenario').children().hide(); @@ -165,7 +180,13 @@ } targ_id = "#" + target; + $(targ_id).children().hide(); + + for (var i = 0; i < document.getElementById(target).childNodes.length; i++) + { + document.getElementById(target).childNodes[i].disabled = true; + } var drop = document.getElementById(master); var opts = target_filter[drop.options[drop.selectedIndex].value]; if (!opts) { @@ -182,6 +203,7 @@ for (var i = 0; i < document.getElementById(target).childNodes.length; i++) { if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) { document.getElementById(target).childNodes[i].style.display = "inherit"; + document.getElementById(target).childNodes[i].disabled = false; } } } diff --git a/dashboard/src/templates/booking/steps/booking_meta.html b/dashboard/src/templates/booking/steps/booking_meta.html index e4881ae..fe43f53 100644 --- a/dashboard/src/templates/booking/steps/booking_meta.html +++ b/dashboard/src/templates/booking/steps/booking_meta.html @@ -21,6 +21,15 @@ grid-template-columns: 45% 10% 45%; border: none; } + + #id_length { + -moz-appearance: none; + border: none; + box-shadow: none; + } + input[type=range]::-moz-range-track { + background: #cccccc; + } </style> {% bootstrap_form_errors form type='non_fields' %} diff --git a/dashboard/src/templates/config_bundle/steps/assign_host_roles.html b/dashboard/src/templates/config_bundle/steps/assign_host_roles.html new file mode 100644 index 0000000..3ba7665 --- /dev/null +++ b/dashboard/src/templates/config_bundle/steps/assign_host_roles.html @@ -0,0 +1,22 @@ +{% extends "config_bundle/steps/table_formset.html" %} + +{% load bootstrap3 %} + +{% block table %} +<thead> + <tr> + <th>Host</th> + <th>Role</th> + </tr> +</thead> +<tbody> + {% for form in formset %} + <tr> + <td>{% bootstrap_field form.host_name show_label=False %}</td> + <td>{% bootstrap_field form.role show_label=False %}</td> + </tr> + {% endfor %} +</tbody> + +{{formset.management_form}} +{% endblock table %} diff --git a/dashboard/src/templates/config_bundle/steps/assign_network_roles.html b/dashboard/src/templates/config_bundle/steps/assign_network_roles.html new file mode 100644 index 0000000..0e887d6 --- /dev/null +++ b/dashboard/src/templates/config_bundle/steps/assign_network_roles.html @@ -0,0 +1,22 @@ +{% extends "config_bundle/steps/table_formset.html" %} + +{% load bootstrap3 %} + +{% block table %} +<thead> + <tr> + <th>Role</th> + <th>Network</th> + </tr> +</thead> +<tbody> + {% for form in formset %} + <tr> + <td>{% bootstrap_field form.role show_label=False %}</td> + <td>{% bootstrap_field form.network show_label=False %}</td> + </tr> + {% endfor %} +</tbody> + +{{formset.management_form}} +{% endblock table %} diff --git a/dashboard/src/templates/config_bundle/steps/config_software.html b/dashboard/src/templates/config_bundle/steps/config_software.html index e1f9541..b181c7e 100644 --- a/dashboard/src/templates/config_bundle/steps/config_software.html +++ b/dashboard/src/templates/config_bundle/steps/config_software.html @@ -8,58 +8,12 @@ <form action="/wf/workflow/" method="POST" id="software_config_form" class="form"> {% csrf_token %} <p>Give it a name:</p> - {{ form.name }} + {% bootstrap_field form.name %} <p>And a description:</p> - {{ form.description }} - <div id="hidden" style="display:none;"> - <p>Install OPNFV?</p> - {{ form.opnfv }} - <p>Choose your:</p> - <table> - <thead> - <tr> - <th>Installer</th> - <th>Scenario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{form.installer}}</td> - <td>{{form.scenario}}</td> - </tr> - </tbody> - </table> - </div> - + {% bootstrap_field form.description %} </form> -<script> -var supported = {{supported|safe}}; -var installer_drop = document.getElementById("id_installer"); -installer_drop.addEventListener("change", filter); -var scenario_drop = document.getElementById("id_scenario"); -var scenario_options = {}; -for(var i=0; i<scenario_drop.options.length; i++){ - var option = scenario_drop.options[i]; - scenario_options[option.text] = option; -} - -scenario_drop.disabled=true; - -function filter(){ - //clear out existing options - while(scenario_drop.firstChild){ - scenario_drop.removeChild(scenario_drop.firstChild) - } - var installer = installer_drop.options[installer_drop.selectedIndex].text; - var options = supported[installer]; - for(var i=0; i<options.length; i++){ - scenario_drop.appendChild(scenario_options[options[i]]); - } - scenario_drop.disabled = false; -} -</script> {% endblock content %} diff --git a/dashboard/src/templates/config_bundle/steps/define_software.html b/dashboard/src/templates/config_bundle/steps/define_software.html index 8e7be91..ba1ff34 100644 --- a/dashboard/src/templates/config_bundle/steps/define_software.html +++ b/dashboard/src/templates/config_bundle/steps/define_software.html @@ -1,102 +1,55 @@ -{% extends "workflow/viewport-element.html" %} -{% load staticfiles %} +{% extends "config_bundle/steps/table_formset.html" %} {% load bootstrap3 %} +{% block table %} + <thead> + <tr> + <th>Device</th> + <th>Image</th> + <th>HeadNode</th> + </tr> + </thead> + <tbody> +{% for form in formset %} + <tr> + <td>{% bootstrap_field form.host_name show_label=False %}</td> + <td>{% bootstrap_field form.image show_label=False %}</td> + <td class="table_hidden_input_parent"> + <input id="radio_{{forloop.counter}}" class="my_radio" type="radio" name="headnode" value="{{forloop.counter}}"> + {{ form.headnode }} + </td> + </tr> +{% endfor %} +{{formset.management_form}} + +{% endblock table %} + +{% block tablejs %} +<script> + + document.getElementById("radio_{{headnode}}").checked = true; + +</script> +{% endblock tablejs %} -{% block extrahead %} - <!-- DataTables CSS --> - <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" - rel="stylesheet"> - <!-- DataTables Responsive CSS --> - <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet"> -{% endblock extrahead %} - -{% block content %} -{% if error %} - <h1 style="text-align:center;">{{ error }}</h1> -{% else %} - <form style="width: 90%; margin: 5%;" method="post" action="" class="form" id="softwaredefinitionform"> - {% csrf_token %} - - <div class="row"> - <div class="col-lg-12"> - <div class="dataTables_wrapper"> - <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0" - width="100%"> - - {% block table %} - <thead> - <tr> - <th>Device</th> - <th>Role</th> - <th>Image</th> - </tr> - </thead> - <tbody> - {% for form in formset %} - <tr> - {% for field in form %} - <td>{{ field }}</td> - {% endfor %} - </tr> - {% endfor %} - {{formset.management_form}} - - {% endblock table %} - - </table> - </div> - <!-- /.table-responsive --> - <!-- /.panel-body --> - <!-- /.panel --> - </div> - <!-- /.col-lg-12 --> - </div> - </form> - - <script> -function filter_images(){ - var filter_data = {{filter_data|safe}}; - for(var key in filter_data){ - var dropdown = document.getElementById(key); - var to_remove = filter_data[key]; - for(var i=0; i<to_remove.length; i++){ - for(var j=dropdown.children.length-1; j>=0; j--){ - if(dropdown.children[j].text == to_remove[i]){ - dropdown.removeChild(dropdown.children[j]); - } - } - } +{% block onleave %} +var parents = document.getElementsByClassName("table_hidden_input_parent"); +for(var i=0; i<parents.length; i++){ + var node = parents[i]; + var radio = node.getElementsByClassName("my_radio")[0]; + var checkbox = radio.nextElementSibling; + if(radio.checked){ + checkbox.value = "True"; } } -filter_images(); - </script> -{% endif %} -{% endblock content %} - -{% block extrajs %} - {{ block.super }} - <!-- DataTables JavaScript --> - - <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script> - <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script> - - <script src={% static "js/dataTables-sort.js" %}></script> - - {% block tablejs %} - {% endblock tablejs %} -{% endblock extrajs %} - - -{% block onleave %} -var form = $("#softwaredefinitionform"); +var form = $("#table_formset"); var formData = form.serialize(); var req = new XMLHttpRequest(); req.open("POST", "/wf/workflow/", false); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.onerror = function() { alert("problem with form submission"); } req.send(formData); -{% endblock %} +{% endblock onleave %} diff --git a/dashboard/src/templates/config_bundle/steps/pick_installer.html b/dashboard/src/templates/config_bundle/steps/pick_installer.html new file mode 100644 index 0000000..3b170d9 --- /dev/null +++ b/dashboard/src/templates/config_bundle/steps/pick_installer.html @@ -0,0 +1,32 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap3 %} + +{% block content %} + +{% if unavailable %} +<h1>Please choose a config bundle first</h1> +{% else %} + +<form id="installer_form" action="/wf/workflow/" method="POST" id="installer_config_form" class="form"> + {% csrf_token %} + <p>Choose your installer:</p> + {% bootstrap_field form.installer %} + <p>Choose your scenario:</p> + {% bootstrap_field form.scenario %} +</form> + +{% endif %} + +{% endblock content %} + +{% block onleave %} +var form = $("#installer_form"); +var formData = form.serialize(); +var req = new XMLHttpRequest(); +req.open("POST", "/wf/workflow/", false); +req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +req.onerror = function() { alert("problem with form submission"); } +req.send(formData); +{% endblock %} diff --git a/dashboard/src/templates/config_bundle/steps/table_formset.html b/dashboard/src/templates/config_bundle/steps/table_formset.html new file mode 100644 index 0000000..ad2c5a3 --- /dev/null +++ b/dashboard/src/templates/config_bundle/steps/table_formset.html @@ -0,0 +1,63 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap3 %} + +{% block extrahead %} + <!-- DataTables CSS --> + <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" + rel="stylesheet"> + + <!-- DataTables Responsive CSS --> + <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet"> +{% endblock extrahead %} + +{% block content %} +{% if error %} + <h1 style="text-align:center;">{{ error }}</h1> +{% else %} +<div style="padding: 5%;"> + <form method="post" action="" class="form" id="table_formset"> + {% csrf_token %} + + <div class="row"> + <div class="col-lg-12"> + <div class="dataTables_wrapper"> + <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0" width="100%"> + + {% block table %} + {% endblock table %} + + </table> + </div> + </div> + </div> + </form> +</div> + +{% endif %} +{% endblock content %} + +{% block extrajs %} + {{ block.super }} + <!-- DataTables JavaScript --> + + <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script> + <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script> + + <script src={% static "js/dataTables-sort.js" %}></script> + + {% block tablejs %} + {% endblock tablejs %} +{% endblock extrajs %} + + +{% block onleave %} +var form = $("#table_formset"); +var formData = form.serialize(); +var req = new XMLHttpRequest(); +req.open("POST", "/wf/workflow/", false); +req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +req.onerror = function() { alert("problem with form submission"); } +req.send(formData); +{% endblock %} diff --git a/dashboard/src/templates/dashboard/idf.yaml b/dashboard/src/templates/dashboard/idf.yaml index 5da20c4..9e0cc26 100644 --- a/dashboard/src/templates/dashboard/idf.yaml +++ b/dashboard/src/templates/dashboard/idf.yaml @@ -1,8 +1,9 @@ +--- idf: version: {{version|default:"0.1"}} net_config: oob: - ip-range: {{net_config.oob.ip-range}} + ip-range: {{net_config.oob.ip_range}} vlan: {{net_config.oob.vlan}} admin: interface: {{net_config.admin.interface}} @@ -24,13 +25,11 @@ idf: vlan: {{net_config.public.vlan}} network: {{net_config.public.network}} mask: {{net_config.public.mask}} - ip-range: {{net_config.public.ip-range}} + ip-range: {{net_config.public.ip_range}} mask: {{net_config.public.mask}} gateway: {{net_config.public.gateway}} - dns: - {% for serv in net_config.public.dns %} - - {{serv}} - {% endfor %} + dns: {% for serv in net_config.public.dns %} + - {{serv}}{% endfor %} fuel: jumphost: bridges: @@ -38,15 +37,10 @@ idf: mgmt: {{fuel.jumphost.bridges.mgmt}} private: {{fuel.jumphost.bridges.private}} public: {{fuel.jumphost.bridges.public}} - network: - {% for node in fuel.network.nodes %} + network: {% for node in fuel.network.nodes %} node: - - interfaces: - {% for iface in node.interfaces %} - - {{ iface }} - {% endfor %} - - busaddr: - {% for addr in node.bus_addrs %} - - {{addr}} - {% endfor %} + - interfaces: {% for iface in node.interfaces %} + - {{ iface }}{% endfor %} + - busaddr: {% for addr in node.bus_addrs %} + - {{addr}}{% endfor %} {% endfor %} diff --git a/dashboard/src/templates/dashboard/lab_detail.html b/dashboard/src/templates/dashboard/lab_detail.html index a30ac9e..7938e86 100644 --- a/dashboard/src/templates/dashboard/lab_detail.html +++ b/dashboard/src/templates/dashboard/lab_detail.html @@ -62,6 +62,7 @@ <tr> <td>{{profile.name}}</td> <td>{{profile.description}}</td> + <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-primary">Profile</a></td> </tr> {% endfor %} </table> diff --git a/dashboard/src/templates/resource/hostprofile_detail.html b/dashboard/src/templates/resource/hostprofile_detail.html new file mode 100644 index 0000000..0776b9e --- /dev/null +++ b/dashboard/src/templates/resource/hostprofile_detail.html @@ -0,0 +1,116 @@ +{% extends "base.html" %} +{% load staticfiles %} + +{% block content %} +<div class="row"> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">Available at</h4> + <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="panel_overview"> + <table class="table"> + <tr> + <td> + <ul> + {% for lab in hostprofile.labs.all %} + <li>{{lab.name}}</li> + {% endfor %} + </ul> + </td> + </tr> + </table> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">RAM</h4> + <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="panel_overview"> + <table class="table"> + <tr> + <td>{{hostprofile.ramprofile.first.amount}}G, + {{hostprofile.ramprofile.first.channels}} channels</td> + </tr> + </table> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">CPU</h4> + <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="panel_overview"> + <table class="table"> + <tr> + <td>Arch:</td> + <td>{{hostprofile.cpuprofile.first.architecture}}</td> + </tr> + <tr> + <td>Cores:</td> + <td>{{hostprofile.cpuprofile.first.cores}}</td> + </tr> + <tr> + <td>Sockets:</td> + <td>{{hostprofile.cpuprofile.first.cpus}}</td> + </tr> + </table> + </div> + </div> + </div> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">Interfaces</h4> + <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="panel_overview"> + <table class="table"> + {% for intprof in hostprofile.interfaceprofile.all %} + <tr> + <td> + <table class="table borderless"> + <tr> + <td>Name:</td> + <td>{{intprof.name}}</td> + </tr> + <tr> + <td>Speed:</td> + <td>{{intprof.speed}}</td> + </tr> + </table> + </td> + </tr> + {% endfor %} + </table> + </div> + </div> + </div> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">Disk</h4> + <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="panel_overview"> + <table class="table"> + <tr> + <td>Size:</td> + <td>{{hostprofile.storageprofile.first.size}} GiB</td> + </tr> + <tr> + <td>Type:</td> + <td>{{hostprofile.storageprofile.first.media_type}}</td> + </tr> + <tr> + <td>Mount Point:</td> + <td>{{hostprofile.storageprofile.first.name}}</td> + </tr> + </table> + </div> + </div> + </div> +</div> +{% endblock content %} diff --git a/dashboard/src/templates/resource/hosts.html b/dashboard/src/templates/resource/hosts.html index 4bf64e0..69b7231 100644 --- a/dashboard/src/templates/resource/hosts.html +++ b/dashboard/src/templates/resource/hosts.html @@ -17,7 +17,7 @@ {{ host.name }} </td> <td> - {{ host.profile }} + <a href="profiles/{{ host.profile.id }}">{{ host.profile }}</a> </td> <td> {{ host.booked }} diff --git a/dashboard/src/templates/resource/steps/meta_info.html b/dashboard/src/templates/resource/steps/meta_info.html index 7a1b56a..da98267 100644 --- a/dashboard/src/templates/resource/steps/meta_info.html +++ b/dashboard/src/templates/resource/steps/meta_info.html @@ -7,7 +7,7 @@ <style> #resource_meta_form { - margin: 80px; + padding: 80px; display: grid; } 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/"> diff --git a/dashboard/src/templates/workflow/viewport-base.html b/dashboard/src/templates/workflow/viewport-base.html index f78bc01..1329595 100644 --- a/dashboard/src/templates/workflow/viewport-base.html +++ b/dashboard/src/templates/workflow/viewport-base.html @@ -84,12 +84,19 @@ background: #0FD57D; } - #viewport-iframe - { - height: calc(100vh - 450); - } - + .iframe_div { + width: calc(100% - 450px); + margin-left: 70px; + height: calc(100vh - 155px); + position: absolute; + border: none; + } + .iframe_elem { + width: 100%; + height: calc(100vh - 155px); + border: none; + } </style> <button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button> @@ -415,15 +422,7 @@ document.getElementById("view_message").className = "step_message"; document.getElementById("view_message").classList.add("message_" + stepstatus); } - function resize_iframe(){ - var page_rect = document.getElementById("wrapper").getBoundingClientRect(); - var title_rect = document.getElementById("iframe_header").getBoundingClientRect(); - var iframe_height = page_rect.bottom - title_rect.bottom; - document.getElementById("viewport-iframe").height = iframe_height; - } - window.addEventListener('load', resize_iframe); - window.addEventListener('resize', resize_iframe); </script> <!-- /.col-lg-12 --> </div> @@ -433,5 +432,7 @@ </form> </div> -<iframe src="/wf/workflow" style="position: absolute; left: 351px; right: 105px; width: calc(100% - 450px); border-style: none; border-width: 1px; border-color: #888888;" scrolling="yes" id="viewport-iframe" onload="resize_iframe();"></iframe> +<div class="iframe_div"> + <iframe src="/wf/workflow" class="iframe_elem" scrolling="yes" id="viewport-iframe"></iframe> +</div> {% endblock content %} |