Merge branch 'feature' into 3979-wireless

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

@@ -1,6 +1,17 @@
 import { createToast } from '../bs';
 import { getNetboxData, apiGetBase, hasError, isTruthy, toggleLoader } from '../util';
 
+// Match an interface name that begins with a capital letter and is followed by at least one other
+// alphabetic character, and ends with a forward-slash-separated numeric sequence such as 0/1/2.
+const CISCO_IOS_PATTERN = new RegExp(/^([A-Z][A-Za-z]+)[^0-9]*([0-9/]+)$/);
+
+// Mapping of overrides to default Cisco IOS interface alias behavior (default behavior is to use
+// the first two characters).
+const CISCO_IOS_OVERRIDES = new Map<string, string>([
+  // Cisco IOS abbreviates 25G (TwentyFiveGigE) interfaces as 'Twe'.
+  ['TwentyFiveGigE', 'Twe'],
+]);
+
 /**
  * Get an attribute from a row's cell.
  *
@@ -12,6 +23,40 @@ function getData(row: HTMLTableRowElement, query: string, attr: string): string
   return row.querySelector(query)?.getAttribute(attr) ?? null;
 }
 
+/**
+ * Get preconfigured alias for given interface. Primarily for matching long-form Cisco IOS
+ * interface names with short-form Cisco IOS interface names. For example, `GigabitEthernet0/1/2`
+ * would become `Gi0/1/2`.
+ *
+ * This should probably be replaced with something in the primary application (Django), such as
+ * a database field attached to given interface types. However, this is a temporary measure to
+ * replace the functionality of this one-liner:
+ *
+ * @see https://github.com/netbox-community/netbox/blob/9cc4992fad2fe04ef0211d998c517414e8871d8c/netbox/templates/dcim/device/lldp_neighbors.html#L69
+ *
+ * @param name Long-form/original interface name.
+ */
+function getInterfaceAlias(name: string | null): string | null {
+  if (name === null) {
+    return name;
+  }
+  if (name.match(CISCO_IOS_PATTERN)) {
+    // Extract the base name and numeric portions of the interface. For example, an input interface
+    // of `GigabitEthernet0/0/1` would result in an array of `['GigabitEthernet', '0/0/1']`.
+    const [base, numeric] = (name.match(CISCO_IOS_PATTERN) ?? []).slice(1, 3);
+
+    if (isTruthy(base) && isTruthy(numeric)) {
+      // Check the override map and use its value if the base name is present in the map.
+      // Otherwise, use the first two characters of the base name. For example,
+      // `GigabitEthernet0/0/1` would become `Gi0/0/1`, but `TwentyFiveGigE0/0/1` would become
+      // `Twe0/0/1`.
+      const aliasBase = CISCO_IOS_OVERRIDES.get(base) || base.slice(0, 2);
+      return `${aliasBase}${numeric}`;
+    }
+  }
+  return name;
+}
+
 /**
  * Update row styles based on LLDP neighbor data.
  */
