Fix dropdown icons, remove extra .dropdown-toggle element.

backend/backend/static/js/app.js

@@ -2,16 +2,11 @@
 import "../scss/app.scss";
 
 // Global
-import "./modules/bootstrap";
-import "./modules/feather";
+import "bootstrap";
 import "./modules/font-awesome";
-import "./modules/moment";
 import "./modules/sidebar";
 import "./modules/user-agent";
 
-// Charts
-import "./modules/chartjs";
-
 // Forms
 import "./modules/mask";
 import "Select2/select2.js";
@@ -21,7 +16,11 @@ import "./modules/validation";
 import "./modules/datatables";
 
 // Code highlight
-import hljs from 'highlight.js';
+import hljs from 'highlight.js/lib/highlight';
+import bash from 'highlight.js/lib/languages/bash';
+hljs.registerLanguage('bash', bash);
+
+
 window.hljs = hljs;
 
 // Tags
@@ -41,3 +40,6 @@ window.mixpanel = require('mixpanel-browser');
 
 import Shepherd from 'shepherd.js'
 window.Shepherd = Shepherd;
+
+import feather from "feather-icons";
+window.feather = feather;

backend/backend/static/js/modules/font-awesome.js

@@ -1 +1,21 @@
-import "@fortawesome/fontawesome-free/js/all";
+import { library, dom } from '@fortawesome/fontawesome-svg-core'
+
+/*
+ Webpack fails to properly tree-shake Fontawesome's index.es.js, see
+ https://github.com/FortAwesome/Font-Awesome/issues/14552
+ This workaround helps reduce bundle size by 600+ KiB,
+ */
+import { faSquare } from '@fortawesome/free-regular-svg-icons/faSquare'
+import { faCheckSquare } from '@fortawesome/free-regular-svg-icons/faCheckSquare'
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy'
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
+import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit'
+import { faSave } from '@fortawesome/free-solid-svg-icons/faSave'
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle'
+
+
+library.add([faCopy, faCheck, faQuestionCircle, faExclamationCircle, faEdit, faSquare, faCheckSquare, faSave, faEye, faInfoCircle]);
+dom.watch();

backend/device_registry/context_processors.py

@@ -8,7 +8,7 @@
     webpack_stats_path = Path(settings.BASE_DIR) / '..' / WEBPACK_STATS_NAME
 with webpack_stats_path.open() as webpack_stats_file:
     webpack_bundle_json = json.load(webpack_stats_file)
-    WEBPACK_BUNDLE_CSS, WEBPACK_BUNDLE_JS = ['/bundles/'+chunk['name'] for chunk in webpack_bundle_json['chunks']['app']]
+    WEBPACK_BUNDLE_CSS, WEBPACK_BUNDLE_JS = ['/bundles/'+chunk['name'] for chunk in webpack_bundle_json['chunks']['app']][:2]
 
 
 def webpack_bundle(request):

backend/device_registry/templates/admin_base.html

@@ -48,11 +48,8 @@
           {% endblock dashboard_title %}
           <ul class="navbar-nav ml-auto">
             <li class="nav-item dropdown">
-              <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
-                <i class="align-middle" data-feather="settings"></i>
-              </a>
-
-              <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
+              <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
+                <i data-feather="settings"></i>
                 <span class="text-dark">{{ user.username }}</span>
               </a>
               <div class="dropdown-menu dropdown-menu-right">
@@ -96,11 +93,14 @@
 {% block scripts %}
   {{ block.super }}
   <script src="{% static '/js/csrf.js' %}"></script>
-  {% if MIXPANEL_TOKEN %}
   <script type="text/javascript">
+      $(() => {
+          feather.replace();
+      });
+    {% if MIXPANEL_TOKEN %}
       $('.sidebar-link').click((e) => {
           mixpanel.track("Sidebar", {element: e.target.id});
-      })
+      });
+    {% endif %}
   </script>
-  {% endif %}
 {% endblock %}

backend/device_registry/templates/batch_actions_control.html

@@ -225,6 +225,7 @@ <h5 class="modal-title" id="batch-title">Title</h5>
                           $('#wott-toast-message').text(e);
                           $('#wott-toast-title').text('Action Applied');
                           $('#wott-toast-extra').text('now');
+                          $('.toast').show();
                           $('.toast').toast('show');
                       }
                       $('#batch_apply_spinner')[0].style.display = 'none';

backend/device_registry/templates/create_policy.html

@@ -31,10 +31,11 @@ <h5 class="card-title">{{ object }}</h5>
 {% endblock admin_content %}
 
 {% block scripts %}
-{% include "policy_editor.html" %}
+  {{ block.super }}
+  {% include "policy_editor.html" %}
 
   <script>
-      document.addEventListener("DOMContentLoaded", function () {
+      $(() => {
           let ports_table = init_policy_ports_editor(JSON.parse($('#id_ports').text()));
 
           $('#policy-form').submit(function (e) {

backend/device_registry/templates/device_info_security.html

@@ -439,6 +439,7 @@ <h5>OpenSSH</h5>
 {% endblock admin_content %}
 
 {% block scripts %}
+  {{ block.super }}
   <script>
     $(() => {
       $('[data-toggle="popover"]').popover({

backend/device_registry/templates/pairing_keys.html

@@ -87,6 +87,7 @@ <h6 class="card-subtitle text-muted">List of keys not yet applied.</h6>
 {% endblock admin_content %}
 
 {% block scripts %}
+  {{ block.super }}
   <script>
 
     var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

backend/device_registry/templates/root.html

@@ -647,6 +647,7 @@ <h4 class="modal-title" id="modal-title"></h4>
           return template;
       }
       $('.toast').toast({delay: 5000});
+      $('.toast').hide();
 
       function render_actions_count(data, type, row, meta) {
           if (type == 'sort') return data;