MVP

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

9 files changed, 150 insertions, 105 deletions

diff --git a/src/templates/base/account/settings.html b/src/templates/base/account/settings.html
index d1939b7..611ae38 100644
--- a/src/templates/base/account/settings.html
+++ b/src/templates/base/account/settings.html
@@ -7,6 +7,9 @@
         {% csrf_token %}
         <input id="hidden_key_list" type="hidden" name="ssh_key_list" value="">
         <div class="form-group">
+        <label>Your IPA Username</label>
+        <input type="text" class="form-control" disabled="true" style="width: 300px;" value="{{ ipa_username }}">
+        <p>To change your password and access advanced account management, please go <a href="http://os-passwd.iol.unh.edu">here</a></p>
         {{ company_form }}
         {{ preference_form }}
         <br>
@@ -42,7 +45,6 @@ $(window).on('load', function() {
     key_list.push('{{key}}')
     {% endfor %}
     update_json_list()
-    console.log(key_list)
 });
 
 
diff --git a/src/templates/base/base.html b/src/templates/base/base.html
index cd4269c..9f1a598 100644
--- a/src/templates/base/base.html
+++ b/src/templates/base/base.html
@@ -138,7 +138,7 @@
                         Lab Info <i class="fas fa-angle-down rotate"></i>
                         </a>
                         <div class="collapse" id="labInfo">
-                            <a href="" class="list-group-item list-group-item-action nav-bg">
+                            <a href="{% url 'resource:host-list' %}" class="list-group-item list-group-item-action nav-bg">
                                 Hosts
                             </a>
                             <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action nav-bg">
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>
diff --git a/src/templates/base/dashboard/lab_detail.html b/src/templates/base/dashboard/lab_detail.html
index 3d90a51..cd096f6 100644
--- a/src/templates/base/dashboard/lab_detail.html
+++ b/src/templates/base/dashboard/lab_detail.html
@@ -12,7 +12,6 @@
         <div class="card mb-3">
             <div class="card-header d-flex">
                 <h4>Lab Profile</h4>
-                <button class="btn btn-outline-secondary ml-auto" data-toggle="collapse" data-target="#panel_overview">Expand</button>
             </div>
             <div class="collapse show" id="panel_overview">
                 <div class="overflow-auto">
@@ -61,16 +60,15 @@
         <div class="card my-3">
             <div class="card-header d-flex">
                 <h4 class="d-inline-block">Host Profiles</h4>
-                <button data-toggle="collapse" data-target="#profile_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
             <div class="collapse show" id="profile_panel">
                 <div class="overflow-auto">
                     <table class="table m-0">
-                        {% for profile in hostprofiles %}
+                        {% for flavor in flavors %}
                             <tr>
-                                <td>{{profile.name}}</td>
-                                <td>{{profile.description}}</td>
-                                <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
+                                <td>{{flavor.name}}</td>
+                                <td>{{flavor.description}}</td>
+                                <td><a href="/resource/profile/{{ flavor.flavor_id }}" class="btn btn-info">Profile</a></td>
                             </tr>
                         {% endfor %}
                     </table>
@@ -81,7 +79,6 @@
         <div class="card my-3">
             <div class="card-header d-flex">
                 <h4 class="d-inline">Networking Capabilities</h4>
-                <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
 
             <div class="collapse show" id="network_panel">
@@ -96,63 +93,50 @@
                 </table>
             </div>
         </div>
-        <div class="card my-3">
-            <div class="card-header d-flex">
-                <h4>Images</h4>
-                <button data-toggle="collapse" data-target="#image_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
-            </div>
-            <div class="collapse show" id="image_panel">
-                <div class="overflow-auto">
-                    <table class="table m-0">
-                        <tr>
-                            <th>Name</th>
-                            <th>Owner</th>
-                            <th>For Host Type</th>
-                            <th>Description</th>
-                        </tr>
-                        {% for image in images %}
-                            <tr>
-                                <td>{{image.name}}</td>
-                                <td>{{image.owner}}</td>
-                                <td>{{image.host_type}}</td>
-                                <td>{{image.description}}</td>
-                            </tr>
-                        {% endfor %}
-                    </table>
-                </div>
-            </div>
-        </div>
 
     </div>
     <div class="col-lg-8">
         <div class="card mb-3">
             <div class="card-header d-flex">
                 <h4>Lab Hosts</h4>
