add filter by locations (#63)

* frontend for locations

* locations filter backend

README.md

@@ -1,5 +1,7 @@
 # Netbox Topology Views Plugin
 
+![Version](https://img.shields.io/pypi/v/netbox-topology-views) ![Downloads](https://img.shields.io/pypi/dm/netbox-topology-views)
+
 Create topology views/maps from your devices in netbox.
 The connections are based on the cables you created in netbox.
 Support to filter on name, site, tag and device role.
@@ -10,15 +12,35 @@ Support to filter on name, site, tag and device role.
 
 ## Install
 
+The plugin is available as a Python package and can be installed with pip.
+
 Run `pip install netbox-topology-views` in your virtual env.
 
-Add 'netbox_topology_views' to the PLUGINS array in your django configuration file.  
+To ensure NetBox Topology Views plugin is automatically re-installed during future upgrades, create a file named `local_requirements.txt` (if not already existing) in the NetBox root directory (alongside `requirements.txt`) and list the `netbox-topology-views` package:
+
+```no-highlight
+# echo netbox-topology-views >> local_requirements.txt
+```
+
+Once installed, the plugin needs to be enabled in your `configuration.py`
+
+```python
+# In your configuration.py
+PLUGINS = ["netbox_topology_views"]
+```
 
 Then run `python3 manage.py collectstatic --no-input`
 
+### Versions
+
+| netbox version        | netbox-topology-views version          |
+| ------------- |-------------|
+| >= 2.10.0 | >= v0.5.0 |
+| < 2.10.0 | =< v0.4.10 |
+
 ### Custom field: coordinates
 
-There is also support for custom fiels.
+There is also support for custom fields.
 
 If you create a custom field "coordinates" for "dcim > device" with type "text" and name "coordinates" you will see the same layout every time.
 
@@ -63,4 +85,14 @@ Run `pip install netbox-topology-views --upgrade` in your venv.
 
 Run `python3 manage.py collectstatic --no-input`
 
-Clear your browser cache.
+
+Clear you browser cache.
+
+
+### Permissions
+
+To view `/plugins/topology-views/` you need the following permissions:
+ + dcim | device | can view device
+ + dcim | site | can view site
+ + extras | tag | can view tag
+ + dcim | device role | can view device role

dev_setup/README.md

@@ -0,0 +1,22 @@
+# Setup Dev 
+ + install docker
+ + install docker compose
+ + install npm
+ + clone netbox repo
+ + clone netbox_topology_views repo
+ + create venv: `/usr/bin/python3 -m venv venv`
+ + activate venv: `source venv/bin/activate`
+ + install deps: `pip3 install -r requirements.txt`
+ + install build tools: `python3 -m pip install --upgrade build setuptools wheel`
+
+
+# Build
+ + build the package: `python3 setup.py develop`
+ + build the resources `npm run resources`
+
+# Test
+ + copy configuration.py from dev_setup to the netbox/netbox/ folder
+ + run in the netbox repo: `python3 netbox/manage.py migrate`
+ + (first time only) run in the netbox repo: `python3 netbox/manage.py createsuperuser`
+ + run in the netbox repo: `python3 netbox/manage.py runserver`
+ + browse to http://127.0.0.1:8000

dev_setup/configuration.py

@@ -0,0 +1,40 @@
+###################################################################
+#  This file serves as a base configuration for testing purposes  #
+#  only. It is not intended for production use.                   #
+###################################################################
+
+ALLOWED_HOSTS = ['*']
+
+DATABASE = {
+    'NAME': 'netbox',
+    'USER': 'netbox',
+    'PASSWORD': 'J5brHrAXFLQSif0K',
+    'HOST': 'localhost',
+    'PORT': '',
+    'CONN_MAX_AGE': 300,
+}
+
+DEBUG = True
+
+PLUGINS = [
+    'netbox_topology_views',
+]
+
+REDIS = {
+    'tasks': {
+        'HOST': 'localhost',
+        'PORT': 6379,
+        'PASSWORD': 't4Ph722qJ5QHeQ1qfu36',
+        'DATABASE': 0,
+        'SSL': False,
+    },
+    'caching': {
+        'HOST': 'localhost',
+        'PORT': 6378,
+        'PASSWORD': 'H733Kdjndks81',
+        'DATABASE': 1,
+        'SSL': False,
+    }
+}
+
+SECRET_KEY = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'

dev_setup/docker-compose.yml

@@ -0,0 +1,41 @@
+version: '3.4'
+services:
+  postgres:
+    image: postgres:12-alpine
+    environment:
+      POSTGRES_PASSWORD: J5brHrAXFLQSif0K #just for local dev
+      POSTGRES_DB: netbox
+      POSTGRES_USER: netbox
+    ports:
+    - "5432:5432"
+    volumes:
+    - netbox-postgres-data:/var/lib/postgresql/data
+
+  redis:
+    image: redis:6-alpine
+    command:
+    - sh
+    - -c # this is to evaluate the $REDIS_PASSWORD from the env
+    - redis-server --appendonly yes --requirepass $$REDIS_PASSWORD ## $$ because of docker-compose
+    environment:
+      REDIS_PASSWORD: t4Ph722qJ5QHeQ1qfu36 #just for local dev
+    volumes:
+    - netbox-redis-data:/data
+    ports:
+    - "6379:6379"
+  redis-cache:
+    image: redis:6-alpine
+    command:
+    - sh
+    - -c # this is to evaluate the $REDIS_PASSWORD from the env
+    - redis-server --requirepass $$REDIS_PASSWORD ## $$ because of docker-compose
+    environment:
+      REDIS_PASSWORD: H733Kdjndks81 #just for local dev
+    ports:
+    - "6378:6379"
+
+volumes:
+  netbox-postgres-data:
+    driver: local
+  netbox-redis-data:
+    driver: local

netbox_topology_views/__init__.py

@@ -3,8 +3,8 @@ from extras.plugins import PluginConfig
 class TopologyViewsConfig(PluginConfig):
     name = 'netbox_topology_views'
     verbose_name = 'Topology views'
-    description = 'An plugin to render toplogoy maps'
-    version = '0.4.8'
+    description = 'An plugin to render topology maps'
+    version = '0.5.1'
     author = 'Mattijs Vanhaverbeke'
     author_email = 'author@example.com'
     base_url = 'topology-views'

netbox_topology_views/api/__init__.py

@@ -0,0 +1 @@
+"""REST API"""

netbox_topology_views/api/urls.py

@@ -1,11 +1,13 @@
-from rest_framework import routers
+from netbox.api import OrderedDefaultRouter
+from . import views
 
-from .views import PreSelectDeviceRolesViewSet, SearchViewSet, SaveCoordsViewSet, PreSelectTagsViewSet
+router = OrderedDefaultRouter()
+router.APIRootView = views.TopologyViewsRootView
 
-router = routers.DefaultRouter()
-router.register('preselectdeviceroles', PreSelectDeviceRolesViewSet)
-router.register('preselecttags', PreSelectTagsViewSet)
-router.register('search', SearchViewSet, basename='search')
-router.register('save-coords', SaveCoordsViewSet, basename='save_coords')
+
+router.register('preselectdeviceroles', views.PreSelectDeviceRolesViewSet)
+router.register('preselecttags', views.PreSelectTagsViewSet)
+router.register('search', views.SearchViewSet, basename='search')
+router.register('save-coords', views.SaveCoordsViewSet, basename='save_coords')
 
 urlpatterns = router.urls

netbox_topology_views/api/views.py

@@ -2,15 +2,15 @@ from rest_framework.viewsets import ModelViewSet, ViewSet, ReadOnlyModelViewSet,
 from rest_framework.decorators import action
 from rest_framework.response import Response
 from django.contrib.contenttypes.models import ContentType
+from rest_framework.routers import APIRootView
 
 from .serializers import PreDeviceRoleSerializer, TopologyDummySerializer, PreTagSerializer
 from django.conf import settings
 
-from utilities.api import IsAuthenticatedOrLoginNotRequired
-
 from dcim.models import  DeviceRole, Device, Cable
 from circuits.models import Circuit
-from extras.models import Tag, CustomField, CustomFieldValue
+from extras.models import Tag
+
 
 ignore_cable_type_raw = settings.PLUGINS_CONFIG["netbox_topology_views"]["ignore_cable_type"]
 ignore_cable_type = ignore_cable_type_raw.split(",")
@@ -21,6 +21,9 @@ preselected_device_roles = preselected_device_roles_raw.split(",")
 preselected_tags_raw = settings.PLUGINS_CONFIG["netbox_topology_views"]["preselected_tags"]
 preselected_tags = preselected_tags_raw.split(",")
 
+class TopologyViewsRootView(APIRootView):
+    def get_view_name(self):
+        return 'TopologyViews'
 
 class PreSelectDeviceRolesViewSet(ReadOnlyModelViewSet):
     queryset = DeviceRole.objects.filter(name__in=preselected_device_roles)
@@ -30,22 +33,14 @@ class PreSelectTagsViewSet(ReadOnlyModelViewSet):
     queryset = Tag.objects.filter(name__in=preselected_tags)
     serializer_class = PreTagSerializer
 
-class SaveCoordsViewSet(GenericViewSet):
+class SaveCoordsViewSet(ReadOnlyModelViewSet):
     queryset = Device.objects.all()
     serializer_class = TopologyDummySerializer
 
-    @action(detail=False, methods=['post'])
+    @action(detail=False, methods=['patch'])
     def save_coords(self, request):
         results = {}
         if settings.PLUGINS_CONFIG["netbox_topology_views"]["allow_coordinates_saving"]:
-            try:
-                 cfCoords = CustomField.objects.get(name='coordinates')
-            except CustomField.DoesNotExist:
-                results["status"] = "coords custom field not created"
-                return Response(status=500)
-
-            obj_type = ContentType.objects.get_for_model(Device)
-
             device_id = None
             x_coord = None
             y_coord = None
@@ -60,30 +55,30 @@ class SaveCoordsViewSet(GenericViewSet):
                     y_coord = request.data["y"]
 
             actual_device= Device.objects.get(id=device_id)
-            try:
-                cfvCoords = CustomFieldValue.objects.get(obj_type=obj_type, obj_id=actual_device.pk, field__name='coordinates')
-                cfvCoords.value = "%s;%s" % (x_coord,y_coord)
-                cfvCoords.save()
-                results["status"] = "coords set"
-            except CustomFieldValue.DoesNotExist:
-                cfvCoords = CustomFieldValue(field=cfCoords, obj_type=obj_type, obj_id=actual_device.id)
-                cfvCoords.value = "%s;%s" % (x_coord,y_coord)
-                cfvCoords.save()
-                results["status"] = "coords set for first time"
-            
+
+            if "coordinates" in actual_device.custom_field_data:
+                actual_device.custom_field_data["coordinates"] = "%s;%s" % (x_coord,y_coord)
+                actual_device.save()
+                results["status"] = "saved coords"
+            else:
+                try:
+                    actual_device.custom_field_data["coordinates"] = "%s;%s" % (x_coord,y_coord)
+                    actual_device.save()
+                    results["status"] = "saved coords"
+                except :
+                    results["status"] = "coords custom field not created"
+                    return Response(status=500)
+
             return Response(results)
         else:
             results["status"] = "not allowed to save coords"
             return Response(results, status=500)
 
-class SearchViewSet(GenericViewSet):
-    #_ignore_model_permissions = True
-    #permission_classes = [IsAuthenticatedOrLoginNotRequired]
-
+class SearchViewSet(ReadOnlyModelViewSet):
     queryset = Device.objects.all()
     serializer_class = TopologyDummySerializer
 
-    def _filter(self, site, role, name, tags):
+    def _filter(self, site, role, name, tags, region, location):
         filter_devices = Device.objects.all()
         if name is not None:
             filter_devices = filter_devices.filter(name__contains=name)
@@ -93,29 +88,44 @@ class SearchViewSet(GenericViewSet):
             filter_devices = filter_devices.filter(device_role__id__in=role)
         if tags is not None:
             filter_devices = filter_devices.filter(tags__id__in=tags)
+        if region is not None:
+            filter_devices = filter_devices.filter(site__region__id__in=region)
+        if location is not None:
+            filter_devices = filter_devices.filter(location__id__in=location)
         return filter_devices
 
 
-    @action(detail=False, methods=['post'])
+    @action(detail=False, methods=['get'])
     def search(self, request):
-        name = None
-        sites = None
-        devicerole = None
-        tags = None
-        if "devicerole" in request.data:
-            if request.data["devicerole"]:
-                devicerole = request.data["devicerole"]
-        if "sites" in request.data:
-            if request.data["sites"]:
-                sites = request.data["sites"]
-        if "name" in request.data:
-            if request.data["name"]:
-                name = request.data["name"]
-        if "tags" in request.data:
-            if request.data["tags"]:
-                tags = request.data["tags"]
+        name = request.query_params.get('name', None)
+        if name == "":
+            name = None
 
-        devices = self._filter(sites, devicerole, name, tags)
+        sites = request.query_params.getlist('sites[]', None)
+        if sites == []:
+            sites = None
+
+        devicerole = request.query_params.getlist('devicerole[]', None)
+        if devicerole == []:
+            devicerole = None
+
+        tags = request.query_params.getlist('tags[]', None)
+        if tags == []:
+            tags = None
+
+        regions = request.query_params.getlist('regions[]', None)
+        if regions == []:
+            regions = None
+
+        locations = request.query_params.getlist('locations[]', None)
+        if locations == []:
+            locations = None
+
+        hide_unconnected = request.query_params.get('hide_unconnected', None)
+        if hide_unconnected == "":
+            hide_unconnected = None
+
+        devices = self._filter(sites, devicerole, name, tags, regions, locations)
 
         nodes = []
         edges = []
@@ -124,41 +134,21 @@ class SearchViewSet(GenericViewSet):
         circuit_ids = []
         for device in devices:
             cables = device.get_cables()
-            for cable in cables:
-                if cable.termination_a_type.name != "circuit termination" and cable.termination_b_type.name != "circuit termination":
-                    if cable.id not in cable_ids:
-                        if cable.termination_a_type.name not in ignore_cable_type and cable.termination_b_type.name not in ignore_cable_type:
-                            cable_ids.append(cable.id)
-                            edge_ids += 1
-
-                            cable_a_dev_name = cable.termination_a.device.name
-                            if cable_a_dev_name is None:
-                                cable_a_dev_name = "device A name unknown"
-                            cable_a_name = cable.termination_a.name
-                            if cable_a_name is None:
-                                cable_a_name = "cable A name unknown"
-                            cable_b_dev_name = cable.termination_b.device.name
-                            if cable_b_dev_name is None:
-                                cable_b_dev_name = "device B name unknown"
-                            cable_b_name = cable.termination_b.name
-                            if cable_b_name is None:
-                                cable_b_name = "cable B name unknown"
-
-                            edge = {}
-                            edge["id"] = edge_ids
-                            edge["from"] = cable.termination_a.device.id
-                            edge["to"] = cable.termination_b.device.id
-                            edge["title"] = "Cable between <br> " + cable_a_dev_name + " [" + cable_a_name +  "]<br>" + cable_b_dev_name + " [" + cable_b_name + "]"
-                            if cable.color != "":
-                                edge["color"] = "#" + cable.color
-                            edges.append(edge)
-                else:
-                    if cable.termination_a_type.name == "circuit termination":
-                        if settings.PLUGINS_CONFIG["netbox_topology_views"]["enable_circuit_terminations"]:
-                            if cable.termination_a.circuit.id not in circuit_ids:
-                                circuit_ids.append(cable.termination_a.circuit.id)
+            if cables.exists():
+                device_has_connections = True
+                for cable in cables:
+                    if cable.termination_a_type.name != "circuit termination" and cable.termination_b_type.name != "circuit termination":
+                        if cable.id not in cable_ids:
+                            if cable.termination_a_type.name not in ignore_cable_type and cable.termination_b_type.name not in ignore_cable_type:
+                                cable_ids.append(cable.id)
                                 edge_ids += 1
 
+                                cable_a_dev_name = cable.termination_a.device.name
+                                if cable_a_dev_name is None:
+                                    cable_a_dev_name = "device A name unknown"
+                                cable_a_name = cable.termination_a.name
+                                if cable_a_name is None:
+                                    cable_a_name = "cable A name unknown"
                                 cable_b_dev_name = cable.termination_b.device.name
                                 if cable_b_dev_name is None:
                                     cable_b_dev_name = "device B name unknown"
@@ -168,89 +158,116 @@ class SearchViewSet(GenericViewSet):
 
                                 edge = {}
                                 edge["id"] = edge_ids
+                                edge["from"] = cable.termination_a.device.id
                                 edge["to"] = cable.termination_b.device.id
-                                edge["dashes"] = True
-                                title = ""
+                                edge["title"] = "Cable between <br> " + cable_a_dev_name + " [" + cable_a_name +  "]<br>" + cable_b_dev_name + " [" + cable_b_name + "]"
+                                if cable.color != "":
+                                    edge["color"] = "#" + cable.color
+                                edges.append(edge)
+                    else:
+                        if cable.termination_a_type.name == "circuit termination":
+                            if settings.PLUGINS_CONFIG["netbox_topology_views"]["enable_circuit_terminations"]:
+                                if cable.termination_a.circuit.id not in circuit_ids:
+                                    circuit_ids.append(cable.termination_a.circuit.id)
+                                    edge_ids += 1
 
-                                title += "Circuit provider: "  + cable.termination_a.circuit.provider.name + "<br>"
-                                title += "Termination between <br>"
-                                title += cable_b_dev_name + " [" + cable_b_name +  "]<br>"
-                                # To Many if's
-                                if cable.termination_a.circuit.termination_a is not None:
-                                    if cable.termination_a.circuit.termination_a.cable is not None:
-                                        if cable.termination_a.circuit.termination_a.cable.id != cable.id:
-                                            if cable.termination_a.circuit.termination_a.cable.termination_b is not None:
-                                                if cable.termination_a.circuit.termination_a.cable.termination_b.device is not None:
-                                                    edge["from"] = cable.termination_a.circuit.termination_a.cable.termination_b.device.id
+                                    cable_b_dev_name = cable.termination_b.device.name
+                                    if cable_b_dev_name is None:
+                                        cable_b_dev_name = "device B name unknown"
+                                    cable_b_name = cable.termination_b.name
+                                    if cable_b_name is None:
+                                        cable_b_name = "cable B name unknown"
 
-                                                    cable_a_dev_name = cable.termination_a.circuit.termination_a.cable.termination_b.device.name
-                                                    if cable_a_dev_name is None:
-                                                        cable_a_dev_name = "device B name unknown"
-                                                    cable_b_name = cable.termination_a.circuit.termination_a.cable.termination_b.name
-                                                    if cable_a_name is None:
-                                                        cable_a_name = "cable B name unknown"
-                                                    title += cable_a_dev_name + " [" + cable_a_name +  "]<br>"
-                                                    edge["title"] = title
-                                                    edges.append(edge)
-                                # To Many if's
-                                if cable.termination_a.circuit.termination_z is not None:
-                                    if cable.termination_a.circuit.termination_z.cable is not None:
-                                        if cable.termination_a.circuit.termination_z.cable.id != cable.id:
-                                            if cable.termination_a.circuit.termination_z.cable.termination_b is not None:
-                                                if cable.termination_a.circuit.termination_z.cable.termination_b.device is not None:
-                                                    edge["from"] = cable.termination_a.circuit.termination_z.cable.termination_b.device.id
+                                    edge = {}
+                                    edge["id"] = edge_ids
+                                    edge["to"] = cable.termination_b.device.id
+                                    edge["dashes"] = True
+                                    title = ""
 
-                                                    cable_a_dev_name = cable.termination_a.circuit.termination_z.cable.termination_b.device.name
-                                                    if cable_a_dev_name is None:
-                                                        cable_a_dev_name = "device B name unknown"
-                                                    cable_a_name = cable.termination_a.circuit.termination_z.cable.termination_b.name
-                                                    if cable_a_name is None:
-                                                        cable_a_name = "cable B name unknown"
-                                                    title += cable_a_dev_name + " [" + cable_a_name +  "]<br>"
-                                                    edge["title"] = title
-                                                    edges.append(edge)
-            dev_name = device.name
-            if dev_name is None:
-                dev_name = "device name unknown"
+                                    title += "Circuit provider: "  + cable.termination_a.circuit.provider.name + "<br>"
+                                    title += "Termination between <br>"
+                                    title += cable_b_dev_name + " [" + cable_b_name +  "]<br>"
+                                    # To Many if's
+                                    if cable.termination_a.circuit.termination_a is not None:
+                                        if cable.termination_a.circuit.termination_a.cable is not None:
+                                            if cable.termination_a.circuit.termination_a.cable.id != cable.id:
+                                                if cable.termination_a.circuit.termination_a.cable.termination_b is not None:
+                                                    if cable.termination_a.circuit.termination_a.cable.termination_b.device is not None:
+                                                        edge["from"] = cable.termination_a.circuit.termination_a.cable.termination_b.device.id
 
-            node_content = ""
+                                                        cable_a_dev_name = cable.termination_a.circuit.termination_a.cable.termination_b.device.name
+                                                        if cable_a_dev_name is None:
+                                                            cable_a_dev_name = "device B name unknown"
+                                                        cable_b_name = cable.termination_a.circuit.termination_a.cable.termination_b.name
+                                                        if cable_a_name is None:
+                                                            cable_a_name = "cable B name unknown"
+                                                        title += cable_a_dev_name + " [" + cable_a_name +  "]<br>"
+                                                        edge["title"] = title
+                                                        edges.append(edge)
+                                    # To Many if's
+                                    if cable.termination_a.circuit.termination_z is not None:
+                                        if cable.termination_a.circuit.termination_z.cable is not None:
+                                            if cable.termination_a.circuit.termination_z.cable.id != cable.id:
+                                                if cable.termination_a.circuit.termination_z.cable.termination_b is not None:
+                                                    if cable.termination_a.circuit.termination_z.cable.termination_b.device is not None:
+                                                        edge["from"] = cable.termination_a.circuit.termination_z.cable.termination_b.device.id
 
-            if device.device_type.display_name is not None:
-                node_content += "<tr><th>Type: </th><td>" + device.device_type.display_name + "</td></tr>"
-            if device.device_role.name is not None:
-                node_content +=  "<tr><th>Role: </th><td>" + device.device_role.name + "</td></tr>"
-            if device.serial != "":
-                node_content += "<tr><th>Serial: </th><td>" + device.serial + "</td></tr>"
-            if device.primary_ip is not None:
-                node_content += "<tr><th>IP Address: </th><td>" + str(device.primary_ip.address) + "</td></tr>"
-
-            dev_title = "<table> %s </table>" % (node_content)
-
-            node = {}
-            node["id"] = device.id
-            node["name"] = dev_name
-            node["label"] = dev_name
-            node["title"] = dev_title
-            node["shape"] = 'image'
-            if device.device_role.slug in settings.PLUGINS_CONFIG["netbox_topology_views"]["device_img"]:
-                node["image"] = '../../static/netbox_topology_views/img/'  + device.device_role.slug + ".png"
+                                                        cable_a_dev_name = cable.termination_a.circuit.termination_z.cable.termination_b.device.name
+                                                        if cable_a_dev_name is None:
+                                                            cable_a_dev_name = "device B name unknown"
+                                                        cable_a_name = cable.termination_a.circuit.termination_z.cable.termination_b.name
+                                                        if cable_a_name is None:
+                                                            cable_a_name = "cable B name unknown"
+                                                        title += cable_a_dev_name + " [" + cable_a_name +  "]<br>"
+                                                        edge["title"] = title
+                                                        edges.append(edge)
             else:
-                node["image"] = "../../static/netbox_topology_views/img/role-unknown.png"
+                device_has_connections = False
 
-            if device.device_role.color != "":
-                node["color.border"] = "#" + device.device_role.color
+            if hide_unconnected == 'false' or (hide_unconnected == 'true' and device_has_connections is True):  
+                dev_name = device.name
+                if dev_name is None:
+                    dev_name = "device name unknown"
 
-            for device_custom_field in device.custom_field_values.all():
-                if device_custom_field.field.name == "coordinates":
-                    cords =  device_custom_field.serialized_value.split(";")
-                    node["x"] = int(cords[0])
-                    node["y"] = int(cords[1])
-                    node["physics"] = False
-            
-            nodes.append(node)
+                node_content = ""
+
+                if device.device_type.display_name is not None:
+                    node_content += "<tr><th>Type: </th><td>" + device.device_type.display_name + "</td></tr>"
+                if device.device_role.name is not None:
+                    node_content +=  "<tr><th>Role: </th><td>" + device.device_role.name + "</td></tr>"
+                if device.serial != "":
+                    node_content += "<tr><th>Serial: </th><td>" + device.serial + "</td></tr>"
+                if device.primary_ip is not None:
+                    node_content += "<tr><th>IP Address: </th><td>" + str(device.primary_ip.address) + "</td></tr>"
+
+                dev_title = "<table> %s </table>" % (node_content)
+
+                node = {}
+                node["id"] = device.id
+                node["name"] = dev_name
+                node["label"] = dev_name
+                node["title"] = dev_title
+                node["shape"] = 'image'
+                if device.device_role.slug in settings.PLUGINS_CONFIG["netbox_topology_views"]["device_img"]:
+                    node["image"] = '../../static/netbox_topology_views/img/'  + device.device_role.slug + ".png"
+                else:
+                    node["image"] = "../../static/netbox_topology_views/img/role-unknown.png"
+
+                if device.device_role.color != "":
+                    node["color.border"] = "#" + device.device_role.color
+
+                if "coordinates" in device.custom_field_data:
+                    if device.custom_field_data["coordinates"] != "":
+                        cords =  device.custom_field_data["coordinates"].split(";")
+                        node["x"] = int(cords[0])
+                        node["y"] = int(cords[1])
+                        node["physics"] = False
+                
+                nodes.append(node)
 
         results = {}
         results["nodes"] = nodes
         results["edges"] = edges
 
         return Response(results)
+ 

netbox_topology_views/static_dev/js/full.js

@@ -0,0 +1,33 @@
+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];
+    }
+});
+}

