Improved cable trace UI

netbox/project-static/css/base.css

@@ -227,6 +227,42 @@ table.report th a {
     margin-bottom: 0;
 }
 
+/* Cable tracing */
+.cable-trace {
+    max-width: 600px;
+    text-align: center;
+}
+.cable-trace .node {
+    background-color: #f0f0f0;
+    border: 1px solid #909090;
+    border-radius: 8px;
+    padding: 24px 16px;
+    position: relative;
+    z-index: 1;
+}
+.cable-trace .termination {
+    background-color: #f7f7f7;
+    border: 1px solid #909090;
+    border-radius: 4px;
+    margin: -16px auto;
+    padding: 12px;
+    position: relative;
+    width: 60%;
+    z-index: 2;
+}
+.cable-trace .cable {
+    border-left-style: solid;
+    border-left-width: 4px;
+    margin: 12px 0 12px 50%;
+    padding: 24px;
+    text-align: left;
+    width: 50%;
+}
+.cable-trace .trace-end {
+    margin-top: 48px;
+    text-align: center;
+}
+
 /* Admonition (docs) */
 .admonition {
     margin-bottom: 10px;

netbox/templates/dcim/cable_trace.html

@@ -2,12 +2,12 @@
 {% load helpers %}
 
 {% block header %}
-    <h1>{% block title %}Cable Trace for {{ obj }}{% endblock %}</h1>
+    <h1>{% block title %}Cable Trace for {{ obj|meta:"verbose_name"|bettertitle }} {{ obj }}{% endblock %}</h1>
 {% endblock %}
 
 {% block content %}
     <div class="row">
-        <div class="col-md-5 col-sm-12 text-center">
+        <div class="col-md-5 col-sm-12 cable-trace">
             {% with traced_path=path.origin.trace %}
                 {% for near_end, cable, far_end in traced_path %}
 
@@ -16,7 +16,8 @@
                         {% include 'dcim/trace/device.html' with device=near_end.device %}
                         {% include 'dcim/trace/termination.html' with termination=near_end %}
                     {% elif near_end.power_panel %}
-                        {% include 'dcim/trace/powerfeed.html' with powerfeed=near_end %}
+                        {% include 'dcim/trace/powerpanel.html' with powerpanel=near_end.power_panel %}
+                        {% include 'dcim/trace/termination.html' with termination=far_end%}
                     {% elif near_end.circuit %}
                         {% include 'dcim/trace/circuit.html' with circuit=near_end.circuit %}
                         {% include 'dcim/trace/termination.html' with termination=near_end %}
@@ -27,9 +28,7 @@
 
                     {# Cable #}
                     {% if cable %}
-                        <div class="row">
-                            {% include 'dcim/trace/cable.html' %}
-                        </div>
+                        {% include 'dcim/trace/cable.html' %}
                     {% endif %}
 
                     {# Far end #}
@@ -39,7 +38,8 @@
                             {% include 'dcim/trace/device.html' with device=far_end.device %}
                         {% endif %}
                     {% elif far_end.power_panel %}
-                        {% include 'dcim/trace/powerfeed.html' with powerfeed=far_end %}
+                        {% include 'dcim/trace/termination.html' with termination=far_end %}
+                        {% include 'dcim/trace/powerpanel.html' with powerpanel=far_end.power_panel %}
                     {% elif far_end.circuit %}
                         {% include 'dcim/trace/termination.html' with termination=far_end %}
                         {% if forloop.last %}
@@ -47,15 +47,17 @@
                         {% endif %}
                     {% endif %}
 
-                    {% if forloop.last and far_end %}
-                        <div class="row">
-                            <div class="text-center">
-                                <h3 class="text-success text-center">Trace completed!</h3>
-                                <h5>Total segments: {{ traced_path|length }}</h5>
+                    {% if forloop.last %}
+                        <div class="trace-end">
+                            <h3{% if far_end %} class="text-success"{% endif %}>Trace completed</h3>
+                            <h5>Total segments: {{ traced_path|length }}</h5>
+                            <h5>Total length:
                                 {% if total_length %}
-                                    <h5>Total length: {{ total_length|floatformat:"-2" }} Meters<h5>
+                                    {{ total_length|floatformat:"-2" }} Meters
+                                {% else %}
+                                    <span class="text-muted">N/A</span>
                                 {% endif %}
-                            </div>
+                            <h5>
                         </div>
                     {% endif %}
 

netbox/templates/dcim/trace/cable.html

@@ -1,15 +1,15 @@
-<div class="col-md-6 col-md-offset-3">
-    <h4><i class="mdi mdi-arrow-up-bold"></i></h4>
-    <h4>
+<div class="cable" style="border-left-color: #{{ cable.color|default:'606060' }}; {% if cable.status != 'connected' %} border-left-style: dashed{% endif %}">
+    <strong>
         <a href="{% url 'dcim:cable' pk=cable.pk %}">
             {% if cable.label %}<code>{{ cable.label }}</code>{% else %}Cable #{{ cable.pk }}{% endif %}
         </a>
-    </h4>
-    <p><span class="label label-{{ cable.get_status_class }}">{{ cable.get_status_display }}</span></p>
-    <p>{{ cable.get_type_display|default:"" }}</p>
-    {% if cable.length %}{{ cable.length }} {{ cable.get_length_unit_display }}{% endif %}
-    {% if cable.color %}
-        <span class="label color-block center-block" style="background-color: #{{ cable.color }}">&nbsp;</span>
+    </strong><br />
+    {% if cable.type %}
+        {{ cable.get_type_display|default:"" }}
+        {% if cable.length %}
+            ({{ cable.length }} {{ cable.get_length_unit_display }})
+        {% endif %}
+        <br />
     {% endif %}
-    <h4><i class="mdi mdi-arrow-down-bold"></i></h4>
+    <span class="label label-{{ cable.get_status_class }}">{{ cable.get_status_display }}</span>
 </div>

netbox/templates/dcim/trace/circuit.html

@@ -1,6 +1,5 @@
-<div class="panel panel-warning">
-    <div class="panel-heading">
-        <strong>Circuit <a href="{{ circuit.get_absolute_url }}">{{ circuit }}</a></strong><br />
-        <a href="{{ circuit.provider.get_absolute_url }}">{{ circuit.provider }}</a>
-    </div>
+<div class="node">
+    <strong><a href="{{ circuit.get_absolute_url }}">{{ circuit }}</a></strong><br />
+    Circuit<br />
+    <a href="{{ circuit.provider.get_absolute_url }}">{{ circuit.provider }}</a>
 </div>

netbox/templates/dcim/trace/device.html

@@ -1,9 +1,8 @@
-<div class="panel panel-info">
-    <div class="panel-heading">
-        <strong>Device <a href="{{ device.get_absolute_url }}">{{ device }}</a></strong><br />
-        <a href="{{ device.site.get_absolute_url }}">{{ device.site }}</a>
-        {% if device.rack %}
-            / <a href="{{ device.rack.get_absolute_url }}">{{ device.rack }}</a>
-        {% endif %}
-    </div>
+<div class="node">
+    <strong><a href="{{ device.get_absolute_url }}">{{ device }}</a></strong><br />
+    {{ device.device_type.manufacturer }} {{ device.device_type }}<br />
+    <a href="{{ device.site.get_absolute_url }}">{{ device.site }}</a>
+    {% if device.rack %}
+        / <a href="{{ device.rack.get_absolute_url }}">{{ device.rack }}</a>
+    {% endif %}
 </div>

netbox/templates/dcim/trace/powerfeed.html

@@ -1,9 +0,0 @@
-<div class="panel panel-danger">
-    <div class="panel-heading">
-        <strong>Power Feed <a href="{{ powerfeed.get_absolute_url }}">{{ powerfeed }}</a></strong><br />
-        <a href="{{ powerfeed.power_panel.get_absolute_url }}">{{ powerfeed.power_panel }}</a>
-        {% if powerfeed.rack %}
-            / <a href="{{ powerfeed.rack.get_absolute_url }}">{{ powerfeed.rack }}</a>
-        {% endif %}
-    </div>
-</div>

netbox/templates/dcim/trace/powerpanel.html

@@ -0,0 +1,5 @@
+<div class="node">
+    <strong><a href="{{ powerpanel.get_absolute_url }}">{{ powerpanel }}</a></strong><br />
+    Power Panel<br />
+    <a href="{{ powerpanel.site.get_absolute_url }}">{{ powerpanel.site }}</a>
+</div>

netbox/templates/dcim/trace/termination.html

@@ -1,9 +1,8 @@
 {% load helpers %}
-<div class="panel panel-default">
-    <div class="panel-body">
-        {{ termination|meta:"verbose_name"|bettertitle }} <a href="{{ termination.get_absolute_url }}">{{ termination }}</a>
-        {% if termination.type %}
-            <br/>{{ termination.get_type_display }}
-        {% endif %}
-    </div>
-</div>
+<div class="termination">
+    <strong><a href="{{ termination.get_absolute_url }}">{{ termination }}</a></strong><br />
+    {{ termination|meta:"verbose_name"|bettertitle }}
+    {% if termination.type %}
+        ({{ termination.get_type_display }})
+    {% endif %}
+</div>