Merge 745a815d27 into 85db007ff5

Fixes #14241, Fixes #13922: Update the CableRender

docs/administration/netbox-shell.md

@@ -1,6 +1,6 @@
 # The NetBox Python Shell
 
-NetBox includes a Python management shell within which objects can be directly queried, created, modified, and deleted. To enter the shell, run the following command:
+NetBox includes a Python management shell within which objects can be directly queried, created, modified, and deleted. To enter the shell, run the following command from a shell that has the netbox virtualenv activated:
 
 ```
 ./manage.py nbshell
@@ -143,6 +143,40 @@ To return the inverse of a filtered queryset, use `exclude()` instead of `filter
 346
 ```
 
+If the query returns only one object, the get() method can be used. This method will yield the actual object resulting from the query, instead of a QuerySet. For this to work, the query must return only one object. The syntax is identical to the filter and exclude methods. For example, we can get a device from it's asset tag:
+
+```
+>>>
+>>> Device.objects.get(asset_tag="100079912515")
+<Device: AP994003 (100079912515)>
+>>>
+```
+
+If the query returns more than one object, a MultipleObjectsReturned exception will be thrown:
+
+```
+>>> Device.objects.get(role_id=13)
+Traceback (most recent call last):
+  File "<console>", line 1, in <module>
+  File "/srv/netbox/venv/lib/python3.10/site-packages/django/db/models/manager.py", line 87, in manager_method
+    return getattr(self.get_queryset(), name)(*args, **kwargs)
+  File "/srv/netbox/venv/lib/python3.10/site-packages/django/db/models/query.py", line 640, in get
+    raise self.model.MultipleObjectsReturned(
+dcim.models.devices.Device.MultipleObjectsReturned: get() returned more than one Device -- it returned more than 20!
+>>>
+```
+
+Queries can all also be executed from a particular object instead of from the model itself. For instance, to get all circuits that are assigned to one site, it is easier to filter from the site itself, instead of using the "Circuit" model and building the query from there. This is particularly useful for configuration templates and export templates, since it allows to query other database objects that are related to the object that we're rendering the template for.
+
+```
+>>> site.circuit_terminations.all()
+<RestrictedQuerySet [<CircuitTermination: 20899518: Termination A>, <CircuitTermination: DT00018356: Termination A>]>
+>>>
+```
+
+The same methods (all, filter, exclude, get...) can be used in this kind of queries.
+
+
 !!! info
     The examples above are intended only to provide a cursory introduction to queryset filtering. For an exhaustive list of the available filters, please consult the [Django queryset API documentation](https://docs.djangoproject.com/en/stable/ref/models/querysets/).
 

docs/customization/custom-scripts.md

@@ -56,6 +56,15 @@ class AnotherCustomScript(Script):
 script_order = (MyCustomScript, AnotherCustomScript)
 ```
 
+### The run() method
+
+The run() method is the entrypoint for the script, and it runs in the context of Netbox's own execution environment. This means from here, everything inside Netbox itself is accesible. The [Netbox Shell](../administration/netbox-shell.md) is a good resource to keep in hand, since it allows to see the objects in Netbox in the same way the run() method of the script does.
+
+The run() method can itself call other methods that are in the same module but outside the "MyCustomScript" class, and if there are several scripts in the same module (this is, in the same Python file), both scripts can reuse the same auxiliary methods, keeping the code cleaner. For this reason, it is encouraged to keep similar scripts in the same module.
+
+The run() method can return a string, and this will be displayed in a text box in the web interface after the script finishes. This is useful, for instance, for returning a piece of configuration or information that you want the user to be able to easily copy and paste somewhere else.
+
+
 ## Module Attributes
 
 ### `name`

docs/customization/export-templates.md

@@ -32,6 +32,8 @@ If you need to use the config context data in an export template, you'll should
 {% endfor %}
 ```
 
+To see all the attributes of a given object, you can use the [Netbox Shell](../administration/netbox-shell.md). It supports autocompletion and allows one to see all of the methods and attributes a given object type has. All of them can be called from within a Jinja template. Using queries from one object to another, one can navigate pretty much the entire Netbox object model. For instance, from an export template for sites, one can get the devices that are in that site, the circuits that are connected to those devices, the providers that serve those circuits... etc, so an export template is not limited to just the model that it's being called from. In fact, the same result can be achieved in different ways, depending on which model you start from.
+
 The `as_attachment` attribute of an export template controls its behavior when rendered. If true, the rendered content will be returned to the user as a downloadable file. If false, it will be displayed within the browser. (This may be handy e.g. for generating HTML content.)
 
 A MIME type and file extension can optionally be defined for each export template. The default MIME type is `text/plain`.

docs/customization/reports.md

@@ -29,7 +29,9 @@ class DeviceIPsReport(Report):
     description = "Check that every device has a primary IP address assigned"
 ```
 
-Within each report class, we'll create a number of test methods to execute our report's logic. In DeviceConnectionsReport, for instance, we want to ensure that every live device has a console connection, an out-of-band management connection, and two power connections.
+Within each report class, we'll create a number of test methods to execute our report's logic. The method's name must start with "test_" and it takes no arguments.
+
+In DeviceConnectionsReport, for instance, we want to ensure that every live device has a console connection, an out-of-band management connection, and two power connections.
 
 ```
 from dcim.choices import DeviceStatusChoices
@@ -82,6 +84,8 @@ class DeviceConnectionsReport(Report):
 
 As you can see, reports are completely customizable. Validation logic can be as simple or as complex as needed. Also note that the `description` attribute support markdown syntax. It will be rendered in the report list page.
 
+In the same way scripts do, reports run from within Netbox's own environment and can access the objects inside Netbox directly. The [Netbox Shell](../administration/netbox-shell.md) is a good resource to keep in hand, since it allows to see the objects in Netbox in the same way the test methods of a report do.
+
 !!! warning
     Reports should never alter data: If you find yourself using the `create()`, `save()`, `update()`, or `delete()` methods on objects within reports, stop and re-evaluate what you're trying to accomplish. Note that there are no safeguards against the accidental alteration or destruction of data.
 

docs/features/configuration-rendering.md

@@ -35,6 +35,8 @@ Configuration templates are written in the [Jinja2 templating language](https://
 {% endblock %}
 ```
 
+To see all the attributes of a given object, you can use the [Netbox Shell](../administration/netbox-shell.md). It supports autocompletion and allows one to see all of the methods and attributes a given object type has. All of them can be called from within the configuration template. Also, other objects, for instance, a device's interfaces or connected circuits can be accessed from the template itself, so the rendered configuration may include information not only about the device itself, but also related objects like IP addresses or circuits.
+
 When rendered for a specific NetBox device, the template's `device` variable will be populated with the device instance, and `ntp_servers` will be pulled from the device's available context data. The resulting output will be a valid configuration segment that can be applied directly to a compatible network device.
 
 ### Context Data

docs/release-notes/version-3.7.md

@@ -2,6 +2,13 @@
 
 ## v3.7.7 (FUTURE)
 
+### Bug Fixes
+
+* [#13712](https://github.com/netbox-community/netbox/issues/13712) - Fix row highlighting for device interface list display
+* [#13806](https://github.com/netbox-community/netbox/issues/13806) - Fix "mark" button tooltip on button activation for device interface list display
+* [#13922](https://github.com/netbox-community/netbox/issues/13922) - Fix SVG drawing error on multiple termination trace with multiple devices
+* [#14241](https://github.com/netbox-community/netbox/issues/14241) - Fix random interface swap when performing cable trace with multiple termination
+
 ---
 
 ## v3.7.6 (2024-04-22)

netbox/dcim/svg/cables.py

@@ -8,17 +8,16 @@ from django.conf import settings
 from dcim.constants import CABLE_TRACE_SVG_DEFAULT_WIDTH
 from utilities.utils import foreground_color
 
-
 __all__ = (
     'CableTraceSVG',
 )
 
-
 OFFSET = 0.5
 PADDING = 10
 LINE_HEIGHT = 20
 FANOUT_HEIGHT = 35
 FANOUT_LEG_HEIGHT = 15
+CABLE_HEIGHT = 4 * LINE_HEIGHT + FANOUT_HEIGHT + FANOUT_LEG_HEIGHT
 
 
 class Node(Hyperlink):
@@ -84,31 +83,38 @@ class Connector(Group):
         labels: Iterable of text labels
     """
 
-    def __init__(self, start, url, color, labels=[], description=[], **extra):
-        super().__init__(class_='connector', **extra)
+    def __init__(self, start, url, color, wireless, labels=[], description=[], end=None, text_offset=0, **extra):
+        super().__init__(class_="connector", **extra)
 
         self.start = start
         self.height = PADDING * 2 + LINE_HEIGHT * len(labels) + PADDING * 2
-        self.end = (start[0], start[1] + self.height)
+        # Allow to specify end-position or auto-calculate
+        self.end = end if end else (start[0], start[1] + self.height)
         self.color = color or '000000'
 
-        # Draw a "shadow" line to give the cable a border
-        cable_shadow = Line(start=self.start, end=self.end, class_='cable-shadow')
-        self.add(cable_shadow)
+        if wireless:
+            # Draw the cable
+            cable = Line(start=self.start, end=self.end, class_="wireless-link")
+            self.add(cable)
+        else:
+            # Draw a "shadow" line to give the cable a border
+            cable_shadow = Line(start=self.start, end=self.end, class_='cable-shadow')
+            self.add(cable_shadow)
 
-        # Draw the cable
-        cable = Line(start=self.start, end=self.end, style=f'stroke: #{self.color}')
-        self.add(cable)
+            # Draw the cable
+            cable = Line(start=self.start, end=self.end, style=f'stroke: #{self.color}')
+            self.add(cable)
 
         # Add link
         link = Hyperlink(href=url, target='_parent')
 
         # Add text label(s)
-        cursor = start[1]
-        cursor += PADDING * 2
+        cursor = start[1] + text_offset
+        cursor += PADDING * 2 + LINE_HEIGHT * 2
+        x_coord = (start[0] + end[0]) / 2 + PADDING
         for i, label in enumerate(labels):
             cursor += LINE_HEIGHT
-            text_coords = (start[0] + PADDING * 2, cursor - LINE_HEIGHT / 2)
+            text_coords = (x_coord, cursor - LINE_HEIGHT / 2)
             text = Text(label, insert=text_coords, class_='bold' if not i else [])
             link.add(text)
         if len(description) > 0:
@@ -190,8 +196,9 @@ class CableTraceSVG:
 
     def draw_parent_objects(self, obj_list):
         """
-        Draw a set of parent objects.
+        Draw a set of parent objects (eg hosts, switched, patchpanels) and return all created nodes
         """
+        objects = []
         width = self.width / len(obj_list)
         for i, obj in enumerate(obj_list):
             node = Node(
@@ -199,23 +206,26 @@ class CableTraceSVG:
                 width=width,
                 url=f'{self.base_url}{obj.get_absolute_url()}',
                 color=self._get_color(obj),
-                labels=self._get_labels(obj)
+                labels=self._get_labels(obj),
+                object=obj
             )
+            objects.append(node)
             self.parent_objects.append(node)
             if i + 1 == len(obj_list):
                 self.cursor += node.box['height']
+        return objects
 
-    def draw_terminations(self, terminations):
+    def draw_object_terminations(self, terminations, offset_x, width):
         """
-        Draw a row of terminating objects (e.g. interfaces), all of which are attached to the same end of a cable.
+        Draw all terminations belonging to an object with specified offset and width
+        Return all created nodes and their maximum height
         """
-        nodes = []
         nodes_height = 0
-        width = self.width / len(terminations)
-
-        for i, term in enumerate(terminations):
+        nodes = []
+        # Sort them by name to make renders more readable
+        for i, term in enumerate(sorted(terminations, key=lambda x: x.name)):
             node = Node(
-                position=(i * width, self.cursor),
+                position=(offset_x + i * width, self.cursor),
                 width=width,
                 url=f'{self.base_url}{term.get_absolute_url()}',
                 color=self._get_color(term),
@@ -225,133 +235,89 @@ class CableTraceSVG:
             )
             nodes_height = max(nodes_height, node.box['height'])
             nodes.append(node)
+        return nodes, nodes_height
+
+    def draw_terminations(self, terminations, parent_object_nodes):
+        """
+        Draw a row of terminating objects (e.g. interfaces) and return all created nodes
+        Attach them to previously created parent objects
+        """
+        nodes = []
+        nodes_height = 0
+
+        # Draw terminations for each parent object
+        for parent in parent_object_nodes:
+            parent_terms = [term for term in terminations if term.parent_object == parent.object]
+
+            # Width and offset(position) for each termination box
+            width = parent.box['width'] / len(parent_terms)
+            offset_x = parent.box['x']
+
+            result, nodes_height = self.draw_object_terminations(parent_terms, offset_x, width)
+            nodes.extend(result)
 
         self.cursor += nodes_height
         self.terminations.extend(nodes)
 
         return nodes
 
-    def draw_fanin(self, node, connector):
-        points = (
-            node.bottom_center,
-            (node.bottom_center[0], node.bottom_center[1] + FANOUT_LEG_HEIGHT),
-            connector.start,
-        )
-        self.connectors.extend((
-            Polyline(points=points, class_='cable-shadow'),
-            Polyline(points=points, style=f'stroke: #{connector.color}'),
-        ))
-
-    def draw_fanout(self, node, connector):
-        points = (
-            connector.end,
-            (node.top_center[0], node.top_center[1] - FANOUT_LEG_HEIGHT),
-            node.top_center,
-        )
-        self.connectors.extend((
-            Polyline(points=points, class_='cable-shadow'),
-            Polyline(points=points, style=f'stroke: #{connector.color}'),
-        ))
-
-    def draw_cable(self, cable, terminations, cable_count=0):
+    def draw_far_objects(self, obj_list, terminations):
         """
-        Draw a single cable.  Terminations and cable count are passed for determining position and padding
-
-        :param cable: The cable to draw
-        :param terminations: List of terminations to build positioning data off of
-        :param cable_count: Count of all cables on this layer for determining whether to collapse description into a
-                            tooltip.
+        Draw the far-end objects and its terminations and return all created nodes
         """
+        # Make sure elements are sorted by name for readability
+        objects = sorted(obj_list, key=lambda x: x.name)
+        width = self.width / len(objects)
 
-        # If the cable count is higher than 2, collapse the description into a tooltip
-        if cable_count > 2:
-            # Use the cable __str__ function to denote the cable
-            labels = [f'{cable}']
+        # Max-height of created terminations
+        terms_height = 0
+        term_nodes = []
 
-            # Include the label and the status description in the tooltip
-            description = [
-                f'Cable {cable}',
-                cable.get_status_display()
-            ]
+        # Draw the terminations by per object first
+        for i, obj in enumerate(objects):
+            obj_terms = [term for term in terminations if term.parent_object == obj]
+            obj_pos = i * width
+            result, result_nodes_height = self.draw_object_terminations(obj_terms, obj_pos, width / len(obj_terms))
 
-            if cable.type:
-                # Include the cable type in the tooltip
-                description.append(cable.get_type_display())
-            if cable.length is not None and cable.length_unit:
-                # Include the cable length in the tooltip
-                description.append(f'{cable.length} {cable.get_length_unit_display()}')
-        else:
-            labels = [
-                f'Cable {cable}',
-                cable.get_status_display()
-            ]
-            description = []
-            if cable.type:
-                labels.append(cable.get_type_display())
-            if cable.length is not None and cable.length_unit:
-                # Include the cable length in the tooltip
-                labels.append(f'{cable.length} {cable.get_length_unit_display()}')
+            terms_height = max(terms_height, result_nodes_height)
+            term_nodes.extend(result)
 
-        # If there is only one termination, center on that termination
-        # Otherwise average the center across the terminations
-        if len(terminations) == 1:
-            center = terminations[0].bottom_center[0]
-        else:
-            # Get a list of termination centers
-            termination_centers = [term.bottom_center[0] for term in terminations]
-            # Average the centers
-            center = sum(termination_centers) / len(termination_centers)
+        # Update cursor and draw the objects
+        self.cursor += terms_height
+        self.terminations.extend(term_nodes)
+        object_nodes = self.draw_parent_objects(objects)
 
-        # Create the connector
-        connector = Connector(
-            start=(center, self.cursor),
-            color=cable.color or '000000',
-            url=f'{self.base_url}{cable.get_absolute_url()}',
-            labels=labels,
-            description=description
-        )
+        return object_nodes, term_nodes
 
-        # Set the cursor position
-        self.cursor += connector.height
-
-        return connector
-
-    def draw_wirelesslink(self, wirelesslink):
+    def draw_fanin(self, target, terminations, color):
         """
-        Draw a line with labels representing a WirelessLink.
+        Draw the fan-in-lines from each of the terminations to the targetpoint
         """
-        group = Group(class_='connector')
+        for term in terminations:
+            points = (
+                term.bottom_center,
+                (term.bottom_center[0], term.bottom_center[1] + FANOUT_LEG_HEIGHT),
+                target,
+            )
+            self.connectors.extend((
+                Polyline(points=points, class_='cable-shadow'),
+                Polyline(points=points, style=f'stroke: #{color}'),
+            ))
 
-        labels = [
-            f'Wireless link {wirelesslink}',
-            wirelesslink.get_status_display()
-        ]
-        if wirelesslink.ssid:
-            labels.append(wirelesslink.ssid)
-
-        # Draw the wireless link
-        start = (OFFSET + self.center, self.cursor)
-        height = PADDING * 2 + LINE_HEIGHT * len(labels) + PADDING * 2
-        end = (start[0], start[1] + height)
-        line = Line(start=start, end=end, class_='wireless-link')
-        group.add(line)
-
-        self.cursor += PADDING * 2
-
-        # Add link
-        link = Hyperlink(href=f'{self.base_url}{wirelesslink.get_absolute_url()}', target='_parent')
-
-        # Add text label(s)
-        for i, label in enumerate(labels):
-            self.cursor += LINE_HEIGHT
-            text_coords = (self.center + PADDING * 2, self.cursor - LINE_HEIGHT / 2)
-            text = Text(label, insert=text_coords, class_='bold' if not i else [])
-            link.add(text)
-
-        group.add(link)
-        self.cursor += PADDING * 2
-
-        return group
+    def draw_fanout(self, start, terminations, color):
+        """
+        Draw the fan-out-lines from the startpoint to each of the terminations
+        """
+        for term in terminations:
+            points = (
+                term.top_center,
+                (term.top_center[0], term.top_center[1] - FANOUT_LEG_HEIGHT),
+                start,
+            )
+            self.connectors.extend((
+                Polyline(points=points, class_='cable-shadow'),
+                Polyline(points=points, style=f'stroke: #{color}'),
+            ))
 
     def draw_attachment(self):
         """
@@ -378,86 +344,99 @@ class CableTraceSVG:
 
         traced_path = self.origin.trace()
 
+        parent_object_nodes = []
         # Iterate through each (terms, cable, terms) segment in the path
         for i, segment in enumerate(traced_path):
             near_ends, links, far_ends = segment
 
-            # Near end parent
+            # This is segment number one.
             if i == 0:
                 # If this is the first segment, draw the originating termination's parent object
-                self.draw_parent_objects(set(end.parent_object for end in near_ends))
+                parent_object_nodes = self.draw_parent_objects(set(end.parent_object for end in near_ends))
+            # Else: No need to draw parent objects (parent objects are drawn in last "round" as the far-end!)
 
-            # Near end termination(s)
-            terminations = self.draw_terminations(near_ends)
+            near_terminations = self.draw_terminations(near_ends, parent_object_nodes)
+            self.cursor += CABLE_HEIGHT
 
             # Connector (a Cable or WirelessLink)
             if links:
-                link_cables = {}
-                fanin = False
-                fanout = False
 
-                # Determine if we have fanins or fanouts
-                if len(near_ends) > len(set(links)):
-                    self.cursor += FANOUT_HEIGHT
-                    fanin = True
-                if len(far_ends) > len(set(links)):
-                    fanout = True
-                cursor = self.cursor
-                for link in links:
-                    # Cable
-                    if type(link) is Cable and not link_cables.get(link.pk):
-                        # Reset cursor
-                        self.cursor = cursor
-                        # Generate a list of terminations connected to this cable
-                        near_end_link_terminations = [term for term in terminations if term.object.cable == link]
-                        # Draw the cable
-                        cable = self.draw_cable(link, near_end_link_terminations, cable_count=len(links))
-                        # Add cable to the list of cables
-                        link_cables.update({link.pk: cable})
-                        # Add cable to drawing
-                        self.connectors.append(cable)
+                parent_object_nodes, far_terminations = self.draw_far_objects(set(end.parent_object for end in far_ends), far_ends)
+                for cable in links:
+                    # Fill in labels and description with all available data
+                    description = [
+                        f"Link {cable}",
+                        cable.get_status_display()
+                    ]
+                    near = []
+                    far = []
+                    color = '000000'
+                    if cable.description:
+                        description.append(f"{cable.description}")
+                    if isinstance(cable, Cable):
+                        labels = [f"{cable}"] if len(links) > 2 else [f"Cable {cable}", cable.get_status_display()]
+                        if cable.type:
+                            description.append(cable.get_type_display())
+                        if cable.length and cable.length_unit:
+                            description.append(f"{cable.length} {cable.get_length_unit_display()}")
+                        color = cable.color or '000000'
 
-                        # Draw fan-ins
-                        if len(near_ends) > 1 and fanin:
-                            for term in terminations:
-                                if term.object.cable == link:
-                                    self.draw_fanin(term, cable)
+                        # Collect all connected nodes to this cable
+                        near = [term for term in near_terminations if term.object in cable.a_terminations]
+                        far = [term for term in far_terminations if term.object in cable.b_terminations]
+                        if not (near and far):
+                            # a and b terminations may be swapped
+                            near = [term for term in near_terminations if term.object in cable.b_terminations]
+                            far = [term for term in far_terminations if term.object in cable.a_terminations]
+                    elif isinstance(cable, WirelessLink):
+                        labels = [f"{cable}"] if len(links) > 2 else [f"Wireless {cable}", cable.get_status_display()]
+                        if cable.ssid:
+                            description.append(f"{cable.ssid}")
+                        near = [term for term in near_terminations if term.object == cable.interface_a]
+                        far = [term for term in far_terminations if term.object == cable.interface_b]
+                        if not (near and far):
+                            # a and b terminations may be swapped
+                            near = [term for term in near_terminations if term.object == cable.interface_b]
+                            far = [term for term in far_terminations if term.object == cable.interface_a]
 
-                    # WirelessLink
-                    elif type(link) is WirelessLink:
-                        wirelesslink = self.draw_wirelesslink(link)
-                        self.connectors.append(wirelesslink)
+                    # Select most-probable start and end position
+                    start = near[0].bottom_center
+                    end = far[0].top_center
+                    text_offset = 0
 
-                # Far end termination(s)
-                if len(far_ends) > 1:
-                    if fanout:
-                        self.cursor += FANOUT_HEIGHT
-                        terminations = self.draw_terminations(far_ends)
-                        for term in terminations:
-                            if hasattr(term.object, 'cable') and link_cables.get(term.object.cable.pk):
-                                self.draw_fanout(term, link_cables.get(term.object.cable.pk))
-                    else:
-                        self.draw_terminations(far_ends)
-                elif far_ends:
-                    self.draw_terminations(far_ends)
-                else:
-                    # Link is not connected to anything
-                    break
+                    if len(near) > 1:
+                        # Handle Fan-In - change start position to be directly below start
+                        start = (end[0], start[1] + FANOUT_HEIGHT + FANOUT_LEG_HEIGHT)
+                        self.draw_fanin(start, near, color)
+                        text_offset -= FANOUT_HEIGHT + FANOUT_LEG_HEIGHT
+                    elif len(far) > 1:
+                        # Handle Fan-Out - change end position to be directly above end
+                        end = (start[0], end[1] - FANOUT_HEIGHT - FANOUT_LEG_HEIGHT)
+                        self.draw_fanout(end, far, color)
+                        text_offset -= FANOUT_HEIGHT
 
-                # Far end parent
-                parent_objects = set(end.parent_object for end in far_ends)
-                self.draw_parent_objects(parent_objects)
+                    # Create the connector
+                    connector = Connector(
+                        start=start,
+                        end=end,
+                        color=color,
+                        wireless=isinstance(cable, WirelessLink),
+                        url=f'{self.base_url}{cable.get_absolute_url()}',
+                        text_offset=text_offset,
+                        labels=labels,
+                        description=description
+                    )
+                    self.connectors.append(connector)
 
             # Render a far-end object not connected via a link (e.g. a ProviderNetwork or Site associated with
             # a CircuitTermination)
             elif far_ends:
-
                 # Attachment
                 attachment = self.draw_attachment()
                 self.connectors.append(attachment)
 
                 # Object
-                self.draw_parent_objects(far_ends)
+                parent_object_nodes = self.draw_parent_objects(far_ends)
 
         # Determine drawing size
         self.drawing = svgwrite.Drawing(

netbox/dcim/tables/devices.py

@@ -51,34 +51,6 @@ def get_cabletermination_row_class(record):
     return ''
 
 
-def get_interface_row_class(record):
-    if not record.enabled:
-        return 'danger'
-    elif record.is_virtual:
-        return 'primary'
-    return get_cabletermination_row_class(record)
-
-
-def get_interface_state_attribute(record):
-    """
-    Get interface enabled state as string to attach to <tr/> DOM element.
-    """
-    if record.enabled:
-        return 'enabled'
-    else:
-        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'
-
-
 #
 # Device roles
 #
@@ -706,11 +678,12 @@ class DeviceInterfaceTable(InterfaceTable):
             'cable', 'connection',
         )
         row_attrs = {
-            'class': get_interface_row_class,
             'data-name': lambda record: record.name,
-            'data-enabled': get_interface_state_attribute,
-            'data-type': lambda record: record.type,
-            'data-connected': get_interface_connected_attribute
+            'data-enabled': lambda record: "enabled" if record.enabled else "disabled",
+            'data-virtual': lambda record: "true" if record.is_virtual else "false",
+            'data-mark-connected': lambda record: "true" if record.mark_connected else "false",
+            'data-cable-status': lambda record: record.cable.status if record.cable else "",
+            'data-type': lambda record: record.type
         }
 
 

netbox/project-static/src/buttons/connectionToggle.ts

@@ -7,10 +7,10 @@ import { isTruthy, apiPatch, hasError, getElements } from '../util';
  *
  * @param element Connection Toggle Button Element
  */
-function toggleConnection(element: HTMLButtonElement): void {
+function setConnectionStatus(element: HTMLButtonElement, status: string): void {
+  // Get the button's row to change its data-cable-status attribute
+  const row = element.parentElement?.parentElement as HTMLTableRowElement;
   const url = element.getAttribute('data-url');
-  const connected = element.classList.contains('connected');
-  const status = connected ? 'planned' : 'connected';
 
   if (isTruthy(url)) {
     apiPatch(url, { status }).then(res => {
@@ -19,34 +19,18 @@ function toggleConnection(element: HTMLButtonElement): void {
         createToast('danger', 'Error', res.error).show();
         return;
       } else {
-        // Get the button's row to change its styles.
-        const row = element.parentElement?.parentElement as HTMLTableRowElement;
-        // Get the button's icon to change its CSS class.
-        const icon = element.querySelector('i.mdi, span.mdi') as HTMLSpanElement;
-        if (connected) {
-          row.classList.remove('success');
-          row.classList.add('info');
-          element.classList.remove('connected', 'btn-warning');
-          element.classList.add('btn-info');
-          element.title = 'Mark Installed';
-          icon.classList.remove('mdi-lan-disconnect');
-          icon.classList.add('mdi-lan-connect');
-        } else {
-          row.classList.remove('info');
-          row.classList.add('success');
-          element.classList.remove('btn-success');
-          element.classList.add('connected', 'btn-warning');
-          element.title = 'Mark Installed';
-          icon.classList.remove('mdi-lan-connect');
-          icon.classList.add('mdi-lan-disconnect');
-        }
+        // Update cable status in DOM
+        row.setAttribute('data-cable-status', status);
       }
     });
   }
 }
 
 export function initConnectionToggle(): void {
-  for (const element of getElements<HTMLButtonElement>('button.cable-toggle')) {
-    element.addEventListener('click', () => toggleConnection(element));
+  for (const element of getElements<HTMLButtonElement>('button.mark-planned')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'planned'));
+  }
+  for (const element of getElements<HTMLButtonElement>('button.mark-installed')) {
+    element.addEventListener('click', () => setConnectionStatus(element, 'connected'));
   }
 }

netbox/project-static/styles/netbox.scss

@@ -1075,4 +1075,41 @@ html {
       display: none;
     }
   }
-}
+  
+  // Apply row colours to interface lists
+  &[data-netbox-url-name='device_interfaces'] {
+    tr[data-cable-status=connected] {
+      background-color: rgba(map.get($theme-colors, "green"), 0.15);
+    }
+  
+    tr[data-cable-status=planned] {
+      background-color: rgba(map.get($theme-colors, "blue"), 0.15);
+    }
+  
+    tr[data-cable-status=decommissioning] {
+      background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
+    }
+  
+    tr[data-mark-connected=true] {
+      background-color: rgba(map.get($theme-colors, "success"), 0.15);
+    }
+  
+    tr[data-virtual=true] {
+      background-color: rgba(map.get($theme-colors, "primary"), 0.15);
+    }
+  
+    tr[data-enabled=disabled] {
+      background-color: rgba(map.get($theme-colors, "danger"), 0.15);
+    }
+  
+    // Only show the correct button depending on the cable status
+    tr[data-cable-status=connected] button.mark-installed {
+      display: none;
+    }
+  
+    tr:not([data-cable-status=connected]) button.mark-planned {
+      display: none;
+    }
+  
+  }
+}

netbox/templates/dcim/inc/cable_toggle_buttons.html

@@ -1,12 +1,9 @@
 {% load i18n %}
 {% if perms.dcim.change_cable %}
-    {% if cable.status == 'connected' %}
-        <button type="button" class="btn btn-warning btn-sm cable-toggle connected" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
-            <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
-        </button>
-    {% else %}
-        <button type="button" class="btn btn-info btn-sm cable-toggle" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
-            <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
-        </button>
-    {% endif %}
+    <button type="button" class="btn btn-warning btn-sm mark-planned" title="{% trans "Mark Planned" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
+    <i class="mdi mdi-lan-disconnect" aria-hidden="true"></i>
+    </button>
+    <button type="button" class="btn btn-info btn-sm mark-installed" title="{% trans "Mark Installed" %}" data-url="{% url 'dcim-api:cable-detail' pk=cable.pk %}">
+    <i class="mdi mdi-lan-connect" aria-hidden="true"></i>
+    </button>
 {% endif %}