netbox-ipam-treeview-plugin 0.1.0__py3-none-any.whl

netbox_ipam_treeview/__init__.py

@@ -0,0 +1,23 @@
+from .conf import DEFAULTS
+from .version import __version__
+
+try:
+    from netbox.plugins import PluginConfig
+except ImportError:  # imported outside NetBox (pure unit tests, build tools)
+    PluginConfig = None
+
+if PluginConfig is not None:
+
+    class IPAMAltViewConfig(PluginConfig):
+        name = "netbox_ipam_treeview"
+        verbose_name = "IPAM Tree"
+        description = "DDI-style collapsible tree view for NetBox IPAM prefixes"
+        version = __version__
+        author = "Thomas Christory"
+        author_email = "9317624+thomaschristory@users.noreply.github.com"
+        base_url = "ipam-tree"
+        min_version = "4.7.0"
+        max_version = "4.7.99"
+        default_settings = DEFAULTS
+
+    config = IPAMAltViewConfig

netbox_ipam_treeview/columns.py

@@ -0,0 +1,32 @@
+from django.utils.translation import gettext_lazy as _
+
+from .conf import get_setting
+
+USER_CONFIG_PATH = "plugins.netbox_ipam_treeview.columns"
+
+COLUMNS = {
+    "status": _("Status"),
+    "utilization": _("Utilization"),
+    "vrf": _("VRF"),
+    "scope": _("Scope"),
+    "vlan": _("VLAN"),
+    "tenant": _("Tenant"),
+    "role": _("Role"),
+    "children": _("Children"),
+    "is_pool": _("Pool"),
+    "mark_utilized": _("Marked utilized"),
+    "tags": _("Tags"),
+    "description": _("Description"),
+    "created": _("Created"),
+    "last_updated": _("Last updated"),
+    "actions": "",
+}
+
+
+def resolve_columns(user):
+    """The user's saved column choice, else the configured default, limited to known columns."""
+    chosen = None
+    if getattr(user, "is_authenticated", False) and hasattr(user, "config"):
+        chosen = user.config.get(USER_CONFIG_PATH)
+    chosen = chosen or get_setting("default_columns")
+    return [c for c in chosen if c in COLUMNS]

netbox_ipam_treeview/conf.py

@@ -0,0 +1,23 @@
+PLUGIN_NAME = "netbox_ipam_treeview"
+
+DEFAULTS = {
+    "show_menu_item": True,
+    "menu_location": "ipam",  # "ipam": IPAM menu, below "Prefixes"; "plugins": the Plugins menu
+    "show_list_toggle": True,
+    "show_prefix_tab": True,
+    "show_aggregate_tab": True,
+    "show_vrf_tab": True,
+    "group_by_vrf": True,
+    "show_aggregates": True,
+    "show_free_space": True,
+    "gaps_respect_mark_utilized": True,
+    "max_gap_rows": 64,
+    "expand_all_limit": 5000,
+    "default_columns": ["status", "utilization", "scope", "vlan", "tenant", "role", "description", "actions"],
+}
+
+
+def get_setting(key):
+    from netbox.plugins.utils import get_plugin_config
+
+    return get_plugin_config(PLUGIN_NAME, key, DEFAULTS[key])

netbox_ipam_treeview/navigation.py

