#32

netbox_topology_views/static/netbox_topology_views/js/app.js

@@ -1,5 +1,41 @@
 var graph = null;
 var container = null;
+
+function iniPlotboxFull() {
+    document.addEventListener('DOMContentLoaded', function () {
+        container = document.getElementById('fullvisgraph');
+        startRender();
+    }, false);
+}
+
+function startRender() {
+  var url = location.search;
+
+  $.ajax({
+    type: "GET",
+    url: "../../api/plugins/topology-views/search/search/" + url,
+    contentType: "application/json; charset=utf-8",
+    success: function (data_result, status, xhr) {
+        graph = null;
+        nodes = new vis.DataSet();
+        edges = new vis.DataSet();
+        graph = new vis.Network(container, { nodes: nodes, edges: edges }, options);
+        $.each(data_result["nodes"], function (index, device) {
+            nodes.add(device);
+        });
+        $.each(data_result["edges"], function (index, edge) {
+            edges.add(edge);
+        });
+        graph.fit();
+        canvas = document.getElementById('fullvisgraph').getElementsByTagName('canvas')[0];
+    },
+    error: function (error_result) {
+       
+    },
+});
+}
+var graph = null;
+var container = null;
 var downloadButton = null;
 var MIME_TYPE = "image/png";
 var canvas = null;
@@ -41,6 +77,7 @@ function iniPlotboxIndex() {
         startLoadSearchBar();
         handleButtonPress();
         downloadButton = document.getElementById('btnDownloadImage');
+        btnFullView = document.getElementById('btnFullView');
     }, false);
 }
 
@@ -244,7 +281,15 @@ function handleButtonPress() {
             headers: { "X-CSRFToken": csrftoken },
             contentType: "application/json; charset=utf-8",
             dataType: "json",
-            success: function (data_result) {
+            beforeSend: function(){ 
+                new_url = this.url.split("../../api/plugins/topology-views/search/search/?");
+                new_url = new_url[1];
+                new_url = "../../plugins/topology-views/full?" + new_url
+
+                btnFullView.classList.remove("disabled");
+                btnFullView.href = new_url;
+            },
+            success: function (data_result, status, xhr) {
                 $("#status").html('<span class="label  label-info">Drawing network</span>');
                 graph = null;
                 nodes = new vis.DataSet();

netbox_topology_views/static_dev/js/full.js

@@ -0,0 +1,36 @@
+var graph = null;
+var container = null;
+
+function iniPlotboxFull() {
+    document.addEventListener('DOMContentLoaded', function () {
+        container = document.getElementById('fullvisgraph');
+        startRender();
+    }, false);
+}
+
+function startRender() {
+  var url = location.search;
+
+  $.ajax({
+    type: "GET",
+    url: "../../api/plugins/topology-views/search/search/" + url,
+    contentType: "application/json; charset=utf-8",
+    success: function (data_result, status, xhr) {
+        graph = null;
+        nodes = new vis.DataSet();
+        edges = new vis.DataSet();
+        graph = new vis.Network(container, { nodes: nodes, edges: edges }, options);
+        $.each(data_result["nodes"], function (index, device) {
+            nodes.add(device);
+        });
+        $.each(data_result["edges"], function (index, edge) {
+            edges.add(edge);
+        });
+        graph.fit();
+        canvas = document.getElementById('fullvisgraph').getElementsByTagName('canvas')[0];
+    },
+    error: function (error_result) {
+       
+    },
+});
+}

netbox_topology_views/static_dev/js/home.js

@@ -41,6 +41,7 @@ function iniPlotboxIndex() {
         startLoadSearchBar();
         handleButtonPress();
         downloadButton = document.getElementById('btnDownloadImage');
+        btnFullView = document.getElementById('btnFullView');
     }, false);
 }
 
@@ -244,7 +245,15 @@ function handleButtonPress() {
             headers: { "X-CSRFToken": csrftoken },
             contentType: "application/json; charset=utf-8",
             dataType: "json",
-            success: function (data_result) {
+            beforeSend: function(){ 
+                new_url = this.url.split("../../api/plugins/topology-views/search/search/?");
+                new_url = new_url[1];
+                new_url = "../../plugins/topology-views/full?" + new_url
+
+                btnFullView.classList.remove("disabled");
+                btnFullView.href = new_url;
+            },
+            success: function (data_result, status, xhr) {
                 $("#status").html('<span class="label  label-info">Drawing network</span>');
                 graph = null;
                 nodes = new vis.DataSet();

netbox_topology_views/templates/netbox_topology_views/full.html

@@ -0,0 +1,24 @@
+{% load static %}
+{% load helpers %}
+
+{% block content %}
+{% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
+<link rel="stylesheet" href="{% static 'netbox_topology_views/css/vendor.css' %}">
+<link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">
+
+
+<div class="panel-body">
+    <div id="fullvisgraph" class=""></div>
+</div>
+
+
+{% endwith %}
+{% endblock %}
+
+{% block javascript %}
+<script src="{% static 'jquery/jquery-3.4.1.min.js' %}"></script>
+<script src="{% static 'netbox_topology_views/js/vendor.js' %}"></script>
+<script src="{% static 'netbox_topology_views/js/app.js' %}"></script>
+
+<script type="application/javascript"> iniPlotboxFull()</script>
+{% endblock %}

netbox_topology_views/templates/netbox_topology_views/index.html

@@ -16,7 +16,10 @@
 					<a id="btnDownloadImage" class="btn btn-xs btn-info">
 						<i class="fa fa-download"></i>
 					</a>
-				  </div>
+					<a id="btnFullView" class="btn btn-xs btn-info disabled" target="_blank">
+						<i class="fa fa-share"></i>
+					</a>
+				</div>
 			</div>
 			<div class="panel-body">
 				<div id="visgraph" class=""></div>

netbox_topology_views/urls.py

@@ -7,4 +7,5 @@ from . import views
 # a specific view so that it can be accessed by users.
 urlpatterns = (
     path('', views.TopologyHomeView.as_view(), name='home'),
+    path('full', views.TopologyFullView.as_view(), name='full'),
 )

netbox_topology_views/views.py

@@ -10,3 +10,12 @@ class TopologyHomeView(PermissionRequiredMixin, View):
     """
     def get(self, request):        
         return render(request, 'netbox_topology_views/index.html')
+
+class TopologyFullView(PermissionRequiredMixin, View):
+    permission_required = ('dcim.view_site', 'dcim.view_device')
+
+    """
+    Show the full view page
+    """
+    def get(self, request):        
+        return render(request, 'netbox_topology_views/full.html')