aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base/booking
diff options
context:
space:
mode:
authorJustin Choquette <jchoquette@iol.unh.edu>2023-06-08 12:46:53 -0400
committerJustin Choquette <jchoquette@iol.unh.edu>2023-07-21 13:17:51 -0400
commita09db9f287a02873c0226759f8ea444bb304cd59 (patch)
tree59e744e4b998973a808abbae2d21fbdd6201d829 /src/templates/base/booking
parent8ddc7e820e120f1dde4e901d3cb6f1dd3f281e65 (diff)
LaaS 3.0 Almost MVP
Change-Id: Ided9a43cf3088bb58a233dc459711c03f43e11b8 Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>
Diffstat (limited to 'src/templates/base/booking')
-rw-r--r--src/templates/base/booking/booking_detail.html320
1 files changed, 26 insertions, 294 deletions
diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
index 70958f6..e4687ad 100644
--- a/src/templates/base/booking/booking_detail.html
+++ b/src/templates/base/booking/booking_detail.html
@@ -19,23 +19,29 @@ code {
<div class="card mb-3">
<div class="card-header d-flex">
<h4 class="d-inline">Overview</h4>
- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
+ <!-- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> -->
</div>
<div class="collapse show" id="panel_overview">
<table class="table m-0">
<tr>
- <td>Username</td>
- <td>{{ posix_username }}</td>
+ <td>Owner</td>
+ <td>{{ booking.owner }}</td>
</tr>
<tr>
- <td>Purpose</td>
- <td>{{ booking.purpose }}</td>
+ <td>Collaborators</td>
+ <td>
+ {{ collab_string}}
+ </td>
</tr>
<tr>
<td>Project</td>
<td>{{ booking.project }}</td>
</tr>
<tr>
+ <td>Purpose</td>
+ <td>{{ booking.purpose }}</td>
+ </tr>
+ <tr>
<td>Start Time</td>
<td>{{ booking.start }}</td>
</tr>
@@ -44,185 +50,12 @@ code {
<td>{{ booking.end }}</td>
</tr>
<tr>
- <td>Pod Definition</td>
- <td>{{ booking.resource.template }}</td>
- </tr>
- <tr>
<td>Lab Deployed At</td>
<td>{{ booking.lab }}</td>
</tr>
</table>
</div>
</div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">Pod</h4>
- <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse show" id="pod_panel">
- <div class="card-body">
- <h4>{{host.bundle.template.copy_of.name}}</h4>
- {% for host in booking.resource.get_resources %}
- <h4>{{host.config.name}}</h4>
- <div class="overflow-auto">
- <table class="table m-0">
- <tr>
- <td>Hostname:</td>
- <td>{{host.config.name}}</td>
- </tr>
- <tr>
- <td>Machine:</td>
- <td>{{host.name}}</td>
- </tr>
- <tr>
- <td>Role:</td>
- <td>{{host.template.opnfvRole}}</td>
- </tr>
- <tr>
- <td>Is Headnode:</td>
- <td>{{host.config.is_head_node}}</td>
- <tr>
- <td>Image:</td>
- <td id="host_image_{{host.id}}">
- {{host.config.image}}
- <button
- class="btn btn-primary ml-4"
- 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 m-0">
- <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 m-0">
- <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>
- <table class="table m-0">
- {% for intprof in host.profile.interfaceprofile.all %}
- <tr>
- <td>
- <table class="table table-sm table-borderless m-0">
- <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>
- </div>
- {% endfor %}
- </div>
- </div>
- </div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">Diagnostic Information</h4>
- <button data-toggle="collapse" data-target="#diagnostics_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse" id="diagnostics_panel">
- <div class="card-body">
- <table class="table m-0">
- <tr>
- <th>Job ID: </th>
- <td>{{booking.job.id}}</td>
- </tr>
- <tr>
- <th>CI Files</th>
- </tr>
- {% for host in booking.resource.get_resources %}
- <tr>
- <td>
- <table class="table m-0">
- <tr>
- <th>Host:</th>
- <td>{{host.name}}</td>
- </tr>
- <tr>
- <th>Configs:</th>
- </tr>
- {% for ci_file in host.config.cloud_init_files.all %}
- <tr>
- <td>{{ci_file.id}}</td>
- <td>
- <div class="modal fade" id="ci_file_modal_{{ci_file.id}}" tabindex="-1" role="dialog" aria-hidden="true">
- <div class="modal-dialog modal-xl" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title d-inline float-left">Cloud Config Content</h4>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="card-body">
- <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
-{{ci_file.text}}
- </pre>
- </div>
- </div>
- </div>
- </div>
- <button class="btn btn-primary" data-toggle="modal" data-target="#ci_file_modal_{{ci_file.id}}">Show File Content</button>
- </td>
- </tr>
- {% endfor %}
- </table>
- </td>
- </tr>
- {% endfor %}
- </table>
- </div>
- </div>
- </div>
</div>
<div class="col">
<div class="card mb-3">
@@ -230,144 +63,43 @@ code {
<h4 class="d-inline">Deployment Progress</h4>
<p>These are the different tasks that have to be completed before your deployment is ready.
If this is taking a really long time, let us know <a href="mailto:{{contact_email}}">here!</a></p>
- <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button>
+ <!-- <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> -->
</div>
<div class="collapse show" id="panel_tasks">
<table class="table m-0">
<tr>
<th></th>
+ <th>Resource</th>
<th>Status</th>
- <th>Lab Response</th>
- <th>Type</th>
</tr>
- {% for task in booking.job.get_tasklist %}
+ {% for host in statuses %}
<tr>
<td>
- {% if task.status < 100 %}
- <div class="rounded-circle bg-secondary square-20"></div>
- {% elif task.status < 200 %}
- <div class="spinner-border text-primary square-20"></div>
+ <!-- Success,
+ Reimage,
+ InProgress,
+ Failure,
+ Import, -->
+ {% if host.status is 'Success' %}
+ <div class="rounded-circle bg-success square-20"></div>
+ {% elif host.status is 'InProgress' %}
+ <div class="spinner-border text-primary square-20"></div>
{% else %}
- <div class="rounded-circle bg-success square-20"></div>
+ <div class="rounded-circle bg-secondary square-20"></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 class="text-break pre-wrap">{{ task.message }}</pre>
- {% endif %}
- {% else %}
- No response provided (yet)
- {% endif %}
+ {{ host.hostname }}
</td>
<td>
- {{ task.type_str }}
+ {{ host.status }}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">PDF</h4>
- <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse show" id="pdf_panel">
- <div class="card-body">
- <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
-{{pdf}}
- </pre>
- </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" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title d-inline float-left" id="exampleModalLabel">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" id="image_select" name="image_id">
- </select>
- <input id="host_id_input" type="hidden" name="host_id">
- </form>
- </div>
- <div class="modal-footer d-flex flex-column">
- <div>
- <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#modal_warning" aria-expanded="false">Reset Host</button>
- </div>
- <div class="border-top collapse mt-3 py-2 text-center w-100" id="modal_warning">
- <h3>Are You Sure?</h3>
- <p>This will wipe the disk and reimage the host</p>
- <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
- <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
- </div>
- </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").classList.add("collapse");
- }
-
- 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 %}