Skip to content

#20923 - Convert extras to new declarative UI layout #21765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pheus merged 10 commits into from
Mar 31, 2026
Merged

#20923 - Convert extras to new declarative UI layout #21765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1c200f4
Convert extras to new declarative UI layout
bctiemann Mar 26, 2026
12e5403
Restore tagged item count to Tag attributes panel
bctiemann Mar 26, 2026
c368fd6
Fix display value of CustomField.type
bctiemann Mar 26, 2026
aaf2aff
Move TextCodePanel to netbox.ui.panels and remove SyncCodePanel
bctiemann Mar 30, 2026
1745bda
Fix stylistic issues with spacing and label capitalization
bctiemann Mar 30, 2026
e13581b
Fix 3 remaining stylistic inconsistencies
bctiemann Mar 30, 2026
381956a
Fix "Display weight" on Custom Fields
bctiemann Mar 30, 2026
7c5d4a5
Add show_sync_warning for TextCodePanel
bctiemann Mar 31, 2026
26ae9a8
Fix trailing newlines
bctiemann Mar 31, 2026
a7e4eb4
Remove orphaned sync_code.html template (replaced by TextCodePanel wi…
Copilot Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
441 changes: 440 additions & 1 deletion netbox/extras/ui/panels.py
View file
Open in desktop

Large diffs are not rendered by default.

174 changes: 173 additions & 1 deletion netbox/extras/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
from django.urls import reverse
from django.utils import timezone
from django.utils.module_loading import import_string
from django.utils.translation import gettext as _
from django.utils.translation import gettext_lazy as _
from django.views.generic import View
from jinja2.exceptions import TemplateError

Expand All @@ -23,6 +23,14 @@
from extras.dashboard.utils import get_widget_class
from extras.utils import SharedObjectViewMixin
from netbox.object_actions import *
from netbox.ui import layout
from netbox.ui.panels import (
CommentsPanel,
ContextTablePanel,
JSONPanel,
TemplatePanel,
TextCodePanel,
)
from netbox.views import generic
from netbox.views.generic.mixins import TableMixin
from utilities.forms import ConfirmationForm, get_field_value
Expand All @@ -40,6 +48,7 @@
from .constants import LOG_LEVEL_RANK
from .models import *
from .tables import ReportResultsTable, ScriptJobTable, ScriptResultsTable
from .ui import panels

#
# Custom fields
Expand All @@ -57,6 +66,18 @@ class CustomFieldListView(generic.ObjectListView):
@register_model_view(CustomField)
class CustomFieldView(generic.ObjectView):
queryset = CustomField.objects.select_related('choice_set')
layout = layout.SimpleLayout(
left_panels=[
panels.CustomFieldPanel(),
panels.CustomFieldBehaviorPanel(),
CommentsPanel(),
],
right_panels=[
panels.CustomFieldObjectTypesPanel(),
panels.CustomFieldValidationPanel(),
panels.CustomFieldRelatedObjectsPanel(),
],
)

def get_extra_context(self, request, instance):
related_models = ()
Expand Down Expand Up @@ -128,6 +149,14 @@ class CustomFieldChoiceSetListView(generic.ObjectListView):
@register_model_view(CustomFieldChoiceSet)
class CustomFieldChoiceSetView(generic.ObjectView):
queryset = CustomFieldChoiceSet.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.CustomFieldChoiceSetPanel(),
],
right_panels=[
panels.CustomFieldChoiceSetChoicesPanel(),
],
)

def get_extra_context(self, request, instance):

Expand Down Expand Up @@ -203,6 +232,16 @@ class CustomLinkListView(generic.ObjectListView):
@register_model_view(CustomLink)
class CustomLinkView(generic.ObjectView):
queryset = CustomLink.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.CustomLinkPanel(),
panels.ObjectTypesPanel(title=_('Assigned Models')),
],
right_panels=[
TextCodePanel('link_text', title=_('Link Text')),
TextCodePanel('link_url', title=_('Link URL')),
],
)


@register_model_view(CustomLink, 'add', detail=False)
Expand Down Expand Up @@ -260,6 +299,19 @@ class ExportTemplateListView(generic.ObjectListView):
@register_model_view(ExportTemplate)
class ExportTemplateView(generic.ObjectView):
queryset = ExportTemplate.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.ExportTemplatePanel(),
TemplatePanel('core/inc/datafile_panel.html'),
],
right_panels=[
panels.ObjectTypesPanel(title=_('Assigned Models')),
JSONPanel('environment_params', title=_('Environment Parameters')),
],
bottom_panels=[
TextCodePanel('template_code', title=_('Template'), show_sync_warning=True),
],
)


