Add bootstrap 4 support

Remove bootstrap 3 module and css/js
Recreated almost everything in bootstrap 4
Change workflow layout to support bootstrap 4 and flex
Add rotating glyphs for dropdowns
Change breadcrumbs to use pagination and its styling
Change account dropdown to use full width buttons
Add version sock to bootstrap4
Fix indenting in base.html
Change comments in base.html
Remove dead code in booking_list
Revert changes in mulitple_select_filter_widget
Remove dead code, whitespace in inbox
Fix formatting, dead code in viewport-base
Remove unused media tag
Make only .rotate classes rotate on dropdown click
Attach back and next to breadcrumbs
Resize breadcrumbs to be same width
Disable pointer cursor on breadcrumb hover
Change account page to account dropdown on left

Change-Id: I6c5423db6f0f6f7f0b12e55347eddcc42b56e52b
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

7 files changed, 172 insertions, 133 deletions

diff --git a/src/templates/dashboard/genericselect.html b/src/templates/dashboard/genericselect.html
index 1e9a29a..441d8dc 100644
--- a/src/templates/dashboard/genericselect.html
+++ b/src/templates/dashboard/genericselect.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 
diff --git a/src/templates/dashboard/lab_detail.html b/src/templates/dashboard/lab_detail.html
index 7938e86..336b32e 100644
--- a/src/templates/dashboard/lab_detail.html
+++ b/src/templates/dashboard/lab_detail.html
@@ -9,12 +9,12 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-4">
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <h4 style="display: inline;">Lab Profile</h4>
-               <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
+        <div class="card my-2">
+            <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="panel-body" id="panel_overview">
+            <div id="panel_overview" class="card-body collapse show">
                 <table class="table">
                     <tr>
                         <td>Lab Name: </td><td>{{lab.name}}</td>
@@ -50,19 +50,18 @@
                 </table>
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <h4 style="display: inline;">Host Profiles</h4>
-
-               <a data-toggle="collapse" data-target="#profile_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+        <div class="card my-2">
+            <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" style="line-height: 1;" >Expand</button>
             </div>
-            <div class="panel-body pod_panel" id="profile_panel">
+            <div id="profile_panel" class="card-body collapse show">
                 <table class="table">
                     {% for profile in hostprofiles %}
                     <tr>
                         <td>{{profile.name}}</td>
                         <td>{{profile.description}}</td>
-                        <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-primary">Profile</a></td>
+                        <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
                     </tr>
                     {% endfor %}
                 </table>
@@ -70,31 +69,30 @@
         </div>
 
 
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+        <div class="card my-2">
+            <div class="card-header d-flex">
                 <h4 style="display: inline;">Networking Capabilities</h4>
-            <a data-toggle="collapse" data-target="#network_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+            <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto" style="line-height: 1;" >Expand</button>
             </div>
 
-            <div class="panel-body" id="network_panel">
-
-                    <table class="table">
-                        <tr>
-                            <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
-                        </tr>
-                        <tr>
-                            <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
-                            <td>{{lab.vlan_manager.allow_overlapping}}</td>
-                        </tr>
-                    </table>
+            <div class="card-body collapse show" id="network_panel">
+                <table class="table">
+                    <tr>
+                        <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
+                    </tr>
+                    <tr>
+                        <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
+                        <td>{{lab.vlan_manager.allow_overlapping}}</td>
+                    </tr>
+                </table>
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <h4 style="display: inline;">Images</h4>
-            <a data-toggle="collapse" data-target="#image_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+        <div class="card my-2">
+            <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="panel-body" id="image_panel">
+            <div class="card-body collapse show" id="image_panel">
                 <table class="table">
                     <tr>
                         <th>Name</th>
