diff options
Diffstat (limited to 'src/templates/booking')
| -rw-r--r-- | src/templates/booking/booking_detail.html | 146 | ||||
| -rw-r--r-- | src/templates/booking/quick_deploy.html | 206 | ||||
| -rw-r--r-- | src/templates/booking/stats.html | 6 |
3 files changed, 323 insertions, 35 deletions
diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html index cae0e25..51dd328 100644 --- a/src/templates/booking/booking_detail.html +++ b/src/templates/booking/booking_detail.html @@ -1,20 +1,29 @@ {% extends "base.html" %} {% load staticfiles %} +{% load bootstrap3 %} {% block extrahead %} {{block.super}} <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script> -<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> {% endblock %} {% block content %} + +<style> +#modal_warning { + transition: max-height 0.5s ease-out; + overflow: hidden; +} + +</style> + <div class="container-fluid"> <div class="row"> - <div class="col-lg-6"> + <div class="col-lg-4"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h4 style="display: inline;">Overview</h4> - <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a> + <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"> @@ -50,9 +59,7 @@ </div> </div> <div class="row"> - - <div class="col-lg-6"> - + <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h4 style="display: inline;">Pod</h4> @@ -79,7 +86,15 @@ </tr> <tr> <td>Image:</td> - <td>{{host.config.image}}</td> + <td id="host_image_{{host.id}}"> + {{host.config.image}} + <button + style="margin-left:10px;" + class="btn btn-primary" + data-toggle="modal" + data-target="#imageModal" + onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});" + >Change/Reset</button></td> </tr> <tr> <td>RAM:</td> @@ -152,10 +167,7 @@ </table> </td> </tr> - - </table> - </td> {% endfor %} </tr> @@ -163,31 +175,15 @@ </div> </div> </div> - <div class="col-lg-6"> - - <div class="panel panel-default"> - <div class="panel-heading clearfix"> - <h4 style="display: inline;">PDF</h4> - <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a> - </div> - - <div class="panel-body" id="pdf_panel" style="padding: 0px;"> - <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 0px; border: none;"> -{{pdf}} - </pre> - </div> - </div> - </div> </div> </div> - <div class="col-lg-6"> + <div class="col-lg-8"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h4 style="display: inline;">Deployment Progress</h4> <p style="display: inline; margin-left: 10px;"> These are the different tasks that have to be completed before your deployment is ready</p> <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a> </div> - <div class="panel-body" id="panel_tasks"> <table class="table"> <style> @@ -215,7 +211,6 @@ border-radius: 50%; animation: fadeInOut 1s infinite alternate; - } @keyframes fadeInOut { from { opacity: 0;} @@ -244,9 +239,7 @@ {% else %} <div class="done"></div> {% endif %} - </td> - - + </td> <td> {% if task.status < 100 %} PENDING @@ -257,7 +250,6 @@ {% endif %} </td> <td> - {% if task.message %} {% if task.type_str == "Access Task" and user_id != task.config.user.id %} Message from Lab: <pre>--secret--</pre> @@ -270,16 +262,104 @@ </td> <td> {{ task.type_str }} - </td> </tr> {% endfor %} </table> </div> </div> + <div class="row"> + <div class="col-lg-8"> + <div class="panel panel-default"> + <div class="panel-heading clearfix"> + <h4 style="display: inline;">PDF</h4> + <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a> + </div> + <div class="panel-body" id="pdf_panel" style="padding: 0px;"> + <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;"> +{{pdf}} + </pre> + </div> + </div> + </div> + </div> </div> </div> </div> +<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog" style="width: 450px;" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <form id="image_host_form"> + {% csrf_token %} + <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id"> + </select> + <input id="host_id_input" type="hidden" name="host_id"> + </input> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button> + </div> + <div id="modal_warning" class="modal-footer" style="max-height:0px;" > + <div style="text-align:center; margin: 5px"> + <h3>Are You Sure?</h3> + <p>This will wipe the disk and reimage the host</p> + <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button> + <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button> + </div> + </div> + </div> +</div> + +<script> + var image_mapping = {{image_mapping|safe}}; + var current_host_id = 0; + function set_image_dropdown(profile_name, host_id) { + document.getElementById("host_id_input").value = host_id; + current_host_id = host_id; + var dropdown = document.getElementById("image_select"); + var length = dropdown.length; + //clear dropdown + for(i=length-1; i>=0; i--){ + dropdown.options.remove(i); + } + var images = image_mapping[profile_name]; + var image_length = images.length; + for(i=0; i<image_length; i++){ + var opt = document.createElement("OPTION"); + opt.value = images[i].value; + opt.appendChild(document.createTextNode(images[i].name)); + dropdown.options.add(opt); + } + + document.getElementById("modal_warning").style['max-height'] = '0px'; + } + + function submit_image_form() { + var ajaxForm = $("#image_host_form"); + var formData = ajaxForm.serialize(); + req = new XMLHttpRequest(); + req.open("POST", "/booking/modify/{{booking.id}}/image/", true); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.onreadystatechange = function() { + if(req.readyState === 4) { + node = document.getElementById("host_image_" + current_host_id); + text = document.createTextNode(req.responseText); + node.replaceChild(text, node.firstChild); + } + } + req.send(formData); + } +</script> {% endblock content %} diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html new file mode 100644 index 0000000..3837315 --- /dev/null +++ b/src/templates/booking/quick_deploy.html @@ -0,0 +1,206 @@ +{% extends "base.html" %} +{% load staticfiles %} +{% load bootstrap3 %} +{% block content %} +<style> + .grid_container { + display: grid; + grid-template-columns: repeat(12, 1fr); + padding: 30px; + } + .grid_element { + border-radius: 3px; + box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75); + margin: 10px; + padding: 7px; + } + .grid_element_wide { + grid-column-start: span 12; + } + .grid_element_half { + grid-column-start: span 6; + } + .grid_element_1third { + grid-column-start: span 4; + } + .grid_element_2third { + grid-column-start: span 8; + } +</style> +{% bootstrap_form_errors form type='non_fields' %} +<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form"> +{% csrf_token %} +<div class="grid_container"> +<div class="grid_element host_select_pane grid_element_wide"> +<p>Please select a host type you wish to book. Only available types are shown.</p> +{% bootstrap_field form.filter_field %} +</div> +<div class="grid_element booking_info_pane grid_element_1third"> + {% bootstrap_field form.purpose %} + {% bootstrap_field form.project %} + {% bootstrap_field form.length %} + <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output> + <script> + document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value"); + document.getElementById("daysout").value = document.getElementById("id_length").value; + </script> +</div> +<div class="grid_element collaborator_pane grid_element_1third"> + <label>Collaborators</label> + {{ form.users }} +</div> +<div class="grid_element configuration_pane grid_element_1third"> + {% bootstrap_field form.hostname %} + {% bootstrap_field form.image %} + {% bootstrap_field form.installer %} + {% bootstrap_field form.scenario %} +</div> +</div> +<script type="text/javascript"> + var normalize = function(data) + { + //converts the top level keys in data to map to lists + var normalized = {} + for( var key in data ){ + normalized[key] = []; + for( var subkey in data[key] ){ + normalized[key].push(data[key][subkey]); + } + } + return normalized; + } + var update_page_contents = function(response) + { + document.open(); + document.write(response); + document.close(); + } + + //form hamdler code + submit_form = function() + { + //altered from initial prototype: form submits automatically, + //but needs formatting for multiple select field + var data = normalize(result); + data = JSON.stringify(data); + document.getElementById("filter_field").value = data; + } + + var sup_image_dict = {{ image_filter|safe }}; + var sup_installer_dict = {{ installer_filter|safe }}; + var sup_scenario_dict = {{ scenario_filter|safe }}; + + function imageHider() { + var data = normalize(result); + var drop = document.getElementById("id_image"); + for( var i=0; i < drop.length; i++ ) + { + if ( drop.options[i].text == '---------' ) + { + drop.selectedIndex = i; + } + } + + $('#id_image').children().hide(); + + var empty_map = {} + + for ( var i=0; i < drop.childNodes.length; i++ ) + { + var image_object = sup_image_dict[drop.childNodes[i].value]; + if( image_object ) //weed out empty option + { + var lab_pk = "" + for( var j in data["labs"][0] ) + { + if( j in {} ) { continue; } + else { lab_pk = j; break; } + } + var host_pk = ""; + for( var j in data["hosts"][0] ) + { + if( j in {} ) { continue; } + else { host_pk = j; break; } + } + if( image_object.host_profile == host_pk && image_object.lab == lab_pk ) + { + drop.childNodes[i].style.display = "inherit"; + } + } + } + } + + $('#id_image').children().hide(); + $('#id_installer').children().hide(); + $('#id_scenario').children().hide(); + + + Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) { + element.addEventListener('click', imageHider); + }); + + function installerHider() { + dropFilter("id_installer", sup_installer_dict, "id_image"); + scenarioHider(); + } + document.getElementById('id_image').addEventListener('change', installerHider); + + function scenarioHider() { + dropFilter("id_scenario", sup_scenario_dict, "id_installer"); + } + document.getElementById('id_installer').addEventListener('change', scenarioHider); + + function dropFilter(target, target_filter, master) { + ob = document.getElementById(target); + + for(var i=0; i<ob.options.length; i++) { + if ( ob.options[i].text == '---------' ) { + ob.selectedIndex = i; + } + } + + targ_id = "#" + target; + $(targ_id).children().hide(); + var drop = document.getElementById(master); + var opts = target_filter[drop.options[drop.selectedIndex].value]; + if (!opts) { + opts = {}; + } + var emptyMap = {} + + var map = Object.create(null); + for (var i = 0; i < opts.length; i++) { + var j = opts[i]; + map[j] = true; + } + + 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"; + } + } + } +</script> + <button onclick="submit_form();" class="btn btn-success">Confirm</button> +</form> +<script> + //context vars + var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}"; + var prefill_purpose = "{{prefill_purpose|default:""|safe}}"; + var prefill_project = "{{prefill_project|default:""|safe}}"; + var prefill_hostname = "{{prefill_hostname|default:""|safe}}"; + + //to handle prefill + function prefill_host_select_field(data) + { + // + if(data) + { + make_selection(data); + } + } + + //call init functions + prefill_host_select_field(prefill_host_selection); +</script> +{% endblock %} diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html index abb153b..42eebdd 100644 --- a/src/templates/booking/stats.html +++ b/src/templates/booking/stats.html @@ -42,8 +42,10 @@ function getData(){ {% block content %} <p>Number of days to plot: </p> - <input id="number_days" type="number" min="1" step="1"/> - <button onclick="getData();">Submit</button> + <div class="form-group"> + <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/> + <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button> + </div> <div id="all_graph_container"> <div id="booking_graph_wrapper"> <div id="booking_graph_container"/> |