bump version (#269 )

Closes #252,#78,#177,#265: Move options from config file to GUI (#262 )
* Added some individual options * Added general options * Added show_single_cable_logical_conns and draw_default_layout * Added ignore_cable_type to IndividualOptions * Corrected permission, tiny improvements * Add preselected_device_roles to IndividualOptions * Add preselected_tags * Updated documentation * Update README.md * Corrected queryset for preselected_tags * Update README.md * move supported_termination_types to inside the function to prevent migration issues * removed general options * added new migration script --------- Co-authored-by: Mattijs Vanhaverbeke <mattijs.vanhaverbeke@ebo-enterprises.com>
2023-03-23 10:08:34 +01:00 · 2023-03-23 09:57:51 +01:00 · 2023-03-19 16:39:36 +01:00 · 2023-03-19 16:39:15 +01:00 · 2023-03-10 09:29:33 +01:00 · 2023-01-29 19:16:23 +01:00
58 changed files with 3187 additions and 5571 deletions
@@ -0,0 +1,52 @@
+---
+name: 🐛 Bug Report
+description: Report a reproducible bug in the current release of NetBox
+labels: ["type: bug"]
+body:
+  - type: markdown
+    attributes:
+      value: >
+        **NOTE:** This form is only for reporting _reproducible bugs_. If you're having 
+        trouble with installation or just looking for assistance with using NetBox 
+        Topology Views, please visit our 
+        [discussion forum](https://github.com/mattieserver/netbox-topology-views/discussions) instead.
+  - type: input
+    attributes:
+      label: NetBox version
+      description: What version of NetBox are you currently running?
+      placeholder: v3.3.9
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Topology Views version
+      description: What version of NetBox Topology Views are you currently running?
+      placeholder: v3.1.0
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: >
+        Describe in detail the exact steps that someone else can take to
+        reproduce this bug using the current stable release of NetBox Topology Views.
+      placeholder: |
+        1. Click on "create widget"
+        2. Set foo to 12 and bar to G
+        3. Click the "create" button
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: What did you expect to happen?
+      placeholder: A new widget should have been created with the specified attributes
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Observed Behavior
+      description: What happened instead?
+      placeholder: A TypeError exception was raised
+    validations:
+      required: true
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: ❓ Discussion
+    url: https://github.com/mattieserver/netbox-topology-views/discussions
+    about: "If you're just looking for help, try starting a discussion instead"
@@ -0,0 +1,58 @@
+---
+name: ✨ Feature Request
+description: Propose a new NetBox Topology Views feature or enhancement
+labels: ["type: feature"]
+body:
+  - type: markdown
+    attributes:
+      value: >
+        **NOTE:** This form is only for submitting well-formed proposals to extend or modify
+        NetBox Topology Views in some way. If you're trying to solve a problem but can't figure 
+        out how, or if you still need time to work on the details of a proposed new feature, 
+        please start a [discussion](https://github.com/mattieserver/netbox-topology-views/discussions) instead.
+  - type: input
+    attributes:
+      label: NetBox version
+      description: What version of NetBox are you currently running?
+      placeholder: v3.3.9
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Topology Views version
+      description: What version of NetBox Topology Views are you currently running?
+      placeholder: v3.1.0
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Feature type
+      options:
+        - New functionality
+        - Change to existing functionality
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Proposed functionality
+      description: >
+        Describe in detail the new feature or behavior you are proposing. Include any specific changes
+        to work flows and/or the user interface. The more detail you provide here, the
+        greater chance your proposal has of being discussed. Feature requests which don't include an
+        actionable implementation plan will be rejected.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Use case
+      description: >
+        Explain how adding this functionality would benefit NetBox Topology Views users. What need does it address?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: External dependencies
+      description: >
+        List any new dependencies on external libraries or services that this new feature would
+        introduce. For example, does the proposal require the installation of a new Python package?
+        (Not all new features introduce new dependencies.)
@@ -0,0 +1,24 @@
+<!--
+    IMPORTANT:
+    ==========
+    Thank you for contributing to NetBox Topology Views! Please 
+    note that our contribution guidelines require a feature 
+    request or bug report to be labeled "status: accepted". This 
+    helps avoid waste time and effort on a proposed change that 
+    we might not be able to accept. If a feature request or bug 
+    report is labeled "status: needs owner", feel free to raise 
+    your hand if you'd like to take work on it and we will 
+    happily assign you to the issue.
+
+    Please prefix the title of your pull request according to 
+    it's type. You should use "Closes #FEATURE_ID: ..." for feature 
+    requests and "Fixes #ISSUE_ID: ..." for issues. This helps 
+    us closing issues automatically after merging.
+
+    To sum it up:
+    1. Create Bug Report or Feature Request
+    2. Wait until the issue has been labeled "status: accepted"
+    3. Start working on the issue in a seperate branch
+    3. Create a pull request and name the title with a prefix 
+       according to the issue ID.
+-->
@@ -1,93 +0,0 @@
-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 }}
@@ -128,4 +128,5 @@ dmypy.json
 # Pyre type checker
 .pyre/

-node_modules
+node_modules
+app.js.map
@@ -1,4 +0,0 @@
-FROM netboxcommunity/netbox:latest
-
-COPY ./docker/plugin_requirements.txt /
-RUN /opt/netbox/venv/bin/pip install  --no-warn-script-location -r /plugin_requirements.txt
@@ -12,6 +12,8 @@ Support to filter on name, site, tag and device role.

 ## Install

+**_NOTE:_** For docker please see: [Docker install](https://github.com/netbox-community/netbox-docker/wiki/Using-Netbox-Plugins)
+
 The plugin is available as a Python package and can be installed with pip.

 Run `pip install netbox-topology-views` in your virtual env.
@@ -29,65 +31,102 @@ Once installed, the plugin needs to be enabled in your `configuration.py`
 PLUGINS = ["netbox_topology_views"]
 ```

-Then run `python3 manage.py collectstatic --no-input`
+First run `source /opt/netbox/venv/bin/activate` to enter the Python virtual environment.
+
+
+Then run 
+```bash
+cd /opt/netbox/netbox
+pip3 install netbox-topology-views
+python3 manage.py migrate netbox_topology_views
+python3 manage.py collectstatic --no-input
+```

 ### Versions

-| 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 |
+| netbox version | netbox-topology-views version |
+| -------------- | ----------------------------- |
+| >= 3.4.0       | >= v3.X.X                     |
+| >= 3.3.0       | >= v3.0.0                     |
+| >= 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                    |

 ### Custom field: coordinates

 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.
+If you create a custom field "coordinates" for "dcim > device" and "Circuits > circuit" with type "text" and name "coordinates" you will see the same layout every time. It is recommended to set this field to "UI visibility" "Hidden" and let the plugin manage it in the background.

-The coordinates can then be provided as: "X;Y"
+The coordinates are stored as: "X;Y".
+
+Please read the "Configure" chapter to set the `allow_coordinates_saving` option to True.
+You might also set the `always_save_coordinates` option to True.

 ## Configure

-If you want to override the default values configure the `PLUGINS_CONFIG` in your `netbox configuration.py`.
+All individual options can be assigned a default value per user directly in the plugin. The default value can be overridden on the filter page.
+
+The remaining options must be configured in the `PLUGINS_CONFIG` section of your `netbox/configuration.py`.

 Example:
 ```
 PLUGINS_CONFIG = {
    'netbox_topology_views': {
-        'device_img': ['router','switch', 'firewall'],
-        'preselected_device_roles': ['Router', 'Firewall']
+        'static_image_directory': 'netbox_topology_views/img',
+        'allow_coordinates_saving': True,
+        'always_save_coordinates': True
    }
 }
 ```

-| 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|
-| 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  |
-| 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) |
+| Setting                  | Default value                                                                                                                                  | Description                                                                                                            |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| static_image_directory   | netbox_topology_views/img                                                                                                                      | (str or pathlib.Path) Specifies the location that images will be loaded from by default. Must be within `STATIC_ROOT`  |
+| allow_coordinates_saving | False                                                                                                                                          | (bool) Set to true if you use the custom coordinates fields and want to save the coordinates                           |
+| always_save_coordinates  | False                                                                                                                                          | (bool) Set if you want to enable the option to save coordinates by default                                             |

 ### Custom Images

-You upload you own custom images to the netbox static dir (`static/netbox_topology_views/img/`).
-These images need to be named after de device role slug and have the .png format/extension.
-If you add your own image you also need to add the slug to the `device_img` setting.
+To change image with associated device use the `Images` page - it allows to map a device role with an image found in the netbox static directory (defined by the plugin config `static_image_directory` which defaults to `netbox_topology_views/img`). You can also upload you own custom images to there - these images will automatically be used for a device (if it does not already have a specified image in the settings) if their name is the device role slug.

 ## Use

 Go to the plugins tab in the navbar and click topology or go to `$NETBOX_URL/plugins/netbox_topology_views/` to view your topologies

+Select your options for the topology view:
+
+![selection_options](https://user-images.githubusercontent.com/20901110/220410144-5633d24c-6383-4cba-8d6d-ba77ef3d3cdd.png)
+
+<dl>
+    <dt>Save Coordinates</dt>
+    <dd>Save the coordinates of devices in the topology view.</dd>
+    <dt>Show Unconnected</dt>
+    <dd>Show devices that have no connections or for which no connection is displayed. This option depends on other parameters like 'Show Cables' and 'Show Logical Connections'.</dd>
+    <dt>Show Circuit Terminations</dt>
+    <dd>Show connections which end at a circuit termination in the topology view. These connections are displayed as blue dashed lines.</dd>
+    <dt>Show Cables</dt>
+    <dd>Show connections between interfaces, front / rear ports, etc., that are connected with one or more cables. These connections are displayed as solid lines in the color of the cable.</dd> 
+    <dt>Show Logical Connections</dt>
+    <dd>Show logical connections between interfaces (referred to as Interface Connections in NetBox) in the topology view. Where the path between
+        interfaces includes multiple cables (e.g., via patch panels), only the end interface connections are shown, not the 
+        intermediate front / rear port connections, etc. This is similar to what was referred to as 'end-to-end' connections in previous versions. These connections are displayed as yellow dotted lines.</dd>
+    <dt>Show redundant Cable and Locigal Connection</dt>
+    <dd>Shows a logical connection (in addition to a cable), even if a cable is directly connected. Leaving this option disabled prevents that redundant display. This option only has an effect if 'Show Logical Connections' is activated.</dd>
+    <dt>Show Power Feeds</dt>
+    <dd>Displays connections between power outlets and power ports. These connections are displayed as solid lines in the color of the cable. This option depends on 'Show Cables'.</dd>
+    <dt>Show Wireless Links</dt>
+    <dd>Displays wireless connections. These connections are displayed as blue dotted lines.</dd>
+</dl>
+    
 ### Update

 Run `pip install netbox-topology-views --upgrade` in your venv.

+Run `python3 manage.py migrate netbox_topology_views`
+
 Run `python3 manage.py collectstatic --no-input`


@@ -96,8 +135,26 @@ Clear you browser cache.

 ### Permissions

-To view `/plugins/topology-views/` you need the following permissions:
+To view `/plugins/netbox_topology-views/topology` 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
+
+To view `/plugins/netbox_topology-views/image`:
+ + dcim | site | view
+ + dcim | device role | view
+ + dcim | device role | add
+ + dcim | device role | change
+
+ To view `/plugins/netbox_topology-views/individualoptions`:
+ + netbox topology views | individualoptions | change
+
+ ## Icons info
+
+Power icons created by [Freepik - Flaticon](https://www.flaticon.com/free-icons/power).
+
+Power icons created by [Flat Icons - Flaticon](https://www.flaticon.com/free-icons/power)
+
+Provider icons created by [Good Ware - Flaticon](https://www.flaticon.com/free-icons/provider)
+
@@ -1,22 +1,143 @@
 # 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`

+We will assume that you work in the folder `~/code/netbox_plugin/`, change this if you use another folder for your projects/code.
+
+## Setup native prerequisites
+**_NOTE:_**  these requirements are needed if you want install Postgresql & Redis native. Check the steps for docker & docker-compose if you don't want this.
+
+Make sure that you have already installed Postgresql and Redis. Also make sure that the database has already been created and privileges has been granted as described in the NetBox installation instructions at https://docs.netbox.dev/en/stable/installation/.
+
+In short:
+```
+sudo apt update
+sudo apt install -y postgresql
+sudo systemctl start postgresql
+sudo systemctl enable postgresql
+
+sudo -u postgres psql
+CREATE DATABASE netbox;
+CREATE USER netbox WITH PASSWORD 'J5brHrAXFLQSif0K';
+GRANT ALL PRIVILEGES ON DATABASE netbox TO netbox;
+
+sudo apt install -y redis-server
+```
+
+## Setup docker prerequisites
+
+**_NOTE:_** if you used the 'native' prerequisites you can skip these steps below
+
+### Docker
+This depends on your OS or how you want to install docker.  
+See https://docs.docker.com/engine/install/ to find the install steps.
+
+### Docker compose
+This also depends on your OS, see the link below:  
+https://docs.docker.com/compose/install/linux/
+
+## Create the base folder
+```
+mkdir ~/code/netbox_plugin/
+cd ~/code/netbox_plugin/
+```
+
+## Install requirements
+### Python + deps
+You will need the following packages installed:
+ python3-venv
+ python3
+
+Install them with your OS package manager (apt, yum, ...)
+
+
+### NPM (with nvm)
+Follow the steps on the repo below to install npm:  
+https://github.com/nvm-sh/nvm#installing-and-updating
+
+
+## Create venv 
+```
+python3 -m venv ~/code/netbox_plugin/.venvs/netbox
+source ~/code/netbox_plugin/.venvs/netbox/bin/activate
+```
+
+## Setup netbox 
+### Clone netbox repo
+```
+cd ~/code/netbox_plugin/
+git clone git@github.com:netbox-community/netbox.git netbox
+```
+### Install deps
+```
+cd netbox
+python3 -m pip install -r requirements.txt
+```
+
+
+## Setup plugin
+### Clone netbox-topology-views repo
+```
+cd ~/code/netbox_plugin/
+git clone git@github.com:mattieserver/netbox-topology-views.git plugin
+```
+### Install deps
+```
+python3 -m pip install --upgrade build setuptools wheel
+```
+### Copy netbox config file
+```
+cd ~/code/netbox_plugin/
+cp plugin/dev_setup/configuration.py netbox/netbox/netbox/configuration.py
+```
+
+## Start netbox
+### Start docker compose
+**_NOTE:_** if you used the 'native' prerequisites you can skip to 'Start netbox'
+```
+cd ~/code/netbox_plugin/
+cd plugin/dev_setup
+docker-compose up -d
+```
+### Start netbox
+```
+cd ~/code/netbox_plugin/
+source ~/code/netbox_plugin/.venvs/netbox/bin/activate
+cd netbox/netbox/
+python3 manage.py migrate
+python3 manage.py runserver
+```
+You might need to create a superuser if you want to start with an empty database: `python3 manage.py createsuperuser`

 # 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
+## Build the plugin
+
+```
+cd ~/code/netbox_plugin/
+source ~/code/netbox_plugin/.venvs/netbox/bin/activate
+cd plugin/
+python3 setup.py develop
+``` 
+
+## Build javascript
+```
+cd plugin/netbox_topology_views/static_dev
+npm install
+npm run bundle
+``` 
+
+### Test
+You can now browse to http://localhost:8000.  
+The plugin should be available in the menu.
+
+# Import demo data
+If you want to add demo data instead of your own data, there's an official Repository you can use. The following example shows how to add demo data for NetBox v3.4. You have to use the json file according to the version you are working on.
+
+```
+~/code/netbox_plugin/
+git clone git@github.com:netbox-community/netbox-demo-data.git demodata
+source ~/code/netbox_plugin/.venvs/netbox/bin/activate
+cd netbox/netbox/
+python3 manage.py loaddata -v 3 ~/src/netbox-demo-data/netbox-demo-v3.4.json
+```
+
+Please note that the demo data adds a superuser with credentials admin/admin.
@@ -1 +0,0 @@
-netbox-topology-views
@@ -1,78 +0,0 @@
-var gulp = require('gulp');
-var sass = require('gulp-sass');
-var concat = require('gulp-concat');
-var uglify = require('gulp-uglify');
-var cleanCss = require('gulp-clean-css');
-
-
-var jsVendorFiles = [
-    'node_modules/vis-network/standalone/umd/vis-network.min.js',
-];
-
-var cssVendorFiles = [
-    'node_modules/vis-network/dist/dist/vis-network.min.css',
-];
-var sassFiles = './netbox_topology_views/static_dev/css/*.scss',
-    cssDest = './netbox_topology_views/static/netbox_topology_views/css/';
-
-var jsLocalResourceFiles = './netbox_topology_views/static_dev/js/*.js',
-    jsDest = './netbox_topology_views/static/netbox_topology_views/js/';
-
-
-function styles_local() {
-    return gulp.src(sassFiles)
-        .pipe(sass().on('error', sass.logError))
-        .pipe(concat('app.css'))
-        .pipe(cleanCss())
-        .pipe(gulp.dest(cssDest));
-
-}
-exports.styles_local = styles_local
-
-function styles_vendor() {
-    return gulp.src(cssVendorFiles)
-        .pipe(concat('vendor.css'))
-        .pipe(cleanCss())
-        .pipe(gulp.dest(cssDest))
-}
-exports.styles_vendor = styles_vendor
-
-function js_local() {
-    return gulp.src(jsLocalResourceFiles)
-        .pipe(concat('app.js'))
-        .pipe(uglify())
-        .pipe(gulp.dest(jsDest))
-}
-exports.js_local = js_local
-
-function js_vendor() {
-    return gulp.src(jsVendorFiles)
-        .pipe(concat('vendor.js'))
-        .pipe(uglify())
-        .pipe(gulp.dest(jsDest))
-
-}
-exports.js_vendor = js_vendor
-
-function js_local_dev() {
-    return gulp.src(jsLocalResourceFiles)
-        .pipe(concat('app.js'))
-        .pipe(gulp.dest(jsDest))
-}
-exports.js_local_dev = js_local_dev
-
-function js_vendor_dev() {
-    return gulp.src(jsVendorFiles)
-        .pipe(concat('vendor.js'))
-        .pipe(gulp.dest(jsDest))
-
-}
-exports.js_vendor_dev = js_vendor_dev
-
-exports.css = gulp.series(styles_local, styles_vendor);
-
-exports.js = gulp.series(js_local, js_vendor);
-exports.js_dev = gulp.series(js_local_dev, js_vendor_dev);
-
-exports.build = gulp.series(exports.css, exports.js);
-exports.build_dev = gulp.series(exports.css, exports.js_dev);
@@ -1,24 +1,21 @@
 from extras.plugins import PluginConfig

+
 class TopologyViewsConfig(PluginConfig):
-    name = 'netbox_topology_views'
-    verbose_name = 'Topology views'
-    description = 'An plugin to render topology maps'
-    version = '2.0.2'
-    author = 'Mattijs Vanhaverbeke'
-    author_email = 'author@example.com'
-    base_url = 'netbox_topology_views'
+    name = "netbox_topology_views"
+    verbose_name = "Topology views"
+    description = "An plugin to render topology maps"
+    version = "3.3.0"
+    author = "Mattijs Vanhaverbeke"
+    author_email = "author@example.com"
+    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'],
-        '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,
-        'draw_default_layout': False
+        "static_image_directory": "netbox_topology_views/img",
+        "allow_coordinates_saving": False,
+        "always_save_coordinates": False,
+
    }

+
 config = TopologyViewsConfig
@@ -1 +1 @@
-"""REST API"""
+"""REST API"""
@@ -1,12 +1,28 @@
+from dcim.models import Device, DeviceRole
 from rest_framework.serializers import ModelSerializer
+from netbox.api.serializers import NetBoxModelSerializer

-from dcim.models import DeviceRole, Device
-from extras.models import Tag
+from netbox_topology_views.models import RoleImage, IndividualOptions


 class TopologyDummySerializer(ModelSerializer):
-
    class Meta:
        model = Device
-        fields = ('id', 'name')
-        
+        fields = ("id", "name")
+
+
+class RoleImageSerializer(ModelSerializer):
+    class Meta:
+        model = RoleImage
+        fields = ("role", "image")
+
+
+class DeviceRoleSerializer(ModelSerializer):
+    class Meta:
+        model = DeviceRole
+        fields = ("name", "slug", "color", "vm_role", "description")
+
+class IndividualOptionsSerializer(NetBoxModelSerializer):
+    class Meta:
+        model = IndividualOptions
+        fields = ("ignore_cable_type", "show_unconnected", "show_cables", "show_logical_connections", "show_single_cable_logical_conns", "show_circuit", "show_power", "show_wireless", "draw_default_layout")
@@ -1,8 +1,10 @@
-from rest_framework import routers
-from . import views
+from netbox.api.routers import NetBoxRouter

-router = routers.DefaultRouter()
+from netbox_topology_views.api import views

-router.register('save-coords', views.SaveCoordsViewSet, basename='save_coords')
+router = NetBoxRouter()

-urlpatterns = router.urls
+router.register("save-coords", views.SaveCoordsViewSet)
+router.register("images", views.SaveRoleImageViewSet)
+
+urlpatterns = router.urls
@@ -1,60 +1,128 @@
-from rest_framework.viewsets import ModelViewSet, ViewSet, ReadOnlyModelViewSet, GenericViewSet
+from typing import Dict
+
+from circuits.models import Circuit
+from dcim.models import Device, DeviceRole, PowerFeed, PowerPanel
+from django.conf import settings
+from django.contrib.auth.mixins import PermissionRequiredMixin
+from django.contrib.contenttypes.models import ContentType
+from django.http import JsonResponse
 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 rest_framework.viewsets import ReadOnlyModelViewSet, ViewSet

-from .serializers import TopologyDummySerializer
-from django.conf import settings
-
-from dcim.models import  DeviceRole, Device, Cable
-from circuits.models import Circuit
-from extras.models import Tag
-
-
-class TopologyViewsRootView(APIRootView):
-    def get_view_name(self):
-        return 'TopologyViews'
+from netbox_topology_views.api.serializers import (
+    RoleImageSerializer,
+    TopologyDummySerializer,
+)
+from netbox_topology_views.models import RoleImage
+from netbox_topology_views.utils import get_image_from_url


 class SaveCoordsViewSet(ReadOnlyModelViewSet):
-    queryset = Device.objects.all()
+    queryset = Device.objects.none()
    serializer_class = TopologyDummySerializer

-    @action(detail=False, methods=['patch'])
+    @action(detail=False, methods=["patch"])
    def save_coords(self, request):
-        results = {}
-        if settings.PLUGINS_CONFIG["netbox_topology_views"]["allow_coordinates_saving"]:
-            device_id = None
-            x_coord = None
-            y_coord = None
-            if "node_id" in request.data:
-                if request.data["node_id"]:
-                    device_id = request.data["node_id"]
-            if "x" in request.data:
-                if request.data["x"]:
-                    x_coord = request.data["x"]
-            if "y" in request.data:
-                if request.data["y"]:
-                    y_coord = request.data["y"]
+        if not settings.PLUGINS_CONFIG["netbox_topology_views"][
+            "allow_coordinates_saving"
+        ]:
+            return Response({"status": "not allowed to save coords"}, status=500)

-            actual_device= Device.objects.get(id=device_id)
+        device_id: str = request.data.get("node_id", None)
+        x_coord = request.data.get("x", None)
+        y_coord = request.data.get("y", None)

-            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)
+        actual_device = None
+        if device_id.startswith("c"):
+            device_id = device_id.lstrip("c")
+            actual_device = Circuit.objects.get(id=device_id)
+        elif device_id.startswith("p"):
+            device_id = device_id.lstrip("p")
+            actual_device = PowerPanel.objects.get(id=device_id)
+        elif device_id.startswith("f"):
+            device_id = device_id.lstrip("f")
+            actual_device = PowerFeed.objects.get(id=device_id)
+        elif device_id.isnumeric():
+            actual_device = Device.objects.get(id=device_id)