@@ -116,14 +114,13 @@
 
     </div>
     <div class="col-lg-8">
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <h4 style="display: inline;">Lab Hosts</h4>
-                <p style="display: inline; margin-left: 10px;"></p>
-               <a data-toggle="collapse" data-target="#lab_hosts_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+        <div class="card my-2">
+            <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="panel-body" id="lab_hosts_panel">
+            <div class="card-body collapse show" id="lab_hosts_panel">
                 <table class="table">
                     <tr>
                         <th>Name</th>
diff --git a/src/templates/dashboard/lab_list.html b/src/templates/dashboard/lab_list.html
index c459dd9..9cde80c 100644
--- a/src/templates/dashboard/lab_list.html
+++ b/src/templates/dashboard/lab_list.html
@@ -1,26 +1,28 @@
 {% extends "base.html" %}
 {% block content %}
-    <h2>Labs</h2>
-    <div class="card_container">
+<h2>Labs</h2>
+<div class="card_container">
     {% for lab in labs %}
-        <div class="detail_card">
-            <div>
-                <h3>{{lab.name}}</h3>
-                <ul class="list-group">
-                    <li class="list-group-item">name: {{lab.name}}</li>
-                    <li class="list-group-item">description: {{lab.description}}</li>
-                    <li class="list-group-item">location: {{lab.location}}</li>
-                    {% if lab.status == 0 %}
-                    <li class="list-group-item">status: Up</li>
-                    {% elif lab.status == 100 %}
-                    <li class="list-group-item">status: Down for Maintenance</li>
-                    {% elif lab.status == 200 %}
-                    <li class="list-group-item">status: Down</li>
-                    {% endif %}
-                </ul>
-            </div>
-            <a class="btn btn-primary" href="/lab/{{lab.name}}/">Details</a>
+    <div class="card">
+        <div class="card-header">
+            <h3 class="mt-2">{{lab.name}}</h3>
+        </div>
+        <div class="p-4">
+            <ul class="list-group">
+                <li class="list-group-item">name: {{lab.name}}</li>
+                <li class="list-group-item">description: {{lab.description}}</li>
+                <li class="list-group-item">location: {{lab.location}}</li>
+                {% if lab.status == 0 %}
+                <li class="list-group-item">status: Up</li>
+                {% elif lab.status == 100 %}
+                <li class="list-group-item">status: Down for Maintenance</li>
+                {% elif lab.status == 200 %}
+                <li class="list-group-item">status: Down</li>
+                {% endif %}
+            </ul>
+            <a class="btn btn-primary mt-4 w-100" href="/lab/{{lab.name}}/">Details</a>
         </div>
-    {% endfor %}
     </div>
