Initial work on a cable tracing modal

netbox/project-static/js/cabletrace.js

@@ -0,0 +1,24 @@
+$('#cabletrace_modal').on('show.bs.modal', function (event) {
+    var button = $(event.relatedTarget);
+    var obj = button.data('obj');
+    var url = button.data('url');
+    var modal_title = $(this).find('.modal-title');
+    var modal_body = $(this).find('.modal-body');
+    modal_title.text(obj);
+    modal_body.empty();
+    $.ajax({
+        url: url,
+        dataType: 'json',
+        success: function(json) {
+            $.each(json, function(i, segment) {
+                modal_body.append(
+                    '<div class="row">' +
+                      '<div class="col-md-4 text-center">' + segment[0].device.name + '<br />' + segment[0].name + '</div>' +
+                      '<div class="col-md-4 text-center">Cable #' + segment[1].id + '</div>' +
+                      '<div class="col-md-4 text-center">' + segment[2].device.name + '<br />' + segment[2].name + '</div>' +
+                    '</div><hr />'
+                );
+            })
+        }
+    });
+});

netbox/templates/circuits/provider.html

@@ -205,7 +205,7 @@
         </div>
     </div>
 </div>
-{% include 'inc/graphs_modal.html' %}
+{% include 'inc/modal.html' with modal_name='graphs' %}
 {% endblock %}
 
 {% block javascript %}

netbox/templates/dcim/device.html

@@ -776,7 +776,8 @@
             {% endif %}
         </div>
     </div>
-{% include 'inc/graphs_modal.html' %}
+{% include 'inc/modal.html' with modal_name='graphs' %}
+{% include 'inc/modal.html' with modal_name='cabletrace' %}
 {% include 'secrets/inc/private_key_modal.html' %}
 {% endblock %}
 
@@ -847,6 +848,7 @@ $('button.toggle-ips').click(function() {
     return false;
 });
 </script>
+<script src="{% static 'js/cabletrace.js' %}?v{{ settings.VERSION }}"></script>
 <script src="{% static 'js/graphs.js' %}?v{{ settings.VERSION }}"></script>
 <script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
 {% endblock %}

netbox/templates/dcim/inc/interface.html

@@ -32,6 +32,9 @@
     <td>
         {% if iface.cable %}
             <a href="{{ iface.cable.get_absolute_url }}">{{ iface.cable }}</a>
+            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#cabletrace_modal" data-obj="{{ device.name }} - {{ iface.name }}" data-url="{% url 'dcim-api:interface-trace' pk=iface.pk %}" title="Trace cable">
+                <i class="fa fa-share-alt" aria-hidden="true"></i>
+            </button>
         {% else %}
             &mdash;
         {% endif %}

netbox/templates/dcim/site.html

@@ -330,7 +330,7 @@
         </div>
 	</div>
 </div>
-{% include 'inc/graphs_modal.html' %}
+{% include 'inc/modal.html' with modal_name='graphs' %}
 {% endblock %}
 
 {% block javascript %}

netbox/templates/inc/graphs_modal.html → netbox/templates/inc/modal.html

@@ -1,9 +1,9 @@
-<div class="modal fade" id="graphs_modal" tabindex="-1" role="dialog">
+<div class="modal fade" id="{{ modal_name }}_modal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="graphs_modal_title">Modal title</h4>
+                <h4 class="modal-title" id="{{ modal_name }}_modal_title">Modal title</h4>
             </div>
             <div class="modal-body"></div>
         </div>