NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-08-02 05:46:25 -06:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Display device names in front of device front/rear images

Browse Source 
Fixes #6879
This commit is contained in:
Brian Candler 2021-08-04 10:38:30 +01:00
parent 76df55dfc0
commit 1aa1dce243
4 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
netbox/dcim/elevations.py
View File

@ -89,10 +89,9 @@ class RackElevationSVG:
) )
link.set_desc(self._get_device_description(device)) link.set_desc(self._get_device_description(device))
link.add(drawing.rect(start, end, style='fill: #{}'.format(color), class_='slot')) link.add(drawing.rect(start, end, style='fill: #{}'.format(color), class_='slot'))
hex_color = '#{}'.format(foreground_color(color))
link.add(drawing.text(str(name), insert=text, fill=hex_color))
# Embed front device type image if one exists # Embed front device type image if one exists
text_color = '#{}'.format(foreground_color(color))
if self.include_images and device.device_type.front_image: if self.include_images and device.device_type.front_image:
image = drawing.image( image = drawing.image(
href=device.device_type.front_image.url, href=device.device_type.front_image.url,
@ -103,11 +102,14 @@ class RackElevationSVG:
image.fit(scale='slice') image.fit(scale='slice')
link.add(image) link.add(image)
link.add(drawing.text(str(name), insert=text, stroke='#{}'.format(color),
stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
link.add(drawing.text(str(name), insert=text, fill=text_color, class_='device-label'))
def _draw_device_rear(self, drawing, device, start, end, text): def _draw_device_rear(self, drawing, device, start, end, text):
rect = drawing.rect(start, end, class_="slot blocked") rect = drawing.rect(start, end, class_="slot blocked")
rect.set_desc(self._get_device_description(device)) rect.set_desc(self._get_device_description(device))
drawing.add(rect) drawing.add(rect)
drawing.add(drawing.text(str(device), insert=text))
# Embed rear device type image if one exists # Embed rear device type image if one exists
if self.include_images and device.device_type.rear_image: if self.include_images and device.device_type.rear_image:
@ -120,6 +122,10 @@ class RackElevationSVG:
image.fit(scale='slice') image.fit(scale='slice')
drawing.add(image) drawing.add(image)
drawing.add(drawing.text(str(device), insert=text, stroke='white',
stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
drawing.add(drawing.text(str(device), insert=text, class_='device-label'))
@staticmethod @staticmethod
def _draw_empty(drawing, rack, start, end, text, id_, face_id, class_, reservation): def _draw_empty(drawing, rack, start, end, text, id_, face_id, class_, reservation):
link = drawing.add( link = drawing.add(

13
netbox/project-static/js/rack_elevations.js
View File

@ -11,3 +11,16 @@ $('button.toggle-images').click(function() {
$(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline'); $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
return false; return false;
}); });
// Toggle the display of device labels within an SVG rack elevation
$('button.toggle-labels').click(function() {
var selected = $(this).attr('selected');
var rack_elevation = $(".rack_elevation");
if (selected) {
$('.device-label', rack_elevation.contents()).addClass('hidden');
} else {
$('.device-label', rack_elevation.contents()).removeClass('hidden');
}
$(this).attr('selected', !selected);
$(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
return false;
});

3
netbox/templates/dcim/rack.html
View File

@ -40,6 +40,9 @@
<button class="btn btn-sm btn-default toggle-images" selected="selected"> <button class="btn btn-sm btn-default toggle-images" selected="selected">
<span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
</button> </button>
<button class="btn btn-sm btn-default toggle-labels" selected="selected">
<span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
</button>
{{ block.super }} {{ block.super }}
{% endblock %} {% endblock %}

3
netbox/templates/dcim/rack_elevation_list.html
View File

@ -7,6 +7,9 @@
<button class="btn btn-default toggle-images" selected="selected"> <button class="btn btn-default toggle-images" selected="selected">
<span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images <span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
</button> </button>
<button class="btn btn-default toggle-labels" selected="selected">
<span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
</button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-default{% if rack_face == 'front' %} active{% endif %}">Front</a> <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-default{% if rack_face == 'front' %} active{% endif %}">Front</a>
<a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-default{% if rack_face == 'rear' %} active{% endif %}">Rear</a> <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-default{% if rack_face == 'rear' %} active{% endif %}">Rear</a>