@@ -0,0 +1,37 @@
+from netbox.plugins import PluginMenuItem
+
+from .conf import get_setting
+
+LINK = "plugins:netbox_ipam_treeview:tree"
+LABEL = "Prefix Tree"
+PERMISSIONS = ["ipam.view_prefix"]
+
+
+def _add_to_ipam_menu():
+    """Insert the tree right after "Prefixes" in NetBox's IPAM menu.
+
+    Plugins have no API for core menus, so this edits IPAM_MENU (plain dataclasses in NetBox 4.7).
+    Returns False when the menu looks different, and the caller falls back to the Plugins menu.
+    """
+    try:
+        from netbox.navigation import MenuItem
+        from netbox.navigation.menu import IPAM_MENU
+    except ImportError:
+        return False
+    groups = getattr(IPAM_MENU, "groups", ())
+    if any(item.link == LINK for group in groups for item in group.items):
+        return True
+    for group in groups:
+        links = [item.link for item in group.items]
+        if "ipam:prefix_list" in links:
+            at = links.index("ipam:prefix_list") + 1
+            entry = MenuItem(link=LINK, link_text=LABEL, permissions=PERMISSIONS)
+            group.items = (*group.items[:at], entry, *group.items[at:])
+            return True
+    return False
+
+
+_show = get_setting("show_menu_item")
+_in_ipam = _show and get_setting("menu_location") == "ipam" and _add_to_ipam_menu()
+
+menu_items = (PluginMenuItem(link=LINK, link_text=LABEL, permissions=PERMISSIONS),) if _show and not _in_ipam else ()

netbox_ipam_treeview/static/netbox_ipam_treeview/tree.css

@@ -0,0 +1,21 @@
+.ipt-tree td.ipt-name { padding-left: calc(0.5rem + var(--ipt-level, 0) * 1.4rem); white-space: nowrap; }
+.ipt-tree .ipt-toggle, .ipt-tree .ipt-spacer { display: inline-block; width: 1.4rem; text-align: center; line-height: 1; }
+.ipt-tree .ipt-toggle { color: inherit; text-decoration: none; }
+.ipt-tree .ipt-toggle i { display: inline-block; transition: transform 0.12s ease; }
+.ipt-tree tr[aria-expanded="true"] > td .ipt-toggle i { transform: rotate(90deg); }
+.ipt-tree tr.ipt-hidden { display: none; }
+.ipt-tree tr.ipt-vrf > td { background: var(--tblr-bg-surface-secondary); font-weight: 600; }
+.ipt-tree tr.ipt-aggregate > td.ipt-name { font-weight: 600; }
+.ipt-tree tr.ipt-gap > td, .ipt-tree tr.ipt-more > td { color: var(--tblr-secondary); font-style: italic; }
+.ipt-tree tr.ipt-gap > td.ipt-name { box-shadow: inset 3px 0 0 var(--tblr-success); }
+.ipt-tree tr.ipt-context > td { opacity: 0.55; }
+.ipt-tree tr.ipt-loading .ipt-toggle i { animation: ipt-spin 0.8s linear infinite; }
+.ipt-tree tr.ipt-failed .ipt-toggle { color: var(--tblr-danger); }
+.ipt-tree tr:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
+.ipt-tree.ipt-busy { opacity: 0.6; pointer-events: none; }
+.ipt-columns { min-width: 14rem; }
+@keyframes ipt-spin { to { transform: rotate(360deg); } }
+.ipt-tree td { vertical-align: middle; }
+.ipt-tree td.ipt-col-scope, .ipt-tree td.ipt-col-vlan, .ipt-tree td.ipt-col-tenant, .ipt-tree td.ipt-col-role,
+.ipt-tree td.ipt-col-status, .ipt-tree td.ipt-col-vrf { white-space: nowrap; }
+.ipt-tree td.ipt-col-utilization { min-width: 7rem; }

netbox_ipam_treeview/static/netbox_ipam_treeview/tree.js

