From cbfb25f00309cc95164df9cb5f8f9a858735e275 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@digitalocean.com>
Date: Mon, 29 Oct 2018 16:45:20 -0400
Subject: [PATCH] Initial work on a cable tracing modal

---
 netbox/project-static/js/cabletrace.js        | 24 +++++++++++++++++++
 netbox/templates/circuits/provider.html       |  2 +-
 netbox/templates/dcim/device.html             |  4 +++-
 netbox/templates/dcim/inc/interface.html      |  3 +++
 netbox/templates/dcim/site.html               |  2 +-
 .../inc/{graphs_modal.html => modal.html}     |  4 ++--
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 netbox/project-static/js/cabletrace.js
 rename netbox/templates/inc/{graphs_modal.html => modal.html} (68%)

diff --git a/netbox/project-static/js/cabletrace.js b/netbox/project-static/js/cabletrace.js
new file mode 100644
index 000000000..2307cef87
--- /dev/null
+++ b/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 />'
+                );
+            })
+        }
+    });
+});
diff --git a/netbox/templates/circuits/provider.html b/netbox/templates/circuits/provider.html
index 4ec9adee1..733632342 100644
--- a/netbox/templates/circuits/provider.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
index 29f187825..1c2bbfccd 100644
--- a/netbox/templates/dcim/device.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/inc/interface.html b/netbox/templates/dcim/inc/interface.html
index 1ee1706ab..8b6583ace 100644
--- a/netbox/templates/dcim/inc/interface.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/site.html b/netbox/templates/dcim/site.html
index f4623b57b..8fedfbcee 100644
--- a/netbox/templates/dcim/site.html
+++ b/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 %}
diff --git a/netbox/templates/inc/graphs_modal.html b/netbox/templates/inc/modal.html
similarity index 68%
rename from netbox/templates/inc/graphs_modal.html
rename to netbox/templates/inc/modal.html
index 29eaf18bf..b70b9115f 100644
--- a/netbox/templates/inc/graphs_modal.html
+++ b/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>