Topology Viewer Page (#41)

iDebugAll · web-flow · commit 57ea5384c6e4 · 2021-02-12T21:05:33.000+03:00
* Introduce a dedicated Topology Viewer page - A plugin code has been reworked to support generic topology page generation. - A new dedicated page has been added to display an arbitrary topology based on Search Form input (#30). The page is located under . - The Topology Viewer page is now being listed under the Plugins menu. - A Site Topology modal window header now points to to be able to jump to a larger window quickly. - A canvas size on a Topology Viewer page is now being calculated based on the window size (#33). * Update README.md Typo fixes. * Improve Topology Viewer page layout * Add new Topology Viewer page screenshot * Update README.md Add comments on new Topology Viewer page.
diff --git a/README.md b/README.md
@@ -186,18 +186,18 @@ Default mapping already contains some general categories:
 The Plugin can control the visibility of the layers and/or specific nodes on the topology view.<br/>
 The visibility control is currently implemented for specific device roles, device tags, unconnected devices, and passive devices:<br/>
 
-  - Inifial visibility behavior for specific device roles is controlled by 'undisplayed_device_role_slugs' plugin parameter. Listed device role slugs are hidden on initial view load, you may then hide/display any layer with a control button on the topology view page.<br/>
+  - Initial visibility behavior for specific device roles is controlled by 'undisplayed_device_role_slugs' plugin parameter. Listed device role slugs are hidden on initial view load, you may then hide/display any layer with a control button on the topology view page.<br/>
 
-  - Inifial visibility behavior for specific device tags is controlled by 'undisplayed_device_tags' plugin parameter. Devices with tags matching listed tag resular expressions are hidden on initial view load, you may then hide/display any layer with a control button on the topology view page.<br/>
+  - Initial visibility behavior for specific device tags is controlled by 'undisplayed_device_tags' plugin parameter. Devices with tags matching listed tag regular expressions are hidden on initial view load, you may then hide/display any layer with a control button on the topology view page.<br/>
   By default, the plugin lists all discovered device tags in Select Layers menu. You can use 'select_layers_list_include_device_tags' and 'select_layers_list_exclude_device_tags' plugin parameters to filter the included tags.<br/>
-  All three tag visibility control parameters are optional lists of regular expressions. Tags matching 'undisplayed_device_tags' are always listed in Select Layers menu. Empty or unset 'select_layers_list_include_device_tags' allows all discovered tags to be listed in Select layers menu. If set, 'select_layers_list_include_device_tags' works as an allow list for matched tags. 'select_layers_list_exclude_device_tags' filters out matched tags from the list, expept for ones matching 'undisplayed_device_tags'.
+  All three tag visibility control parameters are optional lists of regular expressions. Tags matching 'undisplayed_device_tags' are always listed in Select Layers menu. Empty or unset 'select_layers_list_include_device_tags' allows all discovered tags to be listed in Select layers menu. If set, 'select_layers_list_include_device_tags' works as an allow list for matched tags. 'select_layers_list_exclude_device_tags' filters out matched tags from the list, excpept for ones matching 'undisplayed_device_tags'.
 
   - Initial visibility behavior for unconnected nodes is controlled by DISPLAY_UNCONNECTED boolean plugin parameter.<br/>
-  By default unconnected nodes are being displayed. Set DISPLAY_UNCONNECTED to False to hide them on initial topology view load.<br/>
+  By default, unconnected nodes are being displayed. Set DISPLAY_UNCONNECTED to False to hide them on initial topology view load.<br/>
   A separate 'Hide/Display Unconnected' button may then be used to hide or display those nodes.
 
-  - Initical visibility for passive devices (patch pannels, PDUs) is controlled by DISPLAY_PASSIVE_DEVICES boolean plugin parameter. A device is considered passive if it has cables connected to Front and Rear Ports only and not to Interfaces.<br/>Passive devices are hidden by default. You can display them with 'Display Passive Devices' button on the topology view page. <br/>
-  Actual multi-cable connections between the end-devices a replaced by the direct logical connection once the passive devices are hidden. This logical direct link may be displayed regardless of the passive devices visibility in addition to the cabling across patch pannels if you set DISPLAY_LOGICAL_MULTICABLE_LINKS plugin paramenter to True. DISPLAY_LOGICAL_MULTICABLE_LINKS is set to False by default. This parameter only affects the initical logical link visibility. With hidden passive devices, it is always being displayed.<br/>
+  - Initial visibility for passive devices (patch panels, PDUs) is controlled by DISPLAY_PASSIVE_DEVICES boolean plugin parameter. A device is considered passive if it has cables connected to Front and Rear Ports only and not to Interfaces.<br/>Passive devices are hidden by default. You can display them with 'Display Passive Devices' button on the topology view page. <br/>
+  Actual multi-cable connections between the end-devices a replaced by the direct logical connection once the passive devices are hidden. This logical direct link may be displayed regardless of the passive device visibility in addition to the cabling across patch panels if you set DISPLAY_LOGICAL_MULTICABLE_LINKS plugin parameter to True. DISPLAY_LOGICAL_MULTICABLE_LINKS is set to False by default. This parameter only affects the initial logical link visibility. With hidden passive devices, it is always being displayed.<br/>
 <br/>
 
 Device layers are ordered automatically by default. You can control this behavior with INITIAL_LAYOUT plugin parameter. Valid options are 'vertical', 'horizontal', and 'auto'.<br/>
@@ -221,7 +221,7 @@ sudo systemctl restart netbox
 # Installation with Docker
 The Plugin may be installed in a Netbox Docker deployment. 
 The package contains a Dockerfile for [Netbox-Community Docker](https://github.com/netbox-community/netbox-docker) extension. Latest-LDAP version is used by default as a source.<br/>
-Download the Plugin and build from source:
+Download the Plugin and build from the source:
 ```
 $ git clone https://github.com/iDebugAll/nextbox-ui-plugin
 $ cd nextbox-ui-plugin
@@ -241,21 +241,25 @@ $ cd netbox-docker
 $ docker-compose down
 $ docker-compose up -d
 ```
-Netbox Community Docker setup performs static files collection on every startup. No manual actions required.
+Netbox Community Docker setup performs static file collection on every startup. No manual actions are required.
 
 # Usage
 
-Once installed and initialized, the Plugin runs on a backend. It currently supports topology visualization for Netbox Sites.<br/>
+Once installed and initialized, the Plugin runs on a backend.<br/>
+The Plugin supports a topology visualization of arbitrary sets of Sites and Regions.<br/>
 <br/>
-Site topology visualization may be accessed in two different ways:
+You can access Topology visualizations in different ways:
 1. By clicking a custom plugin Topology button on a Site page.
 ![](samples/sample_topology_button.png)
-The topology visualization will open in a pop-up window:
+The Site topology visualization will open in a pop-up window:
 ![](samples/sample_topology_view.png)<br/>
 Nodes are draggable and clickable:
 ![](samples/sample_node_tooltip_content.png)<br/>
 You can switch between vertical and horizontal layers sort order back and forth. Default is vertical.<br/>
-2. Directly via /plugins/nextbox-ui/site_topology/{site_id}. This is helpful in case if you need an embedded topology frame on some of your side resources.
+
+2. Using Plugins dropdown menu item: *Plugins -> NextBox UI -> Topology Viewer*.<br/>
+Use Search form controls to pick desired Sites, Regions, or Devices.<br/>
+![](samples/sample_topology_viewer_page01.png)
 <br/>
 
 ### Visibility control
@@ -276,7 +280,7 @@ If DISPLAY_LOGICAL_MULTICABLE_LINKS is set to True (default is False) this logic
 ![](samples/sample_display_logical_link.png)
 
 ### Required Netbox User Permissions
-The Plugin requires the following user permissions in order to access topology view:
+The Plugin requires the following user permissions to access the topology view:
 
   - dcim | site   | Can read site
   - dcim | device | Can view device
diff --git a/nextbox_ui_plugin/filters.py b/nextbox_ui_plugin/filters.py
@@ -0,0 +1,25 @@
+import django_filters
+from dcim.models import Device, Site, Region
+
+
+class TopologyFilterSet(django_filters.FilterSet):
+
+    device_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Device.objects.all(),
+        to_field_name='id',
+        field_name='id',
+        label='Device (ID)',
+    )
+    site_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Site.objects.all(),
+        label='Site (ID)',
+    )
+    region_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Region.objects.all(),
+        field_name='site__region',
+        label='Region (ID)',
+    )
+
+    class Meta:
+        model = Device
+        fields = ['id', 'name', ]
diff --git a/nextbox_ui_plugin/forms.py b/nextbox_ui_plugin/forms.py
@@ -0,0 +1,29 @@
+from django import forms
+from utilities.forms import (
+    BootstrapMixin, DynamicModelMultipleChoiceField,
+)
+from dcim.models import Device, Site, Region
+
+
+class TopologyFilterForm(BootstrapMixin, forms.Form):
+
+    model = Device
+
+    device_id = DynamicModelMultipleChoiceField(
+        queryset=Device.objects.all(),
+        to_field_name='id',
+        required=False,
+        null_option='None',
+    )
+    site_id = DynamicModelMultipleChoiceField(
+        queryset=Site.objects.all(),
+        required=False,
+        to_field_name='id',
+        null_option='None',
+    )
+    region_id = DynamicModelMultipleChoiceField(
+        queryset=Region.objects.all(),
+        required=False,
+        to_field_name='id',
+        null_option='None',
+    )
diff --git a/nextbox_ui_plugin/navigation.py b/nextbox_ui_plugin/navigation.py
@@ -0,0 +1,10 @@
+from extras.plugins import PluginMenuItem
+
+
+menu_items = (
+    PluginMenuItem(
+        link='plugins:nextbox_ui_plugin:topology',
+        link_text='Topology Viewer',
+        buttons=()
+    ),
+)
diff --git a/nextbox_ui_plugin/static/nextbox_ui_plugin/next_app.js b/nextbox_ui_plugin/static/nextbox_ui_plugin/next_app.js
@@ -2,11 +2,24 @@
     /**
      * NeXt UI base application
      */
