Adds region hierarchy in templates (#14213)

* initial work to render hierarchical region #13735

* adds site display #13735

* cleanup #13735

* adds display region tag #13735

* refactored region hierarchy #13735

* refactored region hierarchy #13735

* renamed display_region to nested_tree #13735

* Make render_tree suitable for generic use

* Remove errant item from __all__

---------

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

netbox/templates/dcim/device.html

@@ -5,6 +5,7 @@
 {% load helpers %}
 {% load plugins %}
 {% load i18n %}
+{% load mptt %}
 
 {% block content %}
     <div class="row">
@@ -15,16 +16,7 @@
                     <table class="table table-hover attr-table">
                         <tr>
                             <th scope="row">{% trans "Region" %}</th>
-                            <td>
-                                {% if object.site.region %}
-                                    {% for region in object.site.region.get_ancestors %}
-                                        {{ region|linkify }} /
-                                    {% endfor %}
-                                    {{ object.site.region|linkify }}
-                                {% else %}
-                                    {{ ''|placeholder }}
-                                {% endif %}
-                            </td>
+                            <td>{% nested_tree object.site.region %}</td>
                         </tr>
                         <tr>
                             <th scope="row">{% trans "Site" %}</th>
@@ -32,16 +24,7 @@
                         </tr>
                         <tr>
                             <th scope="row">{% trans "Location" %}</th>
-                            <td>
-                            {% if object.location %}
-                                {% for location in object.location.get_ancestors %}
-                                    {{ location|linkify }} /
-                                {% endfor %}
-                                {{ object.location|linkify }}
-                            {% else %}
-                                {{ ''|placeholder }}
-                            {% endif %}
-                            </td>
+                            <td>{% nested_tree object.location %}</td>
                         </tr>
                         <tr>
                             <th scope="row">{% trans "Rack" %}</th>

netbox/templates/dcim/rack.html

@@ -4,6 +4,7 @@
 {% load static %}
 {% load plugins %}
 {% load i18n %}
+{% load mptt %}
 
 {% block content %}
   <div class="row">
@@ -15,26 +16,18 @@
             <div class="card-body">
                 <table class="table table-hover attr-table">
                     <tr>
-                        <th scope="row">{% trans "Site" %}</th>
+                        <th scope="row">{% trans "Region" %}</th>
                         <td>
-                            {% if object.site.region %}
-                                {{ object.site.region|linkify }} /
-                            {% endif %}
-                            {{ object.site|linkify }}
+                            {% nested_tree object.site.region %}
                         </td>
                     </tr>
+                    <tr>
+                        <th scope="row">{% trans "Site" %}</th>
+                        <td>{{ object.site|linkify }}</td>
+                    </tr>
                     <tr>
                         <th scope="row">{% trans "Location" %}</th>
-                        <td>
-                            {% if object.location %}
-                                {% for location in object.location.get_ancestors %}
-                                    {{ location|linkify }} /
-                                {% endfor %}
-                                {{ object.location|linkify }}
-                            {% else %}
-                                {{ ''|placeholder }}
-                            {% endif %}
-                        </td>
+                        <td>{% nested_tree object.location %}</td>
                     </tr>
                     <tr>
                         <th scope="row">{% trans "Facility ID" %}</th>

netbox/templates/dcim/rackreservation.html

@@ -4,6 +4,7 @@
 {% load static %}
 {% load plugins %}
 {% load i18n %}
+{% load mptt %}
 
 {% block breadcrumbs %}
   {{ block.super }}
@@ -20,25 +21,24 @@
             </h5>
             <div class="card-body">
                 <table class="table table-hover attr-table">
-                    {% with rack=object.rack %}
-                        <tr>
-                            <th scope="row">{% trans "Site" %}</th>
-                            <td>
-                                {% if rack.site.region %}
-                                    {{ rack.site.region|linkify }} /
-                                {% endif %}
-                                {{ rack.site|linkify }}
-                            </td>
-                        </tr>
-                        <tr>
-                            <th scope="row">{% trans "Location" %}</th>
-                            <td>{{ rack.location|linkify|placeholder }}</td>
-                        </tr>
-                        <tr>
-                            <th scope="row">{% trans "Rack" %}</th>
-                            <td>{{ rack|linkify }}</td>
-                        </tr>
-                    {% endwith %}
+                    <tr>
+                        <th scope="row">{% trans "Region" %}</th>
+                        <td>
+                            {% nested_tree object.rack.site.region %}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">{% trans "Site" %}</th>
+                        <td>{{ object.rack.site|linkify }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">{% trans "Location" %}</th>
+                        <td>{{ object.rack.location|linkify|placeholder }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">{% trans "Rack" %}</th>
+                        <td>{{ object.rack|linkify }}</td>
+                    </tr>
                 </table>
             </div>
         </div>

netbox/templates/dcim/site.html

@@ -3,6 +3,7 @@
 {% load plugins %}
 {% load tz %}
 {% load i18n %}
+{% load mptt %}
 
 {% block breadcrumbs %}
   {{ block.super }}
@@ -29,27 +30,13 @@
           <tr>
             <th scope="row">{% trans "Region" %}</th>
             <td>
-              {% if object.region %}
-                {% for region in object.region.get_ancestors %}
-                  {{ region|linkify }} /
-                {% endfor %}
-                {{ object.region|linkify }}
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
+              {% nested_tree object.region %}
             </td>
           </tr>
           <tr>
             <th scope="row">{% trans "Group" %}</th>
             <td>
-              {% if object.group %}
-                {% for group in object.group.get_ancestors %}
-                  {{ group|linkify }} /
-                {% endfor %}
-                {{ object.group|linkify }}
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
+              {% nested_tree object.group %}
             </td>
           </tr>
           <tr>

netbox/templates/ipam/prefix.html

@@ -3,6 +3,7 @@
 {% load helpers %}
 {% load plugins %}
 {% load i18n %}
+{% load mptt %}
 
 {% block content %}
 <div class="row">
@@ -44,18 +45,17 @@
               {% endif %}
             </td>
           </tr>
+          {% if object.site.region %}
+            <tr>
+              <th scope="row">{% trans "Region" %}</th>
+              <td>
+                {% nested_tree object.site.region %}
+              </td>
+            </tr>
+          {% endif %}
           <tr>
             <th scope="row">{% trans "Site" %}</th>
-            <td>
-              {% if object.site %}
-                {% if object.site.region %}
-                  {{ object.site.region|linkify }} /
-                {% endif %}
-                {{ object.site|linkify }}
-              {% else %}
-                {{ ''|placeholder }}
-              {% endif %}
-            </td>
+            <td>{{ object.site|linkify|placeholder }}</td>
           </tr>
           <tr>
             <th scope="row">{% trans "VLAN" %}</th>

netbox/templates/ipam/vlan.html

@@ -3,6 +3,7 @@
 {% load render_table from django_tables2 %}
 {% load plugins %}
 {% load i18n %}
+{% load mptt %}
 
 {% block content %}
     <div class="row">
@@ -13,18 +14,17 @@
                 </h5>
                 <div class="card-body">
                     <table class="table table-hover attr-table">
+                        {% if object.site.region %}
+                            <tr>
+                                <th scope="row">{% trans "Region" %}</th>
+                                <td>
+                                    {% nested_tree object.site.region %}
+                                </td>
+                            </tr>
+                        {% endif %}
                         <tr>
                             <th scope="row">{% trans "Site" %}</th>
-                            <td>
-                                {% if object.site %}
-                                    {% if object.site.region %}
-                                        {{ object.site.region|linkify }} /
-                                    {% endif %}
-                                    {{ object.site|linkify }}
-                                {% else %}
-                                    {{ ''|placeholder }}
-                                {% endif %}
-                            </td>
+                            <td>{{ object.site|linkify|placeholder }}</td>
                         </tr>
                         <tr>
                             <th scope="row">{% trans "Group" %}</th>

netbox/utilities/templatetags/mptt.py

@@ -0,0 +1,20 @@
+from django import template
+from django.utils.safestring import mark_safe
+
+register = template.Library()
+
+
+@register.simple_tag()
+def nested_tree(obj):
+    """
+    Renders the entire hierarchy of a recursively-nested object (such as Region or SiteGroup).
+    """
+    if not obj:
+        return mark_safe('—')
+
+    nodes = obj.get_ancestors(include_self=True)
+    return mark_safe(
+        ' / '.join(
+            f'<a href="{node.get_absolute_url()}">{node}</a>' for node in nodes
+        )
+    )