Redo the cable trace UI (WIP)

netbox/templates/dcim/cable_trace.html

@@ -7,66 +7,65 @@
 
 {% block content %}
     <div class="row">
-        <div class="col-md-9">
-
-            <div class="row">
-                <div class="col-md-4 col-md-offset-1 text-center">
-                    <h4>Near End</h4>
-                </div>
-                <div class="col-md-3 text-center">
-                    {% if total_length %}<h5>Total length: {{ total_length|floatformat:"-2" }} Meters<h5>{% endif %}
-                </div>
-                <div class="col-md-4 text-center">
-                    <h4>Far End</h4>
-                </div>
-            </div>
+        <div class="col-md-5 col-sm-12 text-center">
             {% for near_end, cable, far_end in path.origin.trace %}
+
+                {# Near end #}
+                {% if near_end.device %}
+                    {% 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 %}
+                {% elif near_end.circuit %}
+                    {% include 'dcim/trace/circuit.html' with circuit=near_end.circuit %}
+                    {% include 'dcim/trace/termination.html' with termination=near_end %}
+                {% endif %}
+
+                {# Cable #}
                 <div class="row">
-                    <div class="col-md-1 text-right">
-                        <h3>{{ forloop.counter }}</h3>
-                    </div>
-                    <div class="col-md-4">
-                        {% include 'dcim/inc/cable_trace_end.html' with end=near_end %}
-                    </div>
-                    <div class="col-md-3 text-center">
-                        {% if cable %}
-                            <h4>
-                                <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>
-                            {% endif %}
-                        {% else %}
-                            <h4 class="text-muted">No Cable</h4>
-                        {% endif %}
-                    </div>
-                    <div class="col-md-4">
-                        {% if far_end %}
-                            {% include 'dcim/inc/cable_trace_end.html' with end=far_end %}
-                        {% endif %}
-                    </div>
+                    {% if cable %}
+                        {% include 'dcim/trace/cable.html' %}
+                    {% else %}
+                        <h4>No cable</h4>
+                    {% endif %}
                 </div>
-                <hr />
+
+                {# Far end #}
+                {% if far_end.device %}
+                    {% include 'dcim/trace/termination.html' with termination=far_end %}
+                    {% if forloop.last %}
+                        {% 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 %}
+                {% elif far_end.circuit %}
+                    {% include 'dcim/trace/termination.html' with termination=far_end %}
+                    {% if forloop.last %}
+                        {% include 'dcim/trace/circuit.html' with circuit=far_end.circuit %}
+                    {% endif %}
+                {% endif %}
+
             {% endfor %}
             <div class="row">
-                <div class="col-md-11 col-md-offset-1">
+                <div class="text-center">
                     <h3 class="text-success text-center">Trace completed!</h3>
+                    {% if total_length %}
+                        <h5>Total length: {{ total_length|floatformat:"-2" }} Meters<h5>
+                    {% endif %}
                 </div>
             </div>
 
         </div>
-        <div class="col-md-3">
+        <div class="col-md-7 col-sm-12">
 
             <h4 class="text-center">Related Paths</h4>
             <ul class="nav nav-pills nav-stacked">
                 {% for cablepath in related_paths %}
                     <li role="presentation"{% if cablepath.pk == path.pk %} class="active"{% endif %}>
-                        <a href="?cablepath_id={{ cablepath.pk }}">From {{ cablepath.origin }} ({{ cablepath.origin.parent }})</a>
+                        <a href="?cablepath_id={{ cablepath.pk }}">
+                            From {{ cablepath.origin }} ({{ cablepath.origin.parent }})
+                            to {{ cablepath.destination }} ({{ cablepath.destination.parent }})
+                        </a>
                     </li>
                 {% endfor %}
             </ul>

netbox/templates/dcim/inc/cable_trace_end.html

@@ -1,43 +0,0 @@
-{% load helpers %}
-
-<div class="panel panel-default">
-    <div class="panel-heading text-center">
-        {% if end.device %}
-            <strong><a href="{{ end.device.get_absolute_url }}">{{ end.device }}</a></strong><br/>
-            <small>
-                <a href="{{ end.device.site.get_absolute_url }}">{{ end.device.site }}</a>
-                {% if end.device.rack %}
-                    / <a href="{{ end.device.rack.get_absolute_url }}">{{ end.device.rack }}</a>
-                {% endif %}
-            </small>
-        {% elif end.circuit %}
-            <strong><a href="{{ end.circuit.provider.get_absolute_url }}">{{ end.circuit.provider }}</a></strong>
-        {% elif end.power_panel %}
-            <strong><a href="{{ end.power_panel.get_absolute_url }}">{{ end.power_panel }}</a></strong><br/>
-            <small>
-                <a href="{{ end.power_panel.site.get_absolute_url }}">{{ end.power_panel.site }}</a>
-            </small>
-        {% endif %}
-    </div>
-    <div class="panel-body text-center">
-        {% if end.device %}
-            {# Device component #}
-            {% with model=end|meta:"verbose_name" %}
-                <strong><a href="{{ end.get_absolute_url }}">{{ model|bettertitle }} {{ end }}</a></strong><br />
-                {% if model == 'interface' or model == 'front port' or model == 'rear port' %}
-                    {{ end.get_type_display }}
-                {% endif %}
-            {% endwith %}
-        {% elif end.circuit %}
-            {# CircuitTermination #}
-            <strong><a href="{{ end.circuit.get_absolute_url }}">{{ end.circuit }}</a></strong><br/>
-            {{ end }}
-        {% elif end.power_panel %}
-            {# PowerFeed #}
-            <strong><a href="{{ end.get_absolute_url }}">Power Feed {{ end }}</a></strong><br />
-            {% if end.rack %}
-                <a href="{{ end.rack.get_absolute_url }}">{{ end.rack }}</a>
-            {% endif %}
-        {% endif %}
-    </div>
-</div>

netbox/templates/dcim/trace/cable.html

@@ -0,0 +1,15 @@
+<div class="col-md-6 col-md-offset-3">
+    <h4><i class="fa fa-arrow-up"></i></h4>
+    <h4>
+        <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>
+    {% endif %}
+    <h4><i class="fa fa-arrow-down"></i></h4>
+</div>

netbox/templates/dcim/trace/circuit.html

@@ -0,0 +1,6 @@
+<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>

netbox/templates/dcim/trace/device.html

@@ -0,0 +1,9 @@
+<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>

netbox/templates/dcim/trace/powerfeed.html

@@ -0,0 +1,9 @@
+<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/termination.html

@@ -0,0 +1,9 @@
+{% 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>