Save and Load Topology View (#46)

A Topology Viewer page (plugins/nextbox-ui/topology/) now allows you to save a current layout to the database.
A saved topology is a "snapshot" of the topology state on the screen with all associated attributes.
A saved topology can then be loaded from the Topology Viewer page. Overall device layout and their relative coordinates will be preserved. General plugin Hide/Display controls are also preserved on the view save/load.
Device and link changes taken between save and load actions are not currently considered. Load Saved View shows a topology state in the past as is.
Tracking changes is a matter of further development.

* Save Topology View feature initial commit
Add general workflow for current layout saving.
Loading from the created snapshot is not yet implemented.

* Implement Load Saved View
It is possible to load a saved topology from on a Topology Viewer page.

Author: iDebugAll

nextbox_ui_plugin/admin.py

@@ -0,0 +1,7 @@
+from django.contrib import admin
+from .models import SavedTopology
+
+
+@admin.register(SavedTopology)
+class SavedTopologyAdmin(admin.ModelAdmin):
+    list_display = ("name", "created_by", "timestamp", "topology",)

nextbox_ui_plugin/api/__init__.py

@@ -0,0 +1 @@
+"""REST API for NextBox-UI Plugin"""

nextbox_ui_plugin/api/serializers.py

@@ -0,0 +1,26 @@
+from rest_framework import serializers
+from nextbox_ui_plugin.models import SavedTopology
+import datetime
+import json
+
+
+class SavedTopologySerializer(serializers.ModelSerializer):
+
+    created_by = serializers.CharField(read_only=True)
+    timestamp = serializers.DateTimeField(read_only=True)
+
+    def to_internal_value(self, data):
+        validated = {
+            'name': str(data.get('name').strip() or f"{self.context['request'].user} - {datetime.datetime.now()}"),
+            'topology': json.loads(data.get('topology')),
+            'layout_context': json.loads(data.get('layout_context')),
+            'created_by': self.context['request'].user,
+            'timestamp': str(datetime.datetime.now())
+        }
+        return validated
+
+    class Meta:
+        model = SavedTopology
+        fields = [
+            "id", "name", "topology", "layout_context", "created_by", "timestamp",
+        ]

nextbox_ui_plugin/api/urls.py

@@ -0,0 +1,11 @@
+from rest_framework.routers import DefaultRouter
+from . import views
+
+
+router = DefaultRouter()
+router.APIRootView = views.NextBoxUIPluginRootView
+
+router.register(r'savedtopologies', views.SavedTopologyViewSet)
+
+app_name = "nextbox_ui_plugin-api"
+urlpatterns = router.urls

nextbox_ui_plugin/api/views.py

@@ -0,0 +1,17 @@
+from rest_framework.routers import APIRootView
+from rest_framework.viewsets import ModelViewSet
+from nextbox_ui_plugin.models import SavedTopology
+from . import serializers
+
+
+class NextBoxUIPluginRootView(APIRootView):
+    """
+    NextBoxUI_plugin API root view
+    """
+    def get_view_name(self):
+        return 'NextBoxUI'
+
+
+class SavedTopologyViewSet(ModelViewSet):
+    queryset = SavedTopology.objects.all()
+    serializer_class = serializers.SavedTopologySerializer

nextbox_ui_plugin/forms.py

@@ -2,6 +2,7 @@
 from utilities.forms import (
     BootstrapMixin, DynamicModelMultipleChoiceField,
 )
+from .models import SavedTopology
 from dcim.models import Device, Site, Region
 
 
@@ -27,3 +28,19 @@ class TopologyFilterForm(BootstrapMixin, forms.Form):
         to_field_name='id',
         null_option='None',
     )
+
+
+class LoadSavedTopologyFilterForm(BootstrapMixin, forms.Form):
+
+    def __init__(self, *args, **kwargs):
+        user = kwargs.pop('user', None)
+        super(LoadSavedTopologyFilterForm, self).__init__(*args, **kwargs)
+        self.fields['saved_topology_id'].queryset = SavedTopology.objects.filter(created_by=user)
+
+    model = SavedTopology
+
+    saved_topology_id = forms.ModelChoiceField(
+        queryset=None,
+        to_field_name='id',
+        required=True
+    )

nextbox_ui_plugin/migrations/0001_initial.py

@@ -0,0 +1,25 @@
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('users', '0010_update_jsonfield'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='SavedTopology',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False)),
+                ('name', models.CharField(blank=True, max_length=100)),
+                ('topology', models.JSONField()),
+                ('layout_context', models.JSONField(blank=True, null=True)),
+                ('timestamp', models.DateTimeField()),
+                ('created_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='users.adminuser')),
+            ],
+        ),
+    ]

nextbox_ui_plugin/migrations/__init__.py

@@ -0,0 +1,21 @@
+from django.db import models
+from utilities.querysets import RestrictedQuerySet
+
+
+class SavedTopology(models.Model):
+
+    name = models.CharField(max_length=100, blank=True)
+    topology = models.JSONField()
+    layout_context = models.JSONField(null=True, blank=True)
+    created_by = models.ForeignKey(
+        to="users.AdminUser",
+        on_delete=models.CASCADE,
+        blank=False,
+        null=False,
+    )
+    timestamp = models.DateTimeField()
+
+    objects = RestrictedQuerySet.as_manager()
+
+    def __str__(self):
+        return str(self.name)

nextbox_ui_plugin/models.py

@@ -347,6 +347,41 @@
         displayPassiveDevices = !displayPassiveDevices
     };
 
+    saveView = function (topoSaveURI, CSRFToken) {
+        var topoSaveName = document.getElementById('topoSaveName').value.trim();
+        var saveButton = document.getElementById('saveTopologyView');
+        var saveResultLabel = document.getElementById('saveResult');
+        saveButton.setAttribute('disabled', true);
+        saveResultLabel.setAttribute('innerHTML', 'Processing');
+        $.ajax({
+            type: 'POST',
+            url: topoSaveURI,
+            data: {
+                'name': topoSaveName,
+                'topology': JSON.stringify(topo.data()),
+                'layout_context': JSON.stringify({
+                    'initialLayout': initialLayout,
+                    'displayUnconnected': !displayUnconnected,
+                    'undisplayedRoles': undisplayedRoles,
+                    'undisplayedDeviceTags': undisplayedDeviceTags,
+                    'displayPassiveDevices': !displayPassiveDevices,
+                    'displayLogicalMultiCableLinks': displayLogicalMultiCableLinks,
+                    'requestGET': requestGET,
+                })
+            },
+            headers: {'X-CSRFToken': CSRFToken},
+            success: function (response) {
+                saveResultLabel.innerHTML = 'Success';
+                saveButton.removeAttribute('disabled');
+                console.log(response);
+            },
+            error: function (response) {
+                saveResultLabel.innerHTML = 'Failed';
+                console.log(response);
+            }
+        })
+    };
+
     topo.on('topologyGenerated', function(){
         showHideUndonnected();
         showHidePassiveDevices();
@@ -360,6 +395,9 @@
         undisplayedDeviceTags.forEach(function(deviceTag){
             showHideDevicesByTag(deviceTag, false);
         });
+        topologySavedData['nodes'].forEach(function(node){
+            topo.graph().getVertex(node['id']).position({'x': node.x, 'y': node.y});
+        });
     });
 
     // Create an application instance