js: use npm instead of bower

Bower is considered deprecated, so switch to npm.

- Update all dependencies
- Use npm's version of mxgraph
- Use npm's version of jquery
- Use npm's version of plotly
- Fix mxgraph to use styles and images from the correct location
- Removed random csrf token input in nav bar and use js to get csrf
token
- Remove all calendar and some resource files since they were not used

Change-Id: I30d6bd91cded9547caa4c0a5247cd9f214fe9798
Signed-off-by: Jeremy Plsek <jplsek@iol.unh.edu>

8 files changed, 25 insertions, 28 deletions

diff --git a/src/templates/base/base.html b/src/templates/base/base.html
index 4011739..6776f7e 100644
--- a/src/templates/base/base.html
+++ b/src/templates/base/base.html
@@ -75,7 +75,6 @@
                             <a href="/" class="list-group-item list-group-item-action">
                                 Home
                             </a>
-                            {% csrf_token %}
                             <a class="list-group-item list-group-item-action" data-toggle="collapse"
                                 href="#createList" role="button">
                                 Create <i class="fas fa-angle-down rotate"></i>
diff --git a/src/templates/base/booking/booking_list.html b/src/templates/base/booking/booking_list.html
index 591ecc9..523c84b 100644
--- a/src/templates/base/booking/booking_list.html
+++ b/src/templates/base/booking/booking_list.html
@@ -5,11 +5,11 @@
 {% block extrahead %}
     {{ block.super }}
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
@@ -31,8 +31,8 @@
 
 {% block extrajs %}
     <!-- DataTables JavaScript -->
-    <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 "node_modules/datatables.net/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
     <script type="text/javascript">
         $(document).ready(function () {
diff --git a/src/templates/base/booking/stats.html b/src/templates/base/booking/stats.html
index 94239f9..a78f793 100644
--- a/src/templates/base/booking/stats.html
+++ b/src/templates/base/booking/stats.html
@@ -3,7 +3,7 @@
 
 {% block extrahead %}
 {{ block.super }}
-<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<script src="{% static "node_modules/plotly.js-dist/plotly.js" %}"></script>
 <script>
 function drawGraph(data, graph_id, graph_title){
     var container = document.getElementById(graph_id);
diff --git a/src/templates/base/config_bundle/steps/table_formset.html b/src/templates/base/config_bundle/steps/table_formset.html
index d25621e..3bee6af 100644
--- a/src/templates/base/config_bundle/steps/table_formset.html
+++ b/src/templates/base/config_bundle/steps/table_formset.html
@@ -5,11 +5,11 @@
 
 {% block extrahead %}
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
@@ -43,8 +43,8 @@
     {{ block.super }}
     <!-- DataTables JavaScript -->
 
-    <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 "node_modules/datatables.net/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
     <script src={% static "js/dataTables-sort.js" %}></script>
 
diff --git a/src/templates/base/dashboard/table.html b/src/templates/base/dashboard/table.html
index 2b4628e..c55a011 100644
--- a/src/templates/base/dashboard/table.html
+++ b/src/templates/base/dashboard/table.html
@@ -4,11 +4,11 @@
 {% block extrahead %}
     {{ block.super }}
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
+    <link href="{% static "node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
@@ -29,8 +29,8 @@
 {% block extrajs %}
     <!-- DataTables JavaScript -->
 
-    <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 "node_modules/datatables.net/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
     <script src={% static "js/dataTables-sort.js" %}></script>
 
diff --git a/src/templates/base/layout.html b/src/templates/base/layout.html
index eac0ac3..f35f1a7 100644
--- a/src/templates/base/layout.html
+++ b/src/templates/base/layout.html
@@ -13,19 +13,20 @@
     <title>OPNFV Laas {{ title }}</title>
 
     <!-- Bootstrap Core CSS -->
-    <link href="{% static "bower_components/bootstrap/dist/css/bootstrap.min.css" %}"
+    <link href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}"
           rel="stylesheet">
 
     <!-- Custom Fonts -->
-    <link href="{% static "bower_components/Font-Awesome/css/all.min.css" %}"
+    <link href="{% static "node_modules/@fortawesome/fontawesome-free/css/all.min.css" %}"
           rel="stylesheet" type="text/css">
 
     <link href="{% static "css/base.css" %}" rel="stylesheet">
 
     <!-- Favicon -->
     <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
-    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
-        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+
+    <!-- jQuery -->
+    <script src="{% static "node_modules/jquery/dist/jquery.min.js" %}"></script>
 
     {% block extrahead %}
     {% endblock extrahead %}
@@ -36,7 +37,6 @@
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
-
 </head>
 
 {% block extrastyle %}
@@ -46,14 +46,10 @@
 {% block basecontent %}
 {% endblock basecontent %}
 
-{#<!-- jQuery -->#}
-{#<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>#}
-{#<script src="{% static "bower_components/jquery-migrate/jquery-migrate.min.js" %}"></script>#}
 <!-- Popper.js -->
-<script src="{% static "bower_components/popper.js/dist/umd/popper.min.js" %}"></script>
-{#<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>#}
+<script src="{% static "node_modules/popper.js/dist/umd/popper.min.js" %}"></script>
 <!-- Bootstrap Core JavaScript -->
-<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
+<script src="{% static "node_modules/bootstrap/dist/js/bootstrap.min.js" %}"></script>
 
 {% block extrajs %}
 {% endblock extrajs %}
diff --git a/src/templates/base/resource/steps/pod_definition.html b/src/templates/base/resource/steps/pod_definition.html
index a6810de..4b8b296 100644
--- a/src/templates/base/resource/steps/pod_definition.html
+++ b/src/templates/base/resource/steps/pod_definition.html
@@ -1,6 +1,5 @@
 {% extends "workflow/viewport-element.html" %}
 {% block extrahead %}
-<link href="/static/css/graph_common.css" rel="stylesheet">
 <title>Pod Definition Prototype</title>
 
 <!-- Loads and initializes the library -->
@@ -15,7 +14,7 @@
     <div class="h-100 w-100 position-absolute overflow-hidden">
         <div class="row h-100">
             <div id="graphParent" class="col h-100">
-                <div class="d-flex bg-light border">
+                <div class="d-flex bg-light border align-items-center">
                     <div id="toolbarContainer"></div>
                     <div class="ml-4 text-info">Hold right click to drag</div>
                 </div>
diff --git a/src/templates/base/workflow/viewport-base.html b/src/templates/base/workflow/viewport-base.html
index bb13ab7..d08145c 100644
--- a/src/templates/base/workflow/viewport-base.html
+++ b/src/templates/base/workflow/viewport-base.html
@@ -62,9 +62,12 @@
             success: update_page
         });
     });
+
+    // global variable required for mxgraph to load its css and images
+    mxBasePath = '{% static "node_modules/mxgraph/javascript/src" %}';
 </script>
 <!-- lazy load scripts -->
-<script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
+<script type="text/javascript" src="{% static "node_modules/mxgraph/javascript/mxClient.js" %}" ></script>
 <!-- end lazy load scripts -->
 <div class="d-none" id="workflow_pop_form_div">
     <form id="workflow_pop_form" action="/workflow/finish/" method="post">