-            return Response(results)
-        else:
-            results["status"] = "not allowed to save coords"
-            return Response(results, status=500)
+        if not actual_device:
+            return Response({"status": "invalid node_id in body"}, status=400)

+        try:
+            actual_device.custom_field_data["coordinates"] = "%s;%s" % (
+                x_coord,
+                y_coord,
+            )
+            actual_device.save()
+        except:
+            return Response(
+                {"status": "coords custom field could not be saved"}, status=500
+            )
+
+        return Response({"status": "saved coords"})
+
+
+class SaveRoleImageViewSet(PermissionRequiredMixin, ViewSet):
+    queryset = DeviceRole.objects.none()
+    serializer_class = RoleImageSerializer
+    permission_required = (
+        "dcim.add_device_role",
+        "dcim.change_device_role",
+    )
+
+    def create(self, request):
+        if not isinstance(request.data, dict):
+            return JsonResponse(
+                {"status": "Missing or malformed request body"}, status=400
+            )
+
+        device_roles = {k: v for k, v in request.data.items() if k.isnumeric()}
+        content_type_ids = {
+            k[2:]: v
+            for k, v in request.data.items()
+            if k.startswith("ct") and k[2:].isnumeric()
+        }
+
+        roles: Dict[int, DeviceRole] = DeviceRole.objects.in_bulk(device_roles.keys())
+        content_types: Dict[int, ContentType] = ContentType.objects.in_bulk(
+            content_type_ids.keys()
+        )
+
+        if len(roles) != len(device_roles):
+            difference = set(device_roles) - set(roles.keys())
+            return JsonResponse(
+                {"status": f"Got unknown device role ids: {difference}"},
+                status=400,
+            )
+
+        if len(content_types) != len(content_type_ids):
+            difference = set(content_type_ids) - set(content_types.keys())
+            return JsonResponse(
+                {"status": f"Got unknown content type ids: {difference}"},
+                status=400,
+            )
+
+        if device_roles:
+            device_role_ct = ContentType.objects.get_for_model(DeviceRole)
+
+            for id, url in device_roles.items():
+                RoleImage.objects.update_or_create(
+                    {
+                        "content_type_id": device_role_ct.pk,
+                        "object_id": id,
+                        "image": str(get_image_from_url(url)),
+                    },
+                    object_id=id,
+                )
+
+        for content_type_id, url in content_type_ids.items():
+            RoleImage.objects.update_or_create(
+                {
+                    "content_type_id": content_type_id,
+                    "image": str(get_image_from_url(url)),
+                },
+                content_type_id=content_type_id,
+            )
+
+        return JsonResponse({"status": "Ok"})
@@ -1,59 +1,55 @@
-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 dcim.models import Device, DeviceRole, Location, Rack, Region, Site
+from django.db.models import Q
 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',