@@ -0,0 +1,289 @@
+// Collapsible IPAM tree: lazy child loading, expand/collapse all, remembered state, keyboard navigation.
+(() => {
+  "use strict";
+
+  const store = {
+    get(key, fallback) {
+      try {
+        const v = localStorage.getItem(key);
+        return v === null ? fallback : JSON.parse(v);
+      } catch {
+        return fallback;
+      }
+    },
+    set(key, value) {
+      try {
+        localStorage.setItem(key, JSON.stringify(value));
+      } catch {
+        /* storage unavailable: the tree still works, it just forgets its state */
+      }
+    },
+  };
+
+  const FREE_KEY = "ipam-tree:free";
+  const MAX_SAVED_KEYS = 200; // keeps the restore URL short; ancestors come first in DOM order
+
+  function init(table) {
+    const tbody = table.tBodies[0];
+    const ds = table.dataset;
+    const filtered = ds.filtered === "1";
+    const onPage = ds.rootKey === "__root__" && ds.storageKey === "ipam-tree:page";
+    const stateKey = ds.storageKey;
+    // Saved state: {all: true} after "Expand all", otherwise {keys: [...]} (a bare array is the old format).
+    const saved = store.get(stateKey, {});
+    const savedAll = !Array.isArray(saved) && saved.all === true;
+    const expanded = new Set(Array.isArray(saved) ? saved : saved.keys || []);
+    let allExpanded = false;
+    let interacted = false;
+    const level = (row) => Number(row.dataset.level);
+    const rows = () => Array.from(tbody.querySelectorAll("tr.ipt-row"));
+    const isOpen = (row) => row.getAttribute("aria-expanded") === "true";
+
+    function url(base, params) {
+      const u = new URL(base, location.origin);
+      Object.entries(params).forEach(([k, v]) => u.searchParams.set(k, v));
+      u.searchParams.set("free", ds.free);
+      return u;
+    }
+
+    async function fetchRows(u) {
+      const resp = await fetch(u, {
+        headers: { "X-Requested-With": "XMLHttpRequest", "X-Tree-Page": location.pathname + location.search },
+        credentials: "same-origin",
+      });
+      return { ok: resp.ok, html: await resp.text(), truncated: resp.headers.get("X-Tree-Truncated") === "1" };
+    }
+
+    function descendants(row) {
+      const out = [];
+      for (let r = row.nextElementSibling; r && level(r) > level(row); r = r.nextElementSibling) out.push(r);
+      return out;
+    }
+
+    function save() {
+      if (filtered || !onPage) return;
+      if (allExpanded) {
+        store.set(stateKey, { all: true });
+        return;
+      }
+      const inOrder = rows()
+        .map((r) => r.dataset.key)
+        .filter((k) => expanded.has(k));
+      store.set(stateKey, { keys: inOrder.slice(0, MAX_SAVED_KEYS) });
+    }
+
+    // Show the descendants of `row` that should be visible given each ancestor's expanded state.
+    function refreshVisibility(row) {
+      let hideBelow = isOpen(row) ? null : level(row);
+      for (const r of descendants(row)) {
+        if (hideBelow !== null && level(r) > hideBelow) {
+          r.classList.add("ipt-hidden");
+          continue;
+        }
+        hideBelow = null;
+        r.classList.remove("ipt-hidden");
+        if (r.hasAttribute("aria-expanded") && !isOpen(r)) hideBelow = level(r);
+      }
+    }
+
+    function banner(show) {
+      const card = table.closest(".card");
+      let el = card.previousElementSibling;
+      if (!el || !el.classList.contains("ipt-banner")) {
+        el = document.createElement("div");
+        el.className = "alert alert-warning ipt-banner d-none";
+        el.textContent = "Row limit reached: showing a partial tree. Narrow the view with filters.";
+        card.before(el);
+      }
+      el.classList.toggle("d-none", !show);
+    }
+
+    function rememberLoaded(fromRows) {
+      fromRows.forEach((r) => {
+        if (isOpen(r)) expanded.add(r.dataset.key);
+      });
+    }
+
+    async function load(row, endpoint) {
+      row.classList.add("ipt-loading");
+      row.classList.remove("ipt-failed");
+      try {
+        const res = await fetchRows(url(endpoint, { key: row.dataset.key, level: row.dataset.level }));
+        if (!res.ok) throw new Error(`HTTP error loading ${row.dataset.key}`);
+        descendants(row).forEach((r) => r.remove());
+        row.insertAdjacentHTML("afterend", res.html);
+        row.dataset.loaded = "1";
+        banner(res.truncated);
+        return true;
+      } catch (err) {
+        console.warn("[ipam-tree]", err);
+        row.classList.add("ipt-failed");
+        return false;
+      } finally {
+        row.classList.remove("ipt-loading");
+      }
+    }
+
+    async function setExpanded(row, open) {
+      allExpanded = false;
+      if (open && !row.dataset.loaded && !(await load(row, ds.childrenUrl))) return;
+      if (open && descendants(row).length === 0) {
+        // Nothing visible underneath (e.g. children hidden by permissions): drop the toggle.
+        row.removeAttribute("aria-expanded");
+        row.querySelector(".ipt-toggle")?.replaceWith(Object.assign(document.createElement("span"), { className: "ipt-spacer" }));
+        return;
+      }
+      row.setAttribute("aria-expanded", String(open));
+      if (open) expanded.add(row.dataset.key);
+      else expanded.delete(row.dataset.key);
+      refreshVisibility(row);
+      save();
+    }
+
+    async function expandSubtree(row) {
+      if (!row.hasAttribute("aria-expanded") || !(await load(row, ds.subtreeUrl))) return;
+      row.setAttribute("aria-expanded", "true");
+      expanded.add(row.dataset.key);
+      rememberLoaded(descendants(row));
+      refreshVisibility(row);
+      save();
+    }
+
+    async function expandAll() {
+      if (filtered) {
+        // Keep the filtered result: reopen everything already loaded instead of fetching the whole tree.
+        rows().forEach((r) => {
+          if (r.dataset.loaded) r.setAttribute("aria-expanded", "true");
+          r.classList.remove("ipt-hidden");
+        });
+        return;
+      }
+      if (!onPage) {
+        // Detail tabs: expand each top-level row of this table in turn.
+        const top = Math.min(...rows().map(level));
+        for (const row of rows().filter((r) => level(r) === top)) await expandSubtree(row);
+        return;
+      }
+      table.classList.add("ipt-busy");
+      try {
+        const res = await fetchRows(url(ds.subtreeUrl, { key: "__root__" }));
+        if (!res.ok) return;
+        tbody.innerHTML = res.html;
+        banner(res.truncated);
+        rememberLoaded(rows());
+        allExpanded = true;
+        save();
+      } finally {
+        table.classList.remove("ipt-busy");
+      }
+    }
+
+    function collapseAll() {
+      const all = rows();
+      if (!all.length) return;
+      const top = Math.min(...all.map(level));
+      all.forEach((r) => {
+        if (r.hasAttribute("aria-expanded")) r.setAttribute("aria-expanded", "false");
+        r.classList.toggle("ipt-hidden", level(r) > top);
+      });
+      expanded.clear();
+      allExpanded = false;
+      save();
+    }
+
+    async function restore() {
+      if (filtered || !onPage || (!savedAll && expanded.size === 0)) return;
+      const res = savedAll
+        ? await fetchRows(url(ds.subtreeUrl, { key: "__root__" }))
+        : await fetchRows(url(ds.expandUrl, { keys: Array.from(expanded).slice(0, MAX_SAVED_KEYS).join(",") }));
+      // Never overwrite what the user did while the restore was loading.
+      if (interacted || !res.ok || !res.html.trim()) return;
+      tbody.innerHTML = res.html;
+      banner(res.truncated);
+      allExpanded = savedAll;
+      if (savedAll) rememberLoaded(rows());
+    }
+
+    table.addEventListener("click", (e) => {
+      const btn = e.target.closest(".ipt-toggle");
+      if (btn) interacted = true;
+      if (!btn) return;
+      const row = btn.closest("tr");
+      if (e.altKey) expandSubtree(row);
+      else setExpanded(row, !isOpen(row));
+    });
+
+    table.addEventListener("keydown", (e) => {
+      const row = e.target.closest("tr.ipt-row");
+      if (!row) return;
+      interacted = true;
+      const visible = rows().filter((r) => !r.classList.contains("ipt-hidden"));
+      const i = visible.indexOf(row);
+      const focus = (r) => {
+        if (!r) return;
+        row.tabIndex = -1;
+        r.tabIndex = 0;
+        r.focus();
+      };
+      switch (e.key) {
+        case "ArrowDown":
+          focus(visible[i + 1]);
+          break;
+        case "ArrowUp":
+          focus(visible[i - 1]);
+          break;
+        case "ArrowRight":
+          if (row.hasAttribute("aria-expanded") && !isOpen(row)) setExpanded(row, true);
+          else focus(visible[i + 1]);
+          break;
+        case "ArrowLeft":
+          if (isOpen(row)) setExpanded(row, false);
+          else if (row.dataset.parent) focus(tbody.querySelector(`tr[data-key="${CSS.escape(row.dataset.parent)}"]`));
+          break;
+        case "*":
+          expandSubtree(row);
+          break;
+        case "Enter": {
+          const a = row.querySelector("td.ipt-name a");
+          if (a) a.click();
+          break;
+        }
+        default:
+          return;
+      }
+      e.preventDefault();
+    });
+
+    const mark = (fn) => () => {
+      interacted = true;
+      fn();
+    };
+    document.querySelectorAll('[data-ipt-action="expand-all"]').forEach((b) => b.addEventListener("click", mark(expandAll)));
+    document.querySelectorAll('[data-ipt-action="collapse-all"]').forEach((b) => b.addEventListener("click", mark(collapseAll)));
+    document.querySelectorAll('[data-ipt-action="toggle-free"]').forEach((sw) => {
+      sw.addEventListener("change", () => {
+        store.set(FREE_KEY, sw.checked);
+        ds.free = sw.checked ? "1" : "0";
+        // Reload so already-expanded nodes are re-rendered with or without free space.
+        const u = new URL(location.href);
+        u.searchParams.set("free", ds.free);
+        location.assign(u);
+      });
+    });
+
+    // A remembered free-space preference applies when the URL does not say otherwise.
+    if (!new URL(location.href).searchParams.has("free")) {
+      const saved = store.get(FREE_KEY, null);
+      if (saved !== null) {
+        ds.free = saved ? "1" : "0";
+        const sw = document.getElementById("ipt-free");
+        if (sw) sw.checked = saved;
+      }
+    }
+    const first = tbody.querySelector("tr.ipt-row");
+    if (first) first.tabIndex = 0;
+    restore();
+  }
+
+  document.addEventListener("DOMContentLoaded", () => document.querySelectorAll("table.ipt-tree").forEach(init));
+})();

