Merge pull request #4144 from netbox-community/3986-rack_positions_svg

Fixes: #3986 - Convert rack units to part of SVG rendered document

netbox/dcim/constants.py

@@ -9,6 +9,8 @@ from .choices import InterfaceTypeChoices
 
 RACK_U_HEIGHT_DEFAULT = 42
 
+RACK_ELEVATION_LEGEND_WIDTH_DEFAULT = 30
+
 RACK_ELEVATION_UNIT_WIDTH_DEFAULT = 230
 RACK_ELEVATION_UNIT_HEIGHT_DEFAULT = 20
 

netbox/dcim/models/__init__.py

@@ -433,11 +433,19 @@ class RackElevationHelperMixin:
         link.add(drawing.rect(start, end, class_=class_))
         link.add(drawing.text("add device", insert=text, class_='add-device'))
 
-    def _draw_elevations(self, elevation, reserved_units, face, unit_width, unit_height):
+    def _draw_elevations(self, elevation, reserved_units, face, unit_width, unit_height, legend_width):
 
-        drawing = self._setup_drawing(unit_width, unit_height * self.u_height)
+        drawing = self._setup_drawing(unit_width + legend_width, unit_height * self.u_height)
 
         unit_cursor = 0
+        for ru in range(0, self.u_height):
+            start_y = ru * unit_height
+            position_coordinates = (legend_width / 2, start_y + unit_height / 2 + 2)
+            unit = ru + 1 if self.desc_units else self.u_height - ru
+            drawing.add(
+                drawing.text(str(unit), position_coordinates, class_="unit")
+            )
+
         for unit in elevation:
 
             # Loop through all units in the elevation
@@ -447,9 +455,9 @@ class RackElevationHelperMixin:
             # Setup drawing coordinates
             start_y = unit_cursor * unit_height
             end_y = unit_height * height
-            start_cordinates = (0, start_y)
+            start_cordinates = (legend_width, start_y)
-            end_cordinates = (unit_width, end_y)
+            end_cordinates = (legend_width + unit_width, end_y)
-            text_cordinates = (unit_width / 2, start_y + end_y / 2)
+            text_cordinates = (legend_width + (unit_width / 2), start_y + end_y / 2)
 
             # Draw the device
             if device and device.face == face:
@@ -471,7 +479,7 @@ class RackElevationHelperMixin:
             unit_cursor += height
 
         # Wrap the drawing with a border
-        drawing.add(drawing.rect((0, 0), (unit_width, self.u_height * unit_height), class_='rack'))
+        drawing.add(drawing.rect((legend_width, 0), (unit_width, self.u_height * unit_height), class_='rack'))
 
         return drawing
 
@@ -494,7 +502,8 @@ class RackElevationHelperMixin:
             self,
             face=DeviceFaceChoices.FACE_FRONT,
             unit_width=RACK_ELEVATION_UNIT_WIDTH_DEFAULT,
-            unit_height=RACK_ELEVATION_UNIT_HEIGHT_DEFAULT
+            unit_height=RACK_ELEVATION_UNIT_HEIGHT_DEFAULT,
+            legend_width=RACK_ELEVATION_LEGEND_WIDTH_DEFAULT
     ):
         """
         Return an SVG of the rack elevation
@@ -507,7 +516,7 @@ class RackElevationHelperMixin:
         elevation = self.merge_elevations(face)
         reserved_units = self.get_reserved_units()
 
-        return self._draw_elevations(elevation, reserved_units, face, unit_width, unit_height)
+        return self._draw_elevations(elevation, reserved_units, face, unit_width, unit_height, legend_width)
 
 
 class Rack(ChangeLoggedModel, CustomFieldModel, RackElevationHelperMixin):

netbox/project-static/css/rack_elevation.css

@@ -56,3 +56,12 @@ text {
 .blocked:hover+.add-device {
     fill: none;
 }
+
+.unit {
+    margin: 0;
+    padding: 5px 0px;
+
+    fill: #c0c0c0;
+    font-size: 10px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}

netbox/templates/dcim/inc/rack_elevation.html

@@ -1,11 +1,5 @@
 {% load helpers %}
 
-<ul class="rack_legend">
-    {% for u in rack.units %}
-        <li>{{ u }}</li>
-    {% endfor %}
-</ul>
-
 <div class="rack_frame">
 
   <object data="{% url 'dcim-api:rack-elevation' pk=rack.pk %}?face={{face}}&render=svg"></object>