NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-17 04:32:51 -06:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Use shaded tabs

Browse Source
This commit is contained in:
jeremystretch 2021-07-21 09:24:43 -04:00
parent ebe7779f40
commit d42138384f
21 changed files with 224 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-dark.css.map vendored
View File

File diff suppressed because one or more lines are too long

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-light.css.map vendored
View File

File diff suppressed because one or more lines are too long

12
netbox/project-static/styles/netbox.scss
View File

@ -879,3 +879,15 @@ div.card > div.card-header > div.table-controls {
font-size: $font-size-sm; font-size: $font-size-sm;
} }
} }
// Tabbed content
.nav-tabs {
.nav-link.active {
background-color: $tab-content-bg;
border-bottom-color: $tab-content-bg;
}
}
.tab-content {
background-color: $tab-content-bg;
padding: $spacer;
}

3
netbox/project-static/styles/theme-dark.scss
View File

@ -271,3 +271,6 @@ $code-color: $gray-200;
$kbd-color: $white; $kbd-color: $white;
$kbd-bg: $gray-300; $kbd-bg: $gray-300;
$pre-color: null; $pre-color: null;
// Tabbed content
$tab-content-bg: $gray-900;

3
netbox/project-static/styles/theme-light.scss
View File

@ -25,3 +25,6 @@ $list-group-color: $gray-700;
$list-group-disabled-color: $gray-500; $list-group-disabled-color: $gray-500;
$table-flush-header-bg: $gray-100; $table-flush-header-bg: $gray-100;
// Tabbed content
$tab-content-bg: $gray-100;

8
netbox/templates/base/layout.html
View File