netbox_ipam_treeview/template_content.py

@@ -0,0 +1,22 @@
+from django.urls import reverse
+from netbox.plugins import PluginTemplateExtension
+
+from .conf import get_setting
+
+
+class PrefixListTreeButton(PluginTemplateExtension):
+    """'Tree view' button on the native prefix list, carrying the current filters over."""
+
+    models = ["ipam.prefix"]
+
+    def list_buttons(self):
+        if not get_setting("show_list_toggle"):
+            return ""
+        from .views import filter_querystring
+
+        query = filter_querystring(self.context["request"].GET)
+        url = reverse("plugins:netbox_ipam_treeview:tree") + (f"?{query}" if query else "")
+        return self.render("netbox_ipam_treeview/inc/list_button.html", extra_context={"tree_url": url})
+
+
+template_extensions = [PrefixListTreeButton]

netbox_ipam_treeview/templates/netbox_ipam_treeview/inc/list_button.html

@@ -0,0 +1 @@
+{% load i18n %}<a href="{{ tree_url }}" class="btn btn-outline-primary ipt-tree-toggle"><i class="mdi mdi-file-tree"></i> {% trans "Tree view" %}</a>

netbox_ipam_treeview/templates/netbox_ipam_treeview/inc/rows.html

@@ -0,0 +1,33 @@
+{% load i18n helpers ipam_tree %}{% if error %}
+<tr class="ipt-error"><td colspan="99" class="text-danger"><i class="mdi mdi-alert"></i> {% trans "Not found or no permission." %}</td></tr>
+{% else %}{% for node in nodes %}
+<tr class="ipt-row ipt-{{ node.kind }}{% if node.context %} ipt-context{% endif %}" role="row" tabindex="-1"
+    data-key="{{ node.key }}" data-parent="{{ node.parent_key|default:'' }}" data-level="{{ node.level }}" aria-level="{{ node.level|add:1 }}"
+    {% if node.has_children %}aria-expanded="{{ node.expanded|yesno:'true,false' }}"{% endif %}{% if node.expanded and not node.partial %} data-loaded="1"{% endif %}
+    style="--ipt-level: {{ node.level }}">
+  <td class="ipt-name">
+    {% if node.has_children %}<button type="button" class="ipt-toggle btn btn-sm btn-link p-0" tabindex="-1" aria-label="{% trans 'Expand or collapse' %}"><i class="mdi mdi-chevron-right"></i></button>{% else %}<span class="ipt-spacer"></span>{% endif %}
+    {% if node.kind == "vrf" %}
+      <i class="mdi mdi-layers-outline"></i>
+      {% if node.obj %}<a href="{{ node.obj.get_absolute_url }}">{{ node.obj.name }}</a>{% if node.obj.rd %} <span class="text-muted small">{{ node.obj.rd }}</span>{% endif %}{% else %}{% trans "Global" %}{% endif %}
+    {% elif node.kind == "aggregate" %}
+      <i class="mdi mdi-earth"></i> <a href="{% obj_url node.obj %}">{{ node.obj.prefix }}</a>
+      <span class="badge text-bg-secondary">{{ node.obj.rir }}</span>{% if node.label %} <span class="text-muted small">· {{ node.label }}</span>{% endif %}
+    {% elif node.kind == "prefix" %}
+      <i class="mdi {% if node.has_children %}mdi-folder-network-outline{% else %}mdi-lan{% endif %}"></i>
+      <a href="{% obj_url node.obj %}">{{ node.obj.prefix }}</a>
+    {% elif node.kind == "gap" %}
+      <i class="mdi mdi-checkbox-blank-outline"></i> {{ node.network }}
+      <span class="small">· {{ node.network.size }} {% trans "addresses free" %}</span>
+      {% if tree_perms.add %}<a class="ms-2" href="{{ prefix_add_url }}?prefix={{ node.network|urlencode }}{% if node.vrf_id and node.vrf_id != '*' %}&vrf={{ node.vrf_id }}{% endif %}&return_url={{ return_url|urlencode }}"><i class="mdi mdi-plus"></i> {% trans "Create" %}</a>{% endif %}
+    {% elif node.kind == "more" %}
+      <i class="mdi mdi-dots-horizontal"></i> {% blocktrans with c=node.count a=node.addresses %}{{ c }} more free blocks ({{ a }} addresses){% endblocktrans %}
+    {% endif %}
+  </td>
+  {% for col in columns %}<td class="ipt-col-{{ col }}">{% if node.kind == "prefix" %}{% if col == "status" %}{% badge node.obj.get_status_display bg_color=node.obj.get_status_color %}{% elif col == "utilization" %}{{ node.utilization|util_bar }}{% elif col == "vrf" %}{{ node.obj.vrf|obj_link }}{% elif col == "scope" %}{{ node.obj.scope|obj_link }}{% elif col == "vlan" %}{{ node.obj.vlan|obj_link }}{% elif col == "tenant" %}{{ node.obj.tenant|obj_link }}{% elif col == "role" %}{{ node.obj.role|obj_link }}{% elif col == "children" %}{{ node.child_count|placeholder }}{% elif col == "is_pool" %}{% checkmark node.obj.is_pool %}{% elif col == "mark_utilized" %}{% checkmark node.obj.mark_utilized %}{% elif col == "tags" %}{% for t in node.obj.tags.all %}{% tag t %}{% endfor %}{% elif col == "description" %}{{ node.obj.description|placeholder }}{% elif col == "created" %}{{ node.obj.created|isodate }}{% elif col == "last_updated" %}{{ node.obj.last_updated|isodatetime }}{% elif col == "actions" %}<span class="text-nowrap">
+{% if tree_perms.add %}<a class="btn btn-sm btn-ghost-success" title="{% trans 'Add child prefix' %}" href="{{ prefix_add_url }}?{% if node.obj.vrf_id %}vrf={{ node.obj.vrf_id }}&{% endif %}scope_type={{ node.obj.scope_type_id|default:'' }}&scope={{ node.obj.scope_id|default:'' }}&return_url={{ return_url|urlencode }}"><i class="mdi mdi-plus-thick"></i></a>{% endif %}
+{% if tree_perms.change %}<a class="btn btn-sm btn-ghost-warning" title="{% trans 'Edit' %}" href="{% obj_url node.obj 'edit' %}?return_url={{ return_url|urlencode }}"><i class="mdi mdi-pencil"></i></a>{% endif %}
+{% if tree_perms.delete %}<a class="btn btn-sm btn-ghost-danger" title="{% trans 'Delete' %}" href="{% obj_url node.obj 'delete' %}?return_url={{ return_url|urlencode }}"><i class="mdi mdi-trash-can-outline"></i></a>{% endif %}
+</span>{% endif %}{% elif node.kind == "aggregate" and col == "utilization" %}{% utilization_graph node.obj.get_utilization %}{% endif %}</td>{% endfor %}
+</tr>
+{% endfor %}{% endif %}

