Various fixes (#42)

* Update deviceview.html to correct malformed int.stylename value in style string

Observed: `style="grid-area: 1-1-1; "` (The trailing semicolon and space here are suspicious).
That trailing '; ' is almost certainly the problem, preventing the browser from correctly interpreting the grid-area property.
The template always puts grid-area: `{{ int.stylename }};` (with the semicolon). The background-color part is only added if the cable_colors option is on and the cable has a color specified. If those conditions aren't met, the background-color part is omitted, leaving you with just `style="grid-area: 1-1-1; "` - exactly what was observed.

Explanation of the fix:

1. We remove the semicolon that was immediately after {{ int.stylename }}.
2. We add the semicolon only if the background-color property is actually being added (i.e., inside the {% if ... %} block, right before background-color).
3. This ensures that if background-color isn't added, the style attribute will correctly be style="grid-area: 1-1-1", and if it is added, it will be style="grid-area: 1-1-1; background-color: #xxxxxx".
4. Removed the unnecessary line breaks within the style attribute definition for clarity, which shouldn't affect functionality

* Update utils.py

Stylename interface identifications not working correctly for interfaces like 1/1/1 or 1/1 as the '/'s are not digits so reworked that prefixing logic fo a 'p' to be added to the start of stylenames that start with a digit.

* Revert "Update deviceview.html to correct malformed int.stylename value in st…"

* Revert "Update utils.py"

* 1. Problem: Trailing Semicolon and Space in the style Attribute for Individual Ports.

The HTML generated for individual port links ( tags) often includes a trailing semicolon and space within the style attribute (e.g., style="grid-area: 1-1-1; ") even when it's the only style property. This trailing ; can prevent the browser from correctly applying the grid-area property, causing the port to not be placed in its intended grid cell. This was particularly apparent when the conditional background-color style was not applied.

File(s) Involved: The Django template responsible for rendering the device view, likely netbox_device_view/templates/netbox_device_view/deviceview.html.

Proposed Solution: Modify the template logic to ensure the semicolon is only included in the style attribute if there are multiple style properties being added (e.g., both grid-area and background-color). The fix would involve moving the semicolon inside the conditional block that adds the background-color.

* 2. Problem: Incorrect stylename Generation Logic for Interfaces with Specific Naming Conventions (e.g., X/Y/Z). -Update utils.py

Description: The Python code that generates the stylename (which is then used for the grid-area CSS property) for interfaces uses a regular expression that incorrectly parses certain naming formats, specifically names like 1/1/15. Instead of producing a stylename like 1-1-15 (which matches the likely format used in grid-template-areas), it generates 1-15.

File(s) Involved: The utility function responsible for processing interfaces, netbox_device_view/utils.py (specifically the process_interfaces function).

Proposed Solution: Modify the stylename generation logic within the process_interfaces function to correctly parse common interface naming conventions (like X/Y/Z, EthX/Y, etc.) and reliably produce a stylename format that matches the expected names used in the grid-template-areas CSS (e.g., converting 1/1/15 to 1-1-15). A simpler string manipulation method (like splitting and joining with hyphens) might be more robust than the current regex.

Convert the entire interface name to lowercase.
Replace common separators found in interface names (such as slashes /, dots ., and spaces \s) with a consistent single separator, like a hyphen (-). This can be done using a simple regular expression substitution.
Clean up the resulting string to remove any potential multiple consecutive hyphens or leading/trailing hyphens that might have been introduced.

* 3. Problem: Insufficient Validation of Generated stylename as a Valid CSS Identifier. - Update utils.py

Description: The code checks if the generated stylename isdigit() and prepends a p if it is. However, CSS identifiers cannot start with a digit or a hyphen, not just be entirely digits. This check misses cases like 1-1-15 (starts with a digit but includes hyphens) or names starting with a hyphen, which are also invalid CSS identifiers. If an invalid stylename is generated and not caught, the corresponding grid-area style will be ignored by the browser.

File(s) Involved: The utility functions generating stylenames, primarily netbox_device_view/utils.py (process_interfaces and potentially process_ports).

Proposed Solution: Replace the narrow isdigit() check with a more robust validation that checks if the stylename is empty or if its first character is a digit or a hyphen. If it is, prepend a valid character (like p) to ensure it becomes a valid CSS identifier before being used in the HTML and CSS.

* Update setup.py

Alpha version

* Update setup.py

* Correct formatting errors

* Removed an unecessary comment causing black to fail.

* Correct repo url in setup.py

* Fixes: Fixes all 4 of the problems identified in: #41
And the 2nd of the issues identified in: #39

Author: cmcknz77

netbox_device_view/templates/netbox_device_view/deviceview.html

@@ -60,11 +60,7 @@
 					{% endfor %}
 				{% endif %}
 				"
-				style="grid-area: {{ int.stylename }};
-				{% if cable_colors == "on" and int.cable.color != "" %}
-				background-color: #{{ int.cable.color }}
-				{% endif %}
-				"
+				style="grid-area: {{ int.stylename }}{% if cable_colors == 'on' and int.cable.color != '' %}; background-color: #{{ int.cable.color }}{% endif %}"
 				data-bs-toggle="tooltip"
 				data-bs-html="true"
 				data-bs-custom-class="device-view-tooltip"

netbox_device_view/utils.py

@@ -10,19 +10,27 @@ def process_interfaces(interfaces, ports_chassis, dev):
         for itf in interfaces:
             if itf.type == "virtual" or itf.type == "lag":
                 continue
-            regex = r"^(?P<type>([a-zA-Z\-_]*))(\/|(?P<dev>[0-9]+).|\s)?((?P<module>[0-9]+).|\s)?((?P<port>[0-9]+))$"
-            matches = re.search(regex, itf.name.lower())
-            if matches:
-                itf.stylename = (
-                    (matches["type"] or "")
-                    + (matches["module"] or "")
-                    + "-"
-                    + matches["port"]
-                )
-            else:
-                itf.stylename = re.sub(r"[^.a-zA-Z\d]", "-", itf.name.lower())
-            if itf.stylename.isdigit():
+            # Convert to lowercase and replace common separators with hyphens
+            # This replaces the original regex matching and if/else block
+            stylename = re.sub(r"[/\.\s]+", "-", itf.name.lower())
+
+            # Clean up multiple hyphens and leading/trailing hyphens
+            stylename = re.sub(r"-+", "-", stylename).strip("-")
+
+            # If the name becomes empty after cleaning, use a fallback
+            if not stylename:
+                stylename = f"iface-{itf.pk}"  # Use a unique fallback
+
+            # Assign the generated stylename back to the object property
+            itf.stylename = stylename
+
+            # Check if the stylename exists and starts with a digit or a hyphen
+            # This replaces the original 'if itf.stylename.isdigit():' line
+            if itf.stylename and (
+                itf.stylename[0].isdigit() or itf.stylename[0] == "-"
+            ):
                 itf.stylename = f"p{itf.stylename}"
+
             if dev not in ports_chassis:
                 ports_chassis[dev] = []
             ports_chassis[dev].append(itf)
@@ -55,7 +63,9 @@ def prepare(obj):
                 device_type=obj.device_type
             ).grid_template_area
             modules[1] = obj.modules.all()
-            ports_chassis = process_interfaces(obj.interfaces.all(), ports_chassis, 1)
+            ports_chassis = process_interfaces(
+                obj.interfaces.all(), ports_chassis, obj.name
+            )
             ports_chassis = process_ports(obj.frontports.all(), ports_chassis, "Front")
             ports_chassis = process_ports(obj.rearports.all(), ports_chassis, "Rear")
             ports_chassis = process_ports(

setup.py

@@ -5,7 +5,7 @@
 
 setup(
     name="netbox-device-view",
-    version="0.1.9",
+    version="0.1.10-alpha",
     description="NetBox Device View plugin",
     packages=find_packages(),
     author="Peter Baumert",