aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/booking
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/booking')
-rw-r--r--src/templates/booking/booking_calendar.html209
-rw-r--r--src/templates/booking/booking_delete.html11
-rw-r--r--src/templates/booking/booking_detail.html365
-rw-r--r--src/templates/booking/booking_grid_item.html11
-rw-r--r--src/templates/booking/booking_list.html44
-rw-r--r--src/templates/booking/booking_table.html37
-rw-r--r--src/templates/booking/quick_deploy.html187
-rw-r--r--src/templates/booking/stats.html73
-rw-r--r--src/templates/booking/steps/booking_confirm.html25
-rw-r--r--src/templates/booking/steps/booking_meta.html87
-rw-r--r--src/templates/booking/steps/resource_select.html73
-rw-r--r--src/templates/booking/steps/swconfig_select.html73
12 files changed, 1195 insertions, 0 deletions
diff --git a/src/templates/booking/booking_calendar.html b/src/templates/booking/booking_calendar.html
new file mode 100644
index 0000000..ddcb45d
--- /dev/null
+++ b/src/templates/booking/booking_calendar.html
@@ -0,0 +1,209 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% 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" %}"
+ rel='stylesheet'/>
+{% endblock extrahead %}
+
+{% block content %}
+ <div class="col-lg-8">
+ <div class="container-fluid">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <i class="fa fa-calendar fa-fw"></i>Calendar
+ </div>
+ <div class="panel-body">
+ <div id='calendar'>
+ </div>
+ </div>
+ <!-- /.panel-body -->
+ </div>
+ <!-- /.panel -->
+ </div>
+ </div>
+
+ <div class="col-lg-4">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <i class="fa fa-edit fa-fw"></i>Booking
+ </div>
+ <div class="panel-body">
+ {% if user.is_authenticated %}
+ <div id="booking_form_div">
+ {% bootstrap_form_errors form type='non_fields' %}
+ <form method="post" action="" class="form" id="bookingform">
+ {% csrf_token %}
+
+ <div class='input-group' id='starttimepicker'>
+ {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
+ </div>
+ <div class='input-group' id='endtimepicker'>
+ {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
+ </div>
+ {% bootstrap_field form.opsys %}
+ {% bootstrap_field form.purpose %}
+ {% bootstrap_field form.installer %}
+ {% bootstrap_field form.scenario %}
+ {% buttons %}
+ <button type="submit" class="btn btn btn-success">
+ Book
+ </button>
+ <p>
+ <br>By continuing, you agree to our
+ <a href="https://wiki.opnfv.org/display/INF/Lab-as-a-Service+at+the+UNH-IOL#Lab-as-a-ServiceattheUNH-IOL-AcceptableUsagePolicy">Acceptable Usage Policy</a>
+ </p>
+ {% endbuttons %}
+ </form>
+ </div>
+ <div id="booking_edit_form_div">
+ {% 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 %}
+ {% bootstrap_field form.reset %}
+ {% buttons %}
+ <button type="submit" class="btn btn btn-success">
+ Confirm Edit
+ </button>
+ {% 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' %}">
+ login with Jira</a>
+ to book this Pod</p>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+
+ <div id="booking_detail_modal" class="modal fade" role="dialog">
+ <div class="modal-dialog">
+
+ <!-- Modal content-->
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ <h4 class="modal-title">Booking Detail</h4>
+ </div>
+ <div class="modal-body" id="booking_detail_content">
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" data-dismiss="modal">Close
+ </button>
+ </div>
+ </div>
+
+ </div>
+ </div>
+{% endblock content %}
+
+{% block extrajs %}
+ <script type="text/javascript">
+ var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}";
+ 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"
+ src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
+ <script src={% static "js/fullcalendar-options.js" %}></script>
+ <script src={% static "js/datetimepicker-options.js" %}></script>
+ <script src={% static "js/booking-calendar.js" %}></script>
+{% endblock extrajs %}
diff --git a/src/templates/booking/booking_delete.html b/src/templates/booking/booking_delete.html
new file mode 100644
index 0000000..b89eb15
--- /dev/null
+++ b/src/templates/booking/booking_delete.html
@@ -0,0 +1,11 @@
+{% load jira_filters %}
+{% load bootstrap4 %}
+
+<p>
+ Really delete Booking from {{ booking.start}} to {{ booking.end }}?
+</p>
+<p>
+ <div id="booking_delete_form_div">
+ <a href="{% url 'booking:delete_booking' booking_id=booking.id %}" class="btn btn btn-danger">Delete Booking</a>
+ </div>
+</p> \ No newline at end of file
diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html
new file mode 100644
index 0000000..918f5af
--- /dev/null
+++ b/src/templates/booking/booking_detail.html
@@ -0,0 +1,365 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+
+{% 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;
+
+ }
+ @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>
+ <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>
+</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">&times;</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/booking_grid_item.html b/src/templates/booking/booking_grid_item.html
new file mode 100644
index 0000000..3c72fd2
--- /dev/null
+++ b/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/src/templates/booking/booking_list.html b/src/templates/booking/booking_list.html
new file mode 100644
index 0000000..591ecc9
--- /dev/null
+++ b/src/templates/booking/booking_list.html
@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+
+{% block extrahead %}
+ {{ block.super }}
+ <!-- DataTables 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.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
+ rel="stylesheet">
+{% endblock extrahead %}
+
+{% block content %}
+ <div class="row">
+ <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>
+ </div>
+{% endblock content %}
+
+{% block extrajs %}
+ <!-- DataTables JavaScript -->
+ <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,
+ });
+ });
+ </script>
+{% endblock extrajs %}
diff --git a/src/templates/booking/booking_table.html b/src/templates/booking/booking_table.html
new file mode 100644
index 0000000..32a0146
--- /dev/null
+++ b/src/templates/booking/booking_table.html
@@ -0,0 +1,37 @@
+{% load jira_filters %}
+
+
+<thead>
+<tr>
+ <th>Owner</th>
+ <th>Purpose</th>
+ <th>Project</th>
+ <th>Start</th>
+ <th>End</th>
+ <th>Operating System</th>
+</tr>
+</thead>
+<tbody>
+{% for booking in bookings %}
+ <tr>
+ <td>
+ {{ booking.owner.username }}
+ </td>
+ <td>
+ {{ booking.purpose }}
+ </td>
+ <td>
+ {{ booking.project }}
+ </td>
+ <td>
+ {{ booking.start }}
+ </td>
+ <td>
+ {{ booking.end }}
+ </td>
+ <td>
+ {{ booking.resource.get_head_node.config.image.os.name }}
+ </td>
+ </tr>
+{% endfor %}
+</tbody>
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
new file mode 100644
index 0000000..07f3d89
--- /dev/null
+++ b/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/src/templates/booking/stats.html b/src/templates/booking/stats.html
new file mode 100644
index 0000000..8bc68cd
--- /dev/null
+++ b/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/src/templates/booking/steps/booking_confirm.html b/src/templates/booking/steps/booking_confirm.html
new file mode 100644
index 0000000..40c30a9
--- /dev/null
+++ b/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/src/templates/booking/steps/booking_meta.html b/src/templates/booking/steps/booking_meta.html
new file mode 100644
index 0000000..710d4ee
--- /dev/null
+++ b/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/src/templates/booking/steps/resource_select.html b/src/templates/booking/steps/resource_select.html
new file mode 100644
index 0000000..382316f
--- /dev/null
+++ b/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/src/templates/booking/steps/swconfig_select.html b/src/templates/booking/steps/swconfig_select.html
new file mode 100644
index 0000000..60a0df7
--- /dev/null
+++ b/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 %}