netbox_ipam_treeview/templates/netbox_ipam_treeview/inc/table.html

@@ -0,0 +1,27 @@
+{% load i18n %}
+<div class="card">
+  <div class="table-responsive">
+    <table class="table table-hover ipt-tree" role="treegrid" aria-label="{% trans 'Prefix tree' %}"
+           data-children-url="{% url 'plugins:netbox_ipam_treeview:children' %}"
+           data-subtree-url="{% url 'plugins:netbox_ipam_treeview:subtree' %}"
+           data-expand-url="{% url 'plugins:netbox_ipam_treeview:expand' %}"
+           data-storage-key="{{ storage_key }}" data-free="{{ free|yesno:'1,0' }}"
+           data-filtered="{{ filtered|yesno:'1,0' }}" data-root-key="{{ root_key }}">
+      <thead>
+        <tr>
+          <th>{% trans "Prefix" %}</th>
+          {% for key, label in column_headers %}<th>{{ label }}</th>{% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% if nodes %}
+          {% include 'netbox_ipam_treeview/inc/rows.html' %}
+        {% else %}
+          <tr class="ipt-empty">
+            <td colspan="{{ columns|length|add:1 }}" class="text-center text-muted py-4">{% trans "No prefixes to show." %}</td>
+          </tr>
+        {% endif %}
+      </tbody>
+    </table>
+  </div>
+</div>

