diff options
Diffstat (limited to 'src/templates/resource')
| -rw-r--r-- | src/templates/resource/hostprofile_detail.html | 134 | ||||
| -rw-r--r-- | src/templates/resource/steps/define_hardware.html | 10 | ||||
| -rw-r--r-- | src/templates/resource/steps/host_info.html | 11 | ||||
| -rw-r--r-- | src/templates/resource/steps/meta_info.html | 38 | ||||
| -rw-r--r-- | src/templates/resource/steps/pod_definition.html | 163 |
5 files changed, 131 insertions, 225 deletions
diff --git a/src/templates/resource/hostprofile_detail.html b/src/templates/resource/hostprofile_detail.html index dc20600..c26d774 100644 --- a/src/templates/resource/hostprofile_detail.html +++ b/src/templates/resource/hostprofile_detail.html @@ -6,95 +6,105 @@ <div class="col-lg-6"> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">Available at</h4> - <button data-toggle="collapse" data-target="#avilableAt" class="btn ml-auto btn-outline-secondary">Expand</button> + <h4 class="d-inline">Available at</h4> + <button data-toggle="collapse" data-target="#availableAt" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="avilableAt"> - <ul class="list-group"> - {% for lab in hostprofile.labs.all %} - <li class="list-group-item">{{lab.name}}</li> - {% endfor %} - </ul> + <div class="collapse show" id="availableAt"> + <div class="card-body"> + <ul class="list-group"> + {% for lab in hostprofile.labs.all %} + <li class="list-group-item">{{lab.name}}</li> + {% endfor %} + </ul> + </div> </div> </div> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">RAM</h4> + <h4 class="d-inline">RAM</h4> <button data-toggle="collapse" data-target="#ramPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="ramPanel"> - {{hostprofile.ramprofile.first.amount}}G, - {{hostprofile.ramprofile.first.channels}} channels + <div id="ramPanel" class="collapse show"> + <div class="card-body"> + {{hostprofile.ramprofile.first.amount}}G, + {{hostprofile.ramprofile.first.channels}} channels + </div> </div> </div> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">CPU</h4> + <h4 class="d-inline">CPU</h4> <button data-toggle="collapse" data-target="#cpuPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="cpuPanel"> - <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 class="collapse show" id="cpuPanel"> + <div class="card-body"> + <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="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">Disk</h4> + <h4 class="d-inline">Disk</h4> <button data-toggle="collapse" data-target="#diskPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="diskPanel"> - <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 class="collapse show" id="diskPanel"> + <div class="card-body"> + <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> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex"> - <h4 style="display: inline;">Interfaces</h4> + <h4 class="d-inline">Interfaces</h4> <button data-toggle="collapse" data-target="#interfacePanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="interfacePanel"> - <table class="table"> - <thead> - <tr> - <th>Name</th> - <th>Speed</th> - </tr> - </thead> - <tbody> - {% for intprof in hostprofile.interfaceprofile.all %} - <tr> - <td>{{intprof.name}}</td> - <td>{{intprof.speed}}</td> - </tr> - {% endfor %} - </tbody> - </table> + <div class="collapse show" id="interfacePanel"> + <div class="card-body"> + <table class="table"> + <thead> + <tr> + <th>Name</th> + <th>Speed</th> + </tr> + </thead> + <tbody> + {% for intprof in hostprofile.interfaceprofile.all %} + <tr> + <td>{{intprof.name}}</td> + <td>{{intprof.speed}}</td> + </tr> + {% endfor %} + </tbody> + </table> + </div> </div> </div> </div> diff --git a/src/templates/resource/steps/define_hardware.html b/src/templates/resource/steps/define_hardware.html index 57078e9..2cb37da 100644 --- a/src/templates/resource/steps/define_hardware.html +++ b/src/templates/resource/steps/define_hardware.html @@ -9,16 +9,8 @@ As you make your selections, labs and hosts that are not compatible with your current configuration will become unavailable.</p> <h4>NOTE: Only PTL's are able to create multi-node PODs. See <a href="https://google.com">here</a> for more details</h4> -<form id="define_hardware_form" action="/wf/workflow/" method="post"> +<form id="step_form" method="post" class="px-3"> {% csrf_token %} {{form.filter_field|default:"<p>No Form</p>"}} </form> {% endblock content %} -{% block onleave %} -multi_filter_widget.finish(); -var formData = $("#define_hardware_form").serialize(); -req = new XMLHttpRequest(); -req.open('POST', '/wf/workflow/', false); -req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); -req.send(formData); -{% endblock %} diff --git a/src/templates/resource/steps/host_info.html b/src/templates/resource/steps/host_info.html index bbbafdc..3230d8f 100644 --- a/src/templates/resource/steps/host_info.html +++ b/src/templates/resource/steps/host_info.html @@ -10,7 +10,7 @@ {% else %} -<form id="host_meta_form" method="post" action="/wf/workflow/"> +<form id="step_form" method="post"> {% csrf_token %} <table> <thead> @@ -32,12 +32,3 @@ </form> {% endif %} {% endblock content %} - -{% block onleave %} -var formData = $("#host_meta_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("There was a problem submitting the form"); } -req.send(formData); -{% endblock %} diff --git a/src/templates/resource/steps/meta_info.html b/src/templates/resource/steps/meta_info.html index cebd343..b6a17a9 100644 --- a/src/templates/resource/steps/meta_info.html +++ b/src/templates/resource/steps/meta_info.html @@ -5,42 +5,10 @@ {% block content %} -<style> -#resource_meta_form { - padding: 80px; - display: grid; -} - -#resource_meta_form td > * { - width: 100%; - margin-bottom: 20px; - margin-top: 20px; -} - -#resource_meta_form > table > tbody > tr { - border-bottom: 1px solid #cccccc; -} - -#resource_meta_form > table > tbody > tr:last-child { - border-bottom: none; -} - -</style> - -<form id="resource_meta_form" method="post" action="/wf/workflow/"> +<form id="step_form" method="post"> {% csrf_token %} - <table> - {{form}} + <table class="px-4"> + {% bootstrap_form form field_class="px-4" label_class="px-4 mt-2" %} </table> </form> {% endblock content %} - -{% block onleave %} -var ajaxForm = $("#resource_meta_form"); -var formData = ajaxForm.serialize(); -req = new XMLHttpRequest(); -req.open("POST", "/wf/workflow/", false); -req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); -req.onerror = function() { alert("problem submitting form"); } -req.send(formData); -{% endblock %} diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html index 5826ccb..4392dbd 100644 --- a/src/templates/resource/steps/pod_definition.html +++ b/src/templates/resource/steps/pod_definition.html @@ -13,127 +13,72 @@ <!-- Calls the main function after the page has loaded. Container is dynamically created. --> {% block content %} - <div id="graphParent" - style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;"> - <div id="graphContainer" - style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;"> + <div class="row p-0 w-100 mx-0 position-absolute overflow-hidden topToBottom"> + <div id="graphParent" class="col px-0"> + <div class="row"> + <div class="col pr-0"> + <div id="toolbarContainer" class="bg-light pl-4"></div> + </div> + </div> + <!-- Creates a container for the sidebar --> + <div id="graphContainer"></div> </div> - - <!-- Creates a container for the sidebar --> - <div id="toolbarContainer" - style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;"> - </div> - - <!-- Creates a container for the outline --> - <div id="outlineContainer" - style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;"> + <div id="network_select" class="p-0 w-25 ml-auto col-2"> + <div class="px-0 mb-2"> + <!-- Creates a container for the outline --> + <div id="outlineContainer" class="border"></div> + </div> + <div> + <button id="btn_add_network" type="button" class="btn btn-primary w-100" onclick="network_step.newNetworkWindow();">Add Network</button> + </div> + <ul id="network_list" class="list-group"> + </ul> + <button type="button" class="d-none" onclick="network_step.submitForm();">Submit</button> </div> </div> - - <style> - p { - word-break: normal; - white-space: normal; - } - #network_select { - background: inherit; - padding: 0px; - padding-top: 0px; - } - #toolbarContainer { - background: #DDDDDD; - height: 36px; - } - #toolbar_extension { - height: 36px; - background: #DDDDDD; - } - #btn_add_network { - width: 100%; - } - #vlan_notice { - margin: 20px; - } - #network_list li { - border-radius: 2px; - margin: 5px; - padding: 5px; - vertical-align: middle; - background: #DDDDDD; - } - #network_list { - list-style-type: none; - padding: 0; - } - .colorblob { - width: 20px; - height: 20px; - border-radius: 50%; - display: inline-block; - vertical-align: middle; - } - .network_innertext { - display: inline-block; - padding-left: 10px; - vertical-align: middle; - padding-bottom: 0px; - margin-bottom: 2px; - } - .mxWindow { - background: #FFFFFF; - } - </style> - - <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;"> - <div id="toolbar_extension"> - <button id="btn_add_network" type="button" class="btn btn-primary" onclick="network_step.newNetworkWindow();">Add Network</button> - </div> - <ul id="network_list"> - </ul> - <button type="button" style="display: none" onclick="network_step.submitForm();">Submit</button> - </div> - <form id="xml_form" method="post" action="/wf/workflow/"> + <form id="step_form" method="post"> {% csrf_token %} <input type="hidden" id="hidden_xml_input" name="xml" /> </form> + <script type="text/javascript" src="/static/js/mxClient.min.js" ></script> + <script> + //gather context data + let debug = false; + {% if debug %} + debug = true; + {% endif %} -<script> - //gather context data - let debug = false; - {% if debug %} - debug = true; - {% endif %} + let xml = ''; + {% if xml %} + xml = '{{xml|safe}}'; + {% endif %} - let xml = ''; - {% if xml %} - xml = '{{xml|safe}}'; - {% endif %} + let hosts = []; + {% for host in hosts %} + hosts.push({{host|safe}}); + {% endfor %} - let hosts = []; - {% for host in hosts %} - hosts.push({{host|safe}}); - {% endfor %} - - let added_hosts = []; - {% for host in added_hosts %} - added_hosts.push({{host|safe}}); - {% endfor %} + let added_hosts = []; + {% for host in added_hosts %} + added_hosts.push({{host|safe}}); + {% endfor %} - let removed_host_ids = {{removed_hosts|safe}}; + let removed_host_ids = {{removed_hosts|safe}}; - network_step = new NetworkStep( - debug, - xml, - hosts, - added_hosts, - removed_host_ids, - document.getElementById('graphContainer'), - document.getElementById('outlineContainer'), - document.getElementById('toolbarContainer'), - document.getElementById('sidebarContainer') - ); -</script> + network_step = new NetworkStep( + debug, + xml, + hosts, + added_hosts, + removed_host_ids, + document.getElementById('graphContainer'), + document.getElementById('outlineContainer'), + document.getElementById('toolbarContainer'), + document.getElementById('sidebarContainer') + ); + form_submission_callbacks.push(() => network_step.prepareForm()); + </script> {% endblock content %} {% block onleave %} network_step.submitForm(); |