Add topology visualization to circuit detail view

- Extend CircuitSegmentExtension to render segment or service path topology
- Integrate topology builders build_segment_topology and build_service_path_topology
- Add conditional visualization card to circuit_segments_extension template
- Provide fallback info message when topology data is unavailable
-Fixed default ordering for SegmentCircuitMappingTable to order circuits by CID instead of name

Author: jirivrany

cesnet_service_path_plugin/tables/segment_circuit_mapping.py

@@ -41,7 +41,7 @@ class SegmentCircuitMappingTable(NetBoxTable):
         order_by=("segment__location_b__name",),
         accessor="segment.location_b",
     )
-    circuit = tables.Column(linkify=True, verbose_name="Circuit", orderable=True, order_by=("circuit__name",))
+    circuit = tables.Column(linkify=True, verbose_name="Circuit", orderable=True, order_by=("circuit__cid",))
     tags = columns.TagColumn()
 
     class Meta(NetBoxTable.Meta):

cesnet_service_path_plugin/template_content.py

@@ -1,12 +1,15 @@
 import django_tables2
+import json
 from circuits.models import Provider
 from circuits.tables import CircuitTable
 from django.conf import settings
 from django.utils.translation import gettext_lazy as _
 from netbox.plugins import PluginTemplateExtension
 from utilities.tables import register_table_column
 
-from cesnet_service_path_plugin.models import Segment
+from cesnet_service_path_plugin.models import Segment, ServicePathSegmentMapping
+from cesnet_service_path_plugin.utils import build_service_path_topology, build_segment_topology
+
 
 plugin_settings = settings.PLUGINS_CONFIG.get("cesnet_service_path_plugin", {})
 
@@ -17,8 +20,38 @@ class CircuitSegmentExtension(PluginTemplateExtension):
     models = ["circuits.circuit"]
 
     def full_width_page(self):
+        circuit = self.context["object"]
+
+        # Get the first segment associated with this circuit
+        try:
+            segment = circuit.segment_set.first()
+        except AttributeError:
+            segment = None
+
+        # Initialize topology data
+        topology_data = None
+        topology_title = None
+
+        if segment:
+            # Check if segment is part of any service path
+            service_path_mapping = ServicePathSegmentMapping.objects.filter(segment=segment).first()
+
+            if service_path_mapping:
+                # Build service path topology
+                topology_title = f"Service Path Topology: {service_path_mapping.service_path.name}"
+                topology_data = build_service_path_topology(service_path_mapping.service_path)
+            else:
+                # Build segment topology only
+                topology_title = f"Segment Topology: {segment.name}"
+                topology_data = build_segment_topology(segment)
+
         return self.render(
             "cesnet_service_path_plugin/circuit_segments_extension.html",
+            extra_context={
+                "segment": segment,
+                "topology_data": json.dumps(topology_data) if topology_data else None,
+                "topology_title": topology_title,
+            },
         )
 
 

cesnet_service_path_plugin/templates/cesnet_service_path_plugin/circuit_segments_extension.html

@@ -1,4 +1,6 @@
 {% load i18n %}
+
+<!-- Segments Table Card -->
 <div class="col col-md-12">
     <div class="card">
         <h5 class="card-header">
@@ -13,3 +15,37 @@ <h5 class="card-header">
         {% htmx_table 'plugins:cesnet_service_path_plugin:segmentcircuitmapping_list' circuit_id=object.pk %}
     </div>
 </div>
+
+<!-- Topology Visualization Card -->
+{% if topology_data %}
+<div class="col col-md-12 mt-3">
+    <div class="card">
+        <h5 class="card-header">
+            {{ topology_title }}
+            <div class="card-actions">
+                <button id="fit-topology" class="btn btn-ghost-primary btn-sm" title="Fit to screen">
+                    <i class="mdi mdi-fit-to-screen" aria-hidden="true"></i>
+                </button>
+                <button id="reset-topology" class="btn btn-ghost-primary btn-sm" title="Reset layout">
+                    <i class="mdi mdi-refresh" aria-hidden="true"></i>
+                </button>
+            </div>
+        </h5>
+        <div class="card-body">
+            <div id="cy-topology" style="width: 100%; height: 600px; border: 1px solid rgba(59, 130, 246, 0.08); border-radius: 20px;"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Include Topology Visualization -->
+{% include 'cesnet_service_path_plugin/inc/topology_visualization.html' %}
+
+{% elif segment %}
+<div class="col col-md-12 mt-3">
+    <div class="alert alert-info">
+        <i class="mdi mdi-information-outline" aria-hidden="true"></i>
+        This circuit is associated with segment <a href="{{ segment.get_absolute_url }}">{{ segment.name }}</a>, 
+        but topology visualization is not available. Visit the segment detail page to view its topology.
+    </div>
+</div>
+{% endif %}