Clean up object edit forms

This commit is contained in:
jeremystretch 2021-08-24 13:59:54 -04:00
parent b63c838c74
commit 545474a1a3
21 changed files with 610 additions and 566 deletions

View File

@ -1422,6 +1422,10 @@ class VLANGroupForm(BootstrapMixin, CustomFieldModelForm):
'name', 'slug', 'description', 'scope_type', 'region', 'sitegroup', 'site', 'location', 'rack',
'clustergroup', 'cluster',
]
fieldsets = (
('VLAN Group', ('name', 'slug', 'description')),
('Scope', ('scope_type', 'region', 'sitegroup', 'site', 'location', 'rack', 'clustergroup', 'cluster')),
)
widgets = {
'scope_type': StaticSelect,
}

View File

@ -769,7 +769,6 @@ class VLANGroupView(generic.ObjectView):
class VLANGroupEditView(generic.ObjectEditView):
queryset = VLANGroup.objects.all()
model_form = forms.VLANGroupForm
template_name = 'ipam/vlangroup_edit.html'
class VLANGroupDeleteView(generic.ObjectDeleteView):

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -725,15 +725,6 @@ div.paginator > form > div.input-group {
div.field-group:not(:first-of-type) {
margin-top: $spacer * 3;
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: $spacer;
}
}
label.required {

View File

@ -6,28 +6,32 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">Termination</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Circuit Termination</h5>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<label class="col-sm-3 col-form-label text-lg-end">Provider</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.provider }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Circuit</label>
<label class="col-sm-3 col-form-label text-lg-end">Circuit</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.cid }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Termination</label>
<label class="col-sm-3 col-form-label text-lg-end">Termination</label>
<div class="col">
<input class="form-control" value="{{ form.term_side.value }}" disabled />
</div>
</div>
{% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %}
<ul class="nav nav-tabs" role="tablist">
<div class="row mb-2">
<div class="offset-sm-3">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
</li>
@ -35,7 +39,9 @@
<button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
</li>
</ul>
<div class="tab-content">
</div>
</div>
<div class="tab-content p-0">
<div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
{% render_field form.region %}
{% render_field form.site_group %}
@ -48,7 +54,9 @@
{% endwith %}
</div>
<div class="field-group">
<h4 class="mb-3">Termination Details</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Termination Details</h5>
</div>
{% render_field form.port_speed %}
{% render_field form.upstream_speed %}
{% render_field form.xconnect_id %}

View File

@ -5,7 +5,8 @@
{% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}
{% block content %}
{% block content-wrapper %}
<div class="tab-content">
{% with termination_a=form.instance.termination_a %}
{% render_errors form %}
<form method="post">
@ -152,9 +153,14 @@
</div>
<div class="row my-3 justify-content-center">
<div class="col col-md-8">
<div class="card">
<h5 class="card-header">Cable</h5>
<div class="card-body">
{% include 'dcim/inc/cable_form.html' %}
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col col-md-12 text-center">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
@ -163,4 +169,5 @@
</div>
</form>
{% endwith %}
</div>
{% endblock %}

View File

@ -5,14 +5,18 @@
{% render_errors form %}
<div class="field-group">
<h5 class="text-center">Device</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Device</h5>
</div>
{% render_field form.name %}
{% render_field form.device_role %}
{% render_field form.tags %}
</div>
<div class="field-group">
<h5 class="text-center">Hardware</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Hardware</h5>
</div>
{% render_field form.manufacturer %}
{% render_field form.device_type %}
{% render_field form.serial %}
@ -20,7 +24,9 @@
</div>
<div class="field-group">
<h5 class="text-center">Location</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Location</h5>
</div>
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
@ -52,7 +58,9 @@
</div>
<div class="field-group">
<h5 class="text-center">Management</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Management</h5>
</div>
{% render_field form.status %}
{% render_field form.platform %}
{% if obj.pk %}
@ -62,20 +70,26 @@
</div>
<div class="field-group">
<h5 class="text-center">Virtualization</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Virtualization</h5>
</div>
{% render_field form.cluster_group %}
{% render_field form.cluster %}
</div>
<div class="field-group">
<h5 class="text-center">Tenancy</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Tenancy</h5>
</div>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>

View File

@ -1,7 +1,5 @@
{% load form_helpers %}
<div class="card">
<h5 class="card-header">Cable</h5>
<div class="card-body">
{% render_field form.status %}
{% render_field form.type %}
{% render_field form.label %}
@ -23,5 +21,3 @@
{% render_custom_fields form %}
</div>
{% endif %}
</div>
</div>

View File

