Merge pull request #4233 from netbox-community/4228-rack-elevation-images

Fixes #4228: Fix display of device images in rack elevations

netbox/dcim/constants.py

@@ -9,10 +9,10 @@ from .choices import InterfaceTypeChoices
 
 RACK_U_HEIGHT_DEFAULT = 42
 
+RACK_ELEVATION_BORDER_WIDTH = 2
 RACK_ELEVATION_LEGEND_WIDTH_DEFAULT = 30
-
-RACK_ELEVATION_UNIT_WIDTH_DEFAULT = 230
-RACK_ELEVATION_UNIT_HEIGHT_DEFAULT = 20
+RACK_ELEVATION_UNIT_WIDTH_DEFAULT = 220
+RACK_ELEVATION_UNIT_HEIGHT_DEFAULT = 22
 
 
 #

netbox/dcim/elevations.py

@@ -6,6 +6,7 @@ from django.utils.http import urlencode
 
 from utilities.utils import foreground_color
 from .choices import DeviceFaceChoices
+from .constants import RACK_ELEVATION_BORDER_WIDTH
 
 
 class RackElevationSVG:
@@ -75,7 +76,7 @@ class RackElevationSVG:
         if self.include_images and device.device_type.front_image:
             url = device.device_type.front_image.url
             image = drawing.image(href=url, insert=start, size=end, class_='device-image')
-            image.stretch()
+            image.fit(scale='slice')
             link.add(image)
 
     def _draw_device_rear(self, drawing, device, start, end, text):
@@ -91,7 +92,7 @@ class RackElevationSVG:
         if self.include_images and device.device_type.rear_image:
             url = device.device_type.rear_image.url
             image = drawing.image(href=url, insert=start, size=end, class_='device-image')
-            image.stretch()
+            image.fit(scale='slice')
             drawing.add(image)
 
     @staticmethod
@@ -134,13 +135,16 @@ class RackElevationSVG:
         """
         Return an SVG document representing a rack elevation.
         """
-        drawing = self._setup_drawing(unit_width + legend_width, unit_height * self.rack.u_height)
+        drawing = self._setup_drawing(
+            unit_width + legend_width + RACK_ELEVATION_BORDER_WIDTH * 2,
+            unit_height * self.rack.u_height + RACK_ELEVATION_BORDER_WIDTH * 2
+        )
         reserved_units = self.rack.get_reserved_units()
 
         unit_cursor = 0
         for ru in range(0, self.rack.u_height):
             start_y = ru * unit_height
-            position_coordinates = (legend_width / 2, start_y + unit_height / 2 + 2)
+            position_coordinates = (legend_width / 2, start_y + unit_height / 2 + RACK_ELEVATION_BORDER_WIDTH)
             unit = ru + 1 if self.rack.desc_units else self.rack.u_height - ru
             drawing.add(
                 drawing.text(str(unit), position_coordinates, class_="unit")
@@ -153,11 +157,12 @@ class RackElevationSVG:
             height = unit.get('height', 1)
 
             # Setup drawing coordinates
-            start_y = unit_cursor * unit_height
+            x_offset = legend_width + RACK_ELEVATION_BORDER_WIDTH
+            y_offset = unit_cursor * unit_height + RACK_ELEVATION_BORDER_WIDTH
             end_y = unit_height * height
-            start_cordinates = (legend_width, start_y)
-            end_cordinates = (legend_width + unit_width, end_y)
-            text_cordinates = (legend_width + (unit_width / 2), start_y + end_y / 2)
+            start_cordinates = (x_offset, y_offset)
+            end_cordinates = (unit_width, end_y)
+            text_cordinates = (x_offset + (unit_width / 2), y_offset + end_y / 2)
 
             # Draw the device
             if device and device.face == face:
@@ -187,6 +192,13 @@ class RackElevationSVG:
             unit_cursor += height
 
         # Wrap the drawing with a border
-        drawing.add(drawing.rect((legend_width, 1), (unit_width - 1, self.rack.u_height * unit_height - 2), class_='rack'))
+        border_width = RACK_ELEVATION_BORDER_WIDTH
+        border_offset = RACK_ELEVATION_BORDER_WIDTH / 2
+        frame = drawing.rect(
+            insert=(legend_width + border_offset, border_offset),
+            size=(unit_width + border_width, self.rack.u_height * unit_height + border_width),
+            class_='rack'
+        )
+        drawing.add(frame)
 
         return drawing

netbox/project-static/css/base.css

@@ -179,9 +179,9 @@ nav ul.pagination {
 
 /* Racks */
 div.rack_header {
-    margin-left: 30px;
+    margin-left: 32px;
     text-align: center;
-    width: 230px;
+    width: 220px;
 }
 
 /* Devices */

netbox/templates/dcim/inc/rack_elevation.html

@@ -1,4 +1,6 @@
-{% load helpers %}
-<div class="rack_frame">
-  <object data="{% url 'dcim-api:rack-elevation' pk=rack.pk %}?face={{face}}&render=svg" id="rack_{{ face }}"></object>
+<object data="{% url 'dcim-api:rack-elevation' pk=rack.pk %}?face={{face}}&render=svg" id="rack_{{ face }}"></object>
+<div class="text-center text-small">
+    <a href="{% url 'dcim-api:rack-elevation' pk=rack.pk %}?face={{face}}&render=svg" id="rack_{{ face }}">
+        <i class="fa fa-download"></i> Save SVG
+    </a>
 </div>