-                <button data-toggle="collapse" data-target="#lab_hosts_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
 
             <div class="collapse show" id="lab_hosts_panel">
                 <table class="table m-0">
                     <tr>
                         <th>Name</th>
+                        <th>Architecture</th>
                         <th>Profile</th>
                         <th>Booked</th>
                         <th>Working</th>
-                        <th>Vendor</th>
                     </tr>
                     {% for host in hosts %}
-                        <tr>
-                            <td>{{host.name}}</td>
-                            <td>{{host.profile}}</td>
-                            <td>{{host.booked|yesno:"Yes,No"}}</td>
-                            {% if host.working %}
-                                <td class="bg-success text-white">Yes</td>
-                            {% else %}
-                                <td class="bg-danger text-white">No</td>
-                            {% endif %}
-                            <td>{{host.vendor}}</td>
-                        </tr>
-                    {% endfor %}
+                    <tr>
+                        <td>
+                            {{ host.name }}
+                        </td>
+                        <td>
+                            {{ host.arch }}
+                        </td>
+                        <td>
+                            <a href="../../resource/profile/{{ host.flavor.id }}">{{ host.flavor.name }}</a>
+                        </td>
+                        <td>
+                        {% if host.allocation != null %}
+                        Yes
+                        {% else %}
+                        No
+                        {% endif %}
+                        </td>
+                        <td>
+                        {% if host.allocation.reason == "maintenance" %}
+                        No
+                        {% else %}
+                        Yes
+                        {% endif %}
+                        </td>
+                    </tr>
+                {% endfor %}
                 </table>
             </div>
         </div>
diff --git a/src/templates/base/resource/hostprofile_detail.html b/src/templates/base/resource/hostprofile_detail.html
index 0b3262c..1cf2000 100644
--- a/src/templates/base/resource/hostprofile_detail.html
+++ b/src/templates/base/resource/hostprofile_detail.html
@@ -2,51 +2,46 @@
 {% load staticfiles %}
 
 {% block content %}
+<h1>{{ flavor.name }}</h1>
 <div class="row">
     <div class="col-lg-6">
         <div class="card mb-4">
             <div class="card-header d-flex">
                 <h4 class="d-inline">Available at</h4>
-                <button data-toggle="collapse" data-target="#availableAt" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
             <div class="collapse show" id="availableAt">
                 <ul class="list-group list-group-flush">
-                    {% for lab in hostprofile.labs.all %}
-                        <li class="list-group-item">{{lab.name}}</li>
-                    {% endfor %}
+                    <li class="list-group-item">UNH IOL</li>
                 </ul>
             </div>
         </div>
         <div class="card mb-4">
             <div class="card-header d-flex">
                 <h4 class="d-inline">RAM</h4>
-                <button data-toggle="collapse" data-target="#ramPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
             <div id="ramPanel" class="collapse show">
                 <div class="card-body">
-                    {{hostprofile.ramprofile.first.amount}}G,
-                    {{hostprofile.ramprofile.first.channels}} channels
+                    {{flavor.ram.value}} {{flavor.ram.unit}}
                 </div>
             </div>
         </div>
         <div class="card mb-4">
             <div class="card-header d-flex">
                 <h4 class="d-inline">CPU</h4>
-                <button data-toggle="collapse" data-target="#cpuPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
             <div class="collapse show" id="cpuPanel">
                 <table class="table">
                     <tr>
                         <td>Arch:</td>
-                        <td>{{hostprofile.cpuprofile.first.architecture}}</td>
+                        <td>{{ flavor.arch }}</td>
                     </tr>
                     <tr>
                         <td>Cores:</td>
-                        <td>{{hostprofile.cpuprofile.first.cores}}</td>
+                        <td>{{ flavor.cpu_count }}</td>
                     </tr>
                     <tr>
                         <td>Sockets:</td>
-                        <td>{{hostprofile.cpuprofile.first.cpus}}</td>
+                        <td>{{ flavor.sockets }}</td>
                     </tr>
                 </table>
             </div>
