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 613 additions and 569 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):

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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,54 +6,62 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">Termination</h4>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.provider }}" disabled />
</div>
<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 text-lg-end">Provider</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.provider }}" disabled />
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">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 text-lg-end">Circuit</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.cid }}" disabled />
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Termination</label>
<div class="col">
<input class="form-control" value="{{ form.term_side.value }}" disabled />
</div>
</div>
<div class="row mb-3">
<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>
{% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %}
<ul class="nav nav-tabs" role="tablist">
</div>
{% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %}
<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>
<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>
<li class="nav-item" role="presentation">
<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>
<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 class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
</div>
<div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
{% render_field form.provider_network %}
</div>
</div>
{% endwith %}
</ul>
</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 %}
{% render_field form.site %}
</div>
<div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
{% render_field form.provider_network %}
</div>
</div>
{% endwith %}
</div>
<div class="field-group">
<h4 class="mb-3">Termination Details</h4>
{% render_field form.port_speed %}
{% render_field form.upstream_speed %}
{% render_field form.xconnect_id %}
{% render_field form.pp_info %}
{% render_field form.description %}
<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 %}
{% render_field form.pp_info %}
{% render_field form.description %}
</div>
{% endblock %}

View File

@ -5,162 +5,169 @@
{% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}
{% block content %}
{% with termination_a=form.instance.termination_a %}
{% render_errors form %}
<form method="post">
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="row my-3">
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
A Side
</h5>
<div class="card-body">
{% if termination_a.device %}
{# Device component #}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Region</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Location</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Rack</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Name</label>
<div class="col">
<input class="form-control" value="{{ termination_a }}" disabled />
</div>
</div>
{% else %}
{# Circuit termination #}
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.site }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Circuit</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Side</label>
<div class="col">
<input class="form-control" value="{{ termination_a.term_side }}" disabled />
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col col-md-2 flex-column justify-content-center align-items-center d-none d-md-flex">
<i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
</div>
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
B Side
</h5>
<div class="card-body">
{% if tabs %}
<ul class="nav nav-tabs">
{% for url, link in tabs %}
<li class="nav-item" role="presentation">
<a class="nav-link" href="{{ url }}">{{ link }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if 'termination_b_provider' in form.fields %}
{% render_field form.termination_b_provider %}
{% endif %}
{% if 'termination_b_region' in form.fields %}
{% render_field form.termination_b_region %}
{% endif %}
{% if 'termination_b_site' in form.fields %}
{% render_field form.termination_b_site %}
{% endif %}
{% if 'termination_b_location' in form.fields %}
{% render_field form.termination_b_location %}
{% endif %}
{% if 'termination_b_rack' in form.fields %}
{% render_field form.termination_b_rack %}
{% endif %}
{% if 'termination_b_device' in form.fields %}
{% render_field form.termination_b_device %}
{% endif %}
{% if 'termination_b_type' in form.fields %}
{% render_field form.termination_b_type %}
{% endif %}
{% if 'termination_b_powerpanel' in form.fields %}
{% render_field form.termination_b_powerpanel %}
{% endif %}
{% if 'termination_b_circuit' in form.fields %}
{% render_field form.termination_b_circuit %}
{% endif %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
</div>
</div>
{% render_field form.termination_b_id %}
</div>
</div>
</div>
</div>
<div class="row my-3 justify-content-center">
{% block content-wrapper %}
<div class="tab-content">
{% with termination_a=form.instance.termination_a %}
{% render_errors form %}
<form method="post">
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="row my-3">
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
A Side
</h5>
<div class="card-body">
{% if termination_a.device %}
{# Device component #}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Region</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Location</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Rack</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Name</label>
<div class="col">
<input class="form-control" value="{{ termination_a }}" disabled />
</div>
</div>
{% else %}
{# Circuit termination #}
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.site }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Circuit</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Side</label>
<div class="col">
<input class="form-control" value="{{ termination_a.term_side }}" disabled />
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col col-md-2 flex-column justify-content-center align-items-center d-none d-md-flex">
<i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
</div>
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
B Side
</h5>
<div class="card-body">
{% if tabs %}
<ul class="nav nav-tabs">
{% for url, link in tabs %}
<li class="nav-item" role="presentation">
<a class="nav-link" href="{{ url }}">{{ link }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if 'termination_b_provider' in form.fields %}
{% render_field form.termination_b_provider %}
{% endif %}
{% if 'termination_b_region' in form.fields %}
{% render_field form.termination_b_region %}
{% endif %}
{% if 'termination_b_site' in form.fields %}
{% render_field form.termination_b_site %}
{% endif %}
{% if 'termination_b_location' in form.fields %}
{% render_field form.termination_b_location %}
{% endif %}
{% if 'termination_b_rack' in form.fields %}
{% render_field form.termination_b_rack %}
{% endif %}
{% if 'termination_b_device' in form.fields %}
{% render_field form.termination_b_device %}
{% endif %}
{% if 'termination_b_type' in form.fields %}
{% render_field form.termination_b_type %}
{% endif %}
{% if 'termination_b_powerpanel' in form.fields %}
{% render_field form.termination_b_powerpanel %}
{% endif %}
{% if 'termination_b_circuit' in form.fields %}
{% render_field form.termination_b_circuit %}
{% endif %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
</div>
</div>
{% render_field form.termination_b_id %}
</div>
</div>
</div>
</div>
<div class="row my-3 justify-content-center">
<div class="col col-md-8">
{% include 'dcim/inc/cable_form.html' %}
<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>
<div class="row my-3">
<div class="col col-md-12 text-center">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_update" class="btn btn-primary">Connect</button>
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_update" class="btn btn-primary">Connect</button>
</div>
</div>
</form>
{% endwith %}
</div>
</form>
{% endwith %}
</div>
{% endblock %}

View File

@ -1,5 +1,5 @@
{% extends 'generic/object_edit.html' %}
{% block form %}
{% include 'dcim/inc/cable_form.html' %}
{% include 'dcim/inc/cable_form.html' %}
{% 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,27 +1,23 @@
{% 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 %}
{% render_field form.color %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">{{ form.length.label }}</label>
<div class="col-md-5">
{{ form.length }}
</div>
<div class="col-md-4">
{{ form.length_unit }}
</div>
<div class="invalid-feedback"></div>
</div>
{% render_field form.tags %}
{% if form.custom_fields %}
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
{% endif %}
{% render_field form.status %}
{% render_field form.type %}
{% render_field form.label %}
{% render_field form.color %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">{{ form.length.label }}</label>
<div class="col-md-5">
{{ form.length }}
</div>
<div class="col-md-4">
{{ form.length_unit }}
</div>
<div class="invalid-feedback"></div>
</div>
{% render_field form.tags %}
{% if form.custom_fields %}
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
{% endif %}

View File

@ -3,30 +3,34 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">Interface</h4>
{% 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>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
</div>
<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>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
</div>
{% endif %}
</div>
{% endif %}
{% 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,31 +2,31 @@
{% load form_helpers %}
{% block form %}
<div class="card">
<h5 class="card-header">Virtual Chassis</h5>
<div class="card-body">
{% 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">Virtual Chassis</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 %}
{% render_field form.rack %}
{% render_field form.members %}
{% render_field form.initial_position %}
</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>
{% if form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields form %}
</div>
</div>
{% endif %}
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
{% render_field form.rack %}
{% render_field form.members %}
{% render_field form.initial_position %}
</div>
{% if form.custom_fields %}
<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,89 +2,89 @@
{% 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 %}
<form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
{% 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">
{% render_field vc_form.name %}
{% render_field vc_form.domain %}
{% render_field vc_form.master %}
{% render_field vc_form.tags %}
</div>
<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>
{% if vc_form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields vc_form %}
</div>
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields vc_form %}
</div>
{% endif %}
<div class="card">
<h5 class="card-header">Members</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>ID</th>
<th>Rack/Unit</th>
<th>Serial</th>
<th>Position</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% with device=form.instance virtual_chassis=vc_form.instance %}
<tr>
<td>
<a href="{{ device.get_absolute_url }}">{{ device }}</a>
</td>
<td>{{ device.pk }}</td>
<td>
{% if device.rack %}
{{ device.rack }} / {{ device.position }}
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>{{ device.serial|placeholder }}</td>
<td>
{{ form.vc_position }}
{% if form.vc_position.errors %}
<br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
{% endif %}
</td>
<td>
{{ form.vc_priority }}
{% if form.vc_priority.errors %}
<br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
{% endif %}
</td>
<td>
{% if virtual_chassis.pk %}
<a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
<span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
</a>
{% endif %}
</td>
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
<div class="field-group mb-5">
<h5 class="text-center">Members</h5>
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>ID</th>
<th>Rack/Unit</th>
<th>Serial</th>
<th>Position</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% with device=form.instance virtual_chassis=vc_form.instance %}
<tr>
<td>
<a href="{{ device.get_absolute_url }}">{{ device }}</a>
</td>
<td>{{ device.pk }}</td>
<td>
{% if device.rack %}
{{ device.rack }} / {{ device.position }}
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>{{ device.serial|placeholder }}</td>
<td>
{{ form.vc_position }}
{% if form.vc_position.errors %}
<br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
{% endif %}
</td>
<td>
{{ form.vc_priority }}
{% if form.vc_priority.errors %}
<br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
{% endif %}
</td>
<td>
{% if virtual_chassis.pk %}
<a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
<span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
</a>
{% endif %}
</td>
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
@ -94,5 +94,7 @@
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
</div>
</form>
</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,67 +9,81 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">IP Address</h4>
{% render_field form.address %}
{% render_field form.status %}
{% render_field form.role %}
{% render_field form.vrf %}
{% render_field form.dns_name %}
{% render_field form.description %}
{% render_field form.tags %}
<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 %}
{% render_field form.vrf %}
{% render_field form.dns_name %}
{% render_field form.description %}
{% render_field form.tags %}
</div>
<div class="field-group">
<h4 class="mb-3">Tenancy</h4>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
<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>
{% with vm_tab_active=form.initial.vminterface %}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
<button
role="tab"
type="button"
id="device_tab"
data-bs-toggle="tab"
aria-controls="device"
data-bs-target="#device"
class="nav-link {% if not vm_tab_active %}active{% endif %}"
>
Device
</button>
</li>
<li role="presentation" class="nav-item">
<button
role="tab"
type="button"
id="vm_tab"
data-bs-toggle="tab"
aria-controls="vm"
data-bs-target="#vm"
class="nav-link {% if vm_tab_active %}active{% endif %}"
>
Virtual Machine
</button>
</li>
<div class="row mb-2">
<h5 class="offset-sm-3">Interface Assignment</h5>
</div>
{% with vm_tab_active=form.initial.vminterface %}
<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"
type="button"
id="device_tab"
data-bs-toggle="tab"
aria-controls="device"
data-bs-target="#device"
class="nav-link {% if not vm_tab_active %}active{% endif %}"
>
Device
</button>
</li>
<li role="presentation" class="nav-item">
<button
role="tab"
type="button"
id="vm_tab"
data-bs-toggle="tab"
aria-controls="vm"
data-bs-target="#vm"
class="nav-link {% if vm_tab_active %}active{% endif %}"
>
Virtual Machine
</button>
</li>
</ul>
<div class="tab-content">
<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 %}
</div>
<div class="tab-pane {% if vm_tab_active %}active{% endif %}" id="vm" role="tabpanel" aria-labeled-by="vm_tab">
{% render_field form.virtual_machine %}
{% render_field form.vminterface %}
</div>
</div>
{% endwith %}
{% render_field form.primary_for_parent %}
</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 %}
</div>
<div class="tab-pane {% if vm_tab_active %}active{% endif %}" id="vm" role="tabpanel" aria-labeled-by="vm_tab">
{% render_field form.virtual_machine %}
{% render_field form.vminterface %}
</div>
{% 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"
@ -109,29 +123,33 @@
By IP
</button>
</li>
</ul>
<div class="tab-content">
<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 %}
{% render_field form.nat_site %}
{% render_field form.nat_rack %}
{% render_field form.nat_device %}
</div>
<div class="tab-pane" id="by_vm" aria-labelledby="vm_tab" role="tabpanel">
{% render_field form.nat_cluster %}
{% render_field form.nat_virtual_machine %}
</div>
<div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel">
{% render_field form.nat_vrf %}
</div>
{% render_field form.nat_inside %}
</ul>
</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 %}
{% render_field form.nat_site %}
{% render_field form.nat_rack %}
{% render_field form.nat_device %}
</div>
<div class="tab-pane" id="by_vm" aria-labelledby="vm_tab" role="tabpanel">
{% render_field form.nat_cluster %}
{% render_field form.nat_virtual_machine %}
</div>
<div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel">
{% render_field form.nat_vrf %}
</div>
{% render_field form.nat_inside %}
</div>
</div>
{% if form.custom_fields %}
<div class="field-group">
<h4 class="mb-3">Custom Fields</h4>
{% 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,50 +2,49 @@
{% load form_helpers %}
{% block form %}
<div class="field-group">
<h5 class="text-center">Service</h5>
{% if obj.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col">
<input class="form-control" value="{{ obj.device }}" disabled />
</div>
</div>
{% else %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Virtual Machine</label>
<div class="col">
<input class="form-control" value="{{ obj.virtual_machine }}" disabled />
</div>
</div>
{% endif %}
{% render_field form.name %}
<div class="row">
<label class="col-sm-3 col-form-label text-lg-end">Port(s)</label>
<div class="col-2">
{{ form.protocol }}
</div>
<div class="col-7">
{{ form.ports }}
</div>
</div>
<div class="row mb-3">
<div class="col-3"></div>
<div class="col-9">
<span class="form-text">{{ form.ports.help_text }}</span>
</div>
</div>
{% render_field form.ipaddresses %}
{% render_field form.description %}
{% render_field form.tags %}
<div class="field-group">
<div class="row mb-2">
<h5 class="offset-sm-3">Service</h5>
</div>
{% if form.custom_fields %}
<div class="card">
<h5 class="card-header">Custom Fields</h5>
<div class="card-body">
{% render_custom_fields form %}
{% if obj.device %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col">
<input class="form-control" value="{{ obj.device }}" disabled />
</div>
</div>
{% else %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-lg-end">Virtual Machine</label>
<div class="col">
<input class="form-control" value="{{ obj.virtual_machine }}" disabled />
</div>
</div>
{% endif %}
{% render_field form.name %}
<div class="row">
<label class="col-sm-3 col-form-label text-lg-end">Port(s)</label>
<div class="col-2">
{{ form.protocol }}
</div>
<div class="col-7">
{{ form.ports }}
</div>
</div>
<div class="row mb-3">
<div class="col-3"></div>
<div class="col-9">
<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="row mb-2">
<h5 class="offset-sm-3">Custom Fields</h5>
</div>
{% render_custom_fields form %}
{% endif %}
{% endblock %}

View File

@ -4,48 +4,60 @@
{% load helpers %}
{% block form %}
<div class="field-group mb-3">
<h5 class="text-center">VLAN</h5>
{% render_field form.vid %}
{% render_field form.name %}
{% render_field form.status %}
{% render_field form.role %}
{% render_field form.description %}
{% render_field form.tags %}
<div class="field-group mb-3">
<div class="row mb-2">
<h5 class="offset-sm-3">VLAN</h5>
</div>
<div class="field-group mb-3">
<h5 class="text-center">Tenancy</h5>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
{% render_field form.vid %}
{% render_field form.name %}
{% render_field form.status %}
{% render_field form.role %}
{% render_field form.description %}
{% render_field form.tags %}
</div>
<div class="field-group mb-3">
<div class="row mb-2">
<h5 class="offset-sm-3">Tenancy</h5>
</div>
<div class="field-group mb-3">
<h5 class="text-center">Assignment</h5>
{% with site_tab_active=form.initial.site %}
<ul class="nav nav-tabs" 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>
<li class="nav-item" role="presentation">
<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 class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
{% render_field form.scope_type %}
{% render_field form.group %}
</div>
<div class="tab-pane{% if site_tab_active %} active{% endif %}" id="site">
{% render_field form.region %}
{% render_field form.sitegroup %}
{% render_field form.site %}
</div>
</div>
{% endwith %}
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
<div class="field-group mb-3">
<div class="row mb-2">
<h5 class="offset-sm-3">Assignment</h5>
</div>
{% if form.custom_fields %}
<div class="field-group">
<h5 class="text-center">Custom Fields</h5>
{% render_custom_fields form %}
{% with site_tab_active=form.initial.site %}
<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>
<li class="nav-item" role="presentation">
<a class="nav-link{% if site_tab_active %} active{% endif %}" href="#site" role="tab" data-bs-toggle="tab">Site</a>
</li>
</ul>
</div>
{% endif %}
</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 %}
</div>
<div class="tab-pane{% if site_tab_active %} active{% endif %}" id="site">
{% render_field form.region %}
{% render_field form.sitegroup %}
{% render_field form.site %}
</div>
</div>
{% endwith %}
</div>
{% if form.custom_fields %}
<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

@ -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,34 +3,39 @@
{% block form %}
<div class="field-group">
<h5 class="text-center">Interface</h5>
{% 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>
<div class="col">
<input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
</div>
</div>
{% endif %}
{% render_field form.name %}
{% render_field form.enabled %}
{% render_field form.parent %}
{% render_field form.mac_address %}
{% render_field form.mtu %}
{% render_field form.description %}
{% render_field form.tags %}
<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>
<div class="col">
<input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
</div>
</div>
{% endif %}
{% render_field form.name %}
{% render_field form.enabled %}
{% render_field form.parent %}
{% render_field form.mac_address %}
{% 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>
{% render_field form.mode %}
{% render_field form.vlan_group %}
{% render_field form.untagged_vlan %}
{% render_field form.tagged_vlans %}
<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 %}
{% render_field form.tagged_vlans %}
</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 %}