migrate napalm/device config to typescript

netbox/project-static/package.json

@@ -5,7 +5,7 @@
   "license": "Apache2",
   "scripts": {
     "bundle:css": "parcel build --public-url /static -o netbox.css main.scss && parcel build --public-url /static -o rack_elevation.css rack_elevation.scss",
-    "bundle:js": "parcel build --public-url /static -o netbox.js src/index.ts && parcel build --public-url /static -o jobs.js src/jobs.ts && parcel build --public-url /static -o lldp.js src/lldp.ts",
+    "bundle:js": "parcel build --public-url /static -o netbox.js src/index.ts && parcel build --public-url /static -o jobs.js src/jobs.ts && parcel build --public-url /static -o lldp.js src/device/lldp.ts && parcel build --public-url /static -o config.js src/device/config.ts",
     "bundle": "yarn bundle:css && yarn bundle:js"
   },
   "dependencies": {

netbox/project-static/src/device/config.ts

@@ -0,0 +1,41 @@
+import { createToast } from '../toast';
+import { apiGetBase, getNetboxData, hasError, toggleLoader } from '../util';
+
+/**
+ * Initialize device config elements.
+ */
+function initConfig() {
+  toggleLoader('show');
+  const url = getNetboxData('data-object-url');
+
+  if (url !== null) {
+    apiGetBase<DeviceConfig>(url)
+      .then(data => {
+        if (hasError(data)) {
+          createToast('danger', 'Error Fetching Device Config', data.error).show();
+        } else {
+          const configTypes = [
+            'running',
+            'startup',
+            'candidate',
+          ] as (keyof DeviceConfig['get_config'])[];
+
+          for (const configType of configTypes) {
+            const element = document.getElementById(`${configType}_config`);
+            if (element !== null) {
+              element.innerHTML = data.get_config[configType];
+            }
+          }
+        }
+      })
+      .finally(() => {
+        toggleLoader('hide');
+      });
+  }
+}
+
+if (document.readyState !== 'loading') {
+  initConfig();
+} else {
+  document.addEventListener('DOMContentLoaded', initConfig);
+}

netbox/project-static/src/device/lldp.ts

@@ -1,19 +1,5 @@
-import { createToast } from './toast';
-import { getNetboxData, apiGetBase, hasError, isTruthy } from './util';
-
-/**
- * Toggle visibility of card loader.
- */
-function toggleLoader(action: 'show' | 'hide') {
-  const spinnerContainer = document.querySelector('div.card-overlay');
-  if (spinnerContainer !== null) {
-    if (action === 'show') {
-      spinnerContainer.classList.remove('d-none');
-    } else {
-      spinnerContainer.classList.add('d-none');
-    }
-  }
-}
+import { createToast } from '../toast';
+import { getNetboxData, apiGetBase, hasError, isTruthy, toggleLoader } from '../util';
 
 /**
  * Get an attribute from a row's cell.

netbox/project-static/src/global.d.ts

@@ -113,6 +113,14 @@ type LLDPNeighborDetail = {
   get_lldp_neighbors_detail: { [interface: string]: LLDPInterface[] };
 };
 
+type DeviceConfig = {
+  get_config: {
+    candidate: string;
+    running: string;
+    startup: string;
+  };
+};
+
 interface ObjectWithGroup extends APIObjectBase {
   group: Nullable<APIReference>;
 }

netbox/project-static/src/util.ts

@@ -172,3 +172,17 @@ export function getNetboxData(key: string): string | null {
   }
   return null;
 }
+
+/**
+ * Toggle visibility of card loader.
+ */
+export function toggleLoader(action: 'show' | 'hide') {
+  const spinnerContainer = document.querySelector('div.card-overlay');
+  if (spinnerContainer !== null) {
+    if (action === 'show') {
+      spinnerContainer.classList.remove('d-none');
+    } else {
+      spinnerContainer.classList.add('d-none');
+    }
+  }
+}

netbox/templates/dcim/device/config.html

@@ -3,50 +3,43 @@
 
 {% block title %}{{ object }} - Config{% endblock %}
 
+{% block head %}
+<script type="text/javascript" src="{% static 'config.js' %}" onerror="window.location='{% url 'media_failure' %}?filename=config.js'"></script>
+{% endblock %}
+
 {% block content %}
-    {% include 'inc/ajax_loader.html' %}
-    <div class="row">
-        <div class="col-md-10 col-md-offset-1">
-            <div class="card">
-                <h5 class="card-header">Device Configuration</h5>
-                <div class="card-body">
-                    <ul class="nav nav-tabs" role="tablist">
-                        <li role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">Running</a></li>
-                        <li role="presentation"><a href="#startup" aria-controls="startup" role="tab" data-toggle="tab">Startup</a></li>
-                        <li role="presentation"><a href="#candidate" aria-controls="candidate" role="tab" data-toggle="tab">Candidate</a></li>
-                    </ul>
-                    <div class="tab-content">
-                        <div role="tabpanel" class="tab-pane active" id="running">
-                            <pre id="running_config"></pre>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="startup">
-                            <pre id="startup_config"></pre>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="candidate">
-                            <pre id="candidate_config"></pre>
-                        </div>
+<div class="row">
+    <div class="col-md-10 col-md-offset-1">
+        <div class="card">
+            <div class="card-overlay">
+                <div class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+            <h5 class="card-header">Device Configuration</h5>
+            <div class="card-body">
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li>
+                    <li role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li>
+                    <li role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li>
+                </ul>
+                <div class="tab-content pt-3">
+                    <div role="tabpanel" class="tab-pane active" id="running">
+                        <pre id="running_config"></pre>
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="startup">
+                        <pre id="startup_config"></pre>
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="candidate">
+                        <pre id="candidate_config"></pre>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
 {% endblock %}
 
-{% block javascript %}
-<script type="text/javascript">
-$(document).ready(function() {
-    $.ajax({
-        url: "{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_config",
-        dataType: 'json',
-        success: function(json) {
-            $('#running_config').html($.trim(json['get_config']['running']));
-            $('#startup_config').html($.trim(json['get_config']['startup']));
-            $('#candidate_config').html($.trim(json['get_config']['candidate']));
-        },
-        error: function(xhr) {
-            alert(xhr.responseText);
-        }
-    });
-});
-</script>
+{% block data %}
+<span data-object-url="{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_config"></span>
 {% endblock %}

netbox/templates/dcim/device/lldp_neighbors.html

@@ -16,7 +16,6 @@
         </div>
         <div class="card-header">
             <h5 class="d-inline">LLDP Neighbors</h5>
-            {% comment %} <div id="spinner-container" class="float-end"></div> {% endcomment %}
         </div>
         <div class="card-body">
             <table class="table table-hover">