@ -3,7 +3,9 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">Interface</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Interface</h5>
</div>
{% if form.instance.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Device</label>
@ -15,18 +17,20 @@
{% render_field form.name %}
{% render_field form.label %}
{% render_field form.type %}
{% render_field form.enabled %}
{% render_field form.parent %}
{% render_field form.lag %}
{% render_field form.mac_address %}
{% render_field form.mtu %}
{% render_field form.mgmt_only %}
{% render_field form.mark_connected %}
{% render_field form.description %}
{% render_field form.tags %}
{% render_field form.enabled %}
{% render_field form.mgmt_only %}
{% render_field form.mark_connected %}
</div>
<div class="field-group">
<h4 class="mb-3">802.1Q Switching</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">802.1Q Switching</h5>
</div>
{% render_field form.mode %}
{% render_field form.vlan_group %}
{% render_field form.untagged_vlan %}
@ -34,7 +38,9 @@
</div>
{% if form.custom_fields %}
<div class="field-group">
<h4 class="mb-3">Custom Fields</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}

View File

@ -3,7 +3,9 @@
{% block form %}
<div class="field-group">
<h5 class="text-center">Rack</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Rack</h5>
</div>
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
@ -14,18 +16,24 @@
{% render_field form.tags %}
</div>
<div class="field-group">
<h5 class="text-center">Inventory Control</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Inventory Control</h5>
</div>
{% render_field form.facility_id %}
{% render_field form.serial %}
{% render_field form.asset_tag %}
</div>
<div class="field-group">
<h5 class="text-center">Tenancy</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Tenancy</h5>
</div>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
<div class="field-group">
<h5 class="text-center">Dimensions</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Dimensions</h5>
</div>
{% render_field form.type %}
{% render_field form.width %}
{% render_field form.u_height %}
@ -48,7 +56,9 @@
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}

View File

@ -2,17 +2,18 @@
{% load form_helpers %}
{% block form %}
<div class="card">
<h5 class="card-header">Virtual Chassis</h5>
<div class="card-body">
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Virtual Chassis</h5>
</div>
{% render_field form.name %}
{% render_field form.domain %}
{% render_field form.tags %}
</div>
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Member Devices</h5>
</div>
<div class="card">
<h5 class="card-header">Member Devices</h5>
<div class="card-body">
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
@ -20,13 +21,12 @@
{% render_field form.members %}
{% render_field form.initial_position %}
</div>
</div>
{% if form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields form %}
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}
{% endblock %}

View File

@ -2,33 +2,34 @@
{% load helpers %}
{% load form_helpers %}
{% block title %}{% if vc_form.instance %}Editing Virtual Chassis {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
{% block title %}Editing Virtual Chassis {{ vc_form.instance }}{% endblock %}
{% block content %}
{% block content-wrapper %}
<div class="tab-content">
<div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
<form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
{% csrf_token %}
{{ pk_form.pk }}
{{ formset.management_form }}
<div class="card">
<h5 class="card-header">Virtual Chassis</h5>
<div class="card-body">
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Virtual Chassis</h5>
</div>
{% render_field vc_form.name %}
{% render_field vc_form.domain %}
{% render_field vc_form.master %}
{% render_field vc_form.tags %}
</div>
</div>
{% if vc_form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields vc_form %}
</div>
</div>
{% endif %}
<div class="card">
<h5 class="card-header">Members</h5>
<div class="card-body">
<div class="field-group mb-5">
<h5 class="text-center">Members</h5>
<table class="table">
<thead>
<tr>
@ -85,7 +86,6 @@
</tbody>
</table>
</div>
</div>
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if vc_form.instance.pk %}
@ -95,4 +95,6 @@
{% endif %}
</div>
</form>
</div>
</div>
{% endblock %}

View File

