0.4.0 improvements

django_netjsongraph/api/generics.py

@@ -1,5 +1,6 @@
 import json
 
+from django.core.exceptions import ValidationError
 from django.utils.translation import ugettext_lazy as _
 from netdiff.exceptions import NetdiffException
 from rest_framework import generics
@@ -44,8 +45,11 @@ def get(self, request, pk, format=None):
         try:
             s = self.snapshot_model.objects.get(**options)
             return Response(json.loads(s.data))
-        except:
-            return Response({'detail': _('wrong date')},
+        except self.snapshot_model.DoesNotExist:
+            return Response({'detail': _('no snapshot found for this date')},
+                            status=404)
+        except ValidationError:
+            return Response({'detail': _('invalid date supplied')},
                             status=403)
 
 

django_netjsongraph/base/admin.py

@@ -28,11 +28,11 @@ class Media:
                        static('netjsongraph/css/style.css'),
                        static('netjsongraph/css/admin.css')]}
         js = [static('netjsongraph/js/lib/d3.min.js'),
-              static('netjsongraph/js/lib/jquery.min.js'),
               static('netjsongraph/js/lib/jquery-ui.min.js'),
               static('netjsongraph/js/src/netjsongraph.js'),
               static('netjsongraph/js/receive-url.js'),
               static('netjsongraph/js/strategy-switcher.js'),
+              static('netjsongraph/js/topology-history.js'),
               static('netjsongraph/js/visualize.js')]
 
 
@@ -86,9 +86,6 @@ def get_urls(self):
             url(r'^visualize/(?P<pk>[^/]+)/$',
                 self.admin_site.admin_view(self.visualize_view),
                 name='{0}_visualize'.format(url_prefix)),
-            url(r'^visualize/history/(?P<pk>[^/]+)/$',
-                self.admin_site.admin_view(self.visualize_history_view),
-                name='{0}_visualize_history'.format(url_prefix))
         ] + super(AbstractTopologyAdmin, self).get_urls()
 
     def _message(self, request, rows, suffix, level=messages.SUCCESS):
@@ -128,35 +125,17 @@ def unpublish_selected(self, request, queryset):
     unpublish_selected.short_description = _('Unpublish selected items')
 
     def visualize_view(self, request, pk):
-        api_url = reverse('network_graph', args=[pk])
+        graph_url = reverse('network_graph', args=[pk])
+        history_url = reverse('network_graph_history', args=[pk])
         context = self.admin_site.each_context(request)
         opts = self.model._meta
-        prefix = 'admin:{0}_{1}'.format(self.opts.app_label, self.model.__name__.lower())
-        graph_url = reverse('{0}_visualize_history'.format(prefix), args=[pk])
-        context.update({
-            'is_popup': True,
-            'opts': opts,
-            'change': False,
-            'media': self.media,
-            'api_url': api_url,
-            'graph_url': graph_url
-        })
-        return TemplateResponse(request, 'admin/%s/visualize.html' % opts.app_label, context)
-
-    def visualize_history_view(self, request, pk):
-        date = request.GET.get('date', '')
-        api_url = '{0}?date={1}'.format(reverse('network_graph_history', args=[pk]), date)
-        context = self.admin_site.each_context(request)
-        opts = self.model._meta
-        prefix = 'admin:{0}_{1}'.format(self.opts.app_label, self.model.__name__.lower())
-        graph_url = reverse('{0}_visualize_history'.format(prefix), args=[pk])
         context.update({
             'is_popup': True,
             'opts': opts,
             'change': False,
             'media': self.media,
-            'api_url': api_url,
-            'graph_url': graph_url
+            'graph_url': graph_url,
+            'history_url': history_url
         })
         return TemplateResponse(request, 'admin/%s/visualize.html' % opts.app_label, context)
 

django_netjsongraph/static/netjsongraph/css/admin.css