netbox_topology_views/static_dev/js/home.js

@@ -1,5 +1,8 @@
 var graph = null;
 var container = null;
+var downloadButton = null;
+var MIME_TYPE = "image/png";
+var canvas = null;
 var csrftoken = null;
 var nodes = new vis.DataSet();
 var edges = new vis.DataSet();
@@ -29,6 +32,8 @@ var options = {
         solver: 'forceAtlas2Based'
     }
 };
+var selected_regions = [];
+var selected_sites = [];
 
 function iniPlotboxIndex() {
     document.addEventListener('DOMContentLoaded', function () {
@@ -36,6 +41,8 @@ function iniPlotboxIndex() {
         csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
         startLoadSearchBar();
         handleButtonPress();
+        downloadButton = document.getElementById('btnDownloadImage');
+        btnFullView = document.getElementById('btnFullView');
     }, false);
 }
 
@@ -73,11 +80,23 @@ function startLoadSearchBar() {
         theme: "bootstrap",
         multiple: true,
         ajax: {
-            url: "../../api/dcim/sites/?brief=true",
+            url: function (params) { 
+                var base_url = "../../api/dcim/sites/?brief=true";
+                if (selected_regions.length == 0) {
+                    return base_url;
+                }
+                else {
+                    for (var i = 0; i < selected_regions.length; i++) {
+                        var tmp = "&region_id=" + selected_regions[i];
+                        base_url = base_url + tmp;
+                    }
+                    return base_url;
+                }
+
+            },
             dataType: "json",
             type: "GET",
             data: function (params) {
-
                 var queryParameters = {
                     q: params.term
                 }
@@ -95,6 +114,25 @@ function startLoadSearchBar() {
             }
         }
     });
+
+    $('#sites').on('select2:select', function (e) {
+        var data = e.params.data;
+        var index = selected_sites.indexOf(data.id.toString());
+        if (index == -1) {
+            selected_sites.push(data.id.toString());
+        }
+    });
+    $('#sites').on('select2:unselect', function (e) {
+        var data = e.params.data;
+        var index = selected_sites.indexOf(data.id.toString());
+        if (index > -1) {
+            selected_sites.splice(index, 1);
+          }
+    });
+    $('#sites').on('select2:clear', function (e) {
+        selected_sites = [];
+    });
+
     $('#tags').select2({
         allowClear: true,
         placeholder: "---------",
@@ -122,6 +160,93 @@ function startLoadSearchBar() {
             }
         }
     });