+        method="search",
+        label="Search",
    )
    device_role_id = django_filters.ModelMultipleChoiceFilter(
-        field_name='device_role_id',
+        field_name="device_role_id",
        queryset=DeviceRole.objects.all(),
-        label='Role (ID)',
+        label="Role (ID)",
    )
    region_id = TreeNodeMultipleChoiceFilter(
        queryset=Region.objects.all(),
-        field_name='site__region',
-        lookup_expr='in',
-        label='Region (ID)',
+        field_name="site__region",
+        lookup_expr="in",
+        label="Region (ID)",
    )
    site_id = django_filters.ModelMultipleChoiceFilter(
        queryset=Site.objects.all(),
-        label='Site (ID)',
+        label="Site (ID)",
    )
    location_id = TreeNodeMultipleChoiceFilter(
        queryset=Location.objects.all(),
-        field_name='location',
-        lookup_expr='in',
-        label='Location (ID)',
+        field_name="location",
+        lookup_expr="in",
+        label="Location (ID)",
+    )
+    rack_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Rack.objects.all(),
+        field_name="rack_id",
+        label="Rack (ID)",
    )
    status = django_filters.MultipleChoiceFilter(
        choices=DeviceStatusChoices,
-        null_value=None
+        null_value=None,
    )

-
    class Meta:
        model = Device
-        fields = ['id', 'name']
+        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) 
-        )
+        qs_filter = Q(name__icontains=value)
        return queryset.filter(qs_filter)
@@ -5,82 +5,248 @@ from django.conf import settings

 from django.utils.translation import gettext as _

-from dcim.models import Device, Site, Region, DeviceRole, Location
+from dcim.models import Device, Site, Region, DeviceRole, Location, Rack

 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"]
-
+from netbox.forms import NetBoxModelFilterSetForm, NetBoxModelForm
+from utilities.forms import (
+    TagFilterField,
+    DynamicModelMultipleChoiceField,
+    MultipleChoiceField,
+    widgets,
+)
+from .models import IndividualOptions

 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')),
+        (
+            None,
+            (
+                "q",
+                "filter_id",
+                "save_coords",
+                "show_unconnected",
+                "show_cables",
+                "show_circuit",
+                "show_logical_connections",
+                "show_single_cable_logical_conns",
+                "show_power",
+                "show_wireless",
+            ),
+        ),
+        (
+            None,
+            (
+                "tenant_group_id",
+                "tenant_id",
+            ),
+        ),
+        (None, ("region_id", "site_id", "location_id", "rack_id")),
+        (
+            None,
+            (
+                "device_role_id",
+                "id",
+                "status",
+            ),
+        ),
+        (None, ("tag",)),
    )

    region_id = DynamicModelMultipleChoiceField(
-        queryset=Region.objects.all(),
-        required=False,
-        label=_('Region')
+        queryset=Region.objects.all(), required=False, label=_("Region")
    )
    device_role_id = DynamicModelMultipleChoiceField(
-        queryset=DeviceRole.objects.all(),
-        required=False,
-        label=_('Device Role')
+        queryset=DeviceRole.objects.all(), required=False, label=_("Device Role")
    )