@ -43,7 +43,9 @@
{# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %}
<div class="field-group">
<h5 class="text-center">{{ group }}</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">{{ group }}</h5>
</div>
{% for name in fields %}
{% render_field form|getfield:name %}
{% endfor %}
@ -52,7 +54,9 @@
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
<div class="row mb-1">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}
@ -66,7 +70,6 @@
{% else %}
{# Render all fields in a single group #}
<div class="field-group">
<h5 class="text-center">{{ obj_type|capfirst }}</h5>
{% block form_fields %}{% render_form form %}{% endblock %}
</div>
{% endif %}

View File

@ -9,7 +9,9 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">IP Address</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">IP Address</h5>
</div>
{% render_field form.address %}
{% render_field form.status %}
{% render_field form.role %}
@ -19,14 +21,20 @@
{% render_field form.tags %}
</div>
<div class="field-group">
<h4 class="mb-3">Tenancy</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Tenancy</h5>
</div>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
<div class="field-group">
<h4 class="mb-3">Interface Assignment</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Interface Assignment</h5>
</div>
{% with vm_tab_active=form.initial.vminterface %}
<ul class="nav nav-tabs" role="tablist">
<div class="row mb-2">
<div class="offset-sm-3">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="nav-item">
<button
role="tab"
@ -54,7 +62,9 @@
</button>
</li>
</ul>
<div class="tab-content">
</div>
</div>
<div class="tab-content p-0">
<div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
{% render_field form.device %}
{% render_field form.interface %}
@ -63,13 +73,17 @@
{% render_field form.virtual_machine %}
{% render_field form.vminterface %}
</div>
</div>
{% endwith %}
{% render_field form.primary_for_parent %}
</div>
{% endwith %}
</div>
<div class="field-group">
<h4 class="mb-3">NAT IP (Inside)</h4>
<ul class="nav nav-tabs" role="tablist">
<div class="row mb-2">
<h5 class="offset-sm-3">NAT IP (Inside)</h5>
</div>
<div class="row mb-2">
<div class="offset-sm-3">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button
role="tab"
@ -110,7 +124,9 @@
</button>
</li>
</ul>
<div class="tab-content">
</div>
</div>
<div class="tab-content p-0">
<div class="tab-pane active" id="by_device" aria-labelledby="device_tab" role="tabpanel">
{% render_field form.nat_region %}
{% render_field form.nat_site_group %}
@ -130,7 +146,9 @@
</div>
{% if form.custom_fields %}
<div class="field-group">
<h4 class="mb-3">Custom Fields</h4>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}

View File

@ -3,7 +3,9 @@
{% block form %}
<div class="field-group">
<h5 class="text-center">Service</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Service</h5>
</div>
{% if obj.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
@ -35,17 +37,14 @@
<span class="form-text">{{ form.ports.help_text }}</span>
</div>
</div>
{% render_field form.ipaddresses %}
{% render_field form.description %}
{% render_field form.tags %}
</div>
{% if form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
</div>
{% endif %}
{% endblock %}

View File

@ -5,7 +5,9 @@
{% block form %}
<div class="field-group mb-3">
<h5 class="text-center">VLAN</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">VLAN</h5>
</div>
{% render_field form.vid %}
{% render_field form.name %}
{% render_field form.status %}
@ -14,14 +16,20 @@
{% render_field form.tags %}
</div>
<div class="field-group mb-3">
<h5 class="text-center">Tenancy</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Tenancy</h5>
</div>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
<div class="field-group mb-3">
<h5 class="text-center">Assignment</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Assignment</h5>
</div>
{% with site_tab_active=form.initial.site %}
<ul class="nav nav-tabs" role="tablist">
<div class="row mb-2">
<div class="offset-sm-3">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
</li>
@ -29,7 +37,9 @@
<a class="nav-link{% if site_tab_active %} active{% endif %}" href="#site" role="tab" data-bs-toggle="tab">Site</a>
</li>
</ul>
<div class="tab-content">
</div>
</div>
<div class="tab-content p-0">
<div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
{% render_field form.scope_type %}
{% render_field form.group %}
@ -44,7 +54,9 @@
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}

View File

@ -1,30 +0,0 @@
{% extends 'generic/object_edit.html' %}
{% load form_helpers %}
{% load helpers %}
{% block form %}
<div class="field-group">
<h5 class="text-center">VLAN Group</h5>
{% render_field form.name %}
{% render_field form.slug %}
{% render_field form.description %}
</div>
<div class="field-group">
<h5 class="text-center">Scope</h5>
{% render_field form.scope_type %}
{% render_field form.region %}
{% render_field form.sitegroup %}
{% render_field form.site %}
{% render_field form.location %}
{% render_field form.rack %}
{% render_field form.clustergroup %}
{% render_field form.cluster %}
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
{% render_custom_fields form %}
</div>
{% endif %}
{% endblock %}

View File

@ -3,7 +3,9 @@
{% block form %}
<div class="field-group">
<h5 class="text-center">Interface</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Interface</h5>
</div>
{% if form.instance.virtual_machine %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Virtual Machine</label>
@ -19,10 +21,11 @@
{% render_field form.mtu %}
{% render_field form.description %}
{% render_field form.tags %}
</div>
<div class="field-group">
<h5 class="text-center">802.1Q Switching</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">802.1Q Switching</h5>
</div>
{% render_field form.mode %}
{% render_field form.vlan_group %}
{% render_field form.untagged_vlan %}
@ -30,7 +33,9 @@
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
</div>
{% endif %}