netbox_ipam_treeview/templates/netbox_ipam_treeview/inc/toolbar.html

@@ -0,0 +1,32 @@
+{% load i18n %}
+<div class="d-flex flex-wrap gap-2 align-items-center mb-2 ipt-toolbar">
+  <button type="button" class="btn btn-primary" data-ipt-action="expand-all">
+    <i class="mdi mdi-arrow-expand-vertical"></i> {% trans "Expand all" %}
+  </button>
+  <button type="button" class="btn btn-outline-primary" data-ipt-action="collapse-all">
+    <i class="mdi mdi-arrow-collapse-vertical"></i> {% trans "Collapse all" %}
+  </button>
+  {% if not filtered %}
+    <div class="form-check form-switch ms-2 mb-0">
+      <input class="form-check-input" type="checkbox" id="ipt-free" data-ipt-action="toggle-free"{% if free %} checked{% endif %}>
+      <label class="form-check-label" for="ipt-free">{% trans "Free space" %}</label>
+    </div>
+  {% endif %}
+  <div class="dropdown ms-auto">
+    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+      <i class="mdi mdi-table-cog"></i> {% trans "Columns" %}
+    </button>
+    <form method="post" action="{% url 'plugins:netbox_ipam_treeview:columns' %}" class="dropdown-menu dropdown-menu-end p-3 ipt-columns">
+      {% csrf_token %}
+      <input type="hidden" name="next" value="{{ request.get_full_path }}">
+      {% for key, label in all_columns.items %}{% if label %}
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" name="columns" value="{{ key }}" id="ipt-col-{{ key }}"{% if key in columns %} checked{% endif %}>
+          <label class="form-check-label" for="ipt-col-{{ key }}">{{ label }}</label>
+        </div>
+      {% endif %}{% endfor %}
+      <input type="hidden" name="columns" value="actions">
+      <button type="submit" class="btn btn-sm btn-primary mt-2">{% trans "Apply" %}</button>
+    </form>
+  </div>
+</div>

