From 89662124e570325c1993f666d63095915bbe52b2 Mon Sep 17 00:00:00 2001 From: jeremystretch Date: Thu, 15 Jul 2021 13:54:49 -0400 Subject: [PATCH] Clean up SVG image styling --- netbox/dcim/svg.py | 57 ++++++++++-------- netbox/project-static/_cable_trace.scss | 17 +++++- netbox/project-static/dist/cable_trace.css | Bin 301 -> 431 bytes .../project-static/dist/cable_trace.css.map | 2 +- 4 files changed, 47 insertions(+), 29 deletions(-) diff --git a/netbox/dcim/svg.py b/netbox/dcim/svg.py index 0ced41cba..4841e3193 100644 --- a/netbox/dcim/svg.py +++ b/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) diff --git a/netbox/project-static/_cable_trace.scss b/netbox/project-static/_cable_trace.scss index 5516d263c..1c96b39a4 100644 --- a/netbox/project-static/_cable_trace.scss +++ b/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; diff --git a/netbox/project-static/dist/cable_trace.css b/netbox/project-static/dist/cable_trace.css index 77431254c42550c92693d05ba9fccb43105dde6d..1817a79d410a49bde47f878ca66dcc5de58ae930 100644 GIT binary patch delta 146 zcmZ3>w4Ql_3ZuzHRTJBi)QS?lr2L$e>a_g465aCD%=C;BD{}*b+TyZwg`(8tlIpa~ zoE$6VR09ySE-op`&rY>cHZuUiiTR>(ASDWVC8 delta 35 rcmZ3_yq0N#3ZwBvRTGZlvUG)_)Z~)M@{F>Kh7(WPG8#{|XDk2!zeNga diff --git a/netbox/project-static/dist/cable_trace.css.map b/netbox/project-static/dist/cable_trace.css.map index df9bd328e..79ecf1cb6 100644 --- a/netbox/project-static/dist/cable_trace.css.map +++ b/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"]} \ No newline at end of file +{"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"]} \ No newline at end of file