bump version

* added extra fields to popup

* open new tab with device info

.github/workflows/docker-publish.yml

@@ -0,0 +1,93 @@
+name: Docker
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  schedule:
+    - cron: '35 10 * * *'
+  push:
+    branches: [ "master" ]
+    # Publish semver tags as releases.
+    tags: [ 'v*.*.*' ]
+  pull_request:
+    branches: [ "master" ]
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@7e0881f8fe90b25e305bbf0309761e9314607e25
+        with:
+          cosign-release: 'v1.9.0'
+
+
+      # Workaround: https://github.com/docker/build-push-action/issues/461
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@79abd3f86f79a9d68a23c75a09a9a85889262adf
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@28218f9b04b4f3f62068d7b6ce6ca5b26e35336c
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@ac9327eae2b366085ac7f6a2d02df8aa8ead720a
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          COSIGN_EXPERIMENTAL: "true"
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: cosign sign ${{ steps.meta.outputs.tags }}@${{ steps.build-and-push.outputs.digest }}

.github/workflows/pythonpublish.yml

@@ -5,7 +5,7 @@ name: Upload Python Package
 
 on:
   release:
-    types: [created]
+    types: [published]
 
 jobs:
   deploy:
@@ -13,19 +13,19 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Set up Python
-      uses: actions/setup-python@v1
+      uses: actions/setup-python@v3
       with:
         python-version: '3.x'
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
-        pip install setuptools wheel twine
-    - name: Build and publish
-      env:
-        TWINE_USERNAME: ${{ secrets.PYPI_USERNAME }}
-        TWINE_PASSWORD: ${{ secrets.PYPI_PASSWORD }}
-      run: |
-        python setup.py sdist bdist_wheel
-        twine upload dist/*
+        pip install build
+    - name: Build package
+      run: python -m build
+    - name: Publish package
+      uses: pypa/gh-action-pypi-publish@27b31702a0e7fc50959f5ad993c78deac1bdfc29
+      with:
+        user: __token__
+        password: ${{ secrets.PYPI_API_TOKEN }}

Dockerfile

@@ -0,0 +1,4 @@
+FROM netboxcommunity/netbox:latest
+
+COPY ./docker/plugin_requirements.txt /
+RUN /opt/netbox/venv/bin/pip install  --no-warn-script-location -r /plugin_requirements.txt

README.md

@@ -8,7 +8,7 @@ Support to filter on name, site, tag and device role.
 
 ## Preview
 
-![preview image](doc/img/preview.png?raw=true "preview")
+![preview image](doc/img/preview_3.1.jpeg?raw=true "preview")
 
 ## Install
 
@@ -35,6 +35,8 @@ Then run `python3 manage.py collectstatic --no-input`
 
 | netbox version        | netbox-topology-views version          |
 | ------------- |-------------|
+| >= 3.2.0 | >= v1.1.0 |
+| >= 3.1.8 | >= v1.0.0 |
 | >= 2.11.1 | >= v0.5.3 |
 | >= 2.10.0 | >= v0.5.0 |
 | < 2.10.0 | =< v0.4.10 |
@@ -55,20 +57,22 @@ Example:
 ```
 PLUGINS_CONFIG = {
     'netbox_topology_views': {
-        'device_img': 'router,switch,firewall',
-        'preselected_device_roles': 'Router, Firewall'
+        'device_img': ['router','switch', 'firewall'],
+        'preselected_device_roles': ['Router', 'Firewall']
     }
 }
 ```
 
 | Setting        | Default value           | Description  |
 | ------------- |-------------| -----|
-| device_img      | 'access-switch,core-switch,firewall,router,distribution-switch,backup,storage,wan-network,wireless-ap,server,internal-switch,isp-cpe-material,non-racked-devices,power-units' | The slug of the device roles that you have a image for. |
-| preselected_device_roles      | 'Firewall,Router,Distribution Switch,Core Switch,Internal Switch,Access Switch,Server,Storage,Backup,Wireless AP' | The full name of the device roles you want to pre select in the global view.  Note that this is case sensitive|
+| device_img      |['access-switch', 'core-switch', 'firewall', 'router', 'distribution-switch', 'backup', 'storage,wan-network', 'wireless-ap', 'server', 'internal-switch', 'isp-cpe-material', 'non-racked-devices', 'power-units'] | The slug of the device roles that you have a image for. |
+| preselected_device_roles      | ['Firewall', 'Router', 'Distribution Switch', 'Core Switch', 'Internal Switch', 'Access Switch', 'Server', 'Storage', 'Backup', 'Wireless AP'] | The full name of the device roles you want to pre select in the global view.  Note that this is case sensitive|
+| preselected_intermediate_dev_roles      | ['Patch-panel'] | The full name of the device roles you want to display in the global view when using end-to-end connections mode.  Note that this is case sensitive|
 | allow_coordinates_saving      | False | (bool) Set to true if you use the custom coordinates fields and want to save the coordinates |
-| ignore_cable_type      | 'power outlet,power port' | The cable types that you want to ignore in the views  |
-| preselected_tags      | '' | The name of tags you want to preload  |
+| ignore_cable_type      | ['power outlet', 'power port'] | The cable types that you want to ignore in the views  |
+| preselected_tags      | '[]' | The name of tags you want to preload  |
 | enable_circuit_terminations      | False  | (bool) Set to true if you want to see circuit terminations in the topology  |
+| draw_default_layout | False | (bool) Set to True if you want to load draw the topology on the initial load (when you go to the topology plugin page) |
 
 ### Custom Images
 
@@ -78,7 +82,7 @@ If you add your own image you also need to add the slug to the `device_img` sett
 
 ## Use
 
-Go to the plugins tab in the navbar and click topology or go to `$NETBOX_URL/plugins/topology-views/` to view your topologies
+Go to the plugins tab in the navbar and click topology or go to `$NETBOX_URL/plugins/netbox_topology_views/` to view your topologies
 
 ### Update
 

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+
+| Version | Supported          |
+| ------- | ------------------ |
+| > 2.0   | :white_check_mark: |
+| < 2.0   | :x:                |
+
+## Reporting a Vulnerability
+
+Please create an issue when you encounter a Security issue.

docker/plugin_requirements.txt

@@ -0,0 +1 @@
+netbox-topology-views

netbox_topology_views/__init__.py

@@ -4,18 +4,21 @@ class TopologyViewsConfig(PluginConfig):
     name = 'netbox_topology_views'
     verbose_name = 'Topology views'
     description = 'An plugin to render topology maps'
-    version = '0.5.3'
+    version = '2.0.2'
     author = 'Mattijs Vanhaverbeke'
     author_email = 'author@example.com'
-    base_url = 'topology-views'
+    base_url = 'netbox_topology_views'
     required_settings = []
     default_settings = {
-        'preselected_device_roles': 'Firewall,Router,Distribution Switch,Core Switch,Internal Switch,Access Switch,Server,Storage,Backup,Wireless AP',
-        'ignore_cable_type': 'power outlet,power port',
-        'device_img': 'access-switch,core-switch,firewall,router,distribution-switch,backup,storage,wan-network,wireless-ap,server,internal-switch,isp-cpe-material,non-racked-devices,power-units',
+        'preselected_device_roles': ['Firewall', 'Router', 'Distribution Switch', 'Core Switch', 'Internal Switch', 'Access Switch', 'Server', 'Storage', 'Backup', 'Wireless AP'],
+        'preselected_intermediate_dev_roles' : [],
+        'end2end_connections': False,
+        'ignore_cable_type': ['power outlet','power port'],
+        'device_img': ['access-switch', 'core-switch', 'firewall', 'router', 'distribution-switch', 'backup', 'storage', 'wan-network', 'wireless-ap', 'server', 'internal-switch', 'isp-cpe-material', 'non-racked-devices', 'power-units'],
         'allow_coordinates_saving': False,
-        'preselected_tags' : '',
-        'enable_circuit_terminations': False
+        'preselected_tags' : [],
+        'enable_circuit_terminations': False,
+        'draw_default_layout': False
     }
 
 config = TopologyViewsConfig

netbox_topology_views/admin.py

@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-#no models yet

netbox_topology_views/api/serializers.py

@@ -3,18 +3,6 @@ from rest_framework.serializers import ModelSerializer
 from dcim.models import DeviceRole, Device
 from extras.models import Tag
 
-class PreDeviceRoleSerializer(ModelSerializer):
-
-    class Meta:
-        model = DeviceRole
-        fields = ('id', 'name')
-
-class PreTagSerializer(ModelSerializer):
-
-    class Meta:
-        model = Tag
-        fields = ('id', 'name')
-        
 
 class TopologyDummySerializer(ModelSerializer):
 

netbox_topology_views/api/urls.py

@@ -1,13 +1,8 @@
-from netbox.api import OrderedDefaultRouter
+from rest_framework import routers
 from . import views
 
-router = OrderedDefaultRouter()
-router.APIRootView = views.TopologyViewsRootView
+router = routers.DefaultRouter()
 
-
-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

@@ -4,7 +4,7 @@ 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 .serializers import TopologyDummySerializer
 from django.conf import settings
 
 from dcim.models import  DeviceRole, Device, Cable
@@ -12,26 +12,10 @@ from circuits.models import Circuit
 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(",")
-
-preselected_device_roles_raw = settings.PLUGINS_CONFIG["netbox_topology_views"]["preselected_device_roles"]
-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)
-    serializer_class = PreDeviceRoleSerializer
-
-class PreSelectTagsViewSet(ReadOnlyModelViewSet):
-    queryset = Tag.objects.filter(name__in=preselected_tags)
-    serializer_class = PreTagSerializer
 
 class SaveCoordsViewSet(ReadOnlyModelViewSet):
     queryset = Device.objects.all()
@@ -74,200 +58,3 @@ class SaveCoordsViewSet(ReadOnlyModelViewSet):
             results["status"] = "not allowed to save coords"
             return Response(results, status=500)
 
-class SearchViewSet(ReadOnlyModelViewSet):
-    queryset = Device.objects.all()
-    serializer_class = TopologyDummySerializer
-
-    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)
-        if site is not None:
-            filter_devices = filter_devices.filter(site__id__in=site)
-        if role is not None:
-            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=['get'])
-    def search(self, request):
-        name = request.query_params.get('name', None)
-        if name == "":
-            name = None
-
-        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 = []
-        edge_ids = 0
-        cable_ids = []
-        circuit_ids = []
-        for device in devices:
-            cables = device.get_cables()
-            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"
-                                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)
-                                    edge_ids += 1
-
-                                    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["to"] = cable.termination_b.device.id
-                                    edge["dashes"] = True
-                                    title = ""
-
-                                    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_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
-
-                                                        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:
-                device_has_connections = False
-
-            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"
-
-                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/filters.py

@@ -0,0 +1,59 @@
+from cProfile import label
+import django_filters
+from django.db.models import Q
+
+from dcim.models import Device, DeviceRole, Region, Site, Location
+from dcim.choices import DeviceStatusChoices
+
+from netbox.filtersets import NetBoxModelFilterSet
+
+from tenancy.models import TenantGroup, Tenant
+from tenancy.filtersets import TenancyFilterSet
+
+from utilities.filters import TreeNodeMultipleChoiceFilter
+
+
+class DeviceFilterSet(TenancyFilterSet, NetBoxModelFilterSet):
+    q = django_filters.CharFilter(
+        method='search',
+        label='Search',
+    )
+    device_role_id = django_filters.ModelMultipleChoiceFilter(
+        field_name='device_role_id',
+        queryset=DeviceRole.objects.all(),
+        label='Role (ID)',
+    )
+    region_id = TreeNodeMultipleChoiceFilter(
+        queryset=Region.objects.all(),
+        field_name='site__region',
+        lookup_expr='in',
+        label='Region (ID)',
+    )
+    site_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Site.objects.all(),
+        label='Site (ID)',
+    )
+    location_id = TreeNodeMultipleChoiceFilter(
+        queryset=Location.objects.all(),
+        field_name='location',
+        lookup_expr='in',
+        label='Location (ID)',
+    )
+    status = django_filters.MultipleChoiceFilter(
+        choices=DeviceStatusChoices,
+        null_value=None
+    )
+
+
+    class Meta:
+        model = Device
+        fields = ['id', 'name']
+
+    def search(self, queryset, name, value):
+        """Perform the filtered search."""
+        if not value.strip():
+            return queryset
+        qs_filter = (
+             Q(name__icontains=value) 
+        )
+        return queryset.filter(qs_filter)

netbox_topology_views/forms.py

@@ -0,0 +1,86 @@
+from cProfile import label
+import imp
+from django import forms
+from django.conf import settings
+
+from django.utils.translation import gettext as _
+
+from dcim.models import Device, Site, Region, DeviceRole, Location
+
+from django import forms
+from dcim.choices import DeviceStatusChoices
+from tenancy.models import TenantGroup, Tenant
+from tenancy.forms import TenancyFilterForm
+from django.conf import settings
+from netbox.forms import NetBoxModelFilterSetForm
+from utilities.forms import (TagFilterField, DynamicModelMultipleChoiceField, MultipleChoiceField)
+
+allow_coordinates_saving = settings.PLUGINS_CONFIG["netbox_topology_views"]["allow_coordinates_saving"]
+end2end = settings.PLUGINS_CONFIG["netbox_topology_views"]["end2end_connections"]
+
+
+class DeviceFilterForm(TenancyFilterForm, NetBoxModelFilterSetForm):
+    model = Device
+    fieldsets = (
+        (None, ('q', 'hide_unconnected', 'save_coords', 'end2end_connections')),
+        (None, ('tenant_group_id', 'tenant_id')),
+        (None, ('region_id', 'site_id', 'location_id')),
+        (None, ('device_role_id', 'intermediate_dev_role_id')),
+        (None, ('tag', 'status')),
+    )
+
+    region_id = DynamicModelMultipleChoiceField(
+        queryset=Region.objects.all(),
+        required=False,
+        label=_('Region')
+    )
+    device_role_id = DynamicModelMultipleChoiceField(
+        queryset=DeviceRole.objects.all(),
+        required=False,
+        label=_('Device Role')
+    )
+    end2end_connections = forms.BooleanField(
+        label=_("Display end-to-end connections"),
+        required=False,
+        initial=end2end
+    )
+    intermediate_dev_role_id = DynamicModelMultipleChoiceField(
+        queryset=DeviceRole.objects.all(),
+        required=False,
+        label=_('Intermediate Devices Role'),
+        help_text='Intermediate devices to display when using end-to-end connections mode, even if they do not match the query'
+    )
+    site_id = DynamicModelMultipleChoiceField(
+        queryset=Site.objects.all(),
+        required=False,
+        query_params={
+            'region_id': '$region_id',
+        },
+        label=_('Site')
+    )
+    location_id = DynamicModelMultipleChoiceField(
+        queryset=Location.objects.all(),
+        required=False,
+        query_params={
+            'region_id': '$region_id',
+            'site_id': '$site_id',
+        },
+        label=_('Location')
+    )
+    hide_unconnected = forms.BooleanField(
+        label=_("Hide Unconnected"),
+        required=False,
+        initial=False
+    )
+    save_coords = forms.BooleanField(
+        label=_("Save Coordinates"),
+        required=False,
+        disabled=(not allow_coordinates_saving),
+        initial=False
+    )
+    status = MultipleChoiceField(
+        choices=DeviceStatusChoices,
+        required=False,
+        label=_("Device Status")
+    )
+    tag = TagFilterField(model)

netbox_topology_views/models.py

@@ -1,3 +0,0 @@
-from django.db import models
-
-# no modeles yet

netbox_topology_views/navigation.py

@@ -4,7 +4,6 @@ from utilities.choices import ButtonColorChoices
 menu_items = (
     PluginMenuItem(
         link='plugins:netbox_topology_views:home',
-        link_text='Topology',
-        buttons=()
+        link_text='Topology'
     ),
-)
+)

netbox_topology_views/static/netbox_topology_views/css/app.css

@@ -1 +1 @@
-#visgraph{height:70vh}
+#visgraph{height:70vh}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529}

netbox_topology_views/static_dev/css/app.scss

@@ -1,3 +1,7 @@
 #visgraph {
     height: 70vh;
   }
+
+html[data-netbox-color-mode=dark] #visgraph {
+  background-color: #212529;
+}

netbox_topology_views/static_dev/js/full.js

@@ -1,33 +0,0 @@
-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

@@ -27,6 +27,9 @@ var options = {
         font: {
             face: 'helvetica',
         },
+        shadow: {
+            enabled: true
+        }
     },
     physics: {
         solver: 'forceAtlas2Based'
@@ -34,344 +37,125 @@ var options = {
 };
 var selected_regions = [];
 var selected_sites = [];
+var coord_save_checkbox = null;
+var htmlElement = null;
+
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+
+function htmlTitle(html) {
+    container = document.createElement("div");
+    container.innerHTML = html;
+    return container;
+  }
+
+function addEdge(item) {
+    item.title = htmlTitle( item.title );
+    edges.add(item);
+}
+
+function addNode(item) {
+    item.title = htmlTitle( item.title );
+    nodes.add(item);
+}
 
 function iniPlotboxIndex() {
     document.addEventListener('DOMContentLoaded', function () {
+        csrftoken = getCookie('csrftoken');
         container = document.getElementById('visgraph');
-        csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
-        startLoadSearchBar();
-        handleButtonPress();
+        htmlElement = document.getElementsByTagName("html")[0];
         downloadButton = document.getElementById('btnDownloadImage');
+        handleLoadData();
         btnFullView = document.getElementById('btnFullView');
+        coord_save_checkbox = document.getElementById('id_save_coords');
     }, false);
 }
 
-function startLoadSearchBar() {
-    $('#device-roles').select2({
-        allowClear: true,
-        placeholder: "---------",
-        theme: "bootstrap",
-        multiple: true,
-        ajax: {
-            url: "../../api/dcim/device-roles/?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
-                        }
-                    })
-                };
-            }
-        }
-    });
-    $('#sites').select2({
-        allowClear: true,
-        placeholder: "---------",
-        theme: "bootstrap",
-        multiple: true,
-        ajax: {
-            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;
-                }
+function performGraphDownload() {
+    var tempDownloadLink = document.createElement('a');
+    var generatedImageUrl = canvas.toDataURL(MIME_TYPE);
 
-            },
-            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
-                        }
-                    })
-                };
-            }
-        }
-    });
-
-    $('#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: "---------",
-        theme: "bootstrap",
-        multiple: true,
-        ajax: {
-            url: "../../api/extras/tags/?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').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({
-        type: 'GET',
-        url: '../../api/plugins/topology-views/preselectdeviceroles/'
-    }).then(function (data) {
-        $.each(data.results, function (index, device_role_to_preload) {
-            var option = new Option(device_role_to_preload.name, device_role_to_preload.id, true, true);
-            deviceRolesSelect.append(option).trigger('change');
-            deviceRolesSelect.trigger({
-                type: 'select2:select',
-                params: {
-                    data: device_role_to_preload
-                }
-            });
-        });
-    });
-
-    var tagsSelect = $('#tags');
-    $.ajax({
-        type: 'GET',
-        url: '../../api/plugins/topology-views/preselecttags/'
-    }).then(function (data) {
-        $.each(data.results, function (index, tags_to_preload) {
-            var option = new Option(tags_to_preload.name, tags_to_preload.id, true, true);
-            tagsSelect.append(option).trigger('change');
-            tagsSelect.trigger({
-                type: 'select2:select',
-                params: {
-                    data: tags_to_preload
-                }
-            });
-        });
-    });
+    tempDownloadLink.href = generatedImageUrl;
+    tempDownloadLink.download = "topology";
+    document.body.appendChild(tempDownloadLink);
+    tempDownloadLink.click();
+    document.body.removeChild(tempDownloadLink);
 }
 
-function handleButtonPress() {
-    $("#search-form").submit(function (event) {
-        $("#status").html('<span class="label  label-info">Loading data</span>');
-        event.preventDefault();
-        var value = $("#name").val();
-        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: "GET",
-            url: "../../api/plugins/topology-views/search/search/",
-            data: {
-                'name': value,
-                '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",
-            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
+function handleLoadData() {
+    if (topology_data !== null) {
+        
+        if (htmlElement.dataset.netboxColorMode == "dark") {
+            options.nodes.font.color = "#fff";
+        }
 
-                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();
-                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('visgraph').getElementsByTagName('canvas')[0];
+        graph = null;
+        nodes = new vis.DataSet();
+        edges = new vis.DataSet();
+        graph = new vis.Network(container, { nodes: nodes, edges: edges }, options);
+        
+        topology_data.edges.forEach(addEdge);
+        topology_data.nodes.forEach(addNode);
 
-                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.fit();
+        canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
 
-                graph.on("dragEnd", function (params) {
-                    dragged = this.getPositions(params.nodes);
-                    $.each(dragged, function (node_id, coordinates) {
-                        $("#coordstatus").html('');
-                        if ($('#checkSaveCoordinates').is(":checked")) {
-                            //nodes.update({ id: node_id, physics: false });
-                            $.ajax({
-                                url: "../../api/plugins/topology-views/save-coords/save_coords/",
-                                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,
-                                    'y': coordinates.y
-                                }),
-                                error: function (error_result) {
-                                    $("#coordstatus").html('<span class="label label-warning">Failed to update coordinates</span>');
-                                },
-                                success: function (data_result) {
-                                    $("#coordstatus").html('<span class="label label-success">Updated coordinates</span>');
-                                },
-                            });
-                        }
-                    });
-                });
+        downloadButton.onclick = function(e) { performGraphDownload(); return false; };
 
-            },
-            error: function (error_result) {
-                $("#status").html('<span class="label label-warning">Something went wrong</span>');
-            },
+        graph.on("dragEnd", function (params) {
+            dragged = this.getPositions(params.nodes);
+
+            if (coord_save_checkbox.checked) {
+                if (Object.keys(dragged).length !== 0) {
+                    for (dragged_device in dragged) {
+                        var node_id = dragged_device;
+
+                        var url = "/api/plugins/netbox_topology_views/save-coords/save_coords/";
+                        var xhr = new XMLHttpRequest();
+                        xhr.open("PATCH", url);
+                        xhr.setRequestHeader('X-CSRFToken', csrftoken );
+                        xhr.setRequestHeader("Accept", "application/json");
+                        xhr.setRequestHeader("Content-Type", "application/json");
+    
+                        xhr.onreadystatechange = function () {
+                        if (xhr.readyState === 4) {
+                            console.log(xhr.status);
+                            console.log(xhr.responseText);
+                        }};
+    
+                        var data = JSON.stringify({
+                            'node_id': node_id,
+                            'x': dragged[node_id].x,
+                            'y': dragged[node_id].y});
+    
+                        xhr.send(data);
+                    }
+                }
+            }
         });
-    });
+
+        graph.on("doubleClick", function (params) {
+            console.log(params.nodes);
+            selected_devices = params.nodes;
+            for (selected_device in selected_devices) {
+                url = "/dcim/devices/" + selected_devices[selected_device] + "/";
+                window.open(url, "_blank");
+            }
+
+        });
+    }
 }

netbox_topology_views/templates/netbox_topology_views/full.html

@@ -1,24 +0,0 @@
-{% 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

@@ -1,103 +1,75 @@
-{% extends 'base.html' %}
+{% extends 'base/layout.html' %}
+{% load buttons %}
+{% load render_table from django_tables2 %}
 {% load static %}
+{% load perms %}
 {% load helpers %}
 
-{% block content %}
-{% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
+{% block title %}Topology Views{% endblock %}
+
+{% block head %}
 <link rel="stylesheet" href="{% static 'netbox_topology_views/css/vendor.css' %}">
 <link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">
+{% endblock %} 
 
-<div class="row ">
-	<div class="col-md-9">
-		<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>
-			</div>
-		</div>
+{% block controls %}
+  <div class="controls">
+    	<div class="control-group">
+			{% block extra_controls %}{% endblock %}
+			<a id="btnDownloadImage" class="btn btn-sm btn-info" href="#">
+				<i class="mdi mdi-download"></i>
+				Download
+			</a>
+    	</div>
 	</div>
-	<div class="col-md-3">
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<strong>Search</strong> 
-			</div>
-			<div class="panel-body">
-				<form id="search-form" class="form" autocomplete="off">
-                    {% csrf_token %}
-                    <div class="form-group">
-                        <label for="name">Name</label>
-                        <input id="name" class="form-control" type="text">
-                    </div>
-                    <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>
-				</form>
-			</div>
+{% endblock controls %}
 
-		</div>
+{% block tabs %}
+	<ul class="nav nav-tabs px-3">
+    	{% block tab_items %}
+		<li class="nav-item" role="presentation">
+			<button class="nav-link active" id="network-tab" data-bs-toggle="tab" data-bs-target="#networks" type="button" role="tab" aria-controls="filters-form" aria-selected="true">
+			  Network
+			</button>
+		</li>
+		{% if filter_form %}
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="filters-form-tab" data-bs-toggle="tab" data-bs-target="#filters-form" type="button" role="tab" aria-controls="object-list" aria-selected="false">
+            Filters
+            {% if filter_form %}{% badge filter_form.changed_data|length bg_color="blue" %}{% endif %}
+          </button>
+        </li>
+      	{% endif %}
+		{% endblock tab_items %}
+	</ul>
+{% endblock tabs %}
 
-		{% if config.allow_coordinates_saving == True %}
-		<div class="panel panel-default mt-3">
-			<div class="panel-heading">
-				<strong>Settings</strong>
-			</div>
-			<div class="panel-body">
-				<div class="custom-control custom-checkbox">
-					<input type="checkbox" class="custom-control-input" id="checkSaveCoordinates">
-					<label class="custom-control-label" for="checkSaveCoordinates">Save coordinates</label>
-				</div>
-				<div>
-					<span id="coordstatus"></span>
-				</div>
-			</div>
-		</div>
-		{% endif %}
-	</div>
-</div>
+{% block content-wrapper %}
+  {% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
+    <div class="tab-content">
 
-{% endwith %}
-{% endblock %}
+      <div class="tab-pane show active" id="networks" role="tabpanel" aria-labelledby="network-tab">
+        <div class="panel-body">
+          <div id="visgraph" class=""></div>
+        </div>
+
+        <script type="text/javascript">
+          var topology_data = {{ topology_data | safe }};
+        </script>
+      </div>
+
+      {% if filter_form %}
+      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
+        {% include 'inc/filter_list.html' %}
+      </div>
+      {% endif %}
+
+    </div>
+  {% endwith %}
+{% endblock content-wrapper %}
 
 {% block javascript %}
-
-<script src="{% static 'netbox_topology_views/js/vendor.js' %}"></script>
-<script src="{% static 'netbox_topology_views/js/app.js' %}"></script>
-
-<script type="application/javascript"> iniPlotboxIndex()</script>
-
-{% endblock %}
+  <script src="{% static 'netbox_topology_views/js/vendor.js' %}"></script>
+	<script src="{% static 'netbox_topology_views/js/app.js' %}"></script>
+	<script type="application/javascript">iniPlotboxIndex()</script>
+{% endblock javascript %}

netbox_topology_views/urls.py

@@ -7,5 +7,4 @@ 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

@@ -1,21 +1,313 @@
 from django.shortcuts import get_object_or_404, render
+from django.db.models import Q
 from django.views.generic import View
 from django.contrib.auth.mixins import PermissionRequiredMixin
+from django.conf import settings
+from django.http import QueryDict
+from django.http import HttpResponseRedirect
+
+from .forms import DeviceFilterForm
+from .filters import DeviceFilterSet
+
+import json
+
+from dcim.models import Device, Cable, DeviceRole, PathEndpoint
+from circuits.models import CircuitTermination, ProviderNetwork
+from extras.models import Tag
+
+
+def create_node(device):
+    dev_name = device.name
+    if dev_name is None:
+        dev_name = "device name unknown"
+
+    node_content = ""
+
+    if device.device_type is not None:
+        node_content += "<tr><th>Type: </th><td>" + device.device_type.model + "</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>"
+    if device.site is not None:
+        node_content += "<tr><th>Site: </th><td>" + device.site.name + "</td></tr>"
+    if device.location is not None:
+        node_content += "<tr><th>Location: </th><td>" + device.location.name + "</td></tr>"
+    if device.rack is not None:
+        node_content += "<tr><th>Rack: </th><td>" + device.rack.name + "</td></tr>"
+    if device.position is not None:
+        if device.face is not None:
+            node_content += "<tr><th>Position: </th><td> {} ({}) </td></tr>".format(device.position, device.face)
+        else:
+            node_content += "<tr><th>Position: </th><td>" + device.position + "</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"] is not None:
+            if ";" in 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
+    return node
+
+def create_edge(edge_id, cable, termination_a, termination_b, path = None, circuit = None):
+    cable_a_dev_name = "device A name unknown" if termination_a.device.name is None else termination_a.device.name
+    cable_a_name = "device A name unknown" if termination_a.name is None else termination_a.name
+    cable_b_dev_name = "device A name unknown" if termination_b.device.name is None else termination_b.device.name
+    cable_b_name = "cable B name unknown" if termination_b.name is None else termination_b.name
+
+    edge = {}
+    edge["id"] = edge_id
+    edge["from"] = termination_a.device.id
+    edge["to"] = termination_b.device.id
+
+    if circuit is not None:
+        edge["dashes"] = True
+        edge["title"] = "Circuit provider: "  + circuit.provider.name + "<br>"
+        edge["title"] += "Termination between <br>"
+        edge["title"] += cable_b_dev_name + " [" + cable_b_name +  "]<br>"
+        edge["title"] += cable_a_dev_name + " [" + cable_a_name +  "]"
+    else:
+        edge["title"] = "Cable between <br> " + cable_a_dev_name + " [" + cable_a_name +  "]<br>" + cable_b_dev_name + " [" + cable_b_name + "]"
+    
+    if path is not None:
+        edge["title"] += "" if len(path) <= 0 else "<br>Through " + "/".join(path)
+        
+    if cable is not None and cable.color != "":
+        edge["color"] = "#" + cable.color
+    
+    return edge
+
+def get_topology_data(queryset, hide_unconnected, intermediate_dev_role_ids, end2end_connections):
+    nodes_devices = {}
+    edges = []
+    edge_ids = 0
+    cable_ids = []
+    circuit_ids = []
+    if not queryset:
+        return None
+
+    ignore_cable_type = settings.PLUGINS_CONFIG["netbox_topology_views"]["ignore_cable_type"]
+    enable_circuit_terminations = settings.PLUGINS_CONFIG["netbox_topology_views"]["enable_circuit_terminations"]
+
+    device_ids = [d.id for d in queryset]
+
+    links = Cable.objects.filter( Q(_termination_a_device_id__in=device_ids) | Q(_termination_b_device_id__in=device_ids) ) \
+                        .select_related("termination_a_type", "termination_b_type") \
+                        .prefetch_related("termination_a", "termination_b")
+
+    for link in links:
+
+        if link.termination_a_type.name in ignore_cable_type or link.termination_b_type.name in ignore_cable_type \
+            or link.id in cable_ids:
+            continue
+        
+        a_is_path_endoint = isinstance(link.termination_a, PathEndpoint)
+        b_is_path_endoint = isinstance(link.termination_b, PathEndpoint)
+
+        if not end2end_connections or (not a_is_path_endoint and not b_is_path_endoint):
+
+            if isinstance(link.termination_a, CircuitTermination):
+                if enable_circuit_terminations and link.termination_a.circuit.id not in circuit_ids:
+                    circuit = link.termination_a.circuit
+                    circuit_ids.append(circuit.id)
+                    cable_ids.append(link.id)
+                    
+                    path_destination = circuit.termination_z if link.termination_a.term_side == "A" else circuit.termination_a
+
+                    if path_destination is not None and path_destination.provider_network is None:
+                        # ProviderNetwork not supported at the moment
+                        # $path_destination.cable would be none : there is no cable between a CircuitTermination and ProviderNetwork
+
+                        if not hasattr(link.termination_b, 'device'):
+                            #CircuitTermination B Missing Device
+                            continue
+
+                        origin_device = link.termination_b.device
+                        destination_device = path_destination.cable.termination_b.device
+
+                        if origin_device.id in device_ids and destination_device.id in device_ids:
+                            if origin_device.id not in nodes_devices:
+                                nodes_devices[origin_device.id] = origin_device
+                            if destination_device.id not in nodes_devices:
+                                nodes_devices[destination_device.id] = destination_device
+
+                            edge_ids += 1
+                            edges.append(create_edge(edge_ids, link, link.termination_b, path_destination.cable.termination_b, [circuit.cid], circuit))
+
+            elif link.termination_a.device.id in device_ids and link.termination_b.device.id in device_ids:
+
+                    if link.termination_a.device.id not in nodes_devices:
+                        nodes_devices[link.termination_a.device.id] = link.termination_a.device
+                    if link.termination_b.device.id not in nodes_devices:
+                        nodes_devices[link.termination_b.device.id] = link.termination_b.device
+
+                    cable_ids.append(link.id)
+                    edge_ids += 1
+                    edges.append(create_edge(edge_ids, link, link.termination_a, link.termination_b))
+        else:
+            # termination_a can be a CircuitTermination (no trace()) while termination_b is a PathEndpoint
+            # If so, we swap them so we can follow the path using PathEndpoint#trace()
+            path_start = link.termination_a if a_is_path_endoint else link.termination_b
+            if path_start.device is not None and path_start.device.id not in device_ids:
+                # device not in queryset, skip
+                continue
+
+            # Ignore incomplete path when in end-to-end connection mode
+            if path_start.path is not None:
+                if not path_start.path.is_active or path_start.path.is_split:
+                    continue
+            else:
+                continue
+
+            path_destination = path_start.path.destination
+            if hasattr(path_destination, "device") and path_destination.device is not None and path_destination.device.id not in device_ids:
+                # device not in queryset, skip
+                continue
+
+            valid_path = False
+
+            # variables needed for trace() browsing
+            origin = None
+            circuit = None
+            tmp_path = []
+
+            # trace() : Return the path as a list of three-tuples (A termination, cable, B termination)
+            # TODO device qui ne s"affichent pas si hide_unconnected
+            for (termination_a, cable, termination_b) in path_start.trace():
+                
+                if origin is None:
+                    # New part of the link
+                    origin = termination_a
+                    circuit = None
+                    tmp_path = []
+
+                if isinstance(termination_b, ProviderNetwork):
+                    # ProviderNetwork not supported at the moment
+                    # It would need to manage several kind of nodes (Device, ProviderNetwork)
+                    # and maps javascript nodes ID with Devices IDs and ProviderNetworks IDs
+                    # When $termination_b is a ProviderNetwork instance, $cable will be None
+                    break
+
+                if cable is not None and (cable.termination_a_type in ignore_cable_type or cable.termination_b_type in ignore_cable_type):
+                    # Ignore this path
+                    break
+
+                if isinstance(termination_b, CircuitTermination):
+                    if enable_circuit_terminations:
+                        circuit = termination_b.circuit
+                        tmp_path.append(circuit.cid)
+                        if circuit.id not in circuit_ids:
+                            circuit_ids.append(circuit.id)
+                    else:
+                        # Ignore this path
+                        break
+                elif end2end_connections and termination_b != path_destination \
+                        and termination_b.device.device_role.id not in intermediate_dev_role_ids \
+                        and termination_b.device.id not in device_ids:
+                    # Skip this intermediate device, origin device is keep in $origin for next iteration
+                    tmp_path.append(termination_b.device.name)
+                elif cable is not None and termination_b is not None:
+                    if cable.id not in cable_ids:
+                        # New part of the link we want to display
+                        cable_ids.append(cable.id)
+                        edge_ids += 1
+                        edges.append(create_edge(edge_ids, cable, origin, termination_b, tmp_path, circuit))
+
+                    if not valid_path:
+                        valid_path = True
+
+                    if termination_b.device.id not in nodes_devices and \
+                      (termination_b.device.device_role.id in intermediate_dev_role_ids or termination_b.device.id in device_ids) :
+                        nodes_devices[termination_b.device.id] = termination_b.device
+                    # Reset for next iteration
+                    origin = None
+            # endfor (trace)
+
+            if valid_path and path_start.device.id not in nodes_devices:
+                nodes_devices[path_start.device.id] = path_start.device
+
+    # endfor (link)
+    
+    for qs_device in queryset:
+        if qs_device.id not in nodes_devices and not hide_unconnected:
+            nodes_devices[qs_device.id] = qs_device
+
+    results = {}
+    results["nodes"] = [create_node(d) for d in nodes_devices.values()]
+    results["edges"] = edges
+    return results
 
 class TopologyHomeView(PermissionRequiredMixin, View):
-    permission_required = ('dcim.view_site', 'dcim.view_device')
+    permission_required = ("dcim.view_site", "dcim.view_device")
 
     """
     Show the home page
     """
-    def get(self, request):        
-        return render(request, 'netbox_topology_views/index.html')
+    def get(self, request):
+        self.filterset = DeviceFilterSet
+        self.queryset = Device.objects.all().select_related("device_type", "device_role")
+        self.queryset = self.filterset(request.GET, self.queryset).qs
+        topo_data = None
 
-class TopologyFullView(PermissionRequiredMixin, View):
-    permission_required = ('dcim.view_site', 'dcim.view_device')
+        if request.GET:
+            hide_unconnected = False
+            if "hide_unconnected" in request.GET:
+                if request.GET["hide_unconnected"] == "on" :
+                    hide_unconnected = True
 
-    """
-    Show the full view page
-    """
-    def get(self, request):        
-        return render(request, 'netbox_topology_views/full.html')
+            if "intermediate_dev_role_id" in request.GET:
+                intermediate_dev_role_ids = list(map(int, request.GET.getlist("intermediate_dev_role_id")))
+            else:
+                intermediate_dev_role_ids = []
+
+            end2end_connections = False
+            if "end2end_connections" in request.GET:
+                if request.GET["end2end_connections"] == "on" :
+                    end2end_connections = True
+            
+            if "draw_init" in request.GET:
+                if request.GET["draw_init"].lower() == "true":
+                    topo_data = get_topology_data(self.queryset, hide_unconnected, intermediate_dev_role_ids, end2end_connections)
+            else:
+                topo_data = get_topology_data(self.queryset, hide_unconnected, intermediate_dev_role_ids, end2end_connections)
+        else:
+            preselected_device_roles = settings.PLUGINS_CONFIG["netbox_topology_views"]["preselected_device_roles"]
+            preselected_intermediate_dev_roles = settings.PLUGINS_CONFIG["netbox_topology_views"]["preselected_intermediate_dev_roles"]
+            preselected_tags = settings.PLUGINS_CONFIG["netbox_topology_views"]["preselected_tags"]
+
+            q_device_role_id = DeviceRole.objects.filter(name__in=preselected_device_roles).values_list("id", flat=True)
+            q_intermediate_dev_role_id = DeviceRole.objects.filter(name__in=preselected_intermediate_dev_roles).values_list("id", flat=True)
+            q_tags = Tag.objects.filter(name__in=preselected_tags).values_list("name", flat=True)
+
+            q = QueryDict(mutable=True)
+            q.setlist("device_role_id", list(q_device_role_id))
+            q.setlist("intermediate_dev_role_id", list(q_intermediate_dev_role_id))
+            q.setlist("tag", list(q_tags))
+            q["draw_init"] = settings.PLUGINS_CONFIG["netbox_topology_views"]["draw_default_layout"]
+            query_string = q.urlencode()
+            return HttpResponseRedirect(request.path + "?" + query_string)
+
+        return render(request, "netbox_topology_views/index.html" , {
+             "filter_form": DeviceFilterForm(request.GET, label_suffix=""),
+             "topology_data": json.dumps(topo_data)
+            }
+        )

package-lock.json

@@ -1,24 +1,9 @@
 {
   "name": "netbox_topology_views",
-  "version": "0.5.3",
+  "version": "2.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "dev": true,
-      "requires": {
-        "@types/hammerjs": "^2.0.36"
-      }
-    },
-    "@types/hammerjs": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.38.tgz",
-      "integrity": "sha512-wuwDzWW1JWh3BZoRftBlKcctjNzR75QFY4/b4zAz7sH1EesA8HBJzke+bF5dxCATNdHHs3X1P5UWanbbUT6chw==",
-      "dev": true
-    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -778,12 +763,6 @@
                 "brace-expansion": "^1.1.7"
               }
             },
-            "minimist": {
-              "version": "1.2.5",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
@@ -1315,13 +1294,21 @@
       "dev": true
     },
     "copy-props": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.4.tgz",
-      "integrity": "sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-2.0.5.tgz",
+      "integrity": "sha512-XBlx8HSqrT0ObQwmSzM7WE5k8FxTV75h1DX1Z3n6NhQ/UYYAvInWYmG06vFt7hQZArE2fuO62aihiWIVQwh1sw==",
       "dev": true,
       "requires": {
-        "each-props": "^1.3.0",
-        "is-plain-object": "^2.0.1"
+        "each-props": "^1.3.2",
+        "is-plain-object": "^5.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        }
       }
     },
     "core-util-is": {
@@ -2031,9 +2018,9 @@
       }
     },
     "glob-watcher": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.3.tgz",
-      "integrity": "sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.5.tgz",
+      "integrity": "sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==",
       "dev": true,
       "requires": {
         "anymatch": "^2.0.0",
@@ -2041,7 +2028,16 @@
         "chokidar": "^2.0.0",
         "is-negated-glob": "^1.0.0",
         "just-debounce": "^1.0.0",
+        "normalize-path": "^3.0.0",
         "object.defaults": "^1.1.0"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true
+        }
       }
     },
     "global-modules": {
@@ -2169,13 +2165,13 @@
       }
     },
     "gulp-sass": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
-      "integrity": "sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.1.tgz",
+      "integrity": "sha512-bg7mfgsgho0Ej0WXE9Cd2sq/YxeKxOjagrMmM40zvOYXHtZvi5ED84wIpqCUvJLz66kFNkv+jS/rQXolmgXrUQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.20",
         "node-sass": "^4.8.3",
         "plugin-error": "^1.0.1",
         "replace-ext": "^1.0.0",
@@ -2627,9 +2623,9 @@
       "dev": true
     },
     "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true
     },
     "json-schema-traverse": {
@@ -2651,14 +2647,14 @@
       "dev": true
     },
     "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
       }
     },
@@ -2668,12 +2664,6 @@
       "integrity": "sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=",
       "dev": true
     },
-    "keycharm": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.3.1.tgz",
-      "integrity": "sha512-zn47Ti4FJT9zdF+YBBLWJsfKF/fYQHkrYlBeB5Ez5e2PjW7SoIxr43yehAne2HruulIoid4NKZZxO0dHBygCtQ==",
-      "dev": true
-    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -2934,9 +2924,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "mixin-deep": {
@@ -2969,12 +2959,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "dev": true
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -3399,9 +3383,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "path-root": {
@@ -4344,12 +4328,6 @@
       "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
       "dev": true
     },
-    "timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
     "to-absolute-glob": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
@@ -4596,12 +4574,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "uuid": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.0.tgz",
-      "integrity": "sha512-LNUrNsXdI/fUsypJbWM8Jt4DgQdFAZh41p9C7WE9Cn+CULOEkoG2lgQyH68v3wnIy5K3fN4jdSt270K6IFA3MQ==",
-      "dev": true
-    },
     "v8flags": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
@@ -4702,22 +4674,19 @@
       }
     },
     "vis-data": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-6.6.1.tgz",
-      "integrity": "sha512-xmujDB2Dzf8T04rGFJ9OP4OA6zRVrz8R9hb0CVKryBrZRCljCga9JjSfgctA8S7wdZu7otDtUIwX4ZOgfV/57w==",
-      "dev": true
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.2.tgz",
+      "integrity": "sha512-RPSegFxEcnp3HUEJSzhS2vBdbJ2PSsrYYuhRlpHp2frO/MfRtTYbIkkLZmPkA/Sg3pPfBlR235gcoKbtdm4mbw=="
     },
     "vis-network": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-7.10.2.tgz",
-      "integrity": "sha512-KDx2agbDnaiE0Bye4AcCRqTn5mxzDKhdUNpKkzSn0AOLBmdhNtPGjxAFluAmvFVyiSK5R6Q5KIWdLjeIMu/PAQ==",
-      "dev": true
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.0.tgz",
+      "integrity": "sha512-rx96L144RJWcqOa6afjiFyxZKUerRRbT/YaNMpsusHdwzxrVTO2LlduR45PeJDEztrAf3AU5l2zmiG+1ydUZCw=="
     },
     "vis-util": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-4.3.4.tgz",
-      "integrity": "sha512-hJIZNrwf4ML7FYjs+m+zjJfaNvhjk3/1hbMdQZVnwwpOFJS/8dMG8rdbOHXcKoIEM6U5VOh3HNpaDXxGkOZGpw==",
-      "dev": true
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.2.tgz",
+      "integrity": "sha512-oPDmPc4o0uQLoKpKai2XD1DjrhYsA7MRz75Wx9KmfX84e9LLgsbno7jVL5tR0K9eNVQkD6jf0Ei8NtbBHDkF1A=="
     },
     "which": {
       "version": "1.3.1",

package.json

@@ -1,26 +1,27 @@
 {
   "private": true,
   "name": "netbox_topology_views",
-  "version": "0.5.3",
+  "version": "2.0.2",
   "scripts": {
     "resources": "gulp build",
     "resources_dev": "gulp build_dev"
   },
-  "dependencies": {},
+  "dependencies": {
+    "vis-data": "^7.1.2",
+    "vis-network": "^9.1.0",
+    "vis-util": "^5.0.2"
+  },
   "devDependencies": {
-    "@egjs/hammerjs": "^2.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-sass": "^4.1.0",
-    "gulp-uglify": "^3.0.2",
-    "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"
+    "gulp-uglify": "^3.0.2"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@egjs/hammerjs": "^2.0.0",
+    "uuid": "^8.0.0",
+    "keycharm": "^0.4.0",
+    "timsort": "^0.3.0"
+  }
 }

setup.py

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