@ -138,9 +138,11 @@
{# Page content #} {# Page content #}
<div id="content" class="container-fluid content px-0 m-0"> <div id="content" class="container-fluid content px-0 m-0">
{% block tabs %}{% endblock %} {% block tabs %}{% endblock %}
<div class="px-3"> {% block content-wrapper %}
{% block content %}{% endblock %} <div class="px-3">
</div> {% block content %}{% endblock %}
</div>
{% endblock %}
</div> </div>
{% if settings.BANNER_BOTTOM %} {% if settings.BANNER_BOTTOM %}

2
netbox/templates/circuits/circuittermination_edit.html
View File

@ -27,7 +27,7 @@
</div> </div>
{% render_field form.mark_connected %} {% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %} {% with providernetwork_tab_active=form.initial.provider_network %}
<ul class="nav nav-tabs mb-3" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"> <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>

6
netbox/templates/dcim/device/config.html
View File

@ -9,7 +9,7 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col col-md-10"> <div class="col">
<div class="card"> <div class="card">
<div class="card-overlay"> <div class="card-overlay">
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
@ -18,12 +18,12 @@
</div> </div>
<h5 class="card-header">Device Configuration</h5> <h5 class="card-header">Device Configuration</h5>
<div class="card-body"> <div class="card-body">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li> <li role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li>
<li role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li> <li role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li>
<li role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li> <li role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li>
</ul> </ul>
<div class="tab-content pt-3"> <div class="tab-content p-3">
<div role="tabpanel" class="tab-pane active" id="running"> <div role="tabpanel" class="tab-pane active" id="running">
<pre id="running_config"></pre> <pre id="running_config"></pre>
</div> </div>

2
netbox/templates/dcim/device_import.html
View File

@ -1,5 +1,5 @@
{% extends 'generic/object_bulk_import.html' %} {% extends 'generic/object_bulk_import.html' %}
{% block tabs %} {% block tabs %}
{% include 'dcim/inc/device_import_header.html' %} {% include 'dcim/inc/device_import_header.html' %}
{% endblock %} {% endblock %}

2
netbox/templates/dcim/device_import_child.html
View File

@ -1,5 +1,5 @@
{% extends 'generic/object_bulk_import.html' %} {% extends 'generic/object_bulk_import.html' %}
{% block tabs %} {% block tabs %}
{% include 'dcim/inc/device_import_header.html' with active_tab='child_import' %} {% include 'dcim/inc/device_import_header.html' with active_tab='child_import' %}
{% endblock %} {% endblock %}

4
netbox/templates/dcim/devicetype.html
View File

@ -148,7 +148,7 @@
</div> </div>
<div class="row my-3"> <div class="row my-3">
<div class="col col-md-12"> <div class="col col-md-12">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-target="#interfaces" role="tab" data-bs-toggle="tab"> <button class="nav-link active" data-bs-target="#interfaces" role="tab" data-bs-toggle="tab">
Interfaces {% badge interface_table.rows|length %} Interfaces {% badge interface_table.rows|length %}
@ -190,7 +190,7 @@
</button> </button>
</li> </li>
</ul> </ul>
<div class="tab-content my-3"> <div class="tab-content p-0">
<div role="tabpanel" class="tab-pane active" id="interfaces"> <div role="tabpanel" class="tab-pane active" id="interfaces">
{% include 'dcim/inc/devicetype_component_table.html' with table=interface_table title='Interfaces' tab='interfaces' %} {% include 'dcim/inc/devicetype_component_table.html' with table=interface_table title='Interfaces' tab='interfaces' %}
</div> </div>

2
netbox/templates/dcim/inc/device_import_header.html
View File

@ -1,4 +1,4 @@
<ul class="nav nav-tabs justify-content-center" style="margin-bottom: 20px"> <ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class ="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'dcim:device_import' %}">Racked Devices</a> <a class ="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'dcim:device_import' %}">Racked Devices</a>
</li> </li>

52
netbox/templates/generic/object.html
View File

@ -52,29 +52,35 @@
{% endblock controls %} {% endblock controls %}
{% block tabs %} {% block tabs %}
<ul class="nav nav-tabs mb-3 px-3"> <ul class="nav nav-tabs px-3">
{% block tab_items %} {% block tab_items %}
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a> <a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
</li>
{% endblock tab_items %}
{% if perms.extras.view_journalentry %}
{% with journal_viewname=object|viewname:'journal' %}
{% url journal_viewname pk=object.pk as journal_url %}
{% if journal_url %}
<li role="presentation" class="nav-item">
<a href="{{ journal_url }}" class="nav-link{% if active_tab == 'journal'%} active{% endif %}">Journal</a>
</li> </li>
{% endblock tab_items %}
{% if perms.extras.view_journalentry %}
{% with journal_viewname=object|viewname:'journal' %}
{% url journal_viewname pk=object.pk as journal_url %}
{% if journal_url %}
<li role="presentation" class="nav-item">
<a href="{{ journal_url }}" class="nav-link{% if active_tab == 'journal'%} active{% endif %}">Journal</a>
</li>
{% endif %}
{% endwith %}
{% endif %} {% endif %}
{% endwith %} {% if perms.extras.view_objectchange %}
{% endif %} {% with changelog_viewname=object|viewname:'changelog' %}
{% if perms.extras.view_objectchange %} {% url changelog_viewname pk=object.pk as changelog_url %}
{% with changelog_viewname=object|viewname:'changelog' %} <li role="presentation" class="nav-item">
{% url changelog_viewname pk=object.pk as changelog_url %} <a href="{{ changelog_url }}" class="nav-link{% if active_tab == 'changelog'%} active{% endif %}">Change Log</a>
<li role="presentation" class="nav-item"> </li>
<a href="{{ changelog_url }}" class="nav-link{% if active_tab == 'changelog'%} active{% endif %}">Change Log</a> {% endwith %}
</li> {% endif %}
{% endwith %} </ul>
{% endif %}
</ul>
{% endblock tabs %} {% endblock tabs %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}{% endblock %}
</div>
{% endblock %}

64
netbox/templates/generic/object_bulk_edit.html
View File

@ -5,7 +5,7 @@
{% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %} {% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %}
{% block tabs %} {% block tabs %}
<ul class="nav nav-tabs mb-3 px-3"> <ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true"> <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
Bulk Edit Bulk Edit
@ -20,46 +20,48 @@
</ul> </ul>
{% endblock %} {% endblock %}
{% block content %} {% block content-wrapper %}
<div class="tab-content"> <div class="tab-content">
{% block content %}
{# Edit form #} {# Edit form #}
<div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab"> <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
<form action="" method="post" class="form form-horizontal"> <form action="" method="post" class="form form-horizontal">
{% csrf_token %} {% csrf_token %}
{% if request.POST.return_url %} {% if request.POST.return_url %}
<input type="hidden" name="return_url" value="{{ request.POST.return_url }}" /> <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
{% endif %} {% endif %}
{% for field in form.hidden_fields %} {% for field in form.hidden_fields %}
{{ field }} {{ field }}
{% endfor %} {% endfor %}
<div class="row"> <div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1"> <div class="col col-md-12 col-lg-10 offset-lg-1">
{% for field in form.visible_fields %} {% for field in form.visible_fields %}
{% if field.name in form.nullable_fields %} {% if field.name in form.nullable_fields %}
{% render_field field bulk_nullable=True %} {% render_field field bulk_nullable=True %}
{% else %} {% else %}
{% render_field field %} {% render_field field %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<div class="text-end"> <div class="text-end">
<a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a> <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
<button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button> <button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
</div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
{# Selected objects list #} {# Selected objects list #}
<div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab"> <div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
{% include 'inc/table.html' %} {% include 'inc/table.html' %}
</div> </div>
{% endblock %}
</div> </div>
{% endblock %} {% endblock %}

229
netbox/templates/generic/object_bulk_import.html
View File

@ -4,127 +4,130 @@
{% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %} {% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}
{% block content %} {% block tabs %}
<div class="row"> <ul class="nav nav-tabs px-3">
<div class="col col-md-12 col-lg-10 offset-lg-1"> <li class="nav-item" role="presentation">
<ul class="nav nav-tabs mb-3" role="tablist"> <a class ="nav-link active" href="#">Bulk Import</a>
<li class="nav-item" role="presentation"> </li>
<a href="#csv" class="nav-link active" role="tab" data-bs-toggle="tab">CSV</a> </ul>
</li> {% endblock %}
</ul>
<div class="tab-content"> {% block content-wrapper %}
<div role="tabpanel" class="tab-pane active" id="csv"> <div class="tab-content">
<form action="" method="post" class="form"> {% block content %}
{% csrf_token %} <div class="row">
{% render_form form %} <div class="col col-md-12 col-lg-10 offset-lg-1">
<div class="form-group"> <form action="" method="post" class="form">
<div class="col col-md-12 text-end"> {% csrf_token %}
{% if return_url %} {% render_form form %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a> <div class="form-group">
{% endif %} <div class="col col-md-12 text-end">
<button type="submit" class="btn btn-primary">Submit</button> {% if return_url %}
</div> <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
<button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
</form> </div>
{% if fields %} </form>
<div class="row my-3"> {% if fields %}
<div class="col col-md-12"> <div class="row my-3">
<div class="card"> <div class="col col-md-12">
<h5 class="card-header"> <div class="card">
CSV Field Options <h5 class="card-header">
</h5> CSV Field Options
<div class="card-body"> </h5>
<table class="table"> <div class="card-body">
<table class="table">
<tr>
<th>Field</th>
<th>Required</th>
<th>Accessor</th>
<th>Description</th>
</tr>
{% for name, field in fields.items %}
<tr> <tr>
<th>Field</th> <td>
<th>Required</th> <code>{{ name }}</code>
<th>Accessor</th> </td>
<th>Description</th> <td>
</tr> {% if field.required %}
{% for name, field in fields.items %} <i class="mdi mdi-check-bold text-success" title="Required"></i>
<tr> {% else %}
<td> <span class="text-muted">&mdash;</span>
<code>{{ name }}</code> {% endif %}
</td> </td>
<td> <td>
{% if field.required %} {% if field.to_field_name %}
<i class="mdi mdi-check-bold text-success" title="Required"></i> <code>{{ field.to_field_name }}</code>
{% else %} {% else %}
<span class="text-muted">&mdash;</span> <span class="text-muted">&mdash;</span>
{% endif %} {% endif %}
</td> </td>
<td> <td>
{% if field.to_field_name %} {% if field.STATIC_CHOICES %}
<code>{{ field.to_field_name }}</code> <button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices">
{% else %} <i class="mdi mdi-help-circle"></i>
<span class="text-muted">&mdash;</span> </button>
{% endif %} <div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
</td> <div class="modal-dialog" role="document">
<td> <div class="modal-content">
{% if field.STATIC_CHOICES %} <div class="modal-header">
<button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices"> <h5 class="modal-title"><code>{{ name }}</code> Choices</h5>
<i class="mdi mdi-help-circle"></i> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</button> </div>
<div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog"> <div class="modal-body">
<div class="modal-dialog" role="document"> <table class="table table-striped">
<div class="modal-content"> <tr>
<div class="modal-header"> <th>Import Value</th>
<h5 class="modal-title"><code>{{ name }}</code> Choices</h5> <th>Label</th>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </tr>
</div> {% for value, label in field.choices %}
<div class="modal-body"> {% if value %}
<table class="table table-striped"> <tr>
<tr> <td>
<th>Import Value</th> <samp>{{ value }}</samp>
<th>Label</th> </td>
</tr> <td>
{% for value, label in field.choices %} {{ label }}
{% if value %} </td>
<tr> </tr>
<td> {% endif %}
<samp>{{ value }}</samp> {% endfor %}
</td> </table>
<td>
{{ label }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endif %} </div>
{% if field.help_text %} {% endif %}
{{ field.help_text }}<br /> {% if field.help_text %}
{% elif field.label %} {{ field.help_text }}<br />
{{ field.label }}<br /> {% elif field.label %}
{% endif %} {{ field.label }}<br />
{% if field|widget_type == 'dateinput' %} {% endif %}
<small class="text-muted">Format: YYYY-MM-DD</small> {% if field|widget_type == 'dateinput' %}
{% elif field|widget_type == 'checkboxinput' %} <small class="text-muted">Format: YYYY-MM-DD</small>
<small class="text-muted">Specify "true" or "false"</small> {% elif field|widget_type == 'checkboxinput' %}
{% endif %} <small class="text-muted">Specify "true" or "false"</small>
</td> {% endif %}
</tr> </td>
{% endfor %} </tr>
</table> {% endfor %}
</div> </table>
</div> </div>
</div> </div>
</div> </div>
<p class="small text-muted">
<i class="mdi mdi-check-bold text-success"></i> Required fields <strong>must</strong> be specified for all
objects.
</p>
<p class="small text-muted">
<i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute.
For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher.
</p>
{% endif %}
</div> </div>
<p class="small text-muted">
<i class="mdi mdi-check-bold text-success"></i> Required fields <strong>must</strong> be specified for all
objects.
</p>
<p class="small text-muted">
<i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute.
For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher.
</p>
{% endif %}
</div> </div>
</div> </div>
</div> {% endblock content %}
{% endblock content %} </div>
{% endblock %}

2
netbox/templates/generic/object_edit.html
View File

@ -60,7 +60,7 @@
</div> </div>
<div class="row my-3"> <div class="row my-3">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end"> <div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
{% block buttons %} {% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a> <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>

7
netbox/templates/ipam/ipaddress_edit.html
View File

@ -25,7 +25,7 @@
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">Interface Assignment</h4> <h4 class="mb-3">Interface Assignment</h4>
{% with vm_tab_active=form.initial.vminterface %} {% with vm_tab_active=form.initial.vminterface %}
<ul class="nav nav-tabs mb-3" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"> <li role="presentation" class="nav-item">
<button <button
role="tab" role="tab"
@ -52,7 +52,6 @@
Virtual Machine Virtual Machine
</button> </button>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab"> <div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
@ -69,7 +68,7 @@
</div> </div>
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">NAT IP (Inside)</h4> <h4 class="mb-3">NAT IP (Inside)</h4>
<ul class="nav nav-tabs mb-3" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button <button
role="tab" role="tab"
@ -125,8 +124,8 @@
<div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel"> <div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel">
{% render_field form.nat_vrf %} {% render_field form.nat_vrf %}
</div> </div>
{% render_field form.nat_inside %}
</div> </div>
{% render_field form.nat_inside %}
</div> </div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="field-group"> <div class="field-group">

8
netbox/templates/ipam/vlan/base.html
View File

@ -15,7 +15,7 @@
{% endblock %} {% endblock %}
{% block tabs %} {% block tabs %}
<ul class="nav nav-tabs" style="margin-bottom: 20px"> <ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'ipam:vlan' pk=object.pk %}">VLAN</a> <a class="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'ipam:vlan' pk=object.pk %}">VLAN</a>
</li> </li>
@ -37,3 +37,9 @@
{% endif %} {% endif %}
</ul> </ul>
{% endblock %} {% endblock %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}{% endblock %}
</div>
{% endblock %}

2
netbox/templates/ipam/vlan_edit.html
View File

@ -21,7 +21,7 @@
<div class="field-group mb-3"> <div class="field-group mb-3">
<h4>Assignment</h4> <h4>Assignment</h4>
{% with site_tab_active=form.initial.site %} {% with site_tab_active=form.initial.site %}
<ul class="nav nav-tabs mb-3" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"> <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> <a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
</li> </li>