+
+    // Calculate topology canvas size
+    // based on window size during page loading.
+    // Canvas size can only be set once during page init. 
+    // It does not autoscale. Page reload is required to update topology dimensions.
+    if (document.body.clientWidth && document.body.clientHeight) {
+        var canvasWidth = document.body.clientWidth*0.75;
+        var canvasHeight = document.body.clientHeight*0.75;
+    } else {
+        var canvasWidth = 850;
+        var canvasHeight = 750;
+    };
+
     // Initialize topology
     var topo = new nx.graphic.Topology({
         // View dimensions
-        width: 850,
-        height: 700,
+        width: canvasWidth,
+        height: canvasHeight,
         // Dataprocessor is responsible for spreading 
         // the Nodes across the view.
         // 'force' dataprocessor spreads the Nodes so
@@ -67,6 +80,9 @@
     
     var Shell = nx.define(nx.ui.Application, {
         methods: {
+            getContainer: function() {
+                return new nx.dom.Element(document.getElementById('nx-ui-topology'));
+            },
             start: function () {
                 // Read topology data from variable
                 topo.data(topologyData);
@@ -80,7 +96,6 @@
                     });
                     topo.activateLayout('hierarchicalLayout');
                 };
-                
                 // Attach it to the document
                 topo.attach(this);
             }
@@ -349,6 +364,9 @@
 
     // Create an application instance
     var shell = new Shell();
+    shell.on('resize', function() {
+        topo && topo.adaptToContainer();
+    });
     // Run the application
     shell.start();
 })(nx);
