From 1f982c94ce2e71431138eb6468b17c4cdb30ac3b Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@digitalocean.com>
Date: Mon, 17 Jul 2017 11:41:39 -0400
Subject: [PATCH] Added an AJAX spinner

---
 netbox/dcim/views.py                      |  10 ---------
 netbox/project-static/css/base.css        |  25 ++++++++++++++++++++++
 netbox/project-static/img/ajax-loader.gif | Bin 0 -> 2608 bytes
 netbox/templates/_base.html               |  12 ++++++++---
 netbox/templates/dcim/device_status.html  |   4 +++-
 netbox/templates/inc/ajax_loader.html     |   4 ++++
 6 files changed, 41 insertions(+), 14 deletions(-)
 create mode 100644 netbox/project-static/img/ajax-loader.gif
 create mode 100644 netbox/templates/inc/ajax_loader.html

diff --git a/netbox/dcim/views.py b/netbox/dcim/views.py
index 221916c9f..fdadc679d 100644
--- a/netbox/dcim/views.py
+++ b/netbox/dcim/views.py
@@ -926,19 +926,9 @@ class DeviceStatusView(View):
     def get(self, request, pk):
 
         device = get_object_or_404(Device, pk=pk)
-        method = request.GET.get('method', 'get_facts')
-
-        interfaces = Interface.objects.order_naturally(
-            device.device_type.interface_ordering
-        ).filter(
-            device=device
-        ).select_related(
-            'connected_as_a', 'connected_as_b'
-        )
 
         return render(request, 'dcim/device_status.html', {
             'device': device,
-            'interfaces': interfaces,
         })
 
 
diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
index f725dafa3..573c1c967 100644
--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -333,6 +333,31 @@ table.component-list tr.ipaddress:hover td {
     background-color: #e6f7f7;
 }
 
+/* AJAX loader */
+.loading {
+    position: fixed;
+    display: none;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+.loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+}
+
 /* Misc */
 .banner-bottom {
     margin-bottom: 50px;
diff --git a/netbox/project-static/img/ajax-loader.gif b/netbox/project-static/img/ajax-loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..24f1e865868be0f2e84ce0eb91ccb75cfc092b9a
GIT binary patch
literal 2608
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
S@pI0KTkov6^^5<b7wexuo3^e1

literal 0
HcmV?d00001

diff --git a/netbox/templates/_base.html b/netbox/templates/_base.html
index 10879087d..10b4970a8 100644
--- a/netbox/templates/_base.html
+++ b/netbox/templates/_base.html
@@ -323,13 +323,19 @@
             </div>
         </div>
     </footer>
-<script type="text/javascript">
-    var netbox_api_path = "/{{ settings.BASE_PATH }}api/";
-</script>
 <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
 <script src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
 <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/forms.js' %}?v{{ settings.VERSION }}"></script>
+<script type="text/javascript">
+    var netbox_api_path = "/{{ settings.BASE_PATH }}api/";
+    var loading = $(".loading");
+    $(document).ajaxStart(function() {
+        loading.show();
+    }).ajaxStop(function() {
+        loading.hide();
+    });
+</script>
 {% block javascript %}{% endblock %}
 </body>
 </html>
diff --git a/netbox/templates/dcim/device_status.html b/netbox/templates/dcim/device_status.html
index d5931b550..537d1034b 100644
--- a/netbox/templates/dcim/device_status.html
+++ b/netbox/templates/dcim/device_status.html
@@ -1,8 +1,10 @@
 {% extends '_base.html' %}
+{% load staticfiles %}
 
 {% block title %}{{ device }} - NAPALM{% endblock %}
 
 {% block content %}
+    {% include 'inc/ajax_loader.html' %}
     {% include 'dcim/inc/device_header.html' with active_tab='status' %}
     <div class="row">
         <div class="col-md-6">
@@ -47,7 +49,7 @@
 <script type="text/javascript">
 $(document).ready(function() {
     $.ajax({
-        url: "{% url 'dcim-api:device-napalm' pk=device.pk %}?method=get_facts",
+        url: "{% url 'dcim-api:device-napalm' pk=device.pk %}?method=get_facts&method=get_environment",
         dataType: 'json',
         success: function(json) {
             $('#hostname').html(json['get_facts']['hostname']);
diff --git a/netbox/templates/inc/ajax_loader.html b/netbox/templates/inc/ajax_loader.html
new file mode 100644
index 000000000..b5b3ee2c1
--- /dev/null
+++ b/netbox/templates/inc/ajax_loader.html
@@ -0,0 +1,4 @@
+{% load staticfiles %}
+<div class="loading text-center">
+    <img src="{% static 'img/ajax-loader.gif' %}" />
+</div>