@@ -23,38 +68,41 @@ function updateRowStyle(data: LLDPNeighborDetail) {
 
     if (row !== null) {
       for (const neighbor of neighbors) {
-        const cellDevice = row.querySelector<HTMLTableCellElement>('td.device');
-        const cellInterface = row.querySelector<HTMLTableCellElement>('td.interface');
-        const cDevice = getData(row, 'td.configured_device', 'data');
-        const cChassis = getData(row, 'td.configured_chassis', 'data-chassis');
-        const cInterface = getData(row, 'td.configured_interface', 'data');
+        const deviceCell = row.querySelector<HTMLTableCellElement>('td.device');
+        const interfaceCell = row.querySelector<HTMLTableCellElement>('td.interface');
+        const configuredDevice = getData(row, 'td.configured_device', 'data');
+        const configuredChassis = getData(row, 'td.configured_chassis', 'data-chassis');
+        const configuredIface = getData(row, 'td.configured_interface', 'data');
 
-        let cInterfaceShort = null;
-        if (isTruthy(cInterface)) {
-          cInterfaceShort = cInterface.replace(/^([A-Z][a-z])[^0-9]*([0-9/]+)$/, '$1$2');
+        const interfaceAlias = getInterfaceAlias(configuredIface);
+
+        const remoteName = neighbor.remote_system_name ?? '';
+        const remotePort = neighbor.remote_port ?? '';
+        const [neighborDevice] = remoteName.split('.');
+        const [neighborIface] = remotePort.split('.');
+
+        if (deviceCell !== null) {
+          deviceCell.innerText = neighborDevice;
         }
 
-        const nHost = neighbor.remote_system_name ?? '';
-        const nPort = neighbor.remote_port ?? '';
-        const [nDevice] = nHost.split('.');
-        const [nInterface] = nPort.split('.');
-
-        if (cellDevice !== null) {
-          cellDevice.innerText = nDevice;
+        if (interfaceCell !== null) {
+          interfaceCell.innerText = neighborIface;
         }
 
-        if (cellInterface !== null) {
-          cellInterface.innerText = nInterface;
-        }
+        // Interface has an LLDP neighbor, but the neighbor is not configured in NetBox.
+        const nonConfiguredDevice = !isTruthy(configuredDevice) && isTruthy(neighborDevice);
 
-        if (!isTruthy(cDevice) && isTruthy(nDevice)) {
+        // NetBox device or chassis matches LLDP neighbor.
+        const validNode =
+          configuredDevice === neighborDevice || configuredChassis === neighborDevice;
+
+        // NetBox configured interface matches LLDP neighbor interface.
+        const validInterface =
+          configuredIface === neighborIface || interfaceAlias === neighborIface;
+
+        if (nonConfiguredDevice) {
           row.classList.add('info');
-        } else if (
-          (cDevice === nDevice || cChassis === nDevice) &&
-          cInterfaceShort === nInterface
-        ) {
-          row.classList.add('success');
-        } else if (cDevice === nDevice || cChassis === nDevice) {
+        } else if (validNode && validInterface) {
           row.classList.add('success');
         } else {
           row.classList.add('danger');

netbox/project-static/src/sidenav.ts

@@ -266,10 +266,8 @@ class SideNav {
       for (const link of this.getActiveLinks()) {
         this.activateLink(link, 'collapse');
       }
-      setTimeout(() => {
-        this.bodyRemove('hide');
-        this.bodyAdd('hidden');
-      }, 300);
+      this.bodyRemove('hide');
+      this.bodyAdd('hidden');
     }
   }
 

netbox/project-static/styles/netbox.scss

@@ -197,9 +197,15 @@ table {
         text-decoration: underline;
       }
     }
+    .dropdown {
+      // Presence of 'overflow: scroll' on a table causes dropdowns to be improperly hidden when
+      // opened. See: https://github.com/twbs/bootstrap/issues/24251
+      position: static;
+    }
   }
   th {
-    a, a:hover {
+    a,
+    a:hover {
       color: $body-color;
       text-decoration: none;
     }

netbox/project-static/styles/sidenav.scss

@@ -105,6 +105,11 @@
   // Navbar brand
   .sidenav-brand {
     margin-right: 0;
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  .sidenav-brand-icon {
+    transition: opacity 0.1s ease-in-out;
   }
 
   .sidenav-inner {
@@ -141,7 +146,17 @@
   }
 
   .sidenav-toggle {
-    display: none;
+    // The sidenav toggle's default state is "hidden". Because modifying the `display` property
+    // isn't ideal for smooth transitions, combine opacity 0 (transparent) and position absolute
+    // to yield a similar result.
+    position: absolute;
+    display: inline-block;
+    opacity: 0;
+    // The transition itself is largely irrelevant, but CSS needs *something* to transition in
+    // order to apply a delay.
+    transition: opacity 10ms ease-in-out;
+    // Offset the transition delay so the icon isn't visible during the logo transition.
+    transition-delay: 0.1s;
   }
 
   .sidenav-collapse {
@@ -350,13 +365,21 @@
   .sidenav-brand {
     position: absolute;
     opacity: 0;
-    transform: translateX(-150%);
   }
 
   .sidenav-brand-icon {
     opacity: 1;
   }
 
+  .sidenav-toggle {
+    // Immediately hide the toggle when the sidenav is closed, so it doesn't linger and overlap
+    // with the logo elements.
+    opacity: 0;
+    position: absolute;
+    transition: unset;
+    transition-delay: 0ms;
+  }
+
   .navbar-nav > .nav-item {
     > .nav-link {
       &:after {
@@ -402,7 +425,8 @@
 
   @include media-breakpoint-up(lg) {
     .sidenav-toggle {
-      display: inline-block;
+      position: relative;
+      opacity: 1;
     }
   }
 }

netbox/project-static/styles/theme-dark.scss

@@ -74,6 +74,7 @@ $btn-link-disabled-color: $gray-300;
 
 // Forms
 $component-active-bg: $primary;
+$component-active-color: $black;
 $form-text-color: $text-muted;
 $input-bg: $gray-900;
 $input-disabled-bg: $gray-700;