Merge pull request #150 from SaaShup/host-graph-4x

✨ 💄 Add "Host Graph" view (v2)

netbox_docker_plugin/__init__.py

@@ -10,7 +10,7 @@ class NetBoxDockerConfig(PluginConfig):
     name = "netbox_docker_plugin"
     verbose_name = " NetBox Docker Plugin"
     description = "Manage Docker"
-    version = "2.4.0"
+    version = "2.5.0"
     base_url = "docker"
     min_version = "4.0.0"
     author= "Vincent Simonin <[email protected]>, David Delassus <[email protected]>"

netbox_docker_plugin/templates/netbox_docker_plugin/host-graph.html

@@ -0,0 +1,211 @@
+{% extends 'generic/object.html' %}
+
+{% load plugins %}
+
+{% block content %}
+<div class="row mb-3">
+  <div class="col col-md-12">
+    <div class="card">
+      <div class="card-body">
+        <div
+          id="graph"
+          style="
+            display: block;
+            width: 100%;
+            min-height: 350px;
+          "
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block head %}
+<script
+  type="application/javascript"
+  src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.1/cytoscape.min.js"
+  integrity="sha512-kv2oCpI8sYlWvr442qCcFNgXW9swhLRlDJ/39GlfZLGAWOqgU/Kz30YCYBm0yLumVzRvYEMU6uSxFniGzitKiA=="
+  crossorigin="anonymous"
+  referrerpolicy="no-referrer"
+></script>
+
+<script type="application/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    const elt = document.getElementById('graph');
+
+    const cy = cytoscape({
+      container: elt,
+      elements: [
+        // {% for registry in object.registries.all %}
+          {
+            data: {
+              id: 'registry:{{ registry.pk }}',
+              name: '{{ registry.name }}',
+            },
+            classes: ['registry'],
+          },
+        // {% endfor %}
+        // {% for image in object.images.all %}
+          {
+            data: {
+              id: 'image:{{ image.pk }}',
+              name: '{{ image.name }}',
+            },
+            classes: [
+              'image',
+              // {% if image.Digest %}
+                'pulled',
+              // {% endif %}
+            ],
+          },
+          {
+            data: {
+              id: 'registry-image:{{ image.registry.pk }}:{{ image.pk }}',
+              source: 'registry:{{ image.registry.pk }}',
+              target: 'image:{{ image.pk }}',
+            },
+          },
+        // {% endfor %}
+        // {% for network in object.networks.all %}
+          {
+            data: {
+              id: 'network:{{ network.pk }}',
+              name: '{{ network.name }}',
+            },
+            classes: ['network'],
+          },
+        // {% endfor %}
+        // {% for volume in object.volumes.all %}
+          {
+            data: {
+              id: 'volume:{{ volume.pk }}',
+              name: '{{ volume.name }}',
+            },
+            classes: ['volume'],
+          },
+        // {% endfor %}
+        // {% for container in object.containers.all %}
+          {
+            data: {
+              id: 'container:{{ container.pk }}',
+              name: '{{ container.name }}',
+            },
+            classes: [
+              'container',
+              // {% if container.state == "running" %}
+                'running',
+              // {% endif %}
+            ],
+          },
+          {
+            data: {
+              id: 'image-container:{{ container.image.pk }}:{{ container.pk }}',
+              source: 'image:{{ container.image.pk }}',
+              target: 'container:{{ container.pk }}',
+            },
+          },
+          // {% for network in container.networks.all %}
+            {
+              data: {
+                id: 'network-container:{{ network.pk }}:{{ container.pk }}',
+                source: 'network:{{ network.pk }}',
+                target: 'container:{{ container.pk }}',
+              },
+            },
+          // {% endfor %}
+          // {% for volume in container.volumes.all %}
+            {
+              data: {
+                id: 'volume-container:{{ volume.pk }}:{{ container.pk }}',
+                source: 'volume:{{ volume.pk }}',
+                target: 'container:{{ container.pk }}',
+              },
+            },
+          // {% endfor %}
+        // {% endfor %}
+      ],
+
+      style: [ // the stylesheet for the graph
+        {
+          selector: 'node',
+          style: {
+            'outline-width': 2,
+            'outline-color': '#CCCCCC',
+            'background-color': '#59594A',
+            'label': ''
+          },
+        },
+        {
+          selector: 'node.hover',
+          style: {
+            'label': 'data(name)',
+          },
+        },
+        {
+          selector: 'node.image',
+          style: {
+            'background-color': '#BE6E46',
+          },
+        },
+        {
+          selector: 'node.image.pulled',
+          style: {
+            'background-color': '#A3BFA8',
+          }
+        },
+        {
+          selector: 'node.network',
+          style: {
+            'shape': 'hexagon',
+          },
+        },
+        {
+          selector: 'node.volume',
+          style: {
+            'shape': 'triangle',
+          },
+        },
+        {
+          selector: 'node.container',
+          style: {
+            'background-color': '#BE6E46',
+            'shape': 'rectangle',
+          },
+        },
+        {
+          selector: 'node.container.running',
+          style: {
+            'background-color': '#A3BFA8',
+          },
+        },
+        {
+          selector: 'edge',
+          style: {
+            'width': 3,
+            'line-color': '#ccc',
+            'target-arrow-color': '#ccc',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier'
+          }
+        }
+      ],
+
+      layout: {
+        name: 'cose',
+        nodeDimensionsIncludeLabels: true,
+      },
+    })
+
+    cy.on('mouseover', 'node', function (evt) {
+      const node = evt.target
+      node.addClass('hover')
+    })
+
+    cy.on('mouseout', 'node', function (evt) {
+      const node = evt.target
+      node.removeClass('hover')
+    })
+  })
+</script>
+{% endblock %}

netbox_docker_plugin/urls.py

@@ -41,6 +41,11 @@
         host_views.HostDeleteView.as_view(),
         name="host_delete",
     ),
+    path(
+        "hosts/<int:pk>/graph/",
+        host_views.HostGraphView.as_view(),
+        name="host_graph",
+    ),
     path(
         "hosts/<int:pk>/changelog/",
         ObjectChangeLogView.as_view(),

netbox_docker_plugin/views/host.py

@@ -2,6 +2,7 @@
 
 from users.models import Token
 from utilities.query import count_related
+from utilities.views import ViewTab, register_model_view
 from netbox.views import generic
 from .. import tables, filtersets
 from ..forms import host
@@ -13,6 +14,7 @@
 from ..models.registry import Registry
 
 
+@register_model_view(Host)
 class HostView(generic.ObjectView):
     """Host view definition"""
 
@@ -49,6 +51,15 @@ def get_extra_context(self, request, instance):
         }
 
 
+@register_model_view(Host, name="graph", path="graph")
+class HostGraphView(generic.ObjectView):
+    """Logs tab in Container view"""
+
+    queryset = Host.objects.all()
+    tab = ViewTab(label="Graph")
+    template_name = "netbox_docker_plugin/host-graph.html"
+
+
 class HostListView(generic.ObjectListView):
     """Host list view definition"""
 

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "netbox-docker-plugin"
-version = "2.4.0"
+version = "2.5.0"
 authors = [
   { name="Vincent Simonin", email="[email protected]" },
   { name="David Delassus", email="[email protected]" }