-    end2end_connections = forms.BooleanField(
-        label=_("Display end-to-end connections"),
+    id = DynamicModelMultipleChoiceField(
+        queryset=Device.objects.all(),
        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'
+        label=_("Device"),
+        query_params={
+            "location_id": "$location_id",
+            "region_id": "$region_id",
+            "site_id": "$site_id",
+            "role_id": "$device_role_id",
+        },
    )
    site_id = DynamicModelMultipleChoiceField(
        queryset=Site.objects.all(),
        required=False,
        query_params={
-            'region_id': '$region_id',
+            "region_id": "$region_id",
        },
-        label=_('Site')
+        label=_("Site"),
    )
    location_id = DynamicModelMultipleChoiceField(
        queryset=Location.objects.all(),
        required=False,
        query_params={
-            'region_id': '$region_id',
-            'site_id': '$site_id',
+            "region_id": "$region_id",
+            "site_id": "$site_id",
        },
-        label=_('Location')
+        label=_("Location"),
    )
-    hide_unconnected = forms.BooleanField(
-        label=_("Hide Unconnected"),
+    rack_id = DynamicModelMultipleChoiceField(
+        queryset=Rack.objects.all(),
        required=False,
-        initial=False
+        query_params={
+            "region_id": "$region_id",
+            "site_id": "$site_id",
+            "location_id": "$location_id",
+        },
+        label=_("Rack"),
    )
+    status = MultipleChoiceField(
+        choices=DeviceStatusChoices, required=False, label=_("Device Status")
+    )
+    tag = TagFilterField(model)
+
+    # options
    save_coords = forms.BooleanField(
        label=_("Save Coordinates"),
        required=False,
-        disabled=(not allow_coordinates_saving),
-        initial=False
+        disabled=(not settings.PLUGINS_CONFIG["netbox_topology_views"]["allow_coordinates_saving"] or settings.PLUGINS_CONFIG["netbox_topology_views"]["always_save_coordinates"]),
+        initial=(settings.PLUGINS_CONFIG["netbox_topology_views"]["always_save_coordinates"])
    )
-    status = MultipleChoiceField(
-        choices=DeviceStatusChoices,
+    show_unconnected = forms.BooleanField(
+        label=_("Show Unconnected"), required=False, initial=False
+    )
+    show_logical_connections = forms.BooleanField(
+        label =_("Show Logical Connections"), required=False, initial=False
+    )
+    show_single_cable_logical_conns = forms.BooleanField(
+        label =_("Show redundant Cable and Locigal Connection"), required=False, initial=False
+    )
+    show_cables = forms.BooleanField(
+        label =_("Show Cables"), required=False, initial=False
+    )
+    show_wireless = forms.BooleanField(
+        label =_("Show Wireless Links"), required=False, initial=False
+    )
+    show_circuit = forms.BooleanField(
+        label=_("Show Circuit Terminations"), required=False, initial=False
+    )
+    show_power = forms.BooleanField(
+        label=_("Show Power Feeds"), required=False, initial=False
+    )
+
+class IndividualOptionsForm(NetBoxModelForm):
+    fieldsets = (
+        (
+            None,
+            (
+                "user_id",
+                "ignore_cable_type",
+                "preselected_device_roles",
+                "preselected_tags",
+                "show_unconnected",
+                "show_cables",
+                "show_circuit",
+                "show_logical_connections",
+                "show_single_cable_logical_conns",
+                "show_power",
+                "show_wireless",
+                "draw_default_layout",
+            ),
+        ),
+    )
+
+    user_id = forms.CharField(widget=forms.HiddenInput())
+
+    ignore_cable_type = MultipleChoiceField(
+        label=_("Ignore Termination Types"), 
+        required=False, 
+        choices=IndividualOptions.CHOICES,
+        help_text=_("Choose Termination Types that you want to be ignored. "
+            "If any ignored Termination Type is part of a connection, the "
+            "cable is not displayed.")
+    )
+    preselected_device_roles = DynamicModelMultipleChoiceField(
+        label=_("Preselected Device Role"),
+        queryset=DeviceRole.objects.all(),
        required=False,
-        label=_("Device Status")
+        help_text=_("Select Device Roles that you want to have "
+            "preselected in the filter tab.")
    )
-    tag = TagFilterField(model)
+    preselected_tags = forms.ModelMultipleChoiceField(
+        label=_("Preselected Tags"),
+        queryset=Device.tags.all(),
+        required=False,
+        widget=widgets.StaticSelectMultiple,
+        help_text=_("Select Tags that you want to have "
+            "preselected in the filter tab.")
+    )
+    show_unconnected = forms.BooleanField(
+        label=_("Show Unconnected"), 
+        required=False, 
+        initial=False,
+        help_text=_("Draws devices that have no connections or for which no "
+            "connection is displayed. This option depends on other parameters "
+            "like 'Show Cables' and 'Show Logical Connections'.")
+    )
+    show_cables = forms.BooleanField(
+        label =_("Show Cables"), 
+        required=False, 
+        initial=False,
+        help_text=_("Displays connections between interfaces that are connected "
+            "with one or more cables. These connections are displayed as solid "
+            "lines in the color of the cable.")
+    )
+    show_logical_connections = forms.BooleanField(
+        label =_("Show Logical Connections"), 
+        required=False, 
+        initial=False,
+        help_text=_("Displays connections between devices that are not "
+            "directly connected (e.g. via patch panels). These connections "
+            "are displayed as yellow dotted lines.")
+    )
+    show_single_cable_logical_conns = forms.BooleanField(
+        label = ("Show redundant Cable and Locigal Connection"),
+        required = False,
+        initial=False,
+        help_text=_("Shows a logical connection (in addition to a cable), "
+            "even if a cable is directly connected. Leaving this option "
+            "disabled prevents that redundant display. This option only "
+            "has an effect if 'Show Logical Connections' is activated.")
+    )
+    show_circuit = forms.BooleanField(
+        label=_("Show Circuit Terminations"), 
+        required=False, 
+        initial=False,
+        help_text=_("Displays connections between circuit terminations. "
+            "These connections are displayed as blue dashed lines.")
+    )
+    show_power = forms.BooleanField(
+        label=_("Show Power Feeds"), 
+        required=False, 
+        initial=False,
+        help_text=_("Displays connections between power outlets and power "
+            "ports. These connections are displayed as solid lines in the "
+            "color of the cable. This option depends on 'Show Cables'.")
+    )
+    show_wireless = forms.BooleanField(
+        label =_("Show Wireless Links"), 
+        required=False, 
+        initial=False,
+        help_text=_("Displays wireless connections. These connections are "
+            "displayed as blue dotted lines.")
+    )
+    draw_default_layout = forms.BooleanField(
+        label = ("Draw Default Layout"),
+        required=False,
+        initial=False,
+        help_text=_("Enable this option if you want to draw the topology on "
+            "the initial load (when you go to the topology plugin page).")
+    )
+
+    class Meta:
+        model = IndividualOptions
+        fields = [
+            'user_id', 'ignore_cable_type', 'preselected_device_roles', 'preselected_tags', 'show_unconnected', 'show_cables', 'show_logical_connections', 'show_single_cable_logical_conns', 'show_circuit', 'show_power', 'show_wireless', 'draw_default_layout'
+        ]
@@ -0,0 +1,31 @@
+# Generated by Django 4.0.8 on 2022-12-06 13:07
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('contenttypes', '0002_remove_content_type_name'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='RoleImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False)),
+                ('created', models.DateTimeField(auto_now_add=True, null=True)),
+                ('last_updated', models.DateTimeField(auto_now=True, null=True)),
+                ('image', models.CharField(max_length=255)),
+                ('object_id', models.PositiveIntegerField(blank=True, null=True)),
+                ('content_type', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='contenttypes.contenttype')),
+            ],
+        ),
+        migrations.AddIndex(
+            model_name='roleimage',
+            index=models.Index(fields=['content_type', 'object_id'], name='netbox_topo_content_9d87d4_idx'),
+        ),
+    ]
@@ -0,0 +1,42 @@
+# Generated by Django 4.1.4 on 2023-03-19 14:13
+
+from django.db import migrations, models
+import taggit.managers
+import utilities.json
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dcim', '0167_module_status'),
+        ('extras', '0084_staging'),
+        ('netbox_topology_views', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='IndividualOptions',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False)),
+                ('created', models.DateTimeField(auto_now_add=True, null=True)),
+                ('last_updated', models.DateTimeField(auto_now=True, null=True)),
+                ('custom_field_data', models.JSONField(blank=True, default=dict, encoder=utilities.json.CustomFieldJSONEncoder)),
+                ('user_id', models.IntegerField(null=True, unique=True)),
+                ('ignore_cable_type', models.CharField(blank=True, max_length=255)),
+                ('show_unconnected', models.BooleanField(default=False)),
+                ('show_cables', models.BooleanField(default=False)),
+                ('show_logical_connections', models.BooleanField(default=False)),
+                ('show_single_cable_logical_conns', models.BooleanField(default=False)),
+                ('show_circuit', models.BooleanField(default=False)),
+                ('show_power', models.BooleanField(default=False)),
+                ('show_wireless', models.BooleanField(default=False)),
+                ('draw_default_layout', models.BooleanField(default=False)),
+                ('preselected_device_roles', models.ManyToManyField(blank=True, db_table='netbox_topology_views_individualoptions_preselected_device', related_name='+', to='dcim.devicerole')),
+                ('preselected_tags', models.ManyToManyField(blank=True, db_table='netbox_topology_views_individualoptions_preselected_tag', related_name='+', to='extras.tag')),
+                ('tags', taggit.managers.TaggableManager(through='extras.TaggedItem', to='extras.Tag')),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+    ]
@@ -0,0 +1,154 @@
+from pathlib import Path
+from typing import Optional
+
+from dcim.models import DeviceRole
+from extras.models import Tag
+from django.conf import settings
+from django.contrib.contenttypes.models import ContentType
+from django.db import models
+from django.templatetags.static import static
+from netbox.models import NetBoxModel
+from netbox.models.features import (
+    ChangeLoggingMixin,
+    ExportTemplatesMixin,
+    WebhooksMixin,
+)
+
+from netbox_topology_views.utils import (
+    CONF_IMAGE_DIR,
+    IMAGE_DIR,
+    Role,
+    find_image_url,
+    get_model_role,
+    image_static_url,
+)
+
+
+class RoleImage(ChangeLoggingMixin, ExportTemplatesMixin, WebhooksMixin):
+    class Meta:
+        indexes = [
+            models.Index(fields=["content_type", "object_id"]),
+        ]
+
+    objects: "models.Manager[RoleImage]"
+
+    image = models.CharField("Path within the netbox static directory", max_length=255)
+
+    content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE)
+    object_id = models.PositiveIntegerField(null=True, blank=True)
+
+    __role: Optional[Role] = None
+
+    @property
+    def role(self) -> Role:
+        if self.__role:
+            return self.__role
+
+        model_class = self.content_type.model_class()
+
+        if not model_class:
+            raise ValueError(f"Invalid content type: {self.content_type}")
+
+        if model_class == DeviceRole:
+            device_role: DeviceRole = DeviceRole.objects.get(pk=self.object_id)
+            self.__role = Role(slug=device_role.slug, name=device_role.name)
+            return self.__role
+
+        self.__role = get_model_role(model_class)
+        return self.__role
+
+    def __str__(self):
+        return f"{self.role} - {self.image}"
+
+    def get_image(self) -> Path:
+        """Get Icon
+
+        returns the model's image's absolute path in the filesystem
+        raises ValueError if the file cannot be found
+        """
+        path = Path(settings.STATIC_ROOT) / self.image
+
+        if not path.exists():
+            raise ValueError(f"{self.role} path '{path}' does not exists")
+
+        return path
+
+    def get_default_image(self, dir: Path = CONF_IMAGE_DIR):
+        """Get default image
+
+        will attempt to find image in given directory with any file extension,
+        otherwise will try to find a `role-unknown` image
+
+        fallback is `STATIC_ROOT/netbox_topology_views/img/role-unknown.png`
+        """
+        if url := find_image_url(self.role.slug, dir):
+            return url
+
+        # fallback to default role unknown image
+        return image_static_url(IMAGE_DIR / "role-unknown.png")
+
+    def get_image_url(self, dir: Path = CONF_IMAGE_DIR) -> str:
+        try:
+            self.get_image()
+        except ValueError:
+            return self.get_default_image(dir)
+        return static(f"/{self.image}")
+
+class IndividualOptions(NetBoxModel):
+    CHOICES = (
+        ('interface', 'interface'),
+        ('front port', 'front port'),
+        ('rear port', 'rear port'),
+        ('power outlet', 'power outlet'),
+        ('power port', 'power port'),
+        ('console port', 'console port'),
+        ('console server port', 'console server port'),
+    )
+
+    user_id = models.IntegerField(
+        null=True,
+        unique=True
+    )
+    ignore_cable_type = models.CharField(
+        max_length = 255,
+        blank = True,
+    )
+    preselected_device_roles = models.ManyToManyField(
+        to='dcim.DeviceRole',
+        related_name='+',
+        blank=True,
+        db_table='netbox_topology_views_individualoptions_preselected_device',
+    )
+    preselected_tags = models.ManyToManyField(
+        to='extras.Tag',
+        related_name='+',
+        blank=True,
+        db_table='netbox_topology_views_individualoptions_preselected_tag',
+    )
+    show_unconnected = models.BooleanField(
+        default=False
+    )
+    show_cables = models.BooleanField(
+        default=False
+    )
+    show_logical_connections = models.BooleanField(
+        default=False
+    )
+    show_single_cable_logical_conns = models.BooleanField(
+        default=False
+    )
+    show_circuit = models.BooleanField(
+        default=False
+    )
+    show_power = models.BooleanField(
+        default=False
+    )
+    show_wireless = models.BooleanField(
+        default=False
+    )
+    draw_default_layout = models.BooleanField(
+        default=False
+    )
+
+    def __str___(self):
+        return f"{self.user_id}"
@@ -1,9 +1,15 @@
-from extras.plugins import PluginMenuButton, PluginMenuItem
-from utilities.choices import ButtonColorChoices
+from extras.plugins import PluginMenu, PluginMenuItem