diff --git a/nextbox_ui_plugin/templates/nextbox_ui_plugin/site_topo_button.html b/nextbox_ui_plugin/templates/nextbox_ui_plugin/site_topo_button.html
@@ -8,9 +8,9 @@
         <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h2 class="modal-title" style="text-align: center;">{{ object.name }} Topology</h2>
+                    <h2 class="modal-title" style="text-align: center;"><a href={% url 'plugins:nextbox_ui_plugin:topology' %}?site_id={{ object.id }}>{{ object.name }} Topology</a></h2>
                 </div>
-        <iframe src="{% url 'plugins:nextbox_ui_plugin:site_topology' site_id=object.id %}" style="height: 75vh; width: 100%;"></iframe>
+        <iframe src="{% url 'plugins:nextbox_ui_plugin:site_topology' %}?site_id={{ object.id }}" style="height: 75vh; width: 100%;"></iframe>
         </div>
     </div>
 </div>
diff --git a/nextbox_ui_plugin/templates/nextbox_ui_plugin/site_topology.html b/nextbox_ui_plugin/templates/nextbox_ui_plugin/site_topology.html
@@ -12,7 +12,7 @@
         <script src="{% static 'nextbox_ui_plugin/button_utils.js' %}"></script>
     </head>
     <body>
-        <div class="container-sm ml-4 my-sm-3">
+        <div class="container-sm ml-4 my-sm-3" id="nx-ui-topology">
             <div class="row">
               <div class="col-xs-4">
                 <div class="btn-group">
@@ -58,6 +58,7 @@ <h6 class="dropdown-header">Device Tags</h6>
               </div>
             </div>
         </div>
+        
         <script type="text/javascript">
             var displayUnconnected = {{ display_unconnected|yesno:"true,false" }};
             var displayPassiveDevices = {{ display_passive_devices|yesno:"true,false" }};