@@ -54,31 +49,29 @@
         <div class="card mb-4">
             <div class="card-header d-flex">
                 <h4 class="d-inline">Disk</h4>
-                <button data-toggle="collapse" data-target="#diskPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
             <div class="collapse show" id="diskPanel">
                 <table class="table">
                     <tr>
-                        <td>Size:</td>
-                        <td>{{hostprofile.storageprofile.first.size}} GiB</td>
+                        <td>Disk Size:</td>
+                        <td>{{flavor.disk_size.value}} {{flavor.disk_size.unit}}</td>
                     </tr>
                     <tr>
-                        <td>Type:</td>
-                        <td>{{hostprofile.storageprofile.first.media_type}}</td>
+                        <td>Root Size:</td>
+                        <td>{{flavor.root_size.value}} {{flavor.root_size.unit}}</td>
                     </tr>
                     <tr>
-                        <td>Mount Point:</td>
-                        <td>{{hostprofile.storageprofile.first.name}}</td>
+                        <td>Swap Size:</td>
+                        <td>{{flavor.swap_size.value}} {{flavor.swap_size.unit}}</td>
                     </tr>
                 </table>
             </div>
         </div>
     </div>
     <div class="col-lg-6">
-        <div class="card">
+        <div class="card mb-4">
             <div class="card-header d-flex">
                 <h4 class="d-inline">Interfaces</h4>
-                <button data-toggle="collapse" data-target="#interfacePanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
             <div class="collapse show" id="interfacePanel">
                 <table class="table">
@@ -89,10 +82,31 @@
                         </tr>
                     </thead>
                     <tbody>
-                        {% for intprof in hostprofile.interfaceprofile.all %}
+                        {% for interface in flavor.interfaces %}
+                        <tr>
+                            <td>{{interface.name}}</td>
+                            <td>{{interface.speed.value}} {{interface.speed.unit}}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+                <div class="card">
+            <div class="card-header d-flex">
+                <h4 class="d-inline">Images</h4>
+            </div>
+            <div class="collapse show" id="interfacePanel">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for image in flavor.images %}
                         <tr>
