style: make more consistent styles

- Fix indentation in places
- User settings have better labels
- Lab info title now the same as others
- Add "empty" sections to be more helpful to the user. They are not
using links, since most of the "workflow" is handled by javascript.
- Update padding in places to better line up with other elements
- Add padding to bootstrap notifications (add check for messages to not
just have random padding on the top of the page)
- Remove unnecessary text in a form
- Remove card-body from table-only or list-only cards (lists and tables
are now flush with cards)
- Add bg-danger to not-working hosts
- Replace True/False text shown to the user with Yes/No
- Remove ":" from some headers
- Vertical buttons are now in a button group
- Add pre-wrap class to avoid pre from breaking box sizing on the
booking detail page
- Reduce table indent in pod card and add table overflow scrollbar

Signed-off-by: Jeremy Plsek <jeremyplsek@gmail.com>
Change-Id: If09dca2f2b7386c44eeeb817ef76e8f748e456da

3 files changed, 212 insertions, 236 deletions

diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html
index 99de747..fea2bb6 100644
--- a/src/templates/booking/booking_detail.html
+++ b/src/templates/booking/booking_detail.html
@@ -8,236 +8,217 @@
 {% endblock %}
 
 {% block content %}
-
-<div class="container-fluid">
-    <div class="row">
-        <div class="col-12 col-lg-5">
-            <div class="card mb-4">
-                <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>
-                </div>
-                <div class="collapse show" id="panel_overview">
-                    <div class="card-body">
-                        <table class="table">
-                            <tr>
-                                <td>Purpose</td>
-                                <td>{{ booking.purpose }}</td>
-                            </tr>
-                            <tr>
-                                <td>Project</td>
-                                <td>{{ booking.project }}</td>
-                            </tr>
-                            <tr>
-                                <td>Start Time</td>
-                                <td>{{ booking.start }}</td>
-                            </tr>
-                            <tr>
-                                <td>End Time</td>
-                                <td>{{ booking.end }}</td>
-                            </tr>
-                            <tr>
-                                <td>Pod Definition</td>
-                                <td>{{ booking.resource.template }}</td>
-                            </tr>
-                            <tr>
-                                <td>Pod Configuration</td>
-                                <td>{{ booking.config_bundle }}</td>
-                            </tr>
-                            <tr>
-                                <td>Lab Deployed At</td>
-                                <td>{{ booking.lab }}</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
+<div class="row">
+    <div class="col-12 col-lg-5">
+        <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>
             </div>
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="card">
-                        <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">
-                                <table class="table">
-                                {% for host in booking.resource.hosts.all %}
+            <div class="collapse show" id="panel_overview">
+                <table class="table m-0">
+                    <tr>
+                        <td>Purpose</td>
+                        <td>{{ booking.purpose }}</td>
+                    </tr>
+                    <tr>
+                        <td>Project</td>
+                        <td>{{ booking.project }}</td>
+                    </tr>
+                    <tr>
+                        <td>Start Time</td>
+                        <td>{{ booking.start }}</td>
+                    </tr>
+                    <tr>
+                        <td>End Time</td>
+                        <td>{{ booking.end }}</td>
+                    </tr>
+                    <tr>
+                        <td>Pod Definition</td>
+                        <td>{{ booking.resource.template }}</td>
+                    </tr>
+                    <tr>
+                        <td>Pod Configuration</td>
+                        <td>{{ booking.config_bundle }}</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">
+                    {% for host in booking.resource.hosts.all %}
+                        <h4>{{host.template.resource.name}}</h4>
+                        <div class="overflow-auto">
+                            <table class="table m-0">
+                                <tr>
+                                    <td>Hostname:</td>
+                                    <td>{{host.template.resource.name}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Machine:</td>
+                                    <td>{{host.name}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Role:</td>
+                                    <td>{{host.config.opnfvRole}}</td>
+                                </tr>
+                                <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><h4>{{host.template.resource.name}}</h4></td>
+                                    <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">
+                                        <table class="table m-0">
                                             <tr>
-                                                <td>Hostname:</td>
-                                                <td>{{host.template.resource.name}}</td>
+                                                <td>Arch:</td>
+                                                <td>{{host.profile.cpuprofile.first.architecture}}</td>
                                             </tr>
                                             <tr>
-                                                <td>Profile:</td>
-                                                <td>{{host.name}}</td>
+                                                <td>Cores:</td>
+                                                <td>{{host.profile.cpuprofile.first.cores}}</td>
                                             </tr>
                                             <tr>
-                                                <td>Role:</td>
-                                                <td>{{host.config.opnfvRole}}</td>
-                                            </tr>
-                                            <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>
+                                                <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>CPU:</td>
-                                                <td>
-                                                    <table class="table">
-                                                        <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>
+                                                <td>Size:</td>
+                                                <td>{{host.profile.storageprofile.first.size}} GiB</td>
                                             </tr>
                                             <tr>
-                                                <td>DISK:</td>
-                                                <td>
-                                                    <table class="table">
-                                                        <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>
+                                                <td>Type:</td>
+                                                <td>{{host.profile.storageprofile.first.media_type}}</td>
                                             </tr>
                                             <tr>
-                                                <td>Interfaces:</td>
-                                                <td>
-                                                    <table class="table">
-                                                    {% for intprof in host.profile.interfaceprofile.all %}
-                                                    <tr>
-                                                        <td>
-                                                        <table class="table table-borderless">
-                                                            <tr>
-                                                                <td>Name:</td>
-                                                                <td>{{intprof.name}}</td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td>Speed:</td>
-                                                                <td>{{intprof.speed}}</td>
-                                                            </tr>
-                                                        </table>
-                                                        </td>
-                                                    </tr>
-                                                    {% endfor %}
-                                                    </table>
-                                                </td>
+                                                <td>Mount Point:</td>
+                                                <td>{{host.profile.storageprofile.first.name}}</td>
                                             </tr>
                                         </table>
                                     </td>
-                                {% endfor %}
                                 </tr>
-                                </table>
-                            </div>
+                                <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>
-                    </div>
+                    {% endfor %}
                 </div>
             </div>
         </div>
-        <div class="col">
-            <div class="card mb-4">
-                <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</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">
-                    <div class="card-body">
-                        <table class="table">
-                            <tr>
-                                <th></th>
-                                <th>Status</th>
-                                <th>Lab Response</th>
-                                <th>Type</th>
-                            </tr>
-                            {% for task in booking.job.get_tasklist %}
-                            <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>
-                                    {% else %}
-                                        <div class="rounded-circle bg-success 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 %}
+    </div>
+    <div class="col">
+        <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</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">
+                <table class="table m-0">
+                    <tr>
+                        <th></th>
+                        <th>Status</th>
+                        <th>Lab Response</th>
+                        <th>Type</th>
+                    </tr>
+                    {% for task in booking.job.get_tasklist %}
+                    <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>
+                            {% else %}
+                                <div class="rounded-circle bg-success 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>{{ task.message }}</pre>
-                                    {% endif %}
-                                    {% else %}
-                                    No response provided (yet)
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    {{ task.type_str }}
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </table>
-                    </div>
-                </div>
+                                {% else %}
+                                    Message from Lab: <pre class="text-break pre-wrap">{{ task.message }}</pre>
+                                {% endif %}
+                            {% else %}
+                                No response provided (yet)
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ task.type_str }}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </table>
             </div>
