From ecadb07367d31c0929212618e120130f54af78da Mon Sep 17 00:00:00 2001
From: Justin Choquette <jchoquette@iol.unh.edu>
Date: Tue, 8 Aug 2023 11:33:57 -0400
Subject: MVP

Change-Id: Ib590302f49e7e66f8d04841fb6cb97baf623f51a
Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>
---
 src/templates/base/booking/booking_detail.html | 64 +++++++++++++++++++++-----
 src/templates/base/booking/booking_table.html  |  4 --
 2 files changed, 52 insertions(+), 16 deletions(-)

(limited to 'src/templates/base/booking')

diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
index e4687ad..33b0486 100644
--- a/src/templates/base/booking/booking_detail.html
+++ b/src/templates/base/booking/booking_detail.html
@@ -61,8 +61,7 @@ code {
         <div class="card mb-3">
             <div class="card-header d-flex">
                 <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>
+                <p class="mx-3">Your resources are being prepared. If this is taking a really long time, please contact us <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> -->
             </div>
             <div class="collapse show" id="panel_tasks">
@@ -75,23 +74,18 @@ code {
                     {% for host in statuses %}
                     <tr>
                         <td>
-                            <!-- Success,
-                            Reimage,
-                            InProgress,
-                            Failure,
-                            Import, -->
-                            {% if host.status is 'Success' %}
+                            {% if 'Success' in host.status  %}
                             <div class="rounded-circle bg-success square-20"></div>
-                            {% elif host.status is 'InProgress' %}
-                            <div class="spinner-border text-primary square-20"></div>
+                            {% elif 'Fail' in host.status %}
+                            <div class="rounded-circle bg-danger square-20"></div>
                             {% else %}
-                            <div class="rounded-circle bg-secondary square-20"></div>
+                            <div class="spinner-border text-primary square-20"></div>
                             {% endif %}
                         </td>
                         <td>
                             {{ host.hostname }}
                         </td>
-                        <td>
+                        <td id="{{host.instance_id}}">
                             {{ host.status }}
                         </td>
                     </tr>
@@ -102,4 +96,50 @@ code {
     </div>
 </div>
 
+<div class="row">
+    <div class="col-5">
+        <div class="card mb-3">
+            <div class="card-header d-flex">
+                Diagnostic Information
+            </div>
+            <div>
+                <table class="table m-0">
+                    <tr>
+                        <th></th>
+                        <th>Aggregate ID</th>
+                        <td>{{booking.aggregateId}}</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+setInterval(function(){
+   fetchBookingStatus();
+}, 5000);
+
+
+async function fetchBookingStatus() {
+        req = new XMLHttpRequest();
+        var url = "status";
+        req.open("GET", url, true);
+        req.onerror = function() { alert("oops"); }
+        req.onreadystatechange = function() {
+            if(req.readyState === 4) {
+            statuses = JSON.parse(req.responseText)
+            updateStatuses(statuses)
+            }
+        }
+        req.send();
+}
+
+async function updateStatuses(statuses) {
+    for (const s of statuses) {
+        document.getElementById(s.instance_id).innerText = s.status
+    }
+}
+</script>
+
 {% endblock content %}
diff --git a/src/templates/base/booking/booking_table.html b/src/templates/base/booking/booking_table.html
index b4a713a..c7743ca 100644
--- a/src/templates/base/booking/booking_table.html
+++ b/src/templates/base/booking/booking_table.html
@@ -8,7 +8,6 @@
     <th>Project</th>
     <th>Start</th>
     <th>End</th>
-    <th>Operating System</th>
 </tr>
 </thead>
 <tbody>
@@ -29,9 +28,6 @@
         <td>
             {{ booking.end }}
         </td>
-        <td>
-            {{ booking.resource.get_head_node.config.image.os.name }}
-        </td>
     </tr>
 {% endfor %}
 </tbody>
-- 
cgit 1.2.3-korg