Clean up SVG image styling

netbox/dcim/svg.py

@@ -244,7 +244,7 @@ class RackElevationSVG:
 
 OFFSET = 0.5
 PADDING = 10
-LINE_HEIGHT = 15
+LINE_HEIGHT = 20
 
 
 class CableTraceSVG:
@@ -255,9 +255,6 @@ class CableTraceSVG:
     :param width: Width of the generated image (in pixels)
     :param base_url: Base URL for links within the SVG document. If none, links will be relative.
     """
-    PARENT_OBJECT_DEFAULT_COLOR = 'd0d0d0'
-    TERMINATION_DEFAULT_COLOR = 'c0c0c0'
-
     def __init__(self, origin, width=400, base_url=None):
         self.origin = origin
         self.width = width
@@ -277,9 +274,21 @@ class CableTraceSVG:
         Return a list of text labels for the given instance based on model type.
         """
         labels = [str(instance)]
-        if hasattr(instance, 'device_type'):
-            labels.append(str(instance.device_type))
-        elif hasattr(instance, 'provider'):
+        if instance._meta.model_name == 'device':
+            labels.append(f'{instance.device_type.manufacturer} {instance.device_type}')
+            location_label = f'{instance.site}'
+            if instance.location:
+                location_label += f' / {instance.location}'
+            if instance.rack:
+                location_label += f' / {instance.rack}'
+            labels.append(location_label)
+        elif instance._meta.model_name == 'circuit':
+            labels[0] = f'Circuit {instance}'
+            labels.append(instance.provider)
+        elif instance._meta.model_name == 'circuittermination':
+            if instance.xconnect_id:
+                labels.append(f'{instance.xconnect_id}')
+        elif instance._meta.model_name == 'providernetwork':
             labels.append(instance.provider)
 
         return labels
@@ -291,13 +300,13 @@ class CableTraceSVG:
         """
         if hasattr(instance, 'parent_object'):
             # Termination
-            return cls.TERMINATION_DEFAULT_COLOR
+            return 'f0f0f0'
         if hasattr(instance, 'device_role'):
             # Device
             return instance.device_role.color
         else:
             # Other parent object
-            return cls.PARENT_OBJECT_DEFAULT_COLOR
+            return 'e0e0e0'
 
     def _draw_box(self, width, color, url, labels, y_indent=0, padding_multiplier=1, radius=10):
         """
@@ -334,7 +343,7 @@ class CableTraceSVG:
             self.cursor += LINE_HEIGHT
             text_coords = (self.center, self.cursor - LINE_HEIGHT / 2)
             text_color = f'#{foreground_color(color)}'
-            text = Text(label, insert=text_coords, fill=text_color)
+            text = Text(label, insert=text_coords, fill=text_color, class_='bold' if not i else [])
             link.add(text)
 
         self.cursor += PADDING * padding_multiplier