-                            <td>{{intprof.name}}</td>
-                            <td>{{intprof.speed}}</td>
+                            <td>{{image.name}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
diff --git a/src/templates/base/resource/hosts.html b/src/templates/base/resource/hosts.html
index 9fc50ce..e01916a 100644
--- a/src/templates/base/resource/hosts.html
+++ b/src/templates/base/resource/hosts.html
@@ -5,25 +5,37 @@
     <thead>
     <tr>
         <th>Name</th>
+        <th>Architecture</th>
         <th>Profile</th>
         <th>Booked</th>
         <th>Working</th>
     </tr>
     </thead>
     <tbody>
-    {% for host in hosts %}
+        {% for host in hosts %}
         <tr>
             <td>
                 {{ host.name }}
             </td>
             <td>
-                <a href="profiles/{{ host.profile.id }}">{{ host.profile }}</a>
+                {{ host.arch }}
             </td>
             <td>
-                {{ host.booked|yesno:"Yes,No" }}
+                <a href="../profile/{{ host.flavor.id }}">{{ host.flavor.name }}</a>
             </td>
             <td>
-                {{ host.working|yesno:"Yes,No" }}
+            {% if host.allocation != null %}
+            Yes
+            {% else %}
+            No
+            {% endif %}
+            </td>
+            <td>
+            {% if host.allocation.reason == "maintenance" %}
+            No
+            {% else %}
+            Yes
+            {% endif %}
             </td>
         </tr>
     {% endfor %}
diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html
index 7448dc5..8a0fb47 100644
--- a/src/templates/base/workflow/book_a_pod.html
+++ b/src/templates/base/workflow/book_a_pod.html
@@ -24,7 +24,7 @@
     <div class="scroll-container w-100 h-100 p-0">
         <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:</h2>
+            <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">
@@ -46,7 +46,7 @@
         </div>
 
         <div class="scroll-area pt-5 mx-5" id="booking_details">
-            <h2 class="mt-4 mb-3">Booking Details</h2>
+            <h2 class="mt-4 mb-3">Booking Details<span class="text-danger">*</span></h2>
             <div class="form-group mb-0">
               <div class="row align-items-center my-4">
                 <div class="col-xl-6 col-md-8 col-11">
@@ -66,9 +66,6 @@
                 <input id="input_length" type="range" min="1" max="21" value="1" class="form-control form-control-lg col-xl-5 col-9 p-0" placeholder="Length" oninput="workflow.onchangeDays()">
               </div>
             </div>
-        </div>
-
-        <div class="scroll-area pt-5 mx-5" id="add_collabs">
             <h2 class="mt-4 mb-3">Add Collaborators:</h2>
             <div class="row">
               <div class="col-xl-6 col-md-8 col-11 p-0 border border-dark">
@@ -99,7 +96,7 @@
             </div>
             <div class="row align-items-center mt-5">
               <!-- <button class="btn btn-danger cancel-book-button p-0 mr-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickCancel()">Cancel</button> -->
-              <button class="btn btn-success cancel-book-button p-0 ml-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickConfirm()">Book</button>
+              <button id="booking-confirm-button"  class="btn btn-success cancel-book-button p-0 ml-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickConfirm()">Book</button>
             </div>
           </div>
         
@@ -144,7 +141,7 @@
         <h5 id="alert_modal_message"></h5>
       </div>
       <div class="modal-footer d-flex justify-content-center">
-        <button class="btn btn-success" data-dismiss="modal" id="alert-modal-submit" onclick="">Confirm</button>
+        <button class="btn btn-success" data-dismiss="modal" id="alert-modal-submit" onclick="workflow.goTo(alert_destination)">Confirm</button>
       </div>
     </div>
   </div>
diff --git a/src/templates/base/workflow/design_a_pod.html b/src/templates/base/workflow/design_a_pod.html
index ab3f11b..32bd332 100644
--- a/src/templates/base/workflow/design_a_pod.html
+++ b/src/templates/base/workflow/design_a_pod.html
@@ -31,14 +31,14 @@
       <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> 
-        <h2 class="mt-4 mb-3">Select a Lab:</h2>
+        <h2 class="mt-4 mb-3">Select a Lab<span class="text-danger">*</span></h2>
         <div class="row card-deck" id="lab_cards">
         </div>
       </div>
 
       <!-- Add Resources -->
       <div class="scroll-area pt-5 mx-5" id="add_resources">
-        <h2 class="mt-4 mb-3">Add Resources:</h2>
+        <h2 class="mt-4 mb-3">Add Resources<span class="text-danger">*</span></h2>
         <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">
@@ -51,7 +51,7 @@
 
       <!-- Add Networks --> 
     <div class="scroll-area pt-5 mx-5" id="add_networks">
-      <h2 class="mt-4 mb-3">Add Networks:</h2>
+      <h2 class="mt-4 mb-3">Add Networks<span class="text-danger">*</span></h2>
         <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">
@@ -64,14 +64,14 @@
 
    <!-- Configure Connections-->
    <div class="scroll-area pt-5 mx-5" id="configure_connections">
-      <h2 class="mt-4 mb-3">Configure Connections:</h2>
+      <h2 class="mt-4 mb-3">Configure Connections<span class="text-danger">*</span></h2>
       <div class="row card-deck align-items-center" id="connection_cards">
       </div>
   </div>
 
   <!-- Pod Details-->
   <div class="scroll-area pt-5 mx-5" id="pod_details">
-    <h2 class="mt-4 mb-3">Pod Details</h2>
+    <h2 class="mt-4 mb-3">Pod Details<span class="text-danger">*</span></h2>
     <div class="form-group">
       <div class="row align-items-center my-4">
         <div class="col-xl-6 col-md-8 col-11">
@@ -208,7 +208,7 @@
         <h5 id="alert_modal_message"></h5>
       </div>
       <div class="modal-footer d-flex justify-content-center">
-        <button class="btn btn-success" data-dismiss="modal" id="alert-modal-submit" onclick="">Confirm</button>
+        <button class="btn btn-success" data-dismiss="modal" id="alert-modal-submit" onclick="workflow.goTo(alert_destination)">Confirm</button>
       </div>
     </div>
   </div>