aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/base.html1
-rw-r--r--src/templates/booking/booking_table.html2
-rw-r--r--src/templates/booking/quick_deploy.html24
-rw-r--r--src/templates/booking/steps/booking_meta.html9
-rw-r--r--src/templates/config_bundle/steps/assign_host_roles.html22
-rw-r--r--src/templates/config_bundle/steps/assign_network_roles.html22
-rw-r--r--src/templates/config_bundle/steps/config_software.html50
-rw-r--r--src/templates/config_bundle/steps/define_software.html129
-rw-r--r--src/templates/config_bundle/steps/pick_installer.html32
-rw-r--r--src/templates/config_bundle/steps/table_formset.html63
-rw-r--r--src/templates/dashboard/idf.yaml26
-rw-r--r--src/templates/dashboard/lab_detail.html1
-rw-r--r--src/templates/resource/hostprofile_detail.html116
-rw-r--r--src/templates/resource/hosts.html2
-rw-r--r--src/templates/resource/steps/meta_info.html2
-rw-r--r--src/templates/resource/steps/pod_definition.html146
-rw-r--r--src/templates/workflow/viewport-base.html29
17 files changed, 408 insertions, 268 deletions
diff --git a/src/templates/base.html b/src/templates/base.html
index 02c67dc..f48a201 100644
--- a/src/templates/base.html
+++ b/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/src/templates/booking/booking_table.html b/src/templates/booking/booking_table.html
index e0c5f49..32a0146 100644
--- a/src/templates/booking/booking_table.html
+++ b/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/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 819bf05..38294b2 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/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/src/templates/booking/steps/booking_meta.html b/src/templates/booking/steps/booking_meta.html
index e4881ae..fe43f53 100644
--- a/src/templates/booking/steps/booking_meta.html
+++ b/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/src/templates/config_bundle/steps/assign_host_roles.html b/src/templates/config_bundle/steps/assign_host_roles.html
new file mode 100644
index 0000000..3ba7665
--- /dev/null
+++ b/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/src/templates/config_bundle/steps/assign_network_roles.html b/src/templates/config_bundle/steps/assign_network_roles.html
new file mode 100644
index 0000000..0e887d6
--- /dev/null
+++ b/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/src/templates/config_bundle/steps/config_software.html b/src/templates/config_bundle/steps/config_software.html
index e1f9541..b181c7e 100644
--- a/src/templates/config_bundle/steps/config_software.html
+++ b/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/src/templates/config_bundle/steps/define_software.html b/src/templates/config_bundle/steps/define_software.html
index 8e7be91..ba1ff34 100644
--- a/src/templates/config_bundle/steps/define_software.html
+++ b/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/src/templates/config_bundle/steps/pick_installer.html b/src/templates/config_bundle/steps/pick_installer.html
new file mode 100644
index 0000000..3b170d9
--- /dev/null
+++ b/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/src/templates/config_bundle/steps/table_formset.html b/src/templates/config_bundle/steps/table_formset.html
new file mode 100644
index 0000000..ad2c5a3
--- /dev/null
+++ b/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/src/templates/dashboard/idf.yaml b/src/templates/dashboard/idf.yaml
index 5da20c4..9e0cc26 100644
--- a/src/templates/dashboard/idf.yaml
+++ b/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/src/templates/dashboard/lab_detail.html b/src/templates/dashboard/lab_detail.html
index a30ac9e..7938e86 100644
--- a/src/templates/dashboard/lab_detail.html
+++ b/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/src/templates/resource/hostprofile_detail.html b/src/templates/resource/hostprofile_detail.html
new file mode 100644
index 0000000..0776b9e
--- /dev/null
+++ b/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/src/templates/resource/hosts.html b/src/templates/resource/hosts.html
index 4bf64e0..69b7231 100644
--- a/src/templates/resource/hosts.html
+++ b/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/src/templates/resource/steps/meta_info.html b/src/templates/resource/steps/meta_info.html
index 7a1b56a..da98267 100644
--- a/src/templates/resource/steps/meta_info.html
+++ b/src/templates/resource/steps/meta_info.html
@@ -7,7 +7,7 @@
<style>
#resource_meta_form {
- margin: 80px;
+ padding: 80px;
display: grid;
}
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/">
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index f78bc01..1329595 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/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 %}