-{% endblock %}
+    {% endfor %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/src/templates/dashboard/landing.html b/src/templates/dashboard/landing.html
index fb75d5f..e6a235f 100644
--- a/src/templates/dashboard/landing.html
+++ b/src/templates/dashboard/landing.html
@@ -2,27 +2,30 @@
 {% load staticfiles %}
 
 {% block content %}
-    <div class="" style="text-align: center;">
-        {% if not request.user.is_anonymous %}
-        {% if not request.user.userprofile.ssh_public_key %}
-        <h4 style="display: inline; text-align: center; border: 3px solid red; padding: 10px; border-radius: 10000px; height: 40px;">
-            Warning: you need to upload an ssh key under <a href="/accounts/settings">account settings</a> if you wish to log into the servers you book
-        </h4>
-        {% endif %}
-        {% else %}
-        {% endif %}
+<div class="" style="text-align: center;">
+    {% if not request.user.is_anonymous %}
+    {% if not request.user.userprofile.ssh_public_key %}
+    <div class="alert alert-danger" role="alert">
+        Warning: you need to upload an ssh key under <a href="/accounts/settings">account settings</a> if you wish to
+        log into the servers you book
     </div>
+    {% endif %}
+    {% else %}
+    {% endif %}
+</div>
 {% csrf_token %}
 
 <style>
-    .wf_create{
+    .wf_create {
         display: inline-block;
         text-align: center;
     }
-    .wf_create_div{
+
+    .wf_create_div {
         text-align: center;
     }
-    .hidden_form{
+
+    .hidden_form {
         display: none;
     }
 
@@ -39,81 +42,117 @@
         display: grid;
         grid-template-columns: 1fr 30px 1fr;
     }
+
     .grid_panel {
         padding: 30px;
     }
+
     .btn-primary {
         margin: 10px;
     }
+
     h2 {
         border-bottom: 1px solid #cccccc;
     }
-    h1 {
-    }
-</style>
-<div class="landing_container">
-    <div class="info_panel grid_panel">
-        <h2>About Us:</h2>
-        <p>The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as OPNFV by hosting hardware and providing access to the community. Currently, the only participating lab is the University of New Hampshire Interoperability Lab (UNH-IOL).</p>
-        <p>To get started, you can request access to a server at the right. PTL's have the ability to design and book a whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: <a href="https://wiki.opnfv.org/display/INF/Lab+as+a+Service+2.0">LaaS Wiki</a></p>
 
+    h1 {}
+</style>
+<div class="container-fluid">
+    <div class="row">
+        <!-- About us -->
+        <div class="col-12 col-lg-6 mb-4">
+            <h2>About Us:</h2>
+            <p>The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as
+                OPNFV
+                by hosting hardware and providing access to the community. Currently, the only participating lab is the
+                University of New Hampshire Interoperability Lab (UNH-IOL).</p>
+            <p>To get started, you can request access to a server at the right. PTL's have the ability to design and
+                book a
+                whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: <a
+                    href="https://wiki.opnfv.org/display/INF/Lab+as+a+Service+2.0">LaaS Wiki</a></p>
+        </div>
+        <!-- Get started -->
+        <div class="col-12 col-lg-6 mb-4">
+            <h2>Get Started:</h2>
+            {% if request.user.is_anonymous %}
+            <h4 style="text-align:center;">To get started, please log in with your <a href="/accounts/login">Linux
+                    Foundation Jira account</a></h4>
+            {% else %}
+            <p>To get started, book a server below:</p>
+            <a class="wf_create btn btn-primary"
+                style="display: flex; flex-direction: column; justify-content: center; margin: 20px; height: 100pt; vertical-align: middle; text-align: center; color: #FFF;"
+                href="/booking/quick/">
+                <p style="font-size: xx-large">Book a Server</p>
+            </a>
+            <p>PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
+                below:
+            </p>
+            <div class='container'>
+                <div class="row">
+                    <div class="col-12 col-xl-4">
+                        <button class="wf_create btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
+                    </div>
+                    <div class="col-12 col-xl-4">
+                        <button class="wf_create btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
+                    </div>
+                    <div class="col-12 col-xl-4">
+                        <button class="wf_create btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        <!-- Returning users -->
         {% if not request.user.is_anonymous %}
-        <h2 style="margin-top: 50px;">Returning Users:</h2>
-        <p>If you're a returning user, some of the following options may be of interest:</p>
-        <button class="wf_create btn btn-primary" onclick="cwf(3)">Snapshot a Host</button>
-        <a class="wf_create btn btn-primary" href="{% url 'account:my-bookings' %}">My Bookings</a>
-        {% if manager == True %}
-        <button class="wf_continue btn btn-primary" onclick="continue_wf()">Continue Unfinished Workflow</button>
-        {% endif %}
-        {% endif %}
-    </div>
-    <div class="">
-    </div>
-    <div class="actions_panel grid_panel">
-        <h2>Get Started:</h2>
-        {% if request.user.is_anonymous %}
-            <h4 style="text-align:center;">To get started, please log in with your <a href="/accounts/login">Linux Foundation Jira account</a></h4>
-        {% else %}
-        <p>To get started, book a server below:</p>
-        <a class="wf_create btn btn-primary" style="display: flex; flex-direction: column; justify-content: center; margin: 20px; height: 100pt; vertical-align: middle; text-align: center; color: #FFF;" href="/booking/quick/"><p style="font-size: xx-large">Book a Server</p></a>
-        <p>PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options below:</p>
-        <div class='wf_create_div'>
-
-                <button class="wf_create btn btn-primary" onclick="cwf(0)">Book a Pod</button>
-                <button class="wf_create btn btn-primary" onclick="cwf(1)">Design a Pod</button>
-                <button class="wf_create btn btn-primary" onclick="cwf(2)">Configure a Pod</button>
-        {% endif %}
+        <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
+            <h2 class="ht-4">Returning Users:</h2>
+            <p>If you're a returning user, some of the following options may be of interest:</p>
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-xl-4">
+                        <button class="wf_create btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
+                    </div>
+                    <div class="col-12 col-xl-4">
+                        <a class="wf_create btn btn-primary w-100" href="{% url 'account:my-bookings' %}">My
+                            Bookings</a>
+                    </div>
+                    {% if manager == True %}
+                    <div class="col-12 col-xl-4">
+                        <button class="wf_continue btn btn-primary w-100" onclick="continue_wf()">Resume
+                            Workflow</button>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
         </div>
+        {% endif %}
     </div>
 </div>
 
-
-
-
-
 <script type="text/javascript">
-    function cwf(type)
-    {
+    function cwf(type) {
         $.ajax({
             type: "POST",
             url: "/",
-            data: {"create":type},
-            beforeSend: function(request) {
+            data: {
+                "create": type
+            },
+            beforeSend: function (request) {
                 request.setRequestHeader("X-CSRFToken",
-                $('input[name="csrfmiddlewaretoken"]').val()
+                    $('input[name="csrfmiddlewaretoken"]').val()
                 );
             }
 
         }).done(function (data) {
             window.location.replace("/wf/");
-        }).fail(function(jqxHR, textstatus) {
-            alert("Something went wrong...");});
+        }).fail(function (jqxHR, textstatus) {
+            alert("Something went wrong...");
+        });
     }
-    function continue_wf()
-    {
+
+    function continue_wf() {
         window.location.replace("/wf/");
     }
-
 </script>
 
 <div class="hidden_form" id="form_div">
@@ -130,4 +169,4 @@
 
 {% block vport_comm %}
 {% endblock %}
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/dashboard/resource.html b/src/templates/dashboard/resource.html
index 28e7998..f36ee7b 100644
--- a/src/templates/dashboard/resource.html
+++ b/src/templates/dashboard/resource.html
@@ -7,11 +7,11 @@
     <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
 
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
+    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
@@ -23,11 +23,11 @@
 
 {% block extrajs %}
     <!-- DataTables JavaScript -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables/media/css/dataTables.bootstrap.css" %}"
           rel="stylesheet">
 
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+          <script src={% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script>
+          <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
 
 
diff --git a/src/templates/dashboard/resource_all.html b/src/templates/dashboard/resource_all.html
index 0b0d0d4..fb8cc7e 100644
--- a/src/templates/dashboard/resource_all.html
+++ b/src/templates/dashboard/resource_all.html
@@ -7,11 +7,11 @@
     <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
 
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
+    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
@@ -36,11 +36,11 @@
 
 {% block extrajs %}
     <!-- DataTables JavaScript -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables/media/css/dataTables.bootstrap.css" %}"
           rel="stylesheet">
 
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+          <script src={% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script>
+          <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
 
 
diff --git a/src/templates/dashboard/table.html b/src/templates/dashboard/table.html
index b3f4b5f..0a37ded 100644
--- a/src/templates/dashboard/table.html
+++ b/src/templates/dashboard/table.html
@@ -4,11 +4,12 @@
 {% block extrahead %}
     {{ block.super }}
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet">
+    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
+          rel="stylesheet">
 {% endblock extrahead %}
 
 {% block content %}
@@ -34,8 +35,8 @@
 {% block extrajs %}
     <!-- DataTables JavaScript -->
 
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+    <script src={% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
     <script src={% static "js/dataTables-sort.js" %}></script>