Add Hide Disconnected Button to Interface Summary, Remove Unused Table Caption - Closes #12732

netbox/dcim/tables/devices.py

@@ -64,9 +64,19 @@ def get_interface_state_attribute(record):
     Get interface enabled state as string to attach to <tr/> DOM element.
     """
     if record.enabled:
-        return "enabled"
+        return 'enabled'
     else:
-        return "disabled"
+        return 'disabled'
+
+
+def get_interface_connected_attribute(record):
+    """
+    Get interface disconnected state as string to attach to <tr/> DOM element.
+    """
+    if record.mark_connected or record.cable:
+        return 'connected'
+    else:
+        return 'disconnected'
 
 
 #
@@ -674,6 +684,7 @@ class Meta(DeviceComponentTable.Meta):
             'data-name': lambda record: record.name,
             'data-enabled': get_interface_state_attribute,
             'data-type': lambda record: record.type,
+            'data-connected': get_interface_connected_attribute
         }
 
 

netbox/project-static/src/tables/interfaceTable.ts

@@ -141,9 +141,10 @@ class TableState {
   private virtualButton: ButtonState;
 
   /**
-   * Underlying DOM Table Caption Element.
+   * Instance of ButtonState for the 'show/hide virtual rows' button.
    */
-  private caption: Nullable<HTMLTableCaptionElement> = null;
+  // @ts-expect-error null handling is performed in the constructor
+  private disconnectedButton: ButtonState;
 
   /**
    * All table rows in table
@@ -166,9 +167,10 @@ class TableState {
         this.table,
         'button.toggle-virtual',
       );
-
-      const caption = this.table.querySelector('caption');
-      this.caption = caption;
+      const toggleDisconnectedButton = findFirstAdjacent<HTMLButtonElement>(
+        this.table,
+        'button.toggle-disconnected',
+      );
 
       if (toggleEnabledButton === null) {
         throw new TableStateError("Table is missing a 'toggle-enabled' button.", table);
@@ -182,10 +184,15 @@ class TableState {
         throw new TableStateError("Table is missing a 'toggle-virtual' button.", table);
       }
 
+      if (toggleDisconnectedButton === null) {
+        throw new TableStateError("Table is missing a 'toggle-disconnected' button.", table);
+      }
+
       // Attach event listeners to the buttons elements.
       toggleEnabledButton.addEventListener('click', event => this.handleClick(event, this));
       toggleDisabledButton.addEventListener('click', event => this.handleClick(event, this));
       toggleVirtualButton.addEventListener('click', event => this.handleClick(event, this));
+      toggleDisconnectedButton.addEventListener('click', event => this.handleClick(event, this));
 
       // Instantiate ButtonState for each button for state management.
       this.enabledButton = new ButtonState(
@@ -200,6 +207,10 @@ class TableState {
         toggleVirtualButton,
         table.querySelectorAll<HTMLTableRowElement>('tr[data-type="virtual"]'),
       );
+      this.disconnectedButton = new ButtonState(
+        toggleDisconnectedButton,
+        table.querySelectorAll<HTMLTableRowElement>('tr[data-connected="disconnected"]'),
+      );
     } catch (err) {
       if (err instanceof TableStateError) {
         // This class is useless for tables that don't have toggle buttons.
@@ -211,52 +222,6 @@ class TableState {
     }
   }
 
-  /**
-   * Get the table caption's text.
-   */
-  private get captionText(): string {
-    if (this.caption !== null) {
-      return this.caption.innerText;
-    }
-    return '';
-  }
-
-  /**
-   * Set the table caption's text.
-   */
-  private set captionText(value: string) {
-    if (this.caption !== null) {
-      this.caption.innerText = value;
-    }
-  }
-
-  /**
-   * Update the table caption's text based on the state of each toggle button.
-   */
-  private toggleCaption(): void {
-    const showEnabled = this.enabledButton.buttonState === 'show';
-    const showDisabled = this.disabledButton.buttonState === 'show';
-    const showVirtual = this.virtualButton.buttonState === 'show';
-
-    if (showEnabled && !showDisabled && !showVirtual) {
-      this.captionText = 'Showing Enabled Interfaces';
-    } else if (showEnabled && showDisabled && !showVirtual) {
-      this.captionText = 'Showing Enabled & Disabled Interfaces';
-    } else if (!showEnabled && showDisabled && !showVirtual) {
-      this.captionText = 'Showing Disabled Interfaces';
-    } else if (!showEnabled && !showDisabled && !showVirtual) {
-      this.captionText = 'Hiding Enabled, Disabled & Virtual Interfaces';
-    } else if (!showEnabled && !showDisabled && showVirtual) {
-      this.captionText = 'Showing Virtual Interfaces';
-    } else if (showEnabled && !showDisabled && showVirtual) {
-      this.captionText = 'Showing Enabled & Virtual Interfaces';
-    } else if (showEnabled && showDisabled && showVirtual) {
-      this.captionText = 'Showing Enabled, Disabled & Virtual Interfaces';
-    } else {
-      this.captionText = '';
-    }
-  }
-
   /**
    * When toggle buttons are clicked, reapply visability all rows and
    * pass the event to all button handlers
@@ -272,7 +237,7 @@ class TableState {
     instance.enabledButton.handleClick(event);
     instance.disabledButton.handleClick(event);
     instance.virtualButton.handleClick(event);
-    instance.toggleCaption();
+    instance.disconnectedButton.handleClick(event);
   }
 }
 

netbox/templates/dcim/device/inc/interface_table_controls.html

@@ -9,5 +9,6 @@
     <button type="button" class="dropdown-item toggle-enabled" data-state="show">{% trans "Hide Enabled" %}</button>
     <button type="button" class="dropdown-item toggle-disabled" data-state="show">{% trans "Hide Disabled" %}</button>
     <button type="button" class="dropdown-item toggle-virtual" data-state="show">{% trans "Hide Virtual" %}</button>
+    <button type="button" class="dropdown-item toggle-disconnected" data-state="show">{% trans "Hide Disconnected" %}</button>
   </ul>
 {% endblock extra_table_controls %}