minor status changes

Change-Id: Ia29c2879ddea67bdb6b30c4e871d8cb97be38d41
Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>

1 files changed, 118 insertions, 28 deletions

diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
index 33b0486..bcf554b 100644
--- a/src/templates/base/booking/booking_detail.html
+++ b/src/templates/base/booking/booking_detail.html
@@ -53,6 +53,14 @@ code {
                         <td>Lab Deployed At</td>
                         <td>{{ booking.lab }}</td>
                     </tr>
+                    <tr>
+                        <td>IPMI Username</td>
+                        <td><code id="ipmi-username">{{ status.config.ipmi_username }}</code></td>
+                    </tr>
+                    <tr>
+                        <td>IPMI Password</td>
+                        <td><code id="ipmi-password">{{ status.config.ipmi_password }}</code></td>
+                    </tr>
                 </table>
             </div>
         </div>
@@ -61,35 +69,80 @@ code {
         <div class="card mb-3">
             <div class="card-header d-flex">
                 <h4 class="d-inline">Deployment Progress</h4>
-                <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> -->
+                <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>
             </div>
             <div class="collapse show" id="panel_tasks">
                 <table class="table m-0">
                     <tr>
                         <th></th>
-                        <th>Resource</th>
+                        <th>Name</th>
+
+                        <th>Assigned Host</th>
                         <th>Status</th>
                     </tr>
-                    {% for host in statuses %}
+                    {% with status.instances as instances %}
+
+                    {% for id, inst in instances.items %}
                     <tr>
                         <td>
-                            {% if 'Success' in host.status  %}
-                            <div class="rounded-circle bg-success square-20"></div>
-                            {% elif 'Fail' in host.status %}
-                            <div class="rounded-circle bg-danger square-20"></div>
+                            <!-- icon -->
+                            {% if inst.logs|length > 0 %}
+                            {% with inst.logs|last as lastelem %}
+                            {% if 'Success' in lastelem.status  %}
+                            <div id="icon-{{id}}" class="rounded-circle bg-success square-20"></div>
+                            {% elif 'Fail' in lastelem.status %}
+                            <div id="icon-{{id}}" class="rounded-circle bg-danger square-20"></div>
                             {% else %}
-                            <div class="spinner-border text-primary square-20"></div>
+                            <div id="icon-{{id}}" class="spinner-border text-primary square-20"></div>
+                            {% endif %}
+                            {% endwith %}
                             {% endif %}
                         </td>
-                        <td>
-                            {{ host.hostname }}
+                        <td id="alias-{{id}}">
+                            <!-- Hostname -->
+                            {{inst.host_alias}}
+                        </td>
+                        <td id="host-{{id}}">
+                            <!-- Actual Host -->
+                            {{inst.assigned_host}}
                         </td>
-                        <td id="{{host.instance_id}}">
-                            {{ host.status }}
+                        <td>
+                            <!-- Logs -->
+                            {% if inst.logs|length > 0 %}
+                            {% with inst.logs|last as lastelem %}
+                            <span id="status-{{id}}">
+                            {{lastelem.status}}
+                            </span>
+                                <button class="btn-secondary btn float-right" data-target="#collapse-{{id}}"
+                                    data-toggle="collapse">Show Additional Logs</button>
+                            {% endwith %}
+
+                            {% endif %}
+                            <p>
+                            <div class="card collapse mt-3" id="collapse-{{id}}">
+                                <div class="card-header">Additional Logs</div>
+                                <div class="card-body">
+                                    <table id="logs-{{id}}">
+                                        {% for log in inst.logs %}
+                                        <tr>
+                                            <td>
+                                                {{log.status}}
+                                            </td>
+
+                                            <td>
+                                                {{log.time}}
+                                            </td>
+                                        </tr>
+                                        {% endfor %}
+                                    </table>
+                                </div>
+                            </div>
+                            </p>
                         </td>
                     </tr>
                     {% endfor %}
+                    {% endwith %}
                 </table>
             </div>
         </div>
@@ -116,30 +169,67 @@ code {
 </div>
 
 <script>
-setInterval(function(){
-   fetchBookingStatus();
-}, 5000);
+    setInterval(function () {
+        fetchBookingStatus();
+    }, 5000);
 
 
-async function fetchBookingStatus() {
+    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.onerror = function () { console.log("failed to get status") }
+        req.onreadystatechange = function () {
+            if (req.readyState === 4) {
+                let status = JSON.parse(req.responseText)
+                updateStatuses(status)
             }
         }
         req.send();
-}
+    }
+
+    async function updateStatuses(status) {
+
+        const instances = status.instances;
+        
+        Object.keys(instances).forEach((aggId) => {
+            const instance = instances[aggId]
+            const status = instance.logs.pop()
 
-async function updateStatuses(statuses) {
-    for (const s of statuses) {
-        document.getElementById(s.instance_id).innerText = s.status
+            let icon_class = "spinner-border text-primary square-20"
+            if (status.status.includes('Success')) {
+                icon_class = "rounded-circle bg-success square-20"
+            } else if (status.status.includes('Fail')) {
+                icon_class = "rounded-circle bg-danger square-20"
+            }
+
+            // icon
+            document.getElementById("icon-" + aggId).className = icon_class;
+            // host alias
+            document.getElementById("alias-" + aggId).innerText = instance.host_alias;
+            // assigned host
+            document.getElementById("host-" + aggId).innerText = instance.assigned_host;
+            // status
+            document.getElementById("status-" + aggId).innerText = status.status;
+            // logs
+            const log_table = document.getElementById("logs-" + aggId);
+            log_table.innerHTML = "";
+            for (const log of instance.logs) {
+                const tr = document.createElement('tr');
+                const td_status = document.createElement('td')
+                td_status.innerText = log.status;
+                const td_time = document.createElement('td')
+                td_time.innerText = log.time;
+                tr.appendChild(td_status)
+                tr.appendChild(td_time)
+                log_table.appendChild(tr)
+            }
+        })
+
+        // IPMI
+        document.getElementById("ipmi-username").innerText = status.config.ipmi_username;
+        document.getElementById("ipmi-password").innerText = status.config.ipmi_password;
     }
-}
 </script>
 
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file