@@ -46,5 +46,6 @@ input[type=text].readonly{
 
 .njg-overlay{
     top: auto;
-    bottom: 50px;
+    bottom: 5px;
+    right: 5px;
 }

django_netjsongraph/static/netjsongraph/css/style.css

@@ -1,6 +1,11 @@
+body.frontend{
+    margin: 0;
+    padding: 8px
+}
+
 .njg-overlay,
-.switcher,
-.njg-metadata{
+.njg-metadata,
+.njg-switcher{
     background: #fbfbfb;
     border-radius: 3px;
     border: 1px solid #ccc;
@@ -42,15 +47,6 @@
     margin: 8px 0;
 }
 
-.switcher{
-    top: auto;
-    bottom: 10px;
-}
-
-.switcher #dp{
-    margin: 5px;
-}
-
 .njg-node{
     stroke-width: 7px;
     stroke-alignment: inner;
@@ -142,8 +138,30 @@ body.frontend {
 #legend .up{ border-color: #3acc38 }
 #legend .down{ border-color: red }
 
-.switcher{
+.njg-switcher{
     position: absolute;
     bottom: 5px;
     right: 5px;
+    top: auto;
+    padding: 10px 15px;
+    min-width: auto;
+}
+
+#njg-datepicker{
+    margin: 0 0 0 5px !important;
+    font-size: 13px;
+    padding: 5px 10px;
+    width: 75px;
+}
+
+#ui-datepicker-div{
+    font-size: 15px;
+    line-height: initial
+}
+
+.ui-datepicker thead th{
+    line-height: normal;
+    text-transform: uppercase;
+    font-size: 11px;
+    background: #f6f6f6;
 }

django_netjsongraph/static/netjsongraph/js/strategy-switcher.js

@@ -1,16 +1,16 @@
 (function($) {
     $(document).ready(function() {
         var strategy = $('#id_strategy'),
-            fetch_rows = $('#id_url').parents('.form-row'),
-            receive_rows = $('#id_key, #id_expiration_time, #id_receive_url').parents('.form-row');
+            fetchRows = $('#id_url').parents('.form-row'),
+            receiveRows = $('#id_key, #id_expiration_time, #id_receive_url').parents('.form-row');
         strategy.change(function(e){
             if (strategy.val() == 'fetch'){
-                fetch_rows.show();
-                receive_rows.hide();
+                fetchRows.show();
+                receiveRows.hide();
             }
             else{
-                fetch_rows.hide();
-                receive_rows.show();
+                fetchRows.hide();
+                receiveRows.show();
             }
         });
         strategy.trigger('change');

django_netjsongraph/static/netjsongraph/js/topology-history.js

@@ -0,0 +1,21 @@
+window.initTopologyHistory = function($){
+    var datepicker = $('#njg-datepicker'),
+        today = new Date(),
+        apiUrl = datepicker.attr('data-history-api');
+    today.setHours(0, 0, 0, 0);
+    datepicker.datepicker({dateFormat: 'dd/mm/yy'});
+    datepicker.datepicker('setDate', today);
+    datepicker.change(function() {;
+        var date = datepicker.val().split('/').reverse().join('-'),
+            url = apiUrl + '?date=' + date;
+        // load latest data when looking currentDate
+        if(datepicker.datepicker('getDate').getTime() == today.getTime()){
+            url = window.__njg_default_url__;
+        }
+        $.getJSON(url).done(function(data){
+            window.graph = window.loadNetJsonGraph(data);
+        }).error(function(xhr){
+            alert(xhr.responseJSON.detail);
+        });
+    });
+};

django_netjsongraph/static/netjsongraph/js/visualize.js

@@ -2,48 +2,21 @@ django.jQuery(function($) {
     var overlay = $('.djnjg-overlay'),
         body = $('body'),
         inner = overlay.find('.inner'),
-        visualize_url = $('.visualizelink').attr('data-url');
-
-    var d = new Date(),
-        month = d.getMonth() + 1,
-        day = d.getDate(),
-        default_date = (month < 10 ? '0': '') + month + '/' +
-            (day < 10 ? '0': '') + day + '/' +
-            d.getFullYear(),
-        current_date = d.getFullYear() + '-' +
-            (month < 10 ? '0': '') + month + '-' +
-            (day < 10 ? '0': '') + day;
+        visualizeUrl = $('.visualizelink').attr('data-url');
 
     var openOverlay = function() {
         // show overlay
-        $.get(visualize_url, function(html) {
-            inner.html(html);
-            $('svg').appendTo(inner);
-            $('.njg-overlay').appendTo(inner);
-            $('.njg-metadata').appendTo(inner);
+        window.__njg_el__ = '.djnjg-overlay .inner';
+        $.get(visualizeUrl, function(html) {
             overlay.show();
+            inner.html(html);
             body.css('overflow', 'hidden');
             inner.css('overflow', 'hidden');
             overlay.find('.close').click(function(e){
                 e.preventDefault();
                 closeOverlay();
             })
-            overlay.find('#dp').val(default_date);
-            overlay.find('#submit').click(function(e){
-                e.preventDefault();
-                getTopologyHistory();
-            })
         })
-        .error(function(xhr) {
-            if (xhr.status == 400) {
-                $('#content-main form').trigger('submit');
-            }
-            else {
-                var message = 'Error while generating network topology graph';
-                if (gettext) { message = gettext(message); }
-                alert(message + ':\n\n' + xhr.responseText);
-            }
-        });
         $(document).keydown(disableArrowKeys);
     };
 
@@ -78,35 +51,4 @@ django.jQuery(function($) {
             e.preventDefault();
         }
     }
-
-    var getTopologyHistory = function(e) {
-        query_date = $('#dp').val();
-        date = query_date.split('/').reverse();
-        if(date != []){
-            var x = date[1];
-            date[1] = date[2];
-            date[2] = x;
-        }
-        date = date.join('-');
-        graph_url = $('.switcher').attr('graph-url') + '?date=' + date;
-        if(date == current_date) graph_url = visualize_url;
-        $.get(graph_url, function(html) {
-            inner.html(html);
-            $('svg').appendTo(inner);
-            $('.njg-overlay').appendTo(inner);
-            $('.njg-metadata').appendTo(inner);
-            overlay.find('#dp').val(query_date);
-            overlay.show();
-            body.css('overflow', 'hidden');
-            inner.css('overflow', 'hidden');
-            overlay.find('.close').click(function(e){
-                e.preventDefault();
-                closeOverlay();
-            })
-            overlay.find('#submit').click(function(e){
-                e.preventDefault();
-                getTopologyHistory();
-            })
-        })
-    }
 });

django_netjsongraph/templates/admin/django_netjsongraph/visualize.html

@@ -2,19 +2,9 @@
 {% load static %}
 
 {% block content %}
-<div>
     <a class="close" href="#">&times; {% trans 'Close' %}</a>
-</div>
-<div id="legend">
-    <p><span class="link up">&nbsp;</span>link up</p>
-    <p><span class="link down">&nbsp;</span>link down</p>
-</div>
-<div class="switcher" graph-url='{{graph_url}}'>
-    <label for="dp">Date</label>
-    <input type="text" id="dp" onclick="$('#dp').datepicker();$('#dp').datepicker('show');">
-    <button id="submit">Submit</button>
-</div>
-{% block script %}
-    {% include '../../netjsongraph/netjsongraph-script.html' %}
-{% endblock %}
+    {% include '../../netjsongraph/netjsongraph-content.html' %}
+    {% block script %}
+        {% include '../../netjsongraph/netjsongraph-script.html' %}
+    {% endblock %}
 {% endblock %}

django_netjsongraph/templates/netjsongraph/base.html

@@ -3,7 +3,7 @@
 <head>
     <title>{% block title %}{% endblock %}</title>
     <meta charset="utf-8">
-    <script src = "{% static 'netjsongraph/js/lib/jquery.min.js' %}"></script>
+    <script src = "{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
     <script src = "{% static 'netjsongraph/js/lib/jquery-ui.min.js' %}"></script>
     {% block style %}
         <link href="{% static 'netjsongraph/css/src/netjsongraph.css' %}" rel="stylesheet">
@@ -16,7 +16,7 @@
     {% block script %}
         <script src="{% static 'netjsongraph/js/lib/d3.min.js' %}"></script>
         <script src="{% static 'netjsongraph/js/src/netjsongraph.js' %}"></script>
-        <script src="{% static 'netjsongraph/js/topology-switcher.js' %}"></script>
+        <script src="{% static 'netjsongraph/js/topology-history.js' %}"></script>
     {% endblock %}
 </body>
 </html>

django_netjsongraph/templates/netjsongraph/detail.html

@@ -1,14 +1,7 @@
 {% extends 'netjsongraph/base.html' %}
 {% block title %}{{ topology.label }}{% endblock %}
 {% block body %}
-    <div id="legend">
-        <p><span class="link up">&nbsp;</span> link up</p>
-        <p><span class="link down">&nbsp;</span> link down</p>
-    </div>
-    <div class="switcher" graph-url='{{ graph_url }}'>
-        <label for="dp">Date </label><input type="text" id="dp">
-        <button id="submit">Submit</button>
-    </div>
+    {% include './netjsongraph-content.html' %}
 {% endblock %}
 {% block script %}
     {{ block.super }}

django_netjsongraph/templates/netjsongraph/netjsongraph-content.html

@@ -0,0 +1,10 @@
+{% load i18n %}
+<div id="legend">
+    <p><span class="link up">&nbsp;</span> {% trans 'link up' %}</p>
+    <p><span class="link down">&nbsp;</span> {% trans 'link down' %}</p>
+</div>
+<div class="njg-switcher">
+    <label for="njg-datepicker">{% trans 'date' %}:</label>
+    <input type="text" id="njg-datepicker"
+           data-history-api="{{ history_url }}">
+</div>