-menu_items = (
-    PluginMenuItem(
-        link='plugins:netbox_topology_views:home',
-        link_text='Topology'
+menu = PluginMenu(
+    label='Topology Views',
+    icon_class="mdi mdi-sitemap",
+    groups=(
+        ('TOPOLOGY', (PluginMenuItem(link="plugins:netbox_topology_views:home", link_text="Topology"),),),
+        ('PREFERENCES', 
+            (
+                PluginMenuItem(link="plugins:netbox_topology_views:images", link_text="Images"),
+                PluginMenuItem(link="plugins:netbox_topology_views:individualoptions", link_text="Individual Options"),
+            ),
+        ),
    ),
 )
@@ -1 +1 @@
-#visgraph{height:70vh}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529}
+#visgraph{height:64vh}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529}.image-dropdown img{width:64px;height:64px}.image-dropdown-content{display:flex;flex-wrap:wrap;gap:.5rem;padding-inline:.5rem;width:50vw;max-width:32rem}.image-dropdown-content>img{cursor:pointer}
@@ -0,0 +1 @@
+(()=>{var l=(e,t,o)=>new Promise((n,r)=>{var c=s=>{try{i(o.next(s))}catch(a){r(a)}},m=s=>{try{i(o.throw(s))}catch(a){r(a)}},i=s=>s.done?n(s.value):Promise.resolve(s.value).then(c,m);i((o=o.apply(e,t)).next())});var d=e=>{if(!document.cookie)return;let t=null,o=document.cookie.split(";");for(let n=0;n<o.length;n++){let r=o[n].trim();if(r.substring(0,e.length+1)===e+"="){t=decodeURIComponent(r.substring(e.length+1));break}}return t};var u={success:e=>{let t=document.querySelector("#topology-plugin-success-toast");if(!t)return console.error("Could not find toast component!");let o=t.querySelector("span");o.textContent=e,new window.Toast(t).show()},error:e=>{let t=document.querySelector("#topology-plugin-error-toast");if(!t)return console.error("Could not find toast component!");let o=t.querySelector("span");o.textContent=e,new window.Toast(t).show()}};var g={},p=d("csrftoken");document.querySelector("form#images").addEventListener("submit",e=>l(void 0,null,function*(){e.preventDefault();try{let t=yield fetch("/api/plugins/netbox_topology_views/images/",{method:"POST",body:JSON.stringify(g),headers:{"X-CSRFToken":p,"Content-Type":"application/json"}});if(!t.ok)throw new Error(yield t.text());u.success("Saved settings")}catch(t){console.dir(t),u.error(t.message)}}));document.querySelectorAll("form#images .dropdown-menu img").forEach(e=>{e.addEventListener("click",t=>{var c;if(!(t.currentTarget instanceof HTMLElement))return;let{dataset:{role:o,image:n}}=t.currentTarget;g[o]=n;let r=(c=t.currentTarget.closest(".dropdown"))==null?void 0:c.querySelector(`#dropdownMenuButton${o}`);r&&(r.innerHTML=`<img src="${n}" />`)})});})();
@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../static_dev/js/csrftoken.js", "../../../static_dev/js/toast.js", "../../../static_dev/js/images.js"],
+  "mappings": "mNAAO,GAAM,GAAY,AAAC,GAAS,CAC/B,GAAI,CAAC,SAAS,OAAQ,OAEtB,GAAI,GAAc,KACZ,EAAU,SAAS,OAAO,MAAM,KAEtC,OAAS,GAAI,EAAG,EAAI,EAAQ,OAAQ,IAAK,CACrC,GAAM,GAAS,EAAQ,GAAG,OAE1B,GAAI,EAAO,UAAU,EAAG,EAAK,OAAS,KAAO,EAAO,IAAK,CACrD,EAAc,mBAAmB,EAAO,UAAU,EAAK,OAAS,IAChE,OAIR,MAAO,ICfJ,GAAM,GAAQ,CACjB,QAAS,AAAC,GAAY,CAClB,GAAM,GAAK,SAAS,cAAc,kCAClC,GAAI,CAAC,EAAI,MAAO,SAAQ,MAAM,mCAC9B,GAAM,GAAU,EAAG,cAAc,QACjC,EAAQ,YAAc,EAEtB,AADc,GAAI,QAAO,MAAM,GACzB,QAEV,MAAO,AAAC,GAAY,CAChB,GAAM,GAAK,SAAS,cAAc,gCAClC,GAAI,CAAC,EAAI,MAAO,SAAQ,MAAM,mCAC9B,GAAM,GAAU,EAAG,cAAc,QACjC,EAAQ,YAAc,EAEtB,AADc,GAAI,QAAO,MAAM,GACzB,SCZd,GAAM,GAAU,GACV,EAAY,EAAU,aAE5B,SAAS,cAAc,eAAe,iBAAiB,SAAU,AAAO,GAAM,0BAC1E,EAAE,iBACF,GAAI,CACA,GAAM,GAAM,KAAM,OAAM,6CAA8C,CAClE,OAAQ,OACR,KAAM,KAAK,UAAU,GACrB,QAAS,CACL,cAAe,EACf,eAAgB,sBAIxB,GAAI,CAAC,EAAI,GAAI,KAAM,IAAI,OAAM,KAAM,GAAI,QACvC,EAAM,QAAQ,wBACT,EAAP,CACE,QAAQ,IAAI,GACZ,EAAM,MAAM,EAAI,aAIxB,SAAS,iBAAiB,kCAAkC,QAAQ,AAAC,GAAO,CACxE,EAAG,iBAAiB,QAAS,AAAC,GAAM,CA3BxC,MA4BQ,GAAI,CAAE,GAAE,wBAAyB,cAAc,OAC/C,GAAM,CACF,QAAS,CAAE,OAAM,UACjB,EAAE,cAEN,EAAQ,GAAQ,EAEhB,GAAM,GAAS,KAAE,cACZ,QAAQ,eADE,cAET,cAAc,sBAAsB,KAC1C,AAAI,GAAQ,GAAO,UAAY,aAAa",
+  "names": []
+}
@@ -0,0 +1,96 @@
+const esbuild = require('esbuild')
+const { sassPlugin } = require('esbuild-sass-plugin')
+
+const options = {
+    bundle: true,
+    minify: true,
+    sourcemap: 'external',
+    sourcesContent: false,
+    logLevel: 'error'
+}
+
+const ARGS = process.argv.slice(2)
+const noCache = ARGS.includes('--no-cache')
+
+async function bundleScripts() {
+    const entryPoints = {
+        app: 'js/home.js',
+        images: 'js/images.js'
+    }
+
+    try {
+        const result = await esbuild.build({
+            ...options,
+            outdir: '../static/netbox_topology_views/js/',
+            entryPoints,
+            target: 'es2016'
+        })
+        if (result.errors.length !== 0) return
+
+        for (const [targetName, sourceName] of Object.entries(entryPoints)) {
+            const source = sourceName.split('/').pop() // take last element
+            console.log(
+                `✅ Bundled source file '${source}' to '${targetName}.js'`
+            )
+        }
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+async function bundleStyles() {
+    try {
+        const entryPoints = {
+            vendor: 'css/_external.scss',
+            app: 'css/app.scss'
+        }
+        const pluginOptions = { outputStyle: 'compressed' }
+        // Allow cache disabling.
+        if (noCache) {
+            pluginOptions.cache = false
+        }
+
+        const result = await esbuild.build({
+            ...options,
+            outdir: '../static/netbox_topology_views/css/',
+            // Disable sourcemaps for CSS/SCSS files, see #7068
+            sourcemap: false,
+            entryPoints,
+            plugins: [sassPlugin(pluginOptions)],
+            loader: {
+                '.eot': 'file',
+                '.woff': 'file',
+                '.woff2': 'file',
+                '.svg': 'file',
+                '.ttf': 'file'
+            }
+        })
+        if (result.errors.length === 0) {
+            for (const [targetName, sourceName] of Object.entries(
+                entryPoints
+            )) {
+                const source = sourceName.split('/')[1]
+                console.log(
+                    `✅ Bundled source file '${source}' to '${targetName}.css'`
+                )
+            }
+        }
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+async function bundleAll() {
+    if (ARGS.includes('--styles')) {
+        // Only run style jobs.
+        return await bundleStyles()
+    }
+    if (ARGS.includes('--scripts')) {
+        // Only run script jobs.
+        return await bundleScripts()
+    }
+    await bundleStyles()
+    await bundleScripts()
+}
+
+bundleAll()
@@ -0,0 +1 @@
+@import '../node_modules/vis-network/dist/dist/vis-network.min.css';
@@ -1,7 +1,27 @@
 #visgraph {
-    height: 70vh;
-  }
+  height: 64vh;
+}

 html[data-netbox-color-mode=dark] #visgraph {
  background-color: #212529;
-}
+}
+
+
+.image-dropdown img {
+  width: 64px;
+  height: 64px;
+}
+
+.image-dropdown-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  padding-inline: 0.5rem;
+  width: 50vw;
+  max-width: 32rem;
+
+  > img {
+    cursor: pointer;
+  }
+}
@@ -0,0 +1,17 @@
+export const getCookie = (name) => {
+    if (!document.cookie) return
+
+    let cookieValue = null
+    const cookies = document.cookie.split(';')
+
+    for (let i = 0; i < cookies.length; i++) {
+        const 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
+}
@@ -1,31 +1,31 @@
-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();
-var options = {
+import { DataSet } from 'vis-data/esnext'
+import { Network } from 'vis-network/esnext'
+import { getCookie } from './csrftoken.js'
+
+const options = {
    interaction: {
        hover: true,
        hoverConnectedEdges: true,
-        multiselect: false
+        multiselect: true
    },
    nodes: {
        shape: 'image',
-        brokenImage: '../../static/netbox_topology_views/img/role-unknown.png',
+        brokenImage: brokenImage ?? '',
        size: 35,
        font: {
            multi: 'md',
            face: 'helvetica',
-        },
+            color:
+                document.documentElement.dataset.netboxColorMode === 'dark'
+                    ? '#fff'
+                    : '#000'
+        }
    },
    edges: {
        length: 100,
        width: 2,
        font: {
-            face: 'helvetica',
+            face: 'helvetica'
        },
        shadow: {
            enabled: true
@@ -34,128 +34,122 @@ var options = {
    physics: {
        solver: 'forceAtlas2Based'
    }
-};
-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;
-            }
-        }
+// Load CSRF token
+const csrftoken = getCookie('csrftoken')
+
+// Render vis graph
+let graph = null // vis graph instance
+
+const container = document.querySelector('#visgraph')
+const coordSaveCheckbox = document.querySelector('#id_save_coords')
+;(function handleLoadData() {
+    if (!topologyData) return
+
+    function htmlTitle(text) {
+        const container = document.createElement('div')
+        container.innerHTML = text
+        return container
    }
-    return cookieValue;
-}

+    const nodes = new DataSet(
+        topologyData.nodes.map((node) => ({
+            ...node,
+            title: htmlTitle(node.title)
+        }))
+    )

-function htmlTitle(html) {
-    container = document.createElement("div");
-    container.innerHTML = html;
-    return container;
-  }
+    const edges = new DataSet(
+        topologyData.edges.map((node) => ({
+            ...node,
+            title: htmlTitle(node.title)
+        }))
+    )
+    graph = new Network(container, { nodes, edges }, options)
+    graph.fit()

-function addEdge(item) {
-    item.title = htmlTitle( item.title );
-    edges.add(item);
-}
+    graph.on('dragEnd', (params) => {
+        if (coordSaveCheckbox == null) return
+        if (!coordSaveCheckbox.checked) return
+        
+        Promise.allSettled(
+            Object.entries(graph.getPositions(params.nodes)).map(
+                async ([nodeId, nodePosition]) => {
+                    const res = await fetch(
+                        '/api/plugins/netbox_topology_views/save-coords/save_coords/',
+                        {
+                            method: 'PATCH',
+                            headers: {
+                                'X-CSRFToken': csrftoken,
+                                Accept: 'application/json',
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                node_id: nodeId,
+                                x: nodePosition.x,
+                                y: nodePosition.y
+                            })
+                        }
+                    )

-function addNode(item) {
-    item.title = htmlTitle( item.title );
-    nodes.add(item);
-}
+                    console.log(nodeId, res.status, res.statusText)
+                }
+            )
+        )
+    })

-function iniPlotboxIndex() {
-    document.addEventListener('DOMContentLoaded', function () {
-        csrftoken = getCookie('csrftoken');
-        container = document.getElementById('visgraph');
-        htmlElement = document.getElementsByTagName("html")[0];
-        downloadButton = document.getElementById('btnDownloadImage');
-        handleLoadData();
-        btnFullView = document.getElementById('btnFullView');
-        coord_save_checkbox = document.getElementById('id_save_coords');
-    }, false);
-}
+    graph.on('doubleClick', (params) => {
+        if (params.nodes.length > 0) {
+            params.nodes.forEach((node) => {
+                window.open(nodes.get(node).href, '_blank')
+            })
+        }
+        else {
+            params.edges.forEach((edge) => {
+                window.open(edges.get(edge).href, '_blank')
+            })
+        }
+    })
+})()
+
+// Download Graph
+const MIME_TYPE = 'image/png'
+
+const downloadButton = document.querySelector('#btnDownloadImage')
+downloadButton.addEventListener('click', (e) => {
+    performGraphDownload()
+})

 function performGraphDownload() {
-    var tempDownloadLink = document.createElement('a');
-    var generatedImageUrl = canvas.toDataURL(MIME_TYPE);
+    const canvas = container.querySelector('canvas')
+    const tempDownloadLink = document.createElement('a')
+    const generatedImageUrl = canvas.toDataURL(MIME_TYPE)

-    tempDownloadLink.href = generatedImageUrl;
-    tempDownloadLink.download = "topology";
-    document.body.appendChild(tempDownloadLink);
-    tempDownloadLink.click();
-    document.body.removeChild(tempDownloadLink);
+    tempDownloadLink.href = generatedImageUrl
+    tempDownloadLink.download = 'topology'
+    document.body.appendChild(tempDownloadLink)
+    tempDownloadLink.click()
+    document.body.removeChild(tempDownloadLink)
 }

