From 4ecf03b0a8517a8323dd888fc74e371aab41ba67 Mon Sep 17 00:00:00 2001
From: Justin Choquette <jchoquette@iol.unh.edu>
Date: Fri, 18 Aug 2023 15:50:38 -0400
Subject: minor status changes

Change-Id: Ia29c2879ddea67bdb6b30c4e871d8cb97be38d41
Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>
---
 src/templates/base/booking/booking_detail.html | 146 ++++++++++++++++++++-----
 src/templates/base/dashboard/lab_detail.html   |   6 +-
 src/templates/base/dashboard/landing.html      |  10 +-
 src/templates/base/workflow/book_a_pod.html    |  18 ++-
 src/templates/base/workflow/design_a_pod.html  |  28 +++--
 5 files changed, 156 insertions(+), 52 deletions(-)

(limited to 'src/templates/base')

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
diff --git a/src/templates/base/dashboard/lab_detail.html b/src/templates/base/dashboard/lab_detail.html
index cd096f6..1c15496 100644
--- a/src/templates/base/dashboard/lab_detail.html
+++ b/src/templates/base/dashboard/lab_detail.html
@@ -57,7 +57,9 @@
                 </div>
             </div>
         </div>
-        <div class="card my-3">
+
+        <!-- Needs to stay commented until we can filter profiles by project. Currently this is showing Anuket and LFEdge profiles. -->
+        <!-- <div class="card my-3">
             <div class="card-header d-flex">
                 <h4 class="d-inline-block">Host Profiles</h4>
             </div>
@@ -74,7 +76,7 @@
                     </table>
                 </div>
             </div>
-        </div>
+        </div> -->
 
         <div class="card my-3">
             <div class="card-header d-flex">
diff --git a/src/templates/base/dashboard/landing.html b/src/templates/base/dashboard/landing.html
index 960ad39..7f97e4f 100644
--- a/src/templates/base/dashboard/landing.html
+++ b/src/templates/base/dashboard/landing.html
@@ -49,13 +49,15 @@
         {% endif %}
         {% else %}
         {% block btnGrp %}
-        <p>To get started, book a server below:</p>
-        <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:book_a_pod' %}" >
-            Book a Pod
-        </a>
+        <p>Select 'Design a Pod' to create a custom resource group.</p>
+        <p>Select 'Book a Pod' to reserve a custom pod or a single resource.</p>
         <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:design_a_pod' %}" >
             Design a Pod
         </a>
+        <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:book_a_pod' %}" >
+            Book a Pod
+        </a>
+
         {% endblock btnGrp %}
         {% endif %}
     </div>
diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html
index 8a0fb47..5c1a253 100644
--- a/src/templates/base/workflow/book_a_pod.html
+++ b/src/templates/base/workflow/book_a_pod.html
@@ -10,7 +10,7 @@
 <body>
 <div class="workflow-container">
     <div id="prev" class="row w-100 m-0">
-        <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev">
+        <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" hidden="true" onclick="workflow.goPrev()" id="workflow-prev">
           <div class="arrow arrow-up"></div>
         </button>
       </div>
@@ -25,21 +25,14 @@
         <div class="scroll-area pt-5 mx-5" id="select_template">
             <h1 class="mt-4"><u>Book a Pod</u></h1>
             <h2 class="mt-4 mb-3">Select Host Or Template<span class="text-danger">*</span></h2>
-            <div class="card-deck align-items-center">
-      
-              <div class="col-12" id="template_list">
-      
-                <div class="my-5" id="select_template_tab_content">
-                    <ul id="default_templates_list" class="p-0 m-0 row">
-                    </ul>
-                </div>
-      
+            <p>Select the resource bundle that you would like to reserve. Then use the navigation arrows or scroll to advance the workflow. Configure your own resource <a href="{% url 'workflow:design_a_pod' %}">here</a>.</p> 
+              <div id="default_templates_list" class="row flex-grow-1">
               </div>
-            </div>
         </div>
 
         <div class="scroll-area pt-5 mx-5" id="cloud_init">
             <h2 class="mt-4 mb-3">Global Cloud Init Override</h2>
+            <p>Add a custom cloud init configuration to apply to all hosts in your booking (optional).</p>
             <div class="d-flex align-items-center">
               <textarea name="ci-textarea" id="ci-textarea" rows="15" class="w-50"></textarea>
             </div>
@@ -47,6 +40,7 @@
 
         <div class="scroll-area pt-5 mx-5" id="booking_details">
             <h2 class="mt-4 mb-3">Booking Details<span class="text-danger">*</span></h2>
+            <p>Enter the project and purpose for your booking, as well as the duration (up to 21 days).</p>
             <div class="form-group mb-0">
               <div class="row align-items-center my-4">
                 <div class="col-xl-6 col-md-8 col-11">
@@ -67,6 +61,7 @@
               </div>
             </div>
             <h2 class="mt-4 mb-3">Add Collaborators:</h2>
+            <p>Give SSH and booking overview access to other users. Collaborators must mark their profiles as public and have a linked IPA account.</p>
             <div class="row">
               <div class="col-xl-6 col-md-8 col-11 p-0 border border-dark">
                 {% bootstrap_field form.users label="Collaborators" %}
@@ -76,6 +71,7 @@
 
         <div class="scroll-area pt-5 mx-5" id="booking_summary">
             <h2 class="mt-4 mb-3">Booking Summary</h2>
