Standardized graph display; added templatization for graph links

netbox/extras/api/serializers.py

@@ -5,10 +5,14 @@ from extras.models import Graph
 
 class GraphSerializer(serializers.ModelSerializer):
     embed_url = serializers.SerializerMethodField()
+    embed_link = serializers.SerializerMethodField()
 
     class Meta:
         model = Graph
-        fields = ['name', 'embed_url', 'link']
+        fields = ['name', 'embed_url', 'embed_link']
 
     def get_embed_url(self, obj):
         return obj.embed_url(self.context['graphed_object'])
+
+    def get_embed_link(self, obj):
+        return obj.embed_link(self.context['graphed_object'])

netbox/extras/models.py

@@ -56,6 +56,12 @@ class Graph(models.Model):
         template = Template(self.source)
         return template.render(Context({'obj': obj}))
 
+    def embed_link(self, obj):
+        if self.link is None:
+            return ''
+        template = Template(self.link)
+        return template.render(Context({'obj': obj}))
+
 
 class ExportTemplate(models.Model):
     content_type = models.ForeignKey(ContentType, limit_choices_to={'model__in': EXPORTTEMPLATE_MODELS})

netbox/project-static/js/graphs.js

@@ -0,0 +1,26 @@
+$('#graphs_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, graph) {
+                // Build in a 500ms delay per graph to avoid hammering the server
+                setTimeout(function() {
+                    modal_body.append('<h4 class="text-center">' + graph.name + '</h4>');
+                    if (graph.embed_link) {
+                        modal_body.append('<a href="' + graph.embed_link + '"><img src="' + graph.embed_url + '" /></a>');
+                    } else {
+                        modal_body.append('<img src="' + graph.embed_url + '" />');
+                    }
+                }, i*500);
+            })
+        }
+    });
+});

netbox/templates/dcim/device.html

@@ -396,32 +396,7 @@ $(".powerport-toggle").click(function() {
 $(".interface-toggle").click(function() {
     return toggleConnection($(this), "/api/dcim/interface-connections/");
 });
-$('#graphs_modal').on('show.bs.modal', function (event) {
-    var button = $(event.relatedTarget);
-    var iface = button.data('interface');
-    var iface_id = button.data('id');
-    var modal_title = $(this).find('.modal-title');
-    var modal_body = $(this).find('.modal-body');
-    modal_title.text('{{ device.name }} - ' + iface);
-    modal_body.empty();
-    $.ajax({
-        url: "/api/dcim/interfaces/" + iface_id + "/graphs/",
-        dataType: 'json',
-        success: function(json) {
-            $.each(json, function(i, graph) {
-                // Build in a 500ms delay per graph to avoid hammering the server
-                setTimeout(function() {
-                    modal_body.append('<h4 class="text-center">' + graph.name + '</h4>');
-                    if (graph.link) {
-                        modal_body.append('<a href="' + graph.link + '"><img src="' + graph.embed_url + '" /></a>');
-                    } else {
-                        modal_body.append('<img src="' + graph.embed_url + '" />');
-                    }
-                }, i*500);
-            })
-        }
-    });
-});
 </script>
+<script src="{% static 'js/graphs.js' %}"></script>
 <script src="{% static 'js/secrets.js' %}"></script>
 {% endblock %}

netbox/templates/dcim/inc/_interface.html

@@ -25,7 +25,7 @@
     {% endif %}
     <td class="text-right">
         {% if iface.circuit or iface.connection %}
-            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#graphs_modal" data-interface="{{ iface.name }}" data-id="{{ iface.id }}" title="Show graphs">
+            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#graphs_modal" data-obj="{{ device.name }} - {{ iface.name }}" data-url="{% url 'dcim-api:interface_graphs' pk=iface.pk %}" title="Show graphs">
                 <i class="glyphicon glyphicon-signal" aria-hidden="true"></i>
             </button>
         {% endif %}

netbox/templates/dcim/site.html

@@ -1,4 +1,5 @@
 {% extends '_base.html' %}
+{% load static from staticfiles %}
 {% load render_table from django_tables2 %}
 {% load helpers %}
 
@@ -6,7 +7,7 @@
 
 {% block content %}
 <div class="pull-right">
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#graphs_modal" data-site="{{ site.name }}" data-id="{{ site.id }}" title="Show graphs">
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#graphs_modal" data-obj="{{ site.name }}" data-url="{% url 'dcim-api:site_graphs' pk=site.pk %}" title="Show graphs">
         <i class="glyphicon glyphicon-signal" aria-hidden="true"></i>
         Graphs
     </button>
@@ -159,32 +160,5 @@
 {% endblock %}
 
 {% block javascript %}
-<script type="text/javascript">
-$('#graphs_modal').on('show.bs.modal', function (event) {
-    var button = $(event.relatedTarget);
-    var site = button.data('site');
-    var site_id = button.data('id');
-    var modal_title = $(this).find('.modal-title');
-    var modal_body = $(this).find('.modal-body');
-    modal_title.text(site);
-    modal_body.empty();
-    $.ajax({
-        url: "/api/dcim/sites/" + site_id + "/graphs/",
-        dataType: 'json',
-        success: function(json) {
-            $.each(json, function(i, graph) {
-                // Build in a 500ms delay per graph to avoid hammering the server
-                setTimeout(function() {
-                    modal_body.append('<h4 class="text-center">' + graph.name + '</h4>');
-                    if (graph.link) {
-                        modal_body.append('<a href="' + graph.link + '"><img src="' + graph.embed_url + '" /></a>');
-                    } else {
-                        modal_body.append('<img src="' + graph.embed_url + '" />');
-                    }
-                }, i*500);
-            })
-        }
-    });
-});
-</script>
+<script src="{% static 'js/graphs.js' %}"></script>
 {% endblock %}