netbox_ipam_treeview/templates/netbox_ipam_treeview/tab.html

@@ -0,0 +1,17 @@
+{% extends base_template %}
+{% load static %}
+
+{% block head %}
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'netbox_ipam_treeview/tree.css' %}">
+{% endblock %}
+
+{% block content %}
+  {% include 'netbox_ipam_treeview/inc/toolbar.html' %}
+  {% include 'netbox_ipam_treeview/inc/table.html' %}
+{% endblock %}
+
+{% block javascript %}
+  {{ block.super }}
+  <script src="{% static 'netbox_ipam_treeview/tree.js' %}"></script>
+{% endblock %}

netbox_ipam_treeview/templates/netbox_ipam_treeview/tree.html

@@ -0,0 +1,57 @@
+{% extends 'generic/_base.html' %}
+{% load static i18n helpers %}
+
+{% block title %}{% trans "Prefix Tree" %}{% endblock %}
+
+{% block head %}
+  <link rel="stylesheet" href="{% static 'netbox_ipam_treeview/tree.css' %}">
+{% endblock %}
+
+{% block controls %}
+  <div class="btn-list">
+    <a href="{% url 'ipam:prefix_list' %}{% if list_querystring %}?{{ list_querystring }}{% endif %}" class="btn btn-outline-secondary">
+      <i class="mdi mdi-format-list-bulleted"></i> {% trans "List view" %}
+    </a>
+    {% if tree_perms.add %}
+      <a href="{% url 'ipam:prefix_add' %}?return_url={{ request.get_full_path|urlencode }}" class="btn btn-primary">
+        <i class="mdi mdi-plus-thick"></i> {% trans "Add" %}
+      </a>
+    {% endif %}
+  </div>
+{% endblock %}
+
+{% block tabs %}
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="tree-tab" data-bs-toggle="tab" data-bs-target="#tree-pane" type="button" role="tab" aria-controls="tree-pane" aria-selected="true">
+        {% trans "Tree" %}
+      </button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="filters-form-tab" data-bs-toggle="tab" data-bs-target="#filters-form" type="button" role="tab" aria-controls="filters-form" aria-selected="false">
+        {% trans "Filters" %}
+        {% badge filter_form.changed_data|length bg_color="primary" %}
+      </button>
+    </li>
+  </ul>
+{% endblock tabs %}
+
+{% block content %}
+  <div class="tab-pane show active" id="tree-pane" role="tabpanel" aria-labelledby="tree-tab">
+    {% applied_filters model filter_form request.GET %}
+    {% include 'netbox_ipam_treeview/inc/toolbar.html' %}
+    {% if truncated %}
+      <div class="alert alert-warning">
+        {% blocktrans %}Showing the first {{ limit }} rows. Narrow the view with filters.{% endblocktrans %}
+      </div>
+    {% endif %}
+    {% include 'netbox_ipam_treeview/inc/table.html' %}
+  </div>
+  <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
+    {% include 'inc/filter_list.html' %}
+  </div>
+{% endblock content %}
+
+{% block javascript %}
+  <script src="{% static 'netbox_ipam_treeview/tree.js' %}"></script>
+{% endblock %}