+    $('#regions').select2({
+        allowClear: true,
+        placeholder: "---------",
+        theme: "bootstrap",
+        multiple: true,
+        ajax: {
+            url: "../../api/dcim/regions/?brief=true",
+            dataType: "json",
+            type: "GET",
+            data: function (params) {
+                var queryParameters = {
+                    q: params.term
+                }
+                return queryParameters;
+            },
+            processResults: function (data) {
+                return {
+                    results: $.map(data.results, function (item) {
+                        return {
+                            text: item.name,
+                            id: item.id
+                        }
+                    })
+                };
+            }
+        }
+    });
+
+    $('#regions').on('select2:select', function (e) {
+        var data = e.params.data;
+        var index = selected_regions.indexOf(data.id.toString());
+        if (index == -1) {
+            selected_regions.push(data.id.toString());
+        }
+    });
+    $('#regions').on('select2:unselect', function (e) {
+        var data = e.params.data;
+        var index = selected_regions.indexOf(data.id.toString());
+        if (index > -1) {
+            selected_regions.splice(index, 1);
+          }
+    });
+    $('#regions').on('select2:clear', function (e) {
+         selected_regions = [];
+    });
+
+    $('#locations').select2({
+        allowClear: true,
+        placeholder: "---------",
+        theme: "bootstrap",
+        multiple: true,
+        ajax: {
+            url: function (params) { 
+                var base_url = "../../api/dcim/locations/?brief=true";
+                if (selected_sites.length == 0) {
+                    return base_url;
+                }
+                else {
+                    for (var i = 0; i < selected_sites.length; i++) {
+                        var tmp = "&site_id=" + selected_sites[i];
+                        base_url = base_url + tmp;
+                    }
+                    return base_url;
+                }
+
+            },
+            dataType: "json",
+            type: "GET",
+            data: function (params) {
+                var queryParameters = {
+                    q: params.term
+                }
+                return queryParameters;
+            },
+            processResults: function (data) {
+                return {
+                    results: $.map(data.results, function (item) {
+                        return {
+                            text: item.name,
+                            id: item.id
+                        }
+                    })
+                };
+            }
+        }
+    });
+
 
     var deviceRolesSelect = $('#device-roles');
     $.ajax({
@@ -166,19 +291,33 @@ function handleButtonPress() {
         var value2 = $("#device-roles").val();
         var value3 = $("#sites").val();
         var value4 = $("#tags").val();
+        var value5 = $("#regions").val();
+        var value6 = $('#checkHideUnconnected').is(":checked");
+        var value7 = $("#locations").val();
         $.ajax({
-            type: "POST",
+            type: "GET",
             url: "../../api/plugins/topology-views/search/search/",
-            data: JSON.stringify({
+            data: {
                 'name': value,
-                'devicerole': value2,
-                'sites': value3,
-                'tags': value4
-            }),
+                'devicerole[]': value2,
+                'sites[]': value3,
+                'tags[]': value4,
+                'regions[]': value5,
+                'hide_unconnected': value6,
+                'locations[]': value7
+            },
             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();
@@ -191,9 +330,13 @@ function handleButtonPress() {
                     edges.add(edge);
                 });
                 graph.fit();
+                canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
 
                 graph.on('afterDrawing', function () {
                     $("#status").html('<span class="label label-success">Ready</span>');
+                    var image = canvas.toDataURL(MIME_TYPE);
+                    downloadButton.href = image;
+                    downloadButton.download = "topology";
                 });
 
                 graph.on("dragEnd", function (params) {
@@ -204,10 +347,11 @@ function handleButtonPress() {
                             //nodes.update({ id: node_id, physics: false });
                             $.ajax({
                                 url: "../../api/plugins/topology-views/save-coords/save_coords/",
-                                type: 'POST',
+                                type: 'PATCH',
                                 dataType: 'json',
                                 headers: { "X-CSRFToken": csrftoken },
                                 contentType: "application/json; charset=utf-8",
+                                processData: false,
                                 data: JSON.stringify({
                                     'node_id': node_id,
                                     'x': coordinates.x,
@@ -223,6 +367,7 @@ function handleButtonPress() {
                         }
                     });
                 });
+
             },
             error: function (error_result) {
                 $("#status").html('<span class="label label-warning">Something went wrong</span>');

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.5.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

@@ -12,6 +12,14 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">
 				<strong>Network</strong>  <span id="status"></span>
+				<div class="buttons pull-right">
+					<a id="btnDownloadImage" class="btn btn-xs btn-info">
+						<i class="mdi mdi-download"></i>
+					</a>
+					<a id="btnFullView" class="btn btn-xs btn-info disabled" target="_blank">
+						<i class="mdi mdi-share"></i>
+					</a>
+				</div>
 			</div>
 			<div class="panel-body">
 				<div id="visgraph" class=""></div>
@@ -33,14 +41,28 @@
                     <div class="form-group">
                         <label for="device-roles">Device roles</label>
                         <select class="form-control" multiple="multiple" id="device-roles"></select>
+                    </div>
+					<div class="form-group">
+                        <label for="regions">Regions</label>
+                        <select class="form-control" multiple="multiple" id="regions"></select>
                     </div>
                     <div class="form-group">
                         <label for="sites">Sites</label>
                         <select class="form-control" multiple="multiple" id="sites"></select>
 					</div>
 					<div class="form-group">
+                        <label for="locations">Locations</label>
+                        <select class="form-control" multiple="multiple" id="locations"></select>
+					</div>
+					<div class="form-group">
                         <label for="tags">Tags</label>
                         <select class="form-control" multiple="multiple" id="tags"></select>
+					</div>
+					<div class="form-group">
+                        <div class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" id="checkHideUnconnected">
+							<label class="custom-control-label" for="checkHideUnconnected">Hide Unconnected</label>
+						</div>
                     </div>
 					<hr class="mb-4">
 					<button class="btn btn-primary btn-lg btn-block" type="submit" id="start-search">Search</button>

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

@@ -9,4 +9,13 @@ class TopologyHomeView(PermissionRequiredMixin, View):
     Show the home page
     """
     def get(self, request):        
-        return render(request, 'netbox_topology_views/index.html')
+        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')

package.json

@@ -1,18 +1,26 @@
 {
   "private": true,
   "name": "netbox_topology_views",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "scripts": {
     "resources": "gulp build",
     "resources_dev": "gulp build_dev"
   },
   "dependencies": {},
   "devDependencies": {
+    "@egjs/hammerjs": "^2.0.0",
     "gulp": "^4.0.2",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^4.1.0",
     "gulp-uglify": "^3.0.2",
-    "vis-network": "^7.6.4"
-  }
+    "keycharm": "^0.3.0",
+    "moment": "^2.24.0",
+    "timsort": "^0.3.0",
+    "uuid": "7.0.0",
+    "vis-data": "^6.2.1",
+    "vis-network": "^7.10.2",
+    "vis-util": "^4.0.0"
+  },
+  "peerDependencies": {}
 }

setup.py

@@ -3,7 +3,7 @@ from setuptools import setup, find_packages
 
 setup(
     name='netbox-topology-views',
-    version='0.4.8',
+    version='0.5.1',
     description='An NetBox plugin to create Topology maps',
     url='https://github.com/mattieserver/netbox-topology-views',
     author='Mattijs Vanhaverbeke',