-            <div class="row">
-                <div class="col">
-                    <div class="card">
-                        <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 p-0">
-                                <pre class="prettyprint lang-yaml m-0 p-4 border-0">
-                                    {{pdf}}
-                                </pre>
-                            </div>
-                        </div>
-                    </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>
@@ -260,7 +241,6 @@
                     <select class="form-control" id="image_select" name="image_id">
                     </select>
                     <input id="host_id_input" type="hidden" name="host_id">
-                    </input>
                 </form>
             </div>
             <div class="modal-footer d-flex flex-column">
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 6776980..8570f25 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -6,7 +6,6 @@
 {% bootstrap_form_errors form type='non_fields' %}
 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
     {% csrf_token %}
-    <div class="container-fluid">
         <div class="row mx-0 px-0">
             <div class="col-12 mx-0 px-0 mt-2">
                 <p class="my-0">Please select a host type you wish to book. Only available types are shown.</p>
@@ -14,7 +13,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-12 col-lg-3 px-1 my-2">
+            <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.purpose %}
                     {% bootstrap_field form.project %}
@@ -26,30 +25,29 @@
                     </script>
                 </div>
             </div>
-            <div class="col-12 col-lg-3 px-1 my-2">
+            <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     <label>Collaborators</label>
                     {{ form.users }}
                 </div>
             </div>
-            <div class="col-12 col-lg-3 px-1 my-2">
+            <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.hostname %}
                     {% bootstrap_field form.image %}
                 </div>
             </div>
-            <div class="col-12 col-lg-3 px-1 my-2">
+            <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     <strong>OPNFV: (Optional)</strong>
                     {% bootstrap_field form.installer %}
                     {% bootstrap_field form.scenario %}
                 </div>
             </div>
-            <div class="col-12 d-flex px-0 mt-2 justify-content-end">
+            <div class="col-12 d-flex mt-2 justify-content-end">
                 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
             </div>
         </div>
-    </div>
 </form>
 
 <script type="text/javascript">
diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html
index ed34731..94239f9 100644
--- a/src/templates/booking/stats.html
+++ b/src/templates/booking/stats.html
@@ -41,33 +41,31 @@ function getData(){
 {% endblock %}
 
 {% block content %}
-    <div class="container-fluid">
-        <div class="row">
-                <div class="col-auto">
-                        <p>Number of days to plot: </p>
-                        <div class="form-group d-flex align-content-center">
-                            <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
-                            <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
-                        </div>
-                </div>
+<div class="row">
+    <div class="col-auto">
+        <p>Number of days to plot: </p>
+        <div class="form-group d-flex align-content-center">
+            <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
+            <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
         </div>
-        <div class="row">
-            <div class="col-12 col-md-10">
-                <!-- These graphs do NOT get redrawn when the browser size is changed -->
-                <div id="all_graph_container border" class="mw-100">
-                    <div id="booking_graph_wrapper">
-                        <div id="booking_graph_container"/>
-                    </div>
-                    <div id="user_graph_wrapper">
-                        <div id="user_graph_container"/>
-                    </div>
-                </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-12 col-md-10">
+        <!-- These graphs do NOT get redrawn when the browser size is changed -->
+        <div id="all_graph_container border" class="mw-100">
+            <div id="booking_graph_wrapper">
+                <div id="booking_graph_container"/>
+            </div>
+            <div id="user_graph_wrapper">
+                <div id="user_graph_container"/>
             </div>
         </div>
     </div>
-    <script>
+</div>
+<script>
 var data = {{data|safe}};
 drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
 drawGraph(data["user"], "user_graph_container", "Active Users");
-    </script>
+</script>
 {% endblock content %}