diff --git a/nextbox_ui_plugin/templates/nextbox_ui_plugin/topology.html b/nextbox_ui_plugin/templates/nextbox_ui_plugin/topology.html
@@ -0,0 +1,93 @@
+{% extends 'base.html' %}
+{% load buttons %}
+{% load static %}
+
+{% block header %}
+<script src="{% static 'nextbox_ui_plugin/next_sources/js/next.js' %}"></script>
+<link rel="stylesheet"href="{% static 'nextbox_ui_plugin/next_sources/css/next.css' %}">
+<script src="{% static 'nextbox_ui_plugin/button_utils.js' %}"></script>
+{% endblock %}
+
+{% block content %}
+
+<h2>Topology Viewer</h2>
+
+<div class="col-md-3 pull-right right-side-panel noprint" style="z-index: 2;">
+    {% include 'inc/search_panel.html' %}
+    {% block sidebar %}{% endblock %}
+</div>
+<div>
+    <div class="btn-group">
+        <button class="btn btn-primary " onclick='horizontal()'>Horizontal Layout</button>
+        <button class="btn btn-primary" onclick="vertical()">Vertical Layout</button>
+    </div>
+    <input class="btn btn-primary" type="button" id="showHideUndonnectedButton" value="" onclick="return showHideUndonnectedButtonOnClick(this);" />
+    <input class="btn btn-primary" type="button" id="showHidePassiveDevicesButton" value="" onclick="return showHidePassiveDevicesButtonOnClick(this);" />
+    <div class="btn-group">
+        <div class="dropdown">
+            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Select Layers
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <h6 class="dropdown-header">Device Roles</h6>
+                <div class="dropdown-divider"></div>
+                {% for device_role_slug, device_role_name, is_visible in device_roles %}
+                    <div class="checkbox ml-1 my-1">
+                        <label>
+                            <input onchange="layerSelectorOnChange(this)" type="checkbox" value="{{ device_role_slug }}" {{ is_visible|yesno:"checked," }}>{{ device_role_name }}
+                        </label>
+                    </div>
+                {% endfor %}
+                <div class="dropdown-divider"></div>
+                {% if device_tags %}
+                    <h6 class="dropdown-header">Device Tags</h6>
+                    {% for tag, is_visible in device_tags %}
+                        <div class="checkbox ml-1 my-1">
+                            <label>
+                                <input onchange="layerSelectorByTagOnChange(this)" type="checkbox" value="{{ tag }}" {{ is_visible|yesno:"checked," }}>{{ tag }}
+                            </label>
+                        </div>
+                    {% endfor %}
+                {% endif %}
+                <div class="dropdown-divider"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row noprint" style="z-index: 1;">
+    <div class="col-lg-3" style="z-index: 1;">
+        <div class="pull-left noprint">
+            <div id="nx-ui-topology" class="container">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% endblock %}
+
+{% block javascript %}
+
+
+<script type="text/javascript">
+    var displayUnconnected = {{ display_unconnected|yesno:"true,false" }};
+    var displayPassiveDevices = {{ display_passive_devices|yesno:"true,false" }};
+    var displayLogicalMultiCableLinks = {{ display_logical_multicable_links|yesno:"true,false" }};
+    var undisplayedRoles = {{ undisplayed_roles|safe }};
+    var undisplayedDeviceTags = {{ undisplayed_device_tags|safe }};
+    var topologyData = {{ source_data|safe }};
+    var initialLayout = '{{ initial_layout|safe }}';
+    console.log(topologyData);
+</script>
+<script src="{% static 'nextbox_ui_plugin/next_app.js' %}"></script>
+
+<script type="text/javascript">
+    showHideUndonnectedButtonInitial();
+    showHidePassiveDevicesButtonInitial();
+</script>
+
+{% endblock %}
+
+
+
diff --git a/nextbox_ui_plugin/urls.py b/nextbox_ui_plugin/urls.py
@@ -2,5 +2,6 @@
 from . import views
 
 urlpatterns = [
-    path('site_topology/<int:site_id>/', views.TopologyView.as_view(), name='site_topology'),
+    path('site_topology/', views.SiteTopologyView.as_view(), name='site_topology'),
+    path('topology/', views.TopologyView.as_view(), name='topology'),
 ]
diff --git a/nextbox_ui_plugin/views.py b/nextbox_ui_plugin/views.py
diff --git a/samples/sample_topology_viewer_page01.png b/samples/sample_topology_viewer_page01.png

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,6 @@`
`2`	`2`	`from . import views`
`3`	`3`
`4`	`4`	`urlpatterns = [`
`5`		`- path('site_topology/<int:site_id>/', views.TopologyView.as_view(), name='site_topology'),`
	`5`	`+ path('site_topology/', views.SiteTopologyView.as_view(), name='site_topology'),`
	`6`	`+ path('topology/', views.TopologyView.as_view(), name='topology'),`
`6`	`7`	`]`