Added an AJAX spinner

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,
         })
 
 

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;

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>

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']);

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>