@register_model_view(ExportTemplate, 'add', detail=False)
Expand Down Expand Up @@ -321,6 +373,15 @@ class SavedFilterListView(SharedObjectViewMixin, generic.ObjectListView):
@register_model_view(SavedFilter)
class SavedFilterView(SharedObjectViewMixin, generic.ObjectView):
queryset = SavedFilter.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.SavedFilterPanel(),
panels.SavedFilterObjectTypesPanel(),
],
right_panels=[
JSONPanel('parameters', title=_('Parameters')),
],
)


@register_model_view(SavedFilter, 'add', detail=False)
Expand Down Expand Up @@ -383,6 +444,15 @@ class TableConfigListView(SharedObjectViewMixin, generic.ObjectListView):
@register_model_view(TableConfig)
class TableConfigView(SharedObjectViewMixin, generic.ObjectView):
queryset = TableConfig.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.TableConfigPanel(),
],
right_panels=[
panels.TableConfigColumnsPanel(),
panels.TableConfigOrderingPanel(),
],
)

def get_extra_context(self, request, instance):
table = instance.table_class([])
Expand Down Expand Up @@ -476,6 +546,15 @@ class NotificationGroupListView(generic.ObjectListView):
@register_model_view(NotificationGroup)
class NotificationGroupView(generic.ObjectView):
queryset = NotificationGroup.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.NotificationGroupPanel(),
],
right_panels=[
panels.NotificationGroupGroupsPanel(),
panels.NotificationGroupUsersPanel(),
],
)


@register_model_view(NotificationGroup, 'add', detail=False)
Expand Down Expand Up @@ -660,6 +739,19 @@ class WebhookListView(generic.ObjectListView):
@register_model_view(Webhook)
class WebhookView(generic.ObjectView):
queryset = Webhook.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.WebhookPanel(),
panels.WebhookHTTPPanel(),
panels.WebhookSSLPanel(),
],
right_panels=[
TextCodePanel('additional_headers', title=_('Additional Headers')),
TextCodePanel('body_template', title=_('Body Template')),
panels.CustomFieldsPanel(),
panels.TagsPanel(),
],
)


@register_model_view(Webhook, 'add', detail=False)
Expand Down Expand Up @@ -716,6 +808,19 @@ class EventRuleListView(generic.ObjectListView):
@register_model_view(EventRule)
class EventRuleView(generic.ObjectView):
queryset = EventRule.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.EventRulePanel(),
panels.ObjectTypesPanel(),
panels.EventRuleEventTypesPanel(),
],
right_panels=[
JSONPanel('conditions', title=_('Conditions')),
panels.EventRuleActionPanel(),
panels.CustomFieldsPanel(),
panels.TagsPanel(),
],
)


@register_model_view(EventRule, 'add', detail=False)
Expand Down Expand Up @@ -774,6 +879,18 @@ class TagListView(generic.ObjectListView):
@register_model_view(Tag)
class TagView(generic.ObjectView):
queryset = Tag.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.TagPanel(),
],
right_panels=[
panels.TagObjectTypesPanel(),
panels.TagItemTypesPanel(),
],
bottom_panels=[
ContextTablePanel('taggeditem_table', title=_('Tagged Objects')),
],
)

def get_extra_context(self, request, instance):
tagged_items = TaggedItem.objects.filter(tag=instance)
Expand Down Expand Up @@ -853,6 +970,18 @@ class ConfigContextProfileListView(generic.ObjectListView):
@register_model_view(ConfigContextProfile)
class ConfigContextProfileView(generic.ObjectView):
queryset = ConfigContextProfile.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.ConfigContextProfilePanel(),
TemplatePanel('core/inc/datafile_panel.html'),
panels.CustomFieldsPanel(),
panels.TagsPanel(),
CommentsPanel(),
],
right_panels=[
JSONPanel('schema', title=_('JSON Schema')),
],
)


@register_model_view(ConfigContextProfile, 'add', detail=False)
Expand Down Expand Up @@ -915,6 +1044,16 @@ class ConfigContextListView(generic.ObjectListView):
@register_model_view(ConfigContext)
class ConfigContextView(generic.ObjectView):
queryset = ConfigContext.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.ConfigContextPanel(),
TemplatePanel('core/inc/datafile_panel.html'),
panels.ConfigContextAssignmentPanel(),
],
right_panels=[
TemplatePanel('extras/panels/configcontext_data.html'),
],
)

