migrate napalm/device config to typescript

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');
+    }
+  }
+}