-function handleLoadData() {
-    if (topology_data !== null) {
-        
-        if (htmlElement.dataset.netboxColorMode == "dark") {
-            options.nodes.font.color = "#fff";
-        }
+// Theme switching
+const observer = new MutationObserver((mutations) =>
+    mutations.forEach((mutation) => {
+        if (
+            !graph ||
+            mutation.type !== 'attributes' ||
+            mutation.attributeName !== 'data-netbox-color-mode' ||
+            !(mutation.target instanceof HTMLElement)
+        )
+            return
+        const { netboxColorMode } = mutation.target.dataset
+        options.nodes.font.color = netboxColorMode === 'dark' ? '#fff' : '#000'
+        graph.setOptions(options)
+    })
+)

-        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.fit();
-        canvas = document.getElementById('visgraph').getElementsByTagName('canvas')[0];
-
-        downloadButton.onclick = function(e) { performGraphDownload(); return false; };
-
-        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");
-            }
-
-        });
-    }
-}
+observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-netbox-color-mode']
+})
@@ -0,0 +1,41 @@
+import { getCookie } from './csrftoken.js'
+import { toast } from './toast.js'
+
+const mapping = {}
+const csrftoken = getCookie('csrftoken')
+
+document.querySelector('form#images').addEventListener('submit', async (e) => {
+    e.preventDefault()
+    try {
+        const res = await fetch('/api/plugins/netbox_topology_views/images/', {
+            method: 'POST',
+            body: JSON.stringify(mapping),
+            headers: {
+                'X-CSRFToken': csrftoken,
+                'Content-Type': 'application/json'
+            }
+        })
+
+        if (!res.ok) throw new Error(await res.text())
+        toast.success('Saved settings')
+    } catch (err) {
+        console.dir(err)
+        toast.error(err.message)
+    }
+})
+
+document.querySelectorAll('form#images .dropdown-menu img').forEach((el) => {
+    el.addEventListener('click', (e) => {
+        if (!(e.currentTarget instanceof HTMLElement)) return
+        const {
+            dataset: { role, image }
+        } = e.currentTarget
+
+        mapping[role] = image
+
+        const button = e.currentTarget
+            .closest('.dropdown')
+            ?.querySelector(`#dropdownMenuButton${role}`)
+        if (button) button.innerHTML = `<img src="${image}" />`
+    })
+})
@@ -0,0 +1,18 @@
+export const toast = {
+    success: (message) => {
+        const el = document.querySelector('#topology-plugin-success-toast')
+        if (!el) return console.error('Could not find toast component!')
+        const content = el.querySelector('span')
+        content.textContent = message
+        const toast = new window.Toast(el)
+        toast.show()
+    },
+    error: (message) => {
+        const el = document.querySelector('#topology-plugin-error-toast')
+        if (!el) return console.error('Could not find toast component!')
+        const content = el.querySelector('span')
+        content.textContent = message
+        const toast = new window.Toast(el)
+        toast.show()
+    }
+}
@@ -0,0 +1,454 @@
+{
+  "name": "netbox_topology_views",
+  "version": "3.3.0",
+  "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"
+      }
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
+      "integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
+      "dev": true,
+      "optional": true
+    },
+    "@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
+    },
+    "esbuild": {
+      "version": "0.12.29",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.29.tgz",
+      "integrity": "sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==",
+      "dev": true
+    },
+    "esbuild-android-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
+      "integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-android-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
+      "integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-darwin-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
+      "integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-darwin-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
+      "integrity": "sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-freebsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
+      "integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-freebsd-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
+      "integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-32": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
+      "integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
+      "integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-arm": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
+      "integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
+      "integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-mips64le": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
+      "integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-ppc64le": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
+      "integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-riscv64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
+      "integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-linux-s390x": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
+      "integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-netbsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
+      "integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-openbsd-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
+      "integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-sass-plugin": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-1.8.2.tgz",
+      "integrity": "sha512-ZBjONsRSpmzMKvxSNohnNXCNaBBVlYLqYhyZtN8leGGkJktCvVMKC6g9V5TWIemk1SEaW2XK+YFxz3Whw3+YYw==",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.14.5",
+        "picomatch": "^2.3.0",
+        "resolve": "^1.20.0",
+        "sass": "^1.45.0"
+      },
+      "dependencies": {
+        "esbuild": {
+          "version": "0.14.54",
+          "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
+          "integrity": "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==",
+          "dev": true,
+          "requires": {
+            "@esbuild/linux-loong64": "0.14.54",
+            "esbuild-android-64": "0.14.54",
+            "esbuild-android-arm64": "0.14.54",
+            "esbuild-darwin-64": "0.14.54",
+            "esbuild-darwin-arm64": "0.14.54",
+            "esbuild-freebsd-64": "0.14.54",
+            "esbuild-freebsd-arm64": "0.14.54",
+            "esbuild-linux-32": "0.14.54",
+            "esbuild-linux-64": "0.14.54",
+            "esbuild-linux-arm": "0.14.54",
+            "esbuild-linux-arm64": "0.14.54",
+            "esbuild-linux-mips64le": "0.14.54",
+            "esbuild-linux-ppc64le": "0.14.54",
+            "esbuild-linux-riscv64": "0.14.54",
+            "esbuild-linux-s390x": "0.14.54",
+            "esbuild-netbsd-64": "0.14.54",
+            "esbuild-openbsd-64": "0.14.54",
+            "esbuild-sunos-64": "0.14.54",
+            "esbuild-windows-32": "0.14.54",
+            "esbuild-windows-64": "0.14.54",
+            "esbuild-windows-arm64": "0.14.54"
+          }
+        }
+      }
+    },
+    "esbuild-sunos-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
+      "integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-32": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
+      "integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
+      "integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
+      "dev": true,
+      "optional": true
+    },
+    "esbuild-windows-arm64": {
+      "version": "0.14.54",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
+      "integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
+      "dev": true,
+      "optional": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "dev": true
+    },
+    "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
+    },
+    "path-parse": {
+      "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
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "sass": {
+      "version": "1.56.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
+      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "timsort": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
+      "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
+    },
+    "vis-data": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
+      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w=="
+    },
+    "vis-network": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.2.tgz",
+      "integrity": "sha512-BdapguKg7sk3NvdZaDsM7T6rNhOBFz0/F4ZScxctK4klRzQPLQPTEcmbioXaZhMkkgWymzBR3lFCxL1q+eYyAw=="
+    },
+    "vis-util": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
+      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g=="
+    }
+  }
+}
@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "netbox_topology_views",
+  "version": "3.3.0",
+  "scripts": {
+    "bundle": "node bundle.js",
+    "bundle:styles": "node bundle.js --styles",
+    "bundle:scripts": "node bundle.js --scripts"
+  },
+  "dependencies": {
+    "vis-data": "^7.1.4",
+    "vis-network": "^9.1.2",
+    "vis-util": "^5.0.3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.12.24",
+    "esbuild-sass-plugin": "^1.5.2",
+    "@egjs/hammerjs": "^2.0.0",
+    "component-emitter": "^1.3.0",
+    "keycharm": "^0.4.0",
+    "timsort": "^0.3.0",
+    "uuid": "^8.0.0"
+  }
+}
@@ -0,0 +1,251 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@egjs/hammerjs@^2.0.0":
+  version "2.0.17"
+  resolved "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
+"@types/hammerjs@^2.0.36":
+  version "2.0.41"
+  resolved "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz"
+  integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+component-emitter@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
+
+esbuild-sass-plugin@^1.5.2:
+  version "1.8.2"
+  resolved "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-1.8.2.tgz"
+  integrity sha512-ZBjONsRSpmzMKvxSNohnNXCNaBBVlYLqYhyZtN8leGGkJktCvVMKC6g9V5TWIemk1SEaW2XK+YFxz3Whw3+YYw==
+  dependencies:
+    esbuild "^0.14.5"
+    picomatch "^2.3.0"
+    resolve "^1.20.0"
+    sass "^1.45.0"
+
+esbuild@^0.12.24:
+  version "0.12.29"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.29.tgz"
+  integrity sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==
+
+esbuild@^0.14.5:
+  version "0.14.54"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+"keycharm@^0.2.0 || ^0.3.0 || ^0.4.0", keycharm@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz"
+  integrity sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+resolve@^1.20.0:
+  version "1.22.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+sass@^1.45.0:
+  version "1.56.2"
+  resolved "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz"
+  integrity sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
+  integrity sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+"uuid@^3.4.0 || ^7.0.0 || ^8.0.0", "uuid@^7.0.0 || ^8.0.0", uuid@^8.0.0:
+  version "8.3.2"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+vis-data@^7.0.0, vis-data@^7.1.4:
+  version "7.1.4"
+  resolved "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz"
+  integrity sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==
+
+vis-network@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.npmjs.org/vis-network/-/vis-network-9.1.2.tgz"
+  integrity sha512-BdapguKg7sk3NvdZaDsM7T6rNhOBFz0/F4ZScxctK4klRzQPLQPTEcmbioXaZhMkkgWymzBR3lFCxL1q+eYyAw==
+
+"vis-util@^4.0.0 || ^5.0.0", vis-util@^5.0.1, vis-util@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz"
+  integrity sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==
@@ -0,0 +1,15 @@
+
+from extras.plugins import PluginTemplateExtension
+from django.conf import settings
+from packaging import version
+
+NETBOX_CURRENT_VERSION = version.parse(settings.VERSION)
+
+
+class SiteButtons(PluginTemplateExtension):
+    model = 'dcim.site'
+    def buttons(self):
+        return self.render('netbox_topology_views/site_button.html')
+
+
+template_extensions = [SiteButtons]
@@ -0,0 +1,39 @@
+{% load static %}
+
+<link rel="stylesheet" href="{% static 'netbox_topology_views/css/vendor.css' %}">
+<link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">
+
+<div class="modal-header">
+    <h5 class="modal-title">Topology Views</h5>
+    <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>
+            <a class="btn  btn-sm btn-danger" data-bs-dismiss="modal">
+                <i class="mdi mdi-close-thick"></i>
+                Close
+            </a>
+    	</div>
+	</div>
+</div>
+<div class="panel-body" >
+    <div style="max-width: 900px; height: 500px;">
+        <div id="visgraph" style="width: 100%; height: 100%;">      
+        </div>
+    </div>
+</div>
+
+<style type="text/css">
+    .modal-dialog {
+        max-width: 902px !important;
+    }
+</style>
+
+<script type="text/javascript">
+    const brokenImage = '{{ broken_image }}';
+    const topologyData = {{ topology_data | safe }};
+</script>
+<script src="{% static 'netbox_topology_views/js/app.js' %}?ver={{ epoch }} " defer></script>
@@ -0,0 +1,46 @@
+{% extends 'base/layout.html' %}
+{% load buttons %}
+{% load render_table from django_tables2 %}
+{% load helpers %}
+{% load static %}
+
+{% block title %}Topology Views Images{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">
+{% endblock %}
+
+{% block content-wrapper %}
+  <form id="images" class="container py-4">
+    <div class="d-flex flex-wrap justify-content-center gap-3 mb-2">
+      {% for role in roles %}
+        <div class="d-flex flex-column align-items-center">
+          <div class="image-dropdown dropdown">
+            <button class="btn btn-secondary" type="button" id="dropdownMenuButton{{ role.id }}" data-bs-toggle="dropdown" aria-expanded="false">
+              {% if role.image %}
+                <img src="{{ role.image }}" />
+              {% else %}
+                Image
+              {% endif %}
+            </button>
+            <div class="dropdown-menu mt-2" aria-labelledby="dropdownMenuButton{{ role.id }}">
+              <div class="image-dropdown-content">
+              {% for image in images %}
+                <img src="{{ image.url }}" title="{{ image.title }}" width="64" data-role="{{ role.id }}" data-image="{{ image.url }}"/>
+              {% endfor %}
+              </div>
+            </div>
+          </div>
+          <span>{{ role.name }}</span>
+        </div>
+      {% endfor %}
+    </div>
+
+    <button class="btn btn-primary" type="submit">Save</button>
+  </form>
+  {% include 'netbox_topology_views/toasts.html' %}
+{% endblock content-wrapper %}
+
+{% block javascript %}
+  <script src="{% static 'netbox_topology_views/js/images.js' %}" defer></script>
+{% endblock javascript %}
@@ -48,14 +48,16 @@
  {% with config=settings.PLUGINS_CONFIG.netbox_topology_views %}
    <div class="tab-content">

+      {# Applied filters #}
+      {% if filter_form %}
+        {% applied_filters model filter_form request.GET %}
+        <hr style="margin-top: 0px;">
+      {% endif %}
+
      <div class="tab-pane show active" id="networks" role="tabpanel" aria-labelledby="network-tab">
        <div class="panel-body">
-          <div id="visgraph" class=""></div>
+          <div id="visgraph"></div>
        </div>
-
-        <script type="text/javascript">
-          var topology_data = {{ topology_data | safe }};
-        </script>
      </div>

      {% if filter_form %}
@@ -69,7 +71,9 @@
 {% 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>
+  <script type="text/javascript">
+    const brokenImage = '{{ broken_image }}';
+    const topologyData = {{ topology_data | safe }};
+  </script>
+	<script src="{% static 'netbox_topology_views/js/app.js' %}" defer></script>
 {% endblock javascript %}
@@ -0,0 +1,5 @@
+{% extends 'generic/object_edit.html' %}
+
+{% block title %}Topology Views Individual Options{% endblock %}
+
+{% block tabs %} {% endblock tabs %}
@@ -0,0 +1,4 @@
+<a role="button" class="btn btn-sm btn-primary" title="Topology" href="#" hx-get="/plugins/netbox_topology_views/topology/?site_id={{ object.id }}&show_cables=on" hx-target="#htmx-modal-content" data-bs-toggle="modal" data-bs-target="#htmx-modal">
+    <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
+    Topology
+</a>
@@ -0,0 +1,44 @@
+<div id="django-messages" class="toast-container">
+    <div
+        id="topology-plugin-error-toast"
+        class="toast align-items-center border-0 bg-danger hide"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-bs-delay="2000"
+    >
+        <div class="d-flex">
+            <div class="toast-body">
+                😢
+                <span>Error</span>
+            </div>
+            <button
+                type="button"
+                class="btn-close me-2 m-auto"
+                data-bs-dismiss="toast"
+                aria-label="Close"
+            ></button>
+        </div>
+    </div>
+    <div
+        id="topology-plugin-success-toast"
+        class="toast align-items-center border-0 bg-success hide"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-bs-delay="2000"
+    >
+        <div class="d-flex">
+            <div class="toast-body">
+                👍
+                <span>Success</span>
+            </div>
+            <button
+                type="button"
+                class="btn-close me-2 m-auto"
+                data-bs-dismiss="toast"
+                aria-label="Close"
+            ></button>
+        </div>
+    </div>
+</div>
@@ -1,10 +1,13 @@
 from django.urls import path
+from django.views.generic.base import RedirectView

 from . import views

-
 # Define a list of URL patterns to be imported by NetBox. Each pattern maps a URL to
 # a specific view so that it can be accessed by users.
 urlpatterns = (
-    path('', views.TopologyHomeView.as_view(), name='home'),
+    path("", RedirectView.as_view(url="topology/", permanent=True)),
+    path("topology/", views.TopologyHomeView.as_view(), name="home"),
+    path("images/", views.TopologyImagesView.as_view(), name="images"),
+    path("individualoptions/", views.TopologyIndividualOptionsView.as_view(), name="individualoptions"),
 )
@@ -0,0 +1,105 @@
+from dataclasses import dataclass
+from functools import lru_cache
+from pathlib import Path
+from typing import Type
+
+import sys
+
+from django.conf import settings
+from django.db.models import Model
+from django.templatetags.static import static
+from django.utils.text import camel_case_to_spaces, re_camel_case
+
+IMAGE_DIR = Path(settings.STATIC_ROOT) / "netbox_topology_views/img"
+if sys.version_info >= (3,9,0):
+    CONF_IMAGE_DIR: Path = Path(settings.STATIC_ROOT) / settings.PLUGINS_CONFIG[
+        "netbox_topology_views"
+    ]["static_image_directory"].removeprefix("/")
+else:
+    prefix = "/"
+    plugin_path = settings.PLUGINS_CONFIG["netbox_topology_views"]["static_image_directory"]
+    if plugin_path.startswith(prefix):
+        plugin_path_new = plugin_path[len(prefix):]
+        CONF_IMAGE_DIR: Path = Path(settings.STATIC_ROOT) / plugin_path_new
+    else:
+        CONF_IMAGE_DIR: Path = Path(settings.STATIC_ROOT) / plugin_path
+
+
+def image_static_url(path: Path) -> str:
+    return settings.BASE_PATH + static(
+        f"/{path.relative_to(Path(settings.STATIC_ROOT))}"
+    )
+
+
+def get_image_from_url(url: str) -> str:
+    url_path = settings.BASE_PATH + settings.STATIC_URL
+    if sys.version_info >= (3,9,0):
+        return url.removeprefix(url_path)
+    else:
+        if url.startswith(url_path):
+            url_new = url[len(url_path):]
+            return url_new
+        else:
+            return url
+
+
+IMAGE_FILETYPES = (
+    "apng",
+    "avif",
+    "bmp",
+    "cur",
+    "gif",
+    "ico",
+    "jfif",
+    "jpeg",
+    "jpg",
+    "pjp",
+    "pjpeg",
+    "png",
+    "svg",
+    "webp",
+)
+
+
+def find_image_in_dir(glob: str, dir: Path):
+    return next(
+        (f for f in dir.glob(f"{glob}.*") if f.suffix.lstrip(".") in IMAGE_FILETYPES),
+        None,
+    )
+
+
+@lru_cache(maxsize=50)
+def find_image_url(glob: str, dir: Path = CONF_IMAGE_DIR):
+    """
+    will attempt to find a file that matches glob in given directory with any file extension,
+    otherwise will try to find a `role-unknown` image
+
+    returns static file url
+    """
+    if file := find_image_in_dir(glob, dir):
+        return image_static_url(file)
+
+    if glob != "role-unknown" and (file := find_image_in_dir("role-unknown", dir)):
+        return image_static_url(file)
+
+    if dir != IMAGE_DIR and (file := find_image_in_dir("role-unknown", IMAGE_DIR)):
+        return image_static_url(file)
+
+    return ""
+
+
+@dataclass
+class Role:
+    slug: str
+    name: str
+
+
+def get_model_slug(model: Type[Model]):
+    return camel_case_to_spaces(model.__name__).replace(" ", "-")
+
+
+def get_model_role(model: Type[Model]) -> Role:
+    return Role(
+        slug=get_model_slug(model),
+        name=re_camel_case.sub(r" \1", model.__name__),
+    )
@@ -1,27 +0,0 @@
-{
-  "private": true,
-  "name": "netbox_topology_views",
-  "version": "2.0.2",
-  "scripts": {
-    "resources": "gulp build",
-    "resources_dev": "gulp build_dev"
-  },
-  "dependencies": {
-    "vis-data": "^7.1.2",
-    "vis-network": "^9.1.0",
-    "vis-util": "^5.0.2"
-  },
-  "devDependencies": {
-    "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"
-  },
-  "peerDependencies": {
-    "@egjs/hammerjs": "^2.0.0",
-    "uuid": "^8.0.0",
-    "keycharm": "^0.4.0",
-    "timsort": "^0.3.0"
-  }
-}
@@ -0,0 +1,3 @@
+djangorestframework
+django-filter
+black
@@ -1,29 +1,29 @@
-from setuptools import setup, find_packages
+from pathlib import Path

-from os import path
-top_level_directory = path.abspath(path.dirname(__file__))
-with open(path.join(top_level_directory, 'README.md'), encoding='utf-8') as file:
-    long_description = file.read()
+from setuptools import find_packages, setup
+
+readme = Path(__file__).parent / "README.md"
+long_description = readme.read_text()

 setup(
-    name='netbox-topology-views',
-    version='2.0.2',
-    description='An NetBox plugin to create Topology maps',
+    name="netbox-topology-views",
+    version="3.3.0",
+    description="An NetBox plugin to create Topology maps",
    long_description=long_description,
-    long_description_content_type='text/markdown',
-    url='https://github.com/mattieserver/netbox-topology-views',
-    author='Mattijs Vanhaverbeke',
-    license='Apache 2.0',
+    long_description_content_type="text/markdown",
+    url="https://github.com/mattieserver/netbox-topology-views",
+    author="Mattijs Vanhaverbeke",
+    license="Apache 2.0",
    install_requires=[],
    packages=find_packages(),
    include_package_data=True,
-    keywords=['netbox-plugin'],
+    keywords=["netbox-plugin"],
    classifiers=[
-        'Programming Language :: Python',
-        'Programming Language :: Python :: 3',
-        'Programming Language :: Python :: 3 :: Only',
+        "Programming Language :: Python",
+        "Programming Language :: Python :: 3",
+        "Programming Language :: Python :: 3 :: Only",
    ],
    project_urls={
-        'Source': 'https://github.com/mattieserver/netbox-topology-views',
+        "Source": "https://github.com/mattieserver/netbox-topology-views",
    },
 )
Author	SHA1	Message	Date
mattieserver	0004f0a6d3	bump version (#269 )	2023-03-23 10:08:34 +01:00
MarioandMattijs Vanhaverbeke	5d20a7ad15	Closes #252,#78,#177,#265: Move options from config file to GUI (#262 ) * Added some individual options * Added general options * Added show_single_cable_logical_conns and draw_default_layout * Added ignore_cable_type to IndividualOptions * Corrected permission, tiny improvements * Add preselected_device_roles to IndividualOptions * Add preselected_tags * Updated documentation * Update README.md * Corrected queryset for preselected_tags * Update README.md * move supported_termination_types to inside the function to prevent migration issues * removed general options * added new migration script --------- Co-authored-by: Mattijs Vanhaverbeke <mattijs.vanhaverbeke@ebo-enterprises.com>	2023-03-23 09:57:51 +01:00
Mario	4fbc2fd8ce	Merge pull request #268 from mattieserver/dreng-patch-1 Update pull_request_template.md	2023-03-19 16:39:36 +01:00
Mario	3e90502630	Update pull_request_template.md	2023-03-19 16:39:15 +01:00
Jan Krupa	c4ee38c0c9	Change menu navigation icon (#266 )	2023-03-10 09:29:33 +01:00
Mario	b8a1af15ef	Merge pull request #255 from royvegard/254_open_trace_for_logical_connection Closes #254: Add a url to cable trace for logical connections	2023-01-29 19:16:23 +01:00
Roy Vegard OvesenandMario	7ecd29bb5d	Avoid rendering double slash Co-authored-by: Mario <github@franzbonenkamp.de>	2023-01-29 18:57:09 +01:00
Roy Vegard Ovesen	b3b94f63d9	Add a url to cable trace for logical connections Fixes #254	2023-01-29 11:52:50 +00:00
Mario	c0b36ca8d3	Merge pull request #249 from dreng/248_update_docs Fixes #248: Update README.md	2023-01-17 10:44:31 +01:00
Mario	77b194b680	Update README.md	2023-01-17 10:31:41 +01:00
mattieserver	6fafbeb7c3	bump version (#246 )	2023-01-09 13:37:06 +01:00
Mario	6f2ac1684a	Added show_cables=on to HTMX-GET parameters (#242 )	2023-01-08 22:08:04 +01:00
Mario	1227c87d05	Merge pull request #243 from dreng/241_bigger_site_topology_window Closes #241: Make Site Topology window bigger	2023-01-07 12:47:55 +01:00
Mario	89b04ff0c5	Merge branch 'mattieserver:master' into 241_bigger_site_topology_window	2023-01-06 23:50:07 +01:00
dreng	47079cf27f	Raised max-width	2023-01-06 23:47:24 +01:00
Mario	fbf223f8bf	Merge pull request #239 from mattieserver/revert-230-update-git-ignore Revert "Update git ignore"	2023-01-06 10:18:18 +01:00
Mario	b74fbb828f	Revert "Update git ignore"	2023-01-06 10:09:47 +01:00
mattieserver	2e34f7435a	Release v3.2.0 (#234 ) * bump version * bump version	2023-01-05 13:12:32 +01:00
Mario	3805d75dba	Merge pull request #230 from dreng/update-git-ignore Update git ignore	2022-12-28 11:48:00 +01:00
Mario	b178d68338	Merge branch 'mattieserver:master' into update-git-ignore	2022-12-28 11:40:45 +01:00
mario	37c900ea4a	Added VS Code project settings to .gitignore	2022-12-28 11:36:33 +01:00
Marioandmattieserver	0cb0c10dbb	Closes #181 : Open cable on double-click (#225 ) * Closes #181: Open cable on double-click * build js Co-authored-by: mattieserver <3049868+mattieserver@users.noreply.github.com>	2022-12-27 14:57:32 +01:00
tgrusendorf Mario tagrusendorf mattieserver Mattijs Vanhaverbeke	dfb0b532b9	Closes #151 : Implement interface end to end connection view (#188 ) * Added end to end interface connections, made showing cables and wireless optional * Fixed 'Hide Unconnected' and other bugs * rename var + extra check * Add filter selection image for readme * Added guidance on using the selection options * Renaming to selection_options * Renamed filter_selection to selection_options * Update README.md * Bug fix * fix parameter order * differentiate line type for interface connections * allow both cables and logical connections * Change logical connection line type Co-authored-by: Mario <github@franzbonenkamp.de> * Hide redundant connections, configurable options * updated readme + removed visjs setting from settings * Update README.md Co-authored-by: Mario <github@franzbonenkamp.de> * updated readme for 'Show Logical Connections' Co-authored-by: tagrusendorf <tagrusendorf@dev-netbox.tag.kbproductions.ca> Co-authored-by: mattieserver <3049868+mattieserver@users.noreply.github.com> Co-authored-by: Mario <github@franzbonenkamp.de> Co-authored-by: Mattijs Vanhaverbeke <mattijs.vanhaverbeke@ebo-enterprises.com>	2022-12-27 14:49:34 +01:00
mattieserver	e0bd1d4e86	Closes #160 : feature save filters (#227 ) * initial saved filter support * add filter field * fixed model * changed margin	2022-12-26 12:07:01 +01:00
mattieserver	683a980858	Link to netbox-docker wiki for install in docker (#229 ) * Link to netbox-docker wiki for install in docker * cleanup old docker stuff	2022-12-23 16:05:30 +01:00
mattieserver	2befe94f5d	menu layout: use new class from netbox 3.4 (#215 ) * new layout * used new PluginMenu class	2022-12-21 17:03:47 +01:00
Mario	2f65614fcb	Merge pull request #226 from dreng/pull_request_template Create pull_request_template.md	2022-12-20 19:54:44 +01:00
Mario	2722dfa793	Create pull_request_template.md	2022-12-20 19:38:36 +01:00
mattieserver	41d6afc336	bump version (#222 )	2022-12-18 18:50:58 +01:00
mattieserver	2901dbb5c7	add check for python3.9 (#221 )	2022-12-18 18:45:49 +01:00
mattieserverandMario	37122cd76c	initial update of docs (#213 ) * initial update of docs * updated docs * Update dev_setup/README.md Co-authored-by: Mario <github@franzbonenkamp.de> * Update dev_setup/README.md Co-authored-by: Mario <github@franzbonenkamp.de> * Update dev_setup/README.md Co-authored-by: Mario <github@franzbonenkamp.de> * added docker / native install for psql * Update dev_setup/README.md Co-authored-by: Mario <github@franzbonenkamp.de> Co-authored-by: Mario <github@franzbonenkamp.de>	2022-12-18 18:21:12 +01:00
Renato Almeida de OliveiraandMattijs Vanhaverbeke	7173564ea9	Topology button in Site View (#220 ) * Topology button in Site View * Add mdi icons to Topology and Close Buttons * Fix buttons tag and class * fixed drag & site filter Co-authored-by: Mattijs Vanhaverbeke <mattijs.vanhaverbeke@ebo-enterprises.com>	2022-12-18 18:15:48 +01:00
Mario	be402b1b5c	Closes #210 : Issue templates (#211 ) * Create bug_report.yaml * Create feature_request.yaml * Create config.yml	2022-12-11 12:29:36 +01:00
mattieserver	f187e75fff	bump version (#200 )	2022-12-09 13:52:44 +01:00
mattieserver	c6df846bde	changed api call path (#198 )	2022-12-09 13:46:30 +01:00
Victor Gorchilov	52c2611e9d	Feature: Add customisable icons in topology (#193 ) * [up] add config for custom images, better js * [up] use bundler to bundle js * [fix] remove domcontentloaded since defer is used * [fix] formatting with black * [fix] images drf api * [up] add support for custom icons on additional roles: power panel, power feed, circuit * [up] optimize topology generation by using `_id` when trying to access pk of related object * [fix] kebab case instead of slugification * [fix] use empty queryset in api views & change coord save logic	2022-12-09 13:40:39 +01:00
Robin Schneider	5c87694b87	docs: Recommend to set custom field coordinates to hidden (#180 ) Changing the coordinates manually would be very tedious. Users are not expected to do this and to prevent them from coming up with this idea in the first place, set the custom field to hidden.	2022-11-03 13:42:51 +01:00
Roy Vegard Ovesen	94f5314649	Filter by rack (#175 ) Fixes #174	2022-10-09 19:12:59 +02:00
mattieserver	32042ff2cc	added multiselect (#171 )	2022-10-04 10:16:20 +02:00
Mattijs Vanhaverbeke	9ce13cd1d2	bump version	2022-09-16 16:14:42 +02:00
mattieserver	b4e2f2418e	added extra checks (#166 )	2022-09-16 16:13:32 +02:00
mattieserver	5563e3c084	added device filter option (#165 )	2022-09-16 16:07:14 +02:00
mattieserver	77a8a2c0d6	Removed print	2022-09-16 14:52:00 +02:00
mattieserver	010179742c	159 fix power filter (#164 ) * fix site_ids var * fixed power cable name + change power filter name	2022-09-16 14:50:24 +02:00
mattieserver	f2bbaed317	added console cable support (#157 ) * added console cable support * removed print	2022-09-14 14:50:10 +02:00
mattieserver	8c56f21f16	Update README.md	2022-09-13 08:46:05 +02:00
mattieserver	eb627bdedc	Update README.md	2022-09-12 18:36:27 +02:00
mattieserver	291c033e34	Update README.md	2022-09-12 18:23:33 +02:00
mattieserver	1f389b3faa	Update README.md	2022-09-12 18:20:18 +02:00
Mattijs Vanhaverbeke	3d3ddaa7c4	bump version	2022-09-08 12:29:29 +02:00
mattieserver	4ea2097429	bump version	2022-09-02 15:13:22 +02:00
mattieserver	cfaba462d5	removed unused import (#149 )	2022-09-02 15:12:36 +02:00
Mattijs Vanhaverbeke	5e2f1cca57	added info about new icons	2022-09-01 19:10:15 +02:00
Mattijs Vanhaverbeke	b2e2a4c781	bump version	2022-09-01 18:48:22 +02:00
mattieserver	318b8495b7	Netbox v3.3 Support (#145 ) * init * added circuit (or at least part of) * refactor circuits + fix js * small changes * small changes * added power + rework settings * small changes	2022-09-01 18:44:03 +02:00
mattieserver	5e1d5d2937	added always_save_coordinates (#144 )	2022-08-24 14:07:26 +02:00
Andrea DaineseandMattijs Vanhaverbeke	0b6df3bd28	disable physics if not saving coords (#139 ) * initial commit * keeps x/y when not saving coords Co-authored-by: Mattijs Vanhaverbeke <mattijs.vanhaverbeke@ebo-enterprises.com>	2022-08-05 17:53:15 +02:00
mattieserver	af1666b3ba	move to esbuild & yarn (#138 ) * move to esbuild & yarn * remove gulpfile * cleanup unused ref * updated gitignore	2022-08-03 17:29:15 +02:00
				`@@ -0,0 +1 @@`
				(()=>{var l=(e,t,o)=>new Promise((n,r)=>{var c=s=>{try{i(o.next(s))}catch(a){r(a)}},m=s=>{try{i(o.throw(s))}catch(a){r(a)}},i=s=>s.done?n(s.value):Promise.resolve(s.value).then(c,m);i((o=o.apply(e,t)).next())});var d=e=>{if(!document.cookie)return;let t=null,o=document.cookie.split(";");for(let n=0;n<o.length;n++){let r=o[n].trim();if(r.substring(0,e.length+1)===e+"="){t=decodeURIComponent(r.substring(e.length+1));break}}return t};var u={success:e=>{let t=document.querySelector("#topology-plugin-success-toast");if(!t)return console.error("Could not find toast component!");let o=t.querySelector("span");o.textContent=e,new window.Toast(t).show()},error:e=>{let t=document.querySelector("#topology-plugin-error-toast");if(!t)return console.error("Could not find toast component!");let o=t.querySelector("span");o.textContent=e,new window.Toast(t).show()}};var g={},p=d("csrftoken");document.querySelector("form#images").addEventListener("submit",e=>l(void 0,null,function*(){e.preventDefault();try{let t=yield fetch("/api/plugins/netbox_topology_views/images/",{method:"POST",body:JSON.stringify(g),headers:{"X-CSRFToken":p,"Content-Type":"application/json"}});if(!t.ok)throw new Error(yield t.text());u.success("Saved settings")}catch(t){console.dir(t),u.error(t.message)}}));document.querySelectorAll("form#images .dropdown-menu img").forEach(e=>{e.addEventListener("click",t=>{var c;if(!(t.currentTarget instanceof HTMLElement))return;let{dataset:{role:o,image:n}}=t.currentTarget;g[o]=n;let r=(c=t.currentTarget.closest(".dropdown"))==null?void 0:c.querySelector(`#dropdownMenuButton${o}`);r&&(r.innerHTML=`<img src="${n}" />`)})});})();
				`@@ -0,0 +1 @@`
				`@import '../node_modules/vis-network/dist/dist/vis-network.min.css';`