def get_extra_context(self, request, instance):
# Gather assigned objects for parsing in the template
Expand Down Expand Up @@ -1034,6 +1173,18 @@ class ConfigTemplateListView(generic.ObjectListView):
@register_model_view(ConfigTemplate)
class ConfigTemplateView(generic.ObjectView):
queryset = ConfigTemplate.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.ConfigTemplatePanel(),
panels.TagsPanel(),
],
right_panels=[
JSONPanel('environment_params', title=_('Environment Parameters')),
],
bottom_panels=[
TextCodePanel('template_code', title=_('Template'), show_sync_warning=True),
],
)


@register_model_view(ConfigTemplate, 'add', detail=False)
Expand Down Expand Up @@ -1151,6 +1302,17 @@ class ImageAttachmentListView(generic.ObjectListView):
@register_model_view(ImageAttachment)
class ImageAttachmentView(generic.ObjectView):
queryset = ImageAttachment.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.ImageAttachmentPanel(),
],
right_panels=[
panels.ImageAttachmentFilePanel(),
],
bottom_panels=[
panels.ImageAttachmentImagePanel(),
],
)


@register_model_view(ImageAttachment, 'add', detail=False)
Expand Down Expand Up @@ -1215,6 +1377,16 @@ class JournalEntryListView(generic.ObjectListView):
@register_model_view(JournalEntry)
class JournalEntryView(generic.ObjectView):
queryset = JournalEntry.objects.all()
layout = layout.SimpleLayout(
left_panels=[
panels.JournalEntryPanel(),
panels.CustomFieldsPanel(),
panels.TagsPanel(),
],
right_panels=[
CommentsPanel(),
],
)


@register_model_view(JournalEntry, 'add', detail=False)
Expand Down
20 changes: 20 additions & 0 deletions netbox/netbox/ui/panels.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
'PluginContentPanel',
'RelatedObjectsPanel',
'TemplatePanel',
'TextCodePanel',
)


Expand Down Expand Up @@ -329,6 +330,25 @@ def render(self, context):
return render_to_string(self.template_name, context.flatten())


class TextCodePanel(ObjectPanel):
"""
A panel displaying a text field as a pre-formatted code block.
"""
template_name = 'ui/panels/text_code.html'

def __init__(self, field_name, show_sync_warning=False, **kwargs):
super().__init__(**kwargs)
self.field_name = field_name
self.show_sync_warning = show_sync_warning

def get_context(self, context):
return {
**super().get_context(context),
'show_sync_warning': self.show_sync_warning,
'value': getattr(context.get('object'), self.field_name, None),
}


class PluginContentPanel(Panel):
"""
A panel which displays embedded plugin content.
Expand Down
61 changes: 0 additions & 61 deletions netbox/templates/extras/configcontext.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1 @@
{% extends 'generic/object.html' %}
{% load helpers %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="row">
<div class="col col-12 col-md-5">
<div class="card">
<h2 class="card-header">{% trans "Config Context" %}</h2>
<table class="table table-hover attr-table">
<tr>
<th scope="row">{% trans "Name" %}</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">{% trans "Weight" %}</th>
<td>{{ object.weight }}</td>
</tr>
<tr>
<th scope="row">{% trans "Profile" %}</th>
<td>{{ object.profile|linkify|placeholder }}</td>
</tr>
<tr>
<th scope="row">{% trans "Description" %}</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">{% trans "Active" %}</th>
<td>{% checkmark object.is_active %}</td>
</tr>
</table>
</div>
{% include 'core/inc/datafile_panel.html' %}
<div class="card">
<h2 class="card-header">{% trans "Assignment" %}</h2>
<table class="table table-hover attr-table">
{% for title, objects in assigned_objects %}
<tr>
<th scope="row">{{ title }}</th>
<td>
<ul class="list-unstyled mb-0">
{% for object in objects %}
<li>{{ object|linkify }}</li>
{% empty %}
<li class="text-muted">{% trans "None" %}</li>
{% endfor %}
</ul>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="col col-12 col-md-7">
{% include 'inc/sync_warning.html' %}
<div class="card">
{% include 'extras/inc/configcontext_data.html' with title="Data" data=object.data format=format copyid="data" %}
</div>
</div>
</div>
{% endblock %}
Loading
Loading