diff options
Diffstat (limited to 'dashboard/src/templates/booking')
12 files changed, 994 insertions, 100 deletions
diff --git a/dashboard/src/templates/booking/booking_calendar.html b/dashboard/src/templates/booking/booking_calendar.html index 81efbe5..ddcb45d 100644 --- a/dashboard/src/templates/booking/booking_calendar.html +++ b/dashboard/src/templates/booking/booking_calendar.html @@ -1,9 +1,11 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} + {{ block.super }} + <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}" rel='stylesheet'/> <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}" @@ -64,13 +66,27 @@ {% bootstrap_form_errors form type='non_fields' %} <form method="post" action="" class="form" id="bookingeditform"> {% csrf_token %} - + <div id='hide_if_noext'> <div class='input-group' id='starttimeeditpicker'> {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> <div class='input-group' id='endtimeeditpicker'> {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> + </div> + <script type="text/javascript"> + if( {{ booking.ext_count }} <= 0 ){ + var hidediv = document.getElementById('hide_if_noext'); + hidediv.style.display = 'none'; + var par = document.createElement("div"); + var text = document.createTextNode("No Extensions Remaining"); + par.appendChild(text); + par.style.fontWeight = 'bold'; + par.style.paddingBottom = '15pt'; + hidediv.parentNode.insertBefore(par,hidediv.nextSibling); + } + </script> + {% bootstrap_field form.opsys %} {% bootstrap_field form.purpose %} {% bootstrap_field form.installer %} {% bootstrap_field form.scenario %} @@ -82,6 +98,15 @@ {% endbuttons %} </form> </div> + <script type="text/javascript"> + //Check if current view is an edit or a standard booking view + if(window.location.href.includes('edit')) { + var element = document.getElementById("bookingform"); + element.parentNode.removeChild(element); } + else { + var element = document.getElementById("bookingeditform"); + element.parentNode.removeChild(element); } + </script> {% else %} <p>Please <a href="{% url 'account:login' %}"> @@ -104,7 +129,7 @@ <div class="modal-body" id="booking_detail_content"> </div> <div class="modal-footer"> - <button type="button" class="btn btn-default" data-dismiss="modal">Close + <button type="button" class="btn btn-primary" data-dismiss="modal">Close </button> </div> </div> @@ -119,8 +144,61 @@ var booking_detail_prefix = "{% url 'booking:detail_prefix' %}"; var booking_delete_prefix = "{% url 'booking:delete_prefix' %}"; var user_timezone = "{{ request.user.userprofile.timezone }}" + {% autoescape off %} + var sup_installer_dict = {{ installer_filter }} + var sup_scenario_dict = {{ scenario_filter }} + {% endautoescape %} + </script> + <script type="text/javascript"> + $(document).ready(function () { + $("#id_installer").children().hide(); + $("#id_scenario").children().hide(); + }); + + function installerHider() { + dropFilter("id_installer", sup_installer_dict, "id_opsys"); + scenarioHider(); + } + document.getElementById('id_opsys').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> <script src={% static "bower_components/moment/moment.js" %}></script> <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script> <script type="text/javascript" diff --git a/dashboard/src/templates/booking/booking_delete.html b/dashboard/src/templates/booking/booking_delete.html index 76a5634..b89eb15 100644 --- a/dashboard/src/templates/booking/booking_delete.html +++ b/dashboard/src/templates/booking/booking_delete.html @@ -1,5 +1,5 @@ {% load jira_filters %} -{% load bootstrap3 %} +{% load bootstrap4 %} <p> Really delete Booking from {{ booking.start}} to {{ booking.end }}? diff --git a/dashboard/src/templates/booking/booking_detail.html b/dashboard/src/templates/booking/booking_detail.html index c88cd84..918f5af 100644 --- a/dashboard/src/templates/booking/booking_detail.html +++ b/dashboard/src/templates/booking/booking_detail.html @@ -1,70 +1,365 @@ -{% load jira_filters %} +{% extends "base.html" %} +{% load staticfiles %} +{% load bootstrap4 %} -<script type="text/javascript"> - function deleteClick(id) { - var booking_delete_url = booking_delete_prefix + id - $.ajax({ - url: booking_delete_url, - type: 'get', - success: function (data) { - $('#booking_delete_content').html(data); - }, - failure: function (data) { - alert('Error finding that booking'); - } - }); - $('#booking_delete_modal').modal('show'); - } -</script> +{% block extrahead %} + {{block.super}} +<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></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-12 col-lg-5"> + <div class="card mb-4"> + <div class="card-header d-flex"> + <h4 style="display: inline;">Overview</h4> + <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> + </div> + <div class="card-body collapse show" id="panel_overview"> + <table class="table"> + <tr> + <td>Purpose</td> + <td>{{ booking.purpose }}</td> + </tr> + <tr> + <td>Project</td> + <td>{{ booking.project }}</td> + </tr> + <tr> + <td>Start Time</td> + <td>{{ booking.start }}</td> + </tr> + <tr> + <td>End Time</td> + <td>{{ booking.end }}</td> + </tr> + <tr> + <td>Pod Definition</td> + <td>{{ booking.resource.template }}</td> + </tr> + <tr> + <td>Pod Configuration</td> + <td>{{ booking.config_bundle }}</td> + </tr> + <tr> + <td>Lab Deployed At</td> + <td>{{ booking.lab }}</td> + </tr> + </table> + </div> + </div> + <div class="row"> + <div class="col-lg-12"> + <div class="card"> + <div class="card-header d-flex"> + <h4 style="display: inline;">Pod</h4> + <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button> + </div> + <div class="card-body collapse show" id="pod_panel"> + <table class="table"> + {% for host in booking.resource.hosts.all %} + <tr> + <td><h4>{{host.template.resource.name}}</h4></td> + <td> + <table class="table"> + <tr> + <td>Hostname:</td> + <td>{{host.template.resource.name}}</td> + </tr> + <tr> + <td>Profile:</td> + <td>{{host.name}}</td> + </tr> + <tr> + <td>Role:</td> + <td>{{host.config.opnfvRole}}</td> + </tr> + <tr> + <td>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> + <td>{{host.profile.ramprofile.first.amount}}G, + {{host.profile.ramprofile.first.channels}} channels</td> + </tr> + <tr> + <td>CPU:</td> + <td> + <table class="table"> + <tr> + <td>Arch:</td> + <td>{{host.profile.cpuprofile.first.architecture}}</td> + </tr> + <tr> + <td>Cores:</td> + <td>{{host.profile.cpuprofile.first.cores}}</td> + </tr> + <tr> + <td>Sockets:</td> + <td>{{host.profile.cpuprofile.first.cpus}}</td> + </tr> + </table> + </td> + </tr> + <tr> + <td>DISK:</td> + <td> + <table class="table"> + <tr> + <td>Size:</td> + <td>{{host.profile.storageprofile.first.size}} GiB</td> + </tr> + <tr> + <td>Type:</td> + <td>{{host.profile.storageprofile.first.media_type}}</td> + </tr> + <tr> + <td>Mount Point:</td> + <td>{{host.profile.storageprofile.first.name}}</td> + </tr> + </table> + </td> + </tr> + <tr> + <td>Interfaces:</td> + <td> + <style> + .borderless td { + border: none !important; + } + </style> + <table class="table"> + {% for intprof in host.profile.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> + </td> + </tr> + </table> + </td> + {% endfor %} + </tr> + </table> + </div> + </div> + </div> + </div> + </div> + <div class="col"> + <div class="card mb-4"> + <div class="card-header d-flex"> + <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> + <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> + </div> + <div class="card-body collapse show" id="panel_tasks"> + <table class="table"> + <style> + .progress { + display: inline-block; + border: 3px solid #f3f3f3; + border-radius: 50%; + border-top: 3px solid #12aebb; + width: 20px; + height: 20px; + -webkit-animation: spin 2s linear infinite; /* Safari */ + animation: spin 2s linear infinite; + } + + @keyframes spin { + 0% {transform: rotate(0deg);} + 100% {transform: rotate(360deg);} + } + + .new { + display: inline-block; + width: 20px; + height: 20px; + background: #f3f3f3; + border-radius: 50%; + animation: fadeInOut 1s infinite alternate; -<p> - <b>Resource: </b> - <a href="{{ booking.resource.url }}"> - {{ booking.resource.name }} - </a> -</p> -<p> - <b>User: </b> {{ booking.user.username }} -</p> -<p> - <b>Start: </b> {{ booking.start }} -</p> -<p> - <b>End: </b> {{ booking.end }} -</p> -<p> - <b>Purpose: </b> {{ booking.purpose }} -</p> -<p> - <b>Operating System: </b> {{ booking.opsys }} -</p> -<p> - <b>Installer: </b> {{ booking.installer }} -</p> -<p> - <b>Scenario: </b> {{ booking.scenario }} -</p> -{% if user.is_authenticated %} -{% if user.get_username == booking.user.username %} -<p> - <a href="{% url 'booking:edit' booking_id=booking.id resource_id=booking.resource.id %}" class="btn btn btn-success"> - Edit Booking - </a> - <a href="javascript:deleteClick({{ booking.id }})" class="btn btn btn-danger"> - Delete Booking - </a> - <div id="booking_delete_modal" class="modal fade" role="dialog"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal">×</button> - <h4 class="modal-title">Delete Booking</h4> + } + @keyframes fadeInOut { + from { opacity: 0;} + } + .done { + display: inline-block; + width: 20px; + height: 20px; + background: #40B976; + border-radius: 50%; + } + </style> + <tr> + <th></th> + <th>Status</th> + <th>Lab Response</th> + <th>Type</th> + </tr> + {% for task in booking.job.get_tasklist %} + <tr> + <td> + {% if task.status < 100 %} + <div class="new"></div> + {% elif task.status < 200 %} + <div class="progress"></div> + {% else %} + <div class="done"></div> + {% endif %} + </td> + <td> + {% if task.status < 100 %} + PENDING + {% elif task.status < 200 %} + IN PROGRESS + {% else %} + DONE + {% 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> + {% else %} + Message from Lab: <pre>{{ task.message }}</pre> + {% endif %} + {% else %} + No response provided (yet) + {% endif %} + </td> + <td> + {{ task.type_str }} + </td> + </tr> + {% endfor %} + </table> </div> - <div class="modal-body" id="booking_delete_content"> + </div> + <div class="row"> + <div class="col"> + <div class="card"> + <div class="card-header d-flex"> + <h4 style="display: inline;">PDF</h4> + <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button> + </div> + <div class="card-body collapse show" 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> -</p> -{% endif %} -{% endif %}
\ No newline at end of file +</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/dashboard/src/templates/booking/booking_grid_item.html b/dashboard/src/templates/booking/booking_grid_item.html new file mode 100644 index 0000000..3c72fd2 --- /dev/null +++ b/dashboard/src/templates/booking/booking_grid_item.html @@ -0,0 +1,11 @@ +<p>{{ id|default:"id" }}</p> +<p>{{ lab|default:"lab" }}</p> +<p>{{ resource_name|default:"resource name" }}</p> +<p>{{ start|default:"start" }}</p> +<p>{{ end|default:"end" }}<p> +<p>Collaborators:</p> +<ul> + {% for collaborator in collaborators %} + <li>{{ collaborator }}</li> + {% endfor %} +</ul> diff --git a/dashboard/src/templates/booking/booking_list.html b/dashboard/src/templates/booking/booking_list.html index ccdc46d..591ecc9 100644 --- a/dashboard/src/templates/booking/booking_list.html +++ b/dashboard/src/templates/booking/booking_list.html @@ -1,48 +1,44 @@ {% extends "base.html" %} {% load staticfiles %} +{% load bootstrap4 %} {% block extrahead %} + {{ block.super }} <!-- DataTables CSS --> - <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" + <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}" rel="stylesheet"> <!-- DataTables Responsive CSS --> - <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" + <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}" rel="stylesheet"> {% endblock extrahead %} {% block content %} <div class="row"> - <div class="panel-body"> - <div class="dataTables_wrapper"> - <table class="table table-striped table-bordered table-hover" id="table" - cellspacing="0" - width="100%"> - {% include "booking/booking_table.html" %} - </table> - </div> - <!-- /.table-responsive --> - <!-- /.panel-body --> - <!-- /.panel --> + <div class="col"> + <div class="panel-body"> + <div class="dataTables_wrapper"> + <table class="table table-striped table-bordered table-hover" id="table" + cellspacing="0" + width="100%"> + {% include "booking/booking_table.html" %} + </table> + </div> + </div> </div> - <!-- /.col-lg-12 --> </div> {% endblock content %} {% block extrajs %} <!-- DataTables JavaScript --> - <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" - rel="stylesheet"> - - - <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 "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script> + <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script> <script type="text/javascript"> $(document).ready(function () { $('#table').DataTable({ - scrollX: true, - }); + scrollX: true, + }); }); </script> {% endblock extrajs %} diff --git a/dashboard/src/templates/booking/booking_table.html b/dashboard/src/templates/booking/booking_table.html index af2248c..32a0146 100644 --- a/dashboard/src/templates/booking/booking_table.html +++ b/dashboard/src/templates/booking/booking_table.html @@ -3,38 +3,34 @@ <thead> <tr> - <th>User</th> + <th>Owner</th> <th>Purpose</th> + <th>Project</th> <th>Start</th> <th>End</th> <th>Operating System</th> - <th>Installer</th> - <th>Scenario</th> </tr> </thead> <tbody> {% for booking in bookings %} <tr> <td> - {{ booking.user.username }} + {{ booking.owner.username }} </td> <td> {{ booking.purpose }} </td> <td> - {{ booking.start }} - </td> - <td> - {{ booking.end }} + {{ booking.project }} </td> <td> - {{ booking.opsys }} + {{ booking.start }} </td> <td> - {{ booking.installer }} + {{ booking.end }} </td> <td> - {{ booking.scenario }} + {{ 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 new file mode 100644 index 0000000..07f3d89 --- /dev/null +++ b/dashboard/src/templates/booking/quick_deploy.html @@ -0,0 +1,187 @@ +{% extends "base.html" %} +{% load staticfiles %} +{% load bootstrap4 %} +{% block content %} +<style> + .grid_container { + display: grid; + grid-template-columns: repeat(12, 1fr); + padding: 30px; + } + .grid_element { + border-radius: 5px; + border: 1px solid #ccc; + 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; + } + .collaborator_pane { + display: flex; + flex-direction: column; + } + #id_length { + -moz-appearance: none; + border: none; + box-shadow: none; + } + + input[type=range]::-moz-range-track { + background: #cccccc; + } + + .grid_element { + overflow: hidden; + } +</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 show_label=False %} +</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_1third"> + <div class="configuration_pane grid_element"> + {% bootstrap_field form.hostname %} + {% bootstrap_field form.image %} + </div> + <div class="configuration_pane grid_element"> + <strong>OPNFV: (Optional)</strong> + {% bootstrap_field form.installer %} + {% bootstrap_field form.scenario %} + </div> +</div> +</div> +<script type="text/javascript"> + + function submit_form() + { + //formats data for form submission + multi_filter_widget.finish(); + } + + function hide_dropdown(drop_id) { + var drop = document.getElementById(drop_id); + //select 'blank' option + for( var i=0; i < drop.length; i++ ) + { + if ( drop.options[i].text == '---------' ) + drop.selectedIndex = i; + } + + //cross browser hide children + $('#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 + } + } + + function get_selected_value(key){ + for( var attr in multi_filter_widget.result[key] ){ + if(!(attr in {}) ) + return attr; + } + return null; + } + + var sup_image_dict = {{ image_filter|safe }}; + var sup_installer_dict = {{ installer_filter|safe }}; + var sup_scenario_dict = {{ scenario_filter|safe }}; + + function imageHider() { + var drop = document.getElementById("id_image"); + + hide_dropdown("id_image"); + + var lab_pk = get_selected_value("lab"); + var host_pk = get_selected_value("host"); + + 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 + { + if( image_object.host_profile == host_pk && image_object.lab == lab_pk ) + { + drop.childNodes[i].style.display = "inherit"; + drop.childNodes[i].disabled = false; + } + } + } + } + + imageHider(); + $('#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) { + var dropdown = document.getElementById(target); + + hide_dropdown(target); + + var drop = document.getElementById(master); + var opts = target_filter[drop.options[drop.selectedIndex].value]; + if (!opts) { + opts = {}; + } + + 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 < dropdown.childNodes.length; i++) { + if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {}) ) { + dropdown.childNodes[i].style.display = "inherit"; + dropdown.childNodes[i].disabled = false; + } + } + } +</script> + <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button> +</form> +{% endblock %} diff --git a/dashboard/src/templates/booking/stats.html b/dashboard/src/templates/booking/stats.html new file mode 100644 index 0000000..8bc68cd --- /dev/null +++ b/dashboard/src/templates/booking/stats.html @@ -0,0 +1,73 @@ +{% extends "base.html" %} +{% load staticfiles %} + +{% block extrahead %} +{{ block.super }} +<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> +<script> +function drawGraph(data, graph_id, graph_title){ + var container = document.getElementById(graph_id); + var plot_data = { x: data[0], + y: data[1], + fill: "tonexty", + type: "scatter", + mode: "none", + }; + var layout = { + title: graph_title + }; + Plotly.newPlot(container, [plot_data], layout); +} +function getData(){ + var req = new XMLHttpRequest(); + var url = "/booking/stats/json"; + var day_input = document.getElementById("number_days"); + var days = day_input.value; + //var days = document.getElementById("number_days").value; + if(days){ + url = url + "?days=" + days; + } + req.onreadystatechange = function(){ + if( req.readyState == XMLHttpRequest.DONE) { + var data = JSON.parse(req.responseText); + drawGraph(data["booking"], "booking_graph_container", "Active Bookings"); + drawGraph(data["user"], "user_graph_container", "Active Users"); + } + } + req.open("GET", url, true); + req.send(); +} +</script> +{% endblock %} + +{% block content %} + <div class="container-fluid"> + <div class="row"> + <div class="col"> + <p>Number of days to plot: </p> + <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> + </div> + <div class="row"> + <div class="col-12 col-md-10"> + <!-- These graphs do NOT get redrawn when the browser size is changed --> + <div id="all_graph_container border" class="mw-100"> + <div id="booking_graph_wrapper"> + <div id="booking_graph_container"/> + </div> + <div id="user_graph_wrapper"> + <div id="user_graph_container"/> + </div> + </div> + </div> + </div> + </div> + <script> +var data = {{data|safe}}; +drawGraph(data["booking"], "booking_graph_container", "Active Bookings"); +drawGraph(data["user"], "user_graph_container", "Active Users"); + </script> +{% endblock content %} diff --git a/dashboard/src/templates/booking/steps/booking_confirm.html b/dashboard/src/templates/booking/steps/booking_confirm.html new file mode 100644 index 0000000..40c30a9 --- /dev/null +++ b/dashboard/src/templates/booking/steps/booking_confirm.html @@ -0,0 +1,25 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap4 %} + +{% block content %} + +<style> + #form_div { + width: 100%; + padding: 5%; + text-align: center; + } +</style> + +<div id="form_div"> +<p>confirm booking</p> +<p>{{info|default:"booking info"}}</p> +<form action="/wf/workflow/" method="post"> + {% csrf_token %} + {{form|default:"<p> No Form Loaded</p>"}} + <input type="submit" value="Submit" style="display: none;"/> +</form> +</div> +{% endblock content %}
\ No newline at end of file diff --git a/dashboard/src/templates/booking/steps/booking_meta.html b/dashboard/src/templates/booking/steps/booking_meta.html new file mode 100644 index 0000000..710d4ee --- /dev/null +++ b/dashboard/src/templates/booking/steps/booking_meta.html @@ -0,0 +1,87 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap4 %} + +{% block content %} + +<style> + .bkmeta_panel { + padding: 5%; + } + + .bkcontrib_panel { + display: flex; + flex-direction: column; + } + + .bkcontrib_panel > .form-group { + flex: 1; + display: flex; + flex-direction: column; + } + + .panel{ + padding: 5%; + /*border: solid 1px black;*/ + } + + .panel_wrap { + width: 100%; + display: grid; + 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' %} +<form id="booking_meta_form" action="/wf/workflow/" method="POST" class="form"> +{% csrf_token %} +<div id="form_div"> + <div class="panel_wrap"> + <div class="panel bkmeta_panel"> + {% 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> + {% bootstrap_field form.info_file %} + <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p> + {% bootstrap_field form.deploy_opnfv %} + </div> + <div class="panel panel_center"> + </div> + <div class="panel bkcontrib_panel"> + <p>You may add collaborators on your booking to share resources with coworkers.</p> + {% bootstrap_field form.users label="Collaborators" %} + </div> + + {% buttons %} + <button type="submit" style="display: none;" class="btn btn-success">Confirm</button> + {% endbuttons %} + </div> +</div> +</form> +{% endblock content %} + +{% block onleave %} +var ajaxForm = $("#booking_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/dashboard/src/templates/booking/steps/resource_select.html b/dashboard/src/templates/booking/steps/resource_select.html new file mode 100644 index 0000000..382316f --- /dev/null +++ b/dashboard/src/templates/booking/steps/resource_select.html @@ -0,0 +1,73 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap4 %} + +{% block content %} + +<style> + #resource_form_div { + width: 100%; + padding: 5%; + } + + .panel { + /*border: solid 1px black;*/ + border: none; + } + .select_panels { + width: 100%; + display: grid; + grid-template-columns: 45% 10% 45%; + + } + + .panel_center { + text-align: center; + border: none; + + + } + .panel_center p{ + font-size: 20pt; + } +</style> + +<div id="resource_form_div"> + <div class="select_panels"> + <div class="panel_chooser panel"> + <form id="resource_select_form" method="post" action="" class="form" id="resourceselectorform"> + {% csrf_token %} + {{ form|default:"<p>no form loaded</p>" }} + {% buttons %} + + {% endbuttons %} + </form> + </div> + <div class="panel_center panel"><p>OR</p></div> + <div class="panel_add panel"> + <button class="btn {% if disabled %} disabled {% endif %}" + style="width: 100%; height: 100%;" + {% if not disabled %}onclick="parent.add_wf(1)" + {% endif %}>Create Resource</button> + </div> + +</div> +</div> +<script> + {% if disabled %} + disable(); + {% endif %} +</script> + +{% endblock content %} +{% block onleave %} +var form = $("#resource_select_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/booking/steps/swconfig_select.html b/dashboard/src/templates/booking/steps/swconfig_select.html new file mode 100644 index 0000000..60a0df7 --- /dev/null +++ b/dashboard/src/templates/booking/steps/swconfig_select.html @@ -0,0 +1,73 @@ +{% extends "workflow/viewport-element.html" %} +{% load staticfiles %} + +{% load bootstrap4 %} + +{% block content %} + +<style> + #sw_form_div { + width: 100%; + padding: 5%; + } + + .panel { + /*border: solid 1px black;*/ + border: none; + } + .select_panels { + width: 100%; + display: grid; + grid-template-columns: 45% 10% 45%; + + } + + .panel_center { + text-align: center; + border: none; + + + } + .panel_center p{ + font-size: 20pt; + } +</style> + +<div id="sw_form_div"> + <div class="select_panels"> + <div class="panel_chooser panel"> + <form id="software_select_form" method="post" action="" class="form" id="swselectorform"> + {% csrf_token %} + {{ form|default:"<p>no form loaded</p>" }} + {% buttons %} + + {% endbuttons %} + </form> + </div> + <div class="panel_center panel"><p>OR</p></div> + <div class="panel_add panel"> + <button class="btn {% if disabled %} disabled {% endif %}" + style="width: 100%; height: 100%;" + {% if not disabled %}onclick="parent.add_wf(2)" + {% endif %}>Create Config</button> + </div> + <script> + {% if disabled %} + disable(); + {% endif %} + </script> + +</div> +</div> + +{% endblock content %} + +{% block onleave %} +var form = $("#software_select_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 %} |