+            <p>Review your booking information and click 'Book' to reserve your resources.</p>
             <div class="row align-items-center">
               <div class="card col-xl-6 col-md-8 col-11 border-0">
                 <ul class="list-group">
diff --git a/src/templates/base/workflow/design_a_pod.html b/src/templates/base/workflow/design_a_pod.html
index 32bd332..c23e5a8 100644
--- a/src/templates/base/workflow/design_a_pod.html
+++ b/src/templates/base/workflow/design_a_pod.html
@@ -14,7 +14,7 @@
 
   <div class="workflow-container">
     <div id="prev" class="row w-100 m-0">
-      <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev">
+      <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" hidden="true" onclick="workflow.goPrev()" id="workflow-prev">
         <div class="arrow arrow-up"></div>
       </button>
     </div>
@@ -30,7 +30,8 @@
       <!-- Select Lab -->
       <div class="scroll-area pt-5 mx-5" id="select_lab">
         <!-- Ideally the 'Design a Pod' header would be anchored to the top of the page below the arrow -->
-        <h1 class="mt-4"><u>Design a Pod</u></h1> 
+        <h1 class="mt-4"><u>Design a Pod</u></h1>
+        <p>To get started, select a lab. Then use the navigation arrows or scroll to advance through the workflow.</p>
         <h2 class="mt-4 mb-3">Select a Lab<span class="text-danger">*</span></h2>
         <div class="row card-deck" id="lab_cards">
         </div>
@@ -39,6 +40,7 @@
       <!-- Add Resources -->
       <div class="scroll-area pt-5 mx-5" id="add_resources">
         <h2 class="mt-4 mb-3">Add Resources<span class="text-danger">*</span></h2>
+        <p>Add up to 8 configurable resources to your pod, then use the navigation arrows to proceed to the next step.</p>
         <div class="row card-deck align-items-center" id="host_cards">
           <div class="col-xl-3 col-md-6 col-12" id="add_resource_plus_card">
             <div class="card align-items-center border-0">
@@ -52,6 +54,7 @@
       <!-- Add Networks --> 
     <div class="scroll-area pt-5 mx-5" id="add_networks">
       <h2 class="mt-4 mb-3">Add Networks<span class="text-danger">*</span></h2>
+      <p>Define networks to use in your pod. A network may be set as public or private.</p>
         <div class="row card-deck align-items-center" id="network_card_deck">
           <div class="col-xl-3 col-md-6 col-12" id="add_network_plus_card">
             <div class="card align-items-center border-0">
@@ -65,6 +68,7 @@
    <!-- Configure Connections-->
    <div class="scroll-area pt-5 mx-5" id="configure_connections">
       <h2 class="mt-4 mb-3">Configure Connections<span class="text-danger">*</span></h2>
+      <p>Configure the connections for each host in your pod to your defined networks.</p>
       <div class="row card-deck align-items-center" id="connection_cards">
       </div>
   </div>
@@ -72,6 +76,7 @@
   <!-- Pod Details-->
   <div class="scroll-area pt-5 mx-5" id="pod_details">
     <h2 class="mt-4 mb-3">Pod Details<span class="text-danger">*</span></h2>
+    <p>Add a pod name and description to refer to later.</p>
     <div class="form-group">
       <div class="row align-items-center my-4">
         <div class="col-xl-6 col-md-8 col-11">
@@ -102,7 +107,8 @@
 
   <!-- Pod Summary-->
   <div class="scroll-area pt-5 mx-5" id="pod_summary">
-    <h2 class="mt-4 mb-3">Pod Summary:</h2>
+    <h2 class="mt-4 mb-3">Pod Summary</h2>
+    <p>Confirm the specifications below, and select 'create' to save this pod. Otherwise, navigate upwards and modify it as needed.</p>
     <div class="row align-items-center">
       <div class="col-xl-6 col-md-8 col-11">
         <div class="card border-0">
@@ -143,8 +149,10 @@
           <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body" id="add_resource_modal_body">
-          <h2>Resource</h2>
-          <div id="template-cards" class="row align-items-center justify-content-start">
+          <p>Select a resource, then configure the image, hostname and cloud-init (optional).</p>
+          <p>For multi-node resources, select a tab to modify each individual node.</p>
+          <h2>Resource<span class="text-danger">*</span></h2>
+          <div id="template-cards" class="row flex-grow-1">
           </div>
 
           <div id="template-config-section">
@@ -153,11 +161,11 @@
             </ul>
             <!-- tabs -->
             <div id="resource_config_section">
-              <h2>Image</h2>
+              <h2>Image<span class="text-danger">*</span></h2>
               <div id="image-cards" class="row justify-content-start align-items-center">
               </div>
               <div class="form-group">
-                <h2>Hostname</h2>
+                <h2>Hostname<span class="text-danger">*</span></h2>
                 <input type="text" class="form-control" id="hostname-input" placeholder="Enter Hostname">
                 <h2>Cloud Init</h2>
                 <div class="d-flex justify-content-center align-items-center">
@@ -184,6 +192,12 @@
         <h5 class="modal-title">Configure Connections</h5>
         <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
       </div>
+      <ul>
+        <li>Select an interface and a frame type to add a connection to a network.</li>
+        <li>An interface may send tagged or untagged frames on a single network, but not both.</li>
+        <li>Each interface may only be untagged on one network.</li>
+        <li>Reselect a connection to remove it.</li>
+      </ul>
       <div class="modal-body text-center">
         <ul class="nav nav-tabs" role="tablist" id="configure-connections-tablist">
         </ul>
-- 
cgit 1.2.3-korg