@@ -351,12 +360,17 @@ class CableTraceSVG:
         """
         group = Group(class_='connector')
 
-        # Draw cable (line)
+        # Draw a "shadow" line to give the cable a border
         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, style=f'stroke: #{color}')
-        group.add(line)
+        cable_shadow = Line(start=start, end=end, class_='cable-shadow')
+        group.add(cable_shadow)
+
+        # Draw the cable
+        cable = Line(start=start, end=end, style=f'stroke: #{color}')
+        group.add(cable)
+
         self.cursor += PADDING * 2
 
         # Add link
@@ -366,7 +380,7 @@ class CableTraceSVG:
         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_='cable')
+            text = Text(label, insert=text_coords, class_='bold' if not i else [])
             link.add(text)
 
         group.add(link)
@@ -381,19 +395,12 @@ class CableTraceSVG:
         group = Group(class_='connector')
 
         # Draw attachment (line)
-        start = (OFFSET + self.center, self.cursor)
+        start = (OFFSET + self.center, OFFSET + self.cursor)
         height = PADDING * 2 + LINE_HEIGHT + PADDING * 2
         end = (start[0], start[1] + height)
         line = Line(start=start, end=end, class_='attachment')
         group.add(line)
-        self.cursor += PADDING * 2
-
-        # Add label
-        self.cursor += LINE_HEIGHT
-        text_coords = (self.center + PADDING * 2, self.cursor - LINE_HEIGHT / 2)
-        text = Text('Attachment', insert=text_coords)
-        group.add(text)
-        self.cursor += PADDING * 2
+        self.cursor += PADDING * 4
 
         return group
 
@@ -429,7 +436,7 @@ class CableTraceSVG:
                 width=self.width * .8,
                 color=self._get_color(near_end),
                 url=near_end.get_absolute_url(),
-                labels=[str(near_end)],
+                labels=self._get_labels(near_end),
                 y_indent=PADDING,
                 radius=5
             )
@@ -451,7 +458,7 @@ class CableTraceSVG:
                     width=self.width * .8,
                     color=self._get_color(far_end),
                     url=far_end.get_absolute_url(),
-                    labels=[str(far_end)],
+                    labels=self._get_labels(far_end),
                     radius=5
                 )
                 terminations.append(termination)

netbox/project-static/_cable_trace.scss

@@ -1,17 +1,24 @@
 * {
     font-family: sans-serif;
-    font-size: 13px;
+    font-size: 14px;
 }
 text {
     text-anchor: middle;
     dominant-baseline: middle;
 }
+text.bold {
+  font-weight: bold;
+}
 
 svg {
   /* Boxes */
   rect {
-    stroke: #303030;
+    fill: #e0e0e0;
+    stroke: #606060;
     stroke-width: 1;
+    .termination {
+      fill: #f0f0f0;
+    }
   }
 
   /* Connectors */
@@ -19,7 +26,11 @@ svg {
     text-anchor: start;
   }
   line {
-    stroke-width: 3;
+    stroke-width: 5px;
+  }
+  line.cable-shadow {
+    stroke: #303030;
+    stroke-width: 7px;
   }
   line.attachment {
     stroke: #c0c0c0;

netbox/project-static/dist/cable_trace.css

@@ -1,2 +1,2 @@
-*{font-family:sans-serif;font-size:13px}text{text-anchor:middle;dominant-baseline:middle}svg rect{stroke:#303030;stroke-width:1}svg .connector text{text-anchor:start}svg line{stroke-width:3}svg line.attachment{stroke:silver;stroke-dasharray:5px,5px}
+*{font-family:sans-serif;font-size:14px}text{text-anchor:middle;dominant-baseline:middle}text.bold{font-weight:700}svg rect{fill:#e0e0e0;stroke:#606060;stroke-width:1}svg rect .termination{fill:#f0f0f0}svg .connector text{text-anchor:start}svg line{stroke-width:5px}svg line.cable-shadow{stroke:#303030;stroke-width:7px}svg line.attachment{stroke:silver;stroke-dasharray:5px,5px}
 /*# sourceMappingURL=/static/cable_trace.css.map */

netbox/project-static/dist/cable_trace.css.map

@@ -1 +1 @@
-{"version":3,"sources":["_cable_trace.scss"],"names":[],"mappings":"AAAA,EACI,sBAAA,CACA,eAEJ,KACI,kBAAA,CACA,yBAKF,SACE,cAAA,CACA,eAIF,oBACE,kBAEF,SACE,eAEF,oBACE,aAAA,CACA","file":"cable_trace.css","sourceRoot":"..","sourcesContent":["* {\n    font-family: sans-serif;\n    font-size: 13px;\n}\ntext {\n    text-anchor: middle;\n    dominant-baseline: middle;\n}\n\nsvg {\n  /* Boxes */\n  rect {\n    stroke: #303030;\n    stroke-width: 1;\n  }\n\n  /* Connectors */\n  .connector text {\n    text-anchor: start;\n  }\n  line {\n    stroke-width: 3;\n  }\n  line.attachment {\n    stroke: #c0c0c0;\n    stroke-dasharray: 5px,5px;\n  }\n}\n"]}
+{"version":3,"sources":["_cable_trace.scss"],"names":[],"mappings":"AAAA,EACI,sBAAA,CACA,eAEJ,KACI,kBAAA,CACA,yBAEJ,UACE,gBAKA,SACE,YAAA,CACA,cAAA,CACA,eACA,sBACE,aAKJ,oBACE,kBAEF,SACE,iBAEF,sBACE,cAAA,CACA,iBAEF,oBACE,aAAA,CACA","file":"cable_trace.css","sourceRoot":"..","sourcesContent":["* {\n    font-family: sans-serif;\n    font-size: 14px;\n}\ntext {\n    text-anchor: middle;\n    dominant-baseline: middle;\n}\ntext.bold {\n  font-weight: bold;\n}\n\nsvg {\n  /* Boxes */\n  rect {\n    fill: #e0e0e0;\n    stroke: #606060;\n    stroke-width: 1;\n    .termination {\n      fill: #f0f0f0;\n    }\n  }\n\n  /* Connectors */\n  .connector text {\n    text-anchor: start;\n  }\n  line {\n    stroke-width: 5px;\n  }\n  line.cable-shadow {\n    stroke: #303030;\n    stroke-width: 7px;\n  }\n  line.attachment {\n    stroke: #c0c0c0;\n    stroke-dasharray: 5px,5px;\n  }\n}\n"]}