migrate templates to bootstrap 5

This commit is contained in:
checktheroads 2021-04-18 11:35:42 -07:00
parent 43703b6f40
commit 125965b559
19 changed files with 650 additions and 630 deletions

View File

@ -1,17 +1,19 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% block title %}{% endblock %}
{% block content %} {% block content %}
<div class="row" style="margin-top: 150px;"> <div class="row my-5">
<div class="col-sm-4 col-sm-offset-4"> <div class="col-6 offset-3">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header text-danger">
<strong>{% block icon %}{% endblock %} {% block title %}{% endblock %}</strong> {{ request_path }}
</div> </h5>
<div class="panel-body"> <div class="card-body">
{% block message %}{% endblock %} {% block message %}{% endblock %}
</div> </div>
<div class="panel-footer text-right"> <div class="card-footer text-end">
<a href="{% url 'home' %}" class="btn btn-xs btn-primary">Home Page</a> <a href="{% url 'home' %}" class="btn btn-sm btn-primary">Home Page</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,19 +1,22 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% load buttons %} {% load buttons %}
{% block title %}{{ title }}{% endblock %} {% block title %}{{ title }}{% endblock %}
{% block extra_controls %}{% export_button content_type %}{% endblock %}
{% block content %} {% block content %}
<div class="float-end noprint"> <div class="row mb-3">
{% export_button content_type %} <div class="col-md-9">
</div> <div class="card">
<div class="row"> <div class="card-body">
<div class="col-md-12"> {% include 'responsive_table.html' %}
<div class="col-md-3 pull-right right-side-panel noprint"> </div>
{% include 'inc/search_panel.html' %}
</div> </div>
{% include 'responsive_table.html' %}
{% include 'inc/paginator.html' with paginator=table.paginator page=table.page %} {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
</div> </div>
<div class="col-md-3 float-end right-side-panel noprint">
{% include 'inc/search_panel.html' %}
</div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -285,7 +285,7 @@
{% if perms.secrets.add_secret %} {% if perms.secrets.add_secret %}
<div class="card-footer text-end noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'secrets:secret_add' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary"> <a href="{% url 'secrets:secret_add' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary">
<i class="bi bi-plus"></i> Add secret <i class="mdi mdi-plus-thick"></i> Add Secret
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -311,7 +311,7 @@
{% if perms.ipam.add_service %} {% if perms.ipam.add_service %}
<div class="card-footer text-end noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'dcim:device_service_assign' device=object.pk %}" class="btn btn-sm btn-primary"> <a href="{% url 'dcim:device_service_assign' device=object.pk %}" class="btn btn-sm btn-primary">
<span class="bi bi-plus" aria-hidden="true"></span> Assign service <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Assign Service
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -326,8 +326,8 @@
{% if perms.extras.add_imageattachment %} {% if perms.extras.add_imageattachment %}
<div class="card-footer text-end noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'dcim:device_add_image' object_id=object.pk %}" class="btn btn-primary btn-sm"> <a href="{% url 'dcim:device_add_image' object_id=object.pk %}" class="btn btn-primary btn-sm">
<span class="bi bi-plus" aria-hidden="true"></span> <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
Attach an image Attach an Image
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -379,7 +379,3 @@
</div> </div>
{% include 'secrets/inc/private_key_modal.html' %} {% include 'secrets/inc/private_key_modal.html' %}
{% endblock %} {% endblock %}
{% block javascript %}
<script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
{% endblock %}

View File

@ -3,33 +3,35 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'dcim:manufacturer_list' %}">Manufacturers</a></li> <li class="breadcrumb-item"><a href="{% url 'dcim:manufacturer_list' %}">Manufacturers</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Manufacturer</strong> Manufacturer
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Device types</th>
<td>
<a href="{% url 'dcim:devicetype_list' %}?manufacturer_id={{ object.pk }}">{{ devicetypes_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Device types</td>
<td>
<a href="{% url 'dcim:devicetype_list' %}?manufacturer_id={{ object.pk }}">{{ devicetypes_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
@ -38,16 +40,18 @@
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Device Types</strong> Device Types
</h5>
<div class="card-body">
{% include 'inc/table.html' with table=devicetypes_table %}
</div> </div>
{% include 'inc/table.html' with table=devicetypes_table %}
{% if perms.dcim.add_devicetype %} {% if perms.dcim.add_devicetype %}
<div class="panel-footer text-right noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'dcim:devicetype_add' %}?manufacturer={{ object.pk }}" class="btn btn-xs btn-primary"> <a href="{% url 'dcim:devicetype_add' %}?manufacturer={{ object.pk }}" class="btn btn-sm btn-primary">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device type <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device type
</a> </a>
</div> </div>

View File

@ -3,123 +3,126 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
{{ block.super }} <li class="breadcrumb-item"><a href="{% url 'dcim:device_poweroutlets' pk=object.device.pk %}">Power Outlets</a></li>
<li><a href="{% url 'dcim:device_poweroutlets' pk=object.device.pk %}">Power Outlets</a></li> <li class="breadcrumb-item">{{ object }}</li>
<li>{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Power Outlet</strong> Power Outlet
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Device</th>
<td>
<a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
</td>
</tr>
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Label</th>
<td>{{ object.label|placeholder }}</td>
</tr>
<tr>
<th scope="row">Type</th>
<td>{{ object.get_type_display }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Power Port</th>
<td>{{ object.power_port }}</td>
</tr>
<tr>
<th scope="row">Feed Leg</th>
<td>{{ object.get_feed_leg_display }}</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Device</td>
<td>
<a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
</td>
</tr>
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Label</td>
<td>{{ object.label|placeholder }}</td>
</tr>
<tr>
<td>Type</td>
<td>{{ object.get_type_display }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Power Port</td>
<td>{{ object.power_port }}</td>
</tr>
<tr>
<td>Feed Leg</td>
<td>{{ object.get_feed_leg_display }}</td>
</tr>
</table>
</div> </div>
{% include 'inc/custom_fields_panel.html' %} {% include 'inc/custom_fields_panel.html' %}
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all %} {% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Connection</strong> Connection
</div> </h5>
<div class="card-body">
{% if object.mark_connected %} {% if object.mark_connected %}
<div class="panel-body text-muted"> <div class="text-muted">
<span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
</div> </div>
{% elif object.cable %} {% elif object.cable %}
<table class="table table-hover panel-body attr-table"> <table class="table table-hover attr-table">
<tr> <tr>
<td>Cable</td> <th scope="row">Cable</th>
<td> <td>
<a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a> <a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a>
<a href="{% url 'dcim:poweroutlet_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace"> <a href="{% url 'dcim:poweroutlet_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
<i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i> <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
</a> </a>
</td> </td>
</tr> </tr>
{% if object.connected_endpoint %} {% if object.connected_endpoint %}
<tr> <tr>
<td>Device</td> <th scope="row">Device</th>
<td> <td>
<a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a> <a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Name</td> <th scope="row">Name</th>
<td> <td>
<a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a> <a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Type</td> <th scope="row">Type</th>
<td>{{ object.connected_endpoint.get_type_display|placeholder }}</td> <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Description</td> <th scope="row">Description</th>
<td>{{ object.connected_endpoint.description|placeholder }}</td> <td>{{ object.connected_endpoint.description|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Path Status</td> <th scope="row">Path Status</th>
<td> <td>
{% if object.path.is_active %} {% if object.path.is_active %}
<span class="label label-success">Reachable</span> <span class="badge bg-success">Reachable</span>
{% else %} {% else %}
<span class="label label-danger">Not Reachable</span> <span class="badge bg-danger">Not Reachable</span>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endif %} {% endif %}
</table> </table>
{% else %} {% else %}
<div class="panel-body text-muted"> <div class="text-muted">
Not connected Not Connected
{% if perms.dcim.add_cable %} {% if perms.dcim.add_cable %}
<a href="{% url 'dcim:poweroutlet_connect' termination_a_id=object.pk termination_b_type='power-port' %}?return_url={{ object.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm pull-right"> <a href="{% url 'dcim:poweroutlet_connect' termination_a_id=object.pk termination_b_type='power-port' %}?return_url={{ object.get_absolute_url }}" title="Connect" class="btn btn-primary btn-sm float-end">
<i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> Connect
</a> </a>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div>
</div> </div>
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
{% plugin_full_width_page object %} {% plugin_full_width_page object %}
</div> </div>

View File

@ -3,124 +3,131 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
{{ block.super }} <li class="breadcrumb-item"><a href="{% url 'dcim:device_powerports' pk=object.device.pk %}">Power Ports</a></li>
<li><a href="{% url 'dcim:device_powerports' pk=object.device.pk %}">Power Ports</a></li> <li class="breadcrumb-item">{{ object }}</li>
<li>{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Power Port</strong> Power Port
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Device</th>
<td>
<a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
</td>
</tr>
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Label</th>
<td>{{ object.label|placeholder }}</td>
</tr>
<tr>
<th scope="row">Type</th>
<td>{{ object.get_type_display }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Maximum Draw</th>
<td>{{ object.maximum_draw|placeholder }}</td>
</tr>
<tr>
<th scope="row">Allocated Draw</th>
<td>{{ object.allocated_draw|placeholder }}</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Device</td>
<td>
<a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a>
</td>
</tr>
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Label</td>
<td>{{ object.label|placeholder }}</td>
</tr>
<tr>
<td>Type</td>
<td>{{ object.get_type_display }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Maximum Draw</td>
<td>{{ object.maximum_draw|placeholder }}</td>
</tr>
<tr>
<td>Allocated Draw</td>
<td>{{ object.allocated_draw|placeholder }}</td>
</tr>
</table>
</div> </div>
{% include 'inc/custom_fields_panel.html' %} {% include 'inc/custom_fields_panel.html' %}
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all %} {% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Connection</strong> Connection
</div> </h5>
<div class="card-body">
{% if object.mark_connected %} {% if object.mark_connected %}
<div class="panel-body text-muted"> <div class="text-muted">
<span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as connected <span class="text-success"><i class="mdi mdi-check-bold"></i></span> Marked as Connected
</div> </div>
{% elif object.cable %} {% elif object.cable %}
<table class="table table-hover panel-body attr-table"> <table class="table table-hover attr-table">
<tr> <tr>
<td>Cable</td> <th scope="row">Cable</th>
<td> <td>
<a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a> <a href="{{ object.cable.get_absolute_url }}">{{ object.cable }}</a>
<a href="{% url 'dcim:powerport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace"> <a href="{% url 'dcim:powerport_trace' pk=object.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
<i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i> <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
</a> </a>
</td> </td>
</tr> </tr>
{% if object.connected_endpoint %} {% if object.connected_endpoint %}
<tr> <tr>
<td>Device</td> <th scope="row">Device</th>
<td> <td>
<a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a> <a href="{{ object.connected_endpoint.device.get_absolute_url }}">{{ object.connected_endpoint.device }}</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Name</td> <th scope="row">Name</th>
<td> <td>
<a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a> <a href="{{ object.connected_endpoint.get_absolute_url }}">{{ object.connected_endpoint.name }}</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Type</td> <th scope="row">Type</th>
<td>{{ object.connected_endpoint.get_type_display|placeholder }}</td> <td>{{ object.connected_endpoint.get_type_display|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Description</td> <th scope="row">Description</th>
<td>{{ object.connected_endpoint.description|placeholder }}</td> <td>{{ object.connected_endpoint.description|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Path Status</td> <th scope="row">Path Status</th>
<td> <td>
{% if object.path.is_active %} {% if object.path.is_active %}
<span class="label label-success">Reachable</span> <span class="badge bg-success">Reachable</span>
{% else %} {% else %}
<span class="label label-danger">Not Reachable</span> <span class="badge bg-danger">Not Reachable</span>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endif %} {% endif %}
</table> </table>
{% else %} {% else %}
<div class="panel-body text-muted"> <div class="text-muted">
Not connected Not Connected
{% if perms.dcim.add_cable %} {% if perms.dcim.add_cable %}
<span class="dropdown pull-right"> <span class="dropdown float-end">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-end">
<li><a href="{% url 'dcim:powerport_connect' termination_a_id=object.pk termination_b_type='power-outlet' %}?return_url={{ object.get_absolute_url }}">Power Outlet</a></li> <li>
<li><a href="{% url 'dcim:powerport_connect' termination_a_id=object.pk termination_b_type='power-feed' %}?return_url={{ object.get_absolute_url }}">Power Feed</a></li> <a class="dropdown-link" href="{% url 'dcim:powerport_connect' termination_a_id=object.pk termination_b_type='power-outlet' %}?return_url={{ object.get_absolute_url }}">Power Outlet</a>
</li>
<li>
<a class="dropdown-link" href="{% url 'dcim:powerport_connect' termination_a_id=object.pk termination_b_type='power-feed' %}?return_url={{ object.get_absolute_url }}">Power Feed</a>
</li>
</ul> </ul>
</span> </span>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div>
</div> </div>
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>

View File

@ -1,34 +1,27 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% load form_helpers %} {% load form_helpers %}
{% block title %}Add New Member to Virtual Chassis {{ virtual_chassis }}{% endblock %}
{% block content %} {% block content %}
<form action="" method="post" enctype="multipart/form-data" class="form form-horizontal"> <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
{% csrf_token %} {% csrf_token %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6 col-md-offset-3"> <div class="col-md-6">
<h3>{% block title %}Add New Member to Virtual Chassis {{ virtual_chassis }}{% endblock %}</h3> <div class="card">
{% if membership_form.non_field_errors %} <h5 class="card-header">Add New Member</h5>
<div class="panel panel-danger"> <div class="card-body">
<div class="panel-heading"><strong>Errors</strong></div>
<div class="panel-body">
{{ membership_form.non_field_errors }}
</div>
</div>
{% endif %}
<div class="panel panel-default">
<div class="panel-heading"><strong>Add New Member</strong></div>
<div class="table panel-body">
{% render_form member_select_form %} {% render_form member_select_form %}
{% render_form membership_form %} {% render_form membership_form %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-6 col-md-offset-3 text-right"> <div class="col-md-6 text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_addanother" class="btn btn-outline-primary">Add Another</button>
<button type="submit" name="_save" class="btn btn-primary">Save</button> <button type="submit" name="_save" class="btn btn-primary">Save</button>
<button type="submit" name="_addanother" class="btn btn-primary">Add Another</button>
<a href="{{ return_url }}" class="btn btn-default">Cancel</a>
</div> </div>
</div> </div>
</form> </form>

View File

@ -3,52 +3,54 @@
{% load static %} {% load static %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'extras:journalentry_list' %}">Journal Entries</a></li> <li class="breadcrumb-item"><a href="{% url 'extras:journalentry_list' %}">Journal Entries</a></li>
<li><a href="{% url object.assigned_object|viewname:'journal' pk=object.assigned_object.pk %}">{{ object.assigned_object }}</a></li> <li class="breadcrumb-item"><a href="{% url object.assigned_object|viewname:'journal' pk=object.assigned_object.pk %}">{{ object.assigned_object }}</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-4"> <div class="col-md-4">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Journal Entry</strong> Journal Entry
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Object</th>
<td>
<a href="{{ object.assigned_object.get_absolute_url }}">{{ object.assigned_object }}</a>
</td>
</tr>
<tr>
<th scope="row">Created</th>
<td>
{{ object.created }}
</td>
</tr>
<tr>
<th scope="row">Created By</th>
<td>
{{ object.created_by }}
</td>
</tr>
<tr>
<th scope="row">Kind</th>
<td>
<span class="badge bg-{{ object.get_kind_class }}">{{ object.get_kind_display }}</span>
</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Object</td>
<td>
<a href="{{ object.assigned_object.get_absolute_url }}">{{ object.assigned_object }}</a>
</td>
</tr>
<tr>
<td>Created</td>
<td>
{{ object.created }}
</td>
</tr>
<tr>
<td>Created By</td>
<td>
{{ object.created_by }}
</td>
</tr>
<tr>
<td>Kind</td>
<td>
<span class="label label-{{ object.get_kind_class }}">{{ object.get_kind_display }}</span>
</td>
</tr>
</table>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Comments</strong> Comments
</div> </h5>
<div class="panel-body"> <div class="card-body">
{{ object.comments|render_markdown }} {{ object.comments|render_markdown }}
</div> </div>
</div> </div>

View File

@ -1,22 +1,16 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% load helpers %} {% load helpers %}
{% load form_helpers %} {% load form_helpers %}
{% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}
{% block content %} {% block content %}
{% block tabs %}{% endblock %}
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<h1>{% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}</h1> <ul class="nav nav-tabs mb-3" role="tablist">
{% if form.non_field_errors %} <li class="nav-item" role="presentation">
<div class="panel panel-danger"> <a href="#csv" class="nav-link active" role="tab" data-bs-toggle="tab">CSV</a>
<div class="panel-heading"><strong>Errors</strong></div> </li>
<div class="panel-body">
{{ form.non_field_errors }}
</div>
</div>
{% endif %}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#csv" role="tab" data-toggle="tab">CSV</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="csv"> <div role="tabpanel" class="tab-pane active" id="csv">
@ -24,93 +18,111 @@
{% csrf_token %} {% csrf_token %}
{% render_form form %} {% render_form form %}
<div class="form-group"> <div class="form-group">
<div class="col-md-12 text-right"> <div class="col-md-12 text-end">
<button type="submit" class="btn btn-primary">Submit</button>
{% if return_url %} {% if return_url %}
<a href="{{ return_url }}" class="btn btn-default">Cancel</a> <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %} {% endif %}
<button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
</div> </div>
</form> </form>
<div class="clearfix"></div>
<p></p>
{% if fields %} {% if fields %}
<div class="panel panel-default"> <div class="row my-3">
<div class="panel-heading"> <div class="col-md-12">
<strong>CSV Field Options</strong> <div class="card">
</div> <h5 class="card-header">
<table class="table"> CSV Field Options
<tr> </h5>
<th>Field</th> <div class="card-body">
<th>Required</th> <table class="table">
<th>Accessor</th> <tr>
<th>Description</th> <th>Field</th>
</tr> <th>Required</th>
{% for name, field in fields.items %} <th>Accessor</th>
<tr> <th>Description</th>
<td> </tr>
<code>{{ name }}</code> {% for name, field in fields.items %}
</td> <tr>
<td> <td>
{% if field.required %} <code>{{ name }}</code>
<i class="mdi mdi-check-bold text-success" title="Required"></i> </td>
{% else %} <td>
<span class="text-muted">&mdash;</span> {% if field.required %}
{% endif %} <i class="mdi mdi-check-bold text-success" title="Required"></i>
</td> {% else %}
<td> <span class="text-muted">&mdash;</span>
{% if field.to_field_name %} {% endif %}
<code>{{ field.to_field_name }}</code> </td>
{% else %} <td>
<span class="text-muted">&mdash;</span> {% if field.to_field_name %}
{% endif %} <code>{{ field.to_field_name }}</code>
</td> {% else %}
<td> <span class="text-muted">&mdash;</span>
{% if field.STATIC_CHOICES %} {% endif %}
<button type="button" class="btn btn-link btn-xs pull-right" data-toggle="modal" data-target="#{{ name }}_choices"> </td>
<i class="mdi mdi-help-circle"></i> <td>
</button> {% if field.STATIC_CHOICES %}
<div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog"> <button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices">
<div class="modal-dialog" role="document"> <i class="mdi mdi-help-circle"></i>
<div class="modal-content"> </button>
<div class="modal-header"> <div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <div class="modal-dialog" role="document">
<h4 class="modal-title"><code>{{ name }}</code> Choices</h4> <div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><code>{{ name }}</code> Choices</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-striped">
<tr>
<th>Import Value</th>
<th>Label</th>
</tr>
{% for value, label in field.choices %}
{% if value %}
<tr>
<td>
<samp>{{ value }}</samp>
</td>
<td>
{{ label }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</div>
</div> </div>
<table class="table table-striped modal-body">
<tr><th>Import Value</th><th>Label</th></tr>
{% for value, label in field.choices %}
{% if value %}<tr><td><samp>{{ value }}</samp></td><td>{{ label }}</td></tr>{% endif %}
{% endfor %}
</table>
</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>
<p class="small text-muted"> </div>
<i class="mdi mdi-check-bold"></i> Required fields <strong>must</strong> be specified for all <p class="small text-muted">
objects. <i class="mdi mdi-check-bold text-success"></i> Required fields <strong>must</strong> be specified for all
</p> objects.
<p class="small text-muted"> </p>
<i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute. <p class="small text-muted">
For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher. <i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute.
</p> For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher.
{% endif %} </p>
{% endif %}
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,36 +1,38 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% load helpers %} {% load helpers %}
{% block title %}Remove {{ table.rows|length }} {{ obj_type_plural|bettertitle }}?{% endblock %} {% block title %}Remove {{ table.rows|length }} {{ obj_type_plural|bettertitle }}?{% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-6 offset-md-3">
<div class="panel panel-danger"> <div class="alert alert-danger" role="alert">
<div class="panel-heading"><strong>Confirm Bulk Removal</strong></div> <h4 class="alert-heading">Confirm Bulk Removal</h4>
<div class="panel-body"> <p><strong>Warning:</strong> The following operation will remove {{ table.rows|length }} {{ obj_type_plural }} from {{ parent_obj }}.</p>
<strong>Warning:</strong> The following operation will remove {{ table.rows|length }} {{ obj_type_plural }} from {{ parent_obj }}. Please carefully review the {{ obj_type_plural }} to be removed and confirm below. <hr />
<p class="mb-0">Please carefully review the {{ obj_type_plural }} to be removed and confirm below.</p>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12">
<div class="card">
<div class="card-body">
{% include 'inc/table.html' %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-6 offset-md-3">
<div class="panel panel-default">
{% include 'inc/table.html' %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="." method="post" class="form"> <form action="." method="post" class="form">
{% csrf_token %} {% csrf_token %}
{% for field in form.hidden_fields %} {% for field in form.hidden_fields %}
{{ field }} {{ field }}
{% endfor %} {% endfor %}
<div class="text-center"> <div class="text-center">
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
<button type="submit" name="_confirm" class="btn btn-danger">Delete these {{ table.rows|length }} {{ obj_type_plural }}</button> <button type="submit" name="_confirm" class="btn btn-danger">Delete these {{ table.rows|length }} {{ obj_type_plural }}</button>
<a href="{{ return_url }}" class="btn btn-default">Cancel</a>
</div> </div>
</form> </form>
</div> </div>

View File

@ -1,53 +1,48 @@
{% extends 'base.html' %} {% extends 'layout.html' %}
{% load helpers %} {% load helpers %}
{% load form_helpers %} {% load form_helpers %}
{% block title %}Renaming {{ selected_objects|length }} {{ obj_type_plural|bettertitle }}{% endblock %}
{% block content %} {% block content %}
<h1>{% block title %}Renaming {{ selected_objects|length }} {{ obj_type_plural|bettertitle }}{% endblock %}</h1> <div class="row mb-3">
<div class="row">
<div class="col-md-7"> <div class="col-md-7">
<table class="table"> <div class="card">
<thead> <div class="card-body">
<tr> <table class="table">
<th>Current Name</th> <thead>
<th>New Name</th> <tr>
</tr> <th>Current Name</th>
</thead> <th>New Name</th>
<tbody> </tr>
{% for obj in selected_objects %} </thead>
<tr{% if obj.new_name and obj.name != obj.new_name %} class="success"{% endif %}> <tbody>
<td>{{ obj.name }}</td> {% for obj in selected_objects %}
<td>{{ obj.new_name }}</td> <tr{% if obj.new_name and obj.name != obj.new_name %} class="success"{% endif %}>
</tr> <td>{{ obj.name }}</td>
{% endfor %} <td>{{ obj.new_name }}</td>
</tbody> </tr>
</table> {% endfor %}
</tbody>
</table>
</div>
</div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<form action="" method="post" class="form form-horizontal"> <form action="" method="post" class="form form-horizontal">
{% csrf_token %} {% csrf_token %}
{% if form.non_field_errors %} <div class="card">
<div class="panel panel-danger"> <h5 class="card-header">Rename</h5>
<div class="panel-heading"><strong>Errors</strong></div> <div class="card-body">
<div class="panel-body">
{{ form.non_field_errors }}
</div>
</div>
{% endif %}
<div class="panel panel-default">
<div class="panel-heading"><strong>Rename</strong></div>
<div class="panel-body">
{% render_form form %} {% render_form form %}
</div> </div>
</div> </div>
<div class="form-group text-right"> <div class="col-md-12 my-3 text-end">
<div class="col-md-12"> <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_preview" class="btn btn-primary">Preview</button> <button type="submit" name="_preview" class="btn btn-primary">Preview</button>
{% if '_preview' in request.POST and not form.errors %} {% if '_preview' in request.POST and not form.errors %}
<button type="submit" name="_apply" class="btn btn-primary">Apply</button> <button type="submit" name="_apply" class="btn btn-primary">Apply</button>
{% endif %} {% endif %}
<a href="{{ return_url }}" class="btn btn-default">Cancel</a>
</div>
</div> </div>
</form> </form>
</div> </div>

View File

@ -3,43 +3,45 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'ipam:rir_list' %}">RIRs</a></li> <li class="breadcrumb-item"><a href="{% url 'ipam:rir_list' %}">RIRs</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>RIR</strong> RIR
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Private</th>
<td>
{% if object.is_private %}
<i class="mdi mdi-check-bold text-success" title="Yes"></i>
{% else %}
<i class="mdi mdi-close-thick text-danger" title="No"></i>
{% endif %}
</td>
</tr>
<tr>
<th scope="row">Aggregates</th>
<td>
<a href="{% url 'ipam:aggregate_list' %}?rir_id={{ object.pk }}">{{ aggregates_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Private</td>
<td>
{% if object.is_private %}
<i class="mdi mdi-check-bold text-success" title="Yes"></i>
{% else %}
<i class="mdi mdi-close-thick text-danger" title="No"></i>
{% endif %}
</td>
</tr>
<tr>
<td>Aggregates</td>
<td>
<a href="{% url 'ipam:aggregate_list' %}?rir_id={{ object.pk }}">{{ aggregates_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
@ -48,17 +50,19 @@
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Aggregates</strong> Aggregates
</h5>
<div class="card-body">
{% include 'inc/table.html' with table=aggregates_table %}
</div> </div>
{% include 'inc/table.html' with table=aggregates_table %}
{% if perms.ipam.add_aggregate %} {% if perms.ipam.add_aggregate %}
<div class="panel-footer text-right noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'ipam:aggregate_add' %}?rir={{ object.pk }}" class="btn btn-xs btn-primary"> <a href="{% url 'ipam:aggregate_add' %}?rir={{ object.pk }}" class="btn btn-sm btn-primary">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add aggregate <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Aggregate
</a> </a>
</div> </div>
{% endif %} {% endif %}

View File

@ -3,37 +3,39 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'ipam:role_list' %}">Roles</a></li> <li class="breadcrumb-item"><a href="{% url 'ipam:role_list' %}">Roles</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Role</strong> Role
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>{{ object.weight }}</td>
</tr>
<tr>
<th scope="row">Prefixes</th>
<td>
<a href="{% url 'ipam:prefix_list' %}?role_id={{ object.pk }}">{{ prefixes_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Weight</td>
<td>{{ object.weight }}</td>
</tr>
<tr>
<td>Prefixes</td>
<td>
<a href="{% url 'ipam:prefix_list' %}?role_id={{ object.pk }}">{{ prefixes_table.rows|length }}</a>
</td>
</tr>
</table>
</div> </div>
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
@ -42,17 +44,19 @@
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Prefixes</strong> Prefixes
</h5>
<div class="card-body">
{% include 'inc/table.html' with table=prefixes_table %}
</div> </div>
{% include 'inc/table.html' with table=prefixes_table %}
{% if perms.ipam.add_prefix %} {% if perms.ipam.add_prefix %}
<div class="panel-footer text-right noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'ipam:prefix_add' %}?role={{ object.pk }}" class="btn btn-xs btn-primary"> <a href="{% url 'ipam:prefix_add' %}?role={{ object.pk }}" class="btn btn-sm btn-primary">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add prefix <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Prefix
</a> </a>
</div> </div>
{% endif %} {% endif %}

View File

@ -5,61 +5,69 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'ipam:service_list' %}">Services</a></li> <li class="breadcrumb-item"><a href="{% url 'ipam:service_list' %}">Services</a></li>
<li><a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a></li> <li class="breadcrumb-item"><a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block buttons %} {% block controls %}
{% plugin_buttons object %}
<div class="container mb-2 mx-0">
<div class="d-flex flex-wrap justify-content-end">
{% block extra_controls %}{% endblock %}
{% if request.user|can_change:object %} {% if request.user|can_change:object %}
{% edit_button object %} {% edit_button object %}
{% endif %} {% endif %}
{% if request.user|can_delete:object %} {% if request.user|can_delete:object %}
{% delete_button object %} {% delete_button object %}
{% endif %} {% endif %}
</div>
</div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Service</strong> Service
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Parent</th>
<td>
<a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
</td>
</tr>
<tr>
<th scope="row">Protocol</th>
<td>{{ object.get_protocol_display }}</td>
</tr>
<tr>
<th scope="row">Ports</th>
<td>{{ object.port_list }}</td>
</tr>
<tr>
<th scope="row">IP Addresses</th>
<td>
{% for ipaddress in object.ipaddresses.all %}
<a href="{{ ipaddress.get_absolute_url }}">{{ ipaddress }}</a><br />
{% empty %}
<span class="text-muted">None</span>
{% endfor %}
</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Parent</td>
<td>
<a href="{{ object.parent.get_absolute_url }}">{{ object.parent }}</a>
</td>
</tr>
<tr>
<td>Protocol</td>
<td>{{ object.get_protocol_display }}</td>
</tr>
<tr>
<td>Ports</td>
<td>{{ object.port_list }}</td>
</tr>
<tr>
<td>IP Addresses</td>
<td>
{% for ipaddress in object.ipaddresses.all %}
<a href="{{ ipaddress.get_absolute_url }}">{{ ipaddress }}</a><br />
{% empty %}
<span class="text-muted">None</span>
{% endfor %}
</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
</table>
</div> </div>
{% include 'inc/custom_fields_panel.html' %} {% include 'inc/custom_fields_panel.html' %}
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='ipam:service_list' %} {% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='ipam:service_list' %}
@ -69,7 +77,7 @@
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
{% plugin_full_width_page object %} {% plugin_full_width_page object %}
</div> </div>

View File

@ -2,37 +2,36 @@
{% load form_helpers %} {% load form_helpers %}
{% block form %} {% block form %}
<div class="card"> <div class="field-group">
<h5 class="card-header">Service</h5> <h4>Service</h4>
<div class="card-body"> {% if obj.device %}
{% if obj.device %} <div class="form-floating mb-3">
<div class="form-group"> <input class="form-control" value="{{ obj.device }}" disabled />
<label class="col-md-3 control-label required">Device</label> <label class="form-label">Device</label>
<div class="col-md-9"> </div>
<p class="form-control-static">{{ obj.device }}</p> {% else %}
</div> <div class="form-floating mb-3">
</div> <input class="form-control" value="{{ obj.virtual_machine }}" disabled />
{% else %} <label class="form-label">Virtual Machine</label>
<div class="form-group"> </div>
<label class="col-md-3 control-label required">Virtual Machine</label> {% endif %}
<div class="col-md-9"> {% render_field form.name %}
<p class="form-control-static">{{ obj.virtual_machine }}</p> <div class="mb-3">
</div> <label class="form-label">Port(s)</label>
</div> <div class="row">
{% endif %} <div class="col-3">
{% render_field form.name %} {{ form.protocol }}
<div class="form-group form-inline"> </div>
<label class="col-md-3 control-label required">Port(s)</label> <div class="col-9 font-monospace">
<div class="col-md-9"> {{ form.ports }}
{{ form.protocol }} </div>
{{ form.ports }} <div class="form-text">{{ form.ports.help_text }}</div>
<span class="help-block">{{ form.ports.help_text }}</span>
</div>
</div> </div>
{% render_field form.ipaddresses %}
{% render_field form.description %}
{% render_field form.tags %}
</div> </div>
{% render_field form.ipaddresses %}
{% render_field form.description %}
{% render_field form.tags %}
</div> </div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="card"> <div class="card">

View File

@ -25,23 +25,23 @@
{% block tabs %} {% block tabs %}
<ul class="nav nav-tabs" style="margin-bottom: 20px"> <ul class="nav nav-tabs" style="margin-bottom: 20px">
<li role="presentation"{% if not active_tab %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a 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>
<li role="presentation"{% if active_tab == 'interfaces' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'ipam:vlan_interfaces' pk=object.pk %}">Device Interfaces <span class="badge">{{ object.get_interfaces.count }}</span></a> <a class="nav-link{% if active_tab == 'interfaces' %} active{% endif %}" href="{% url 'ipam:vlan_interfaces' pk=object.pk %}">Device Interfaces <span class="badge bg-primary">{{ object.get_interfaces.count }}</span></a>
</li> </li>
<li role="presentation"{% if active_tab == 'vminterfaces' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'ipam:vlan_vminterfaces' pk=object.pk %}">VM Interfaces <span class="badge">{{ object.get_vminterfaces.count }}</span></a> <a class="nav-link{% if active_tab == 'vminterfaces' %} active{% endif %}" href="{% url 'ipam:vlan_vminterfaces' pk=object.pk %}">VM Interfaces <span class="badge bg-primary">{{ object.get_vminterfaces.count }}</span></a>
</li> </li>
{% if perms.extras.view_journalentry %} {% if perms.extras.view_journalentry %}
<li role="presentation"{% if active_tab == 'journal' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'ipam:vlan_journal' pk=object.pk %}">Journal</a> <a class="nav-link{% if active_tab == 'journal' %} active{% endif %}" href="{% url 'ipam:vlan_journal' pk=object.pk %}">Journal</a>
</li> </li>
{% endif %} {% endif %}
{% if perms.extras.view_objectchange %} {% if perms.extras.view_objectchange %}
<li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'ipam:vlan_changelog' pk=object.pk %}">Change Log</a> <a class="nav-link{% if active_tab == 'changelog' %} active{% endif %}" href="{% url 'ipam:vlan_changelog' pk=object.pk %}">Change Log</a>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>

View File

@ -4,54 +4,48 @@
{% load helpers %} {% load helpers %}
{% block form %} {% block form %}
<div class="panel panel-default"> <div class="field-group mb-3">
<div class="panel-heading"><strong>VLAN</strong></div> <h4>VLAN</h4>
<div class="panel-body"> {% render_field form.vid %}
{% render_field form.vid %} {% render_field form.name %}
{% render_field form.name %} {% render_field form.status %}
{% render_field form.status %} {% render_field form.role %}
{% render_field form.role %} {% render_field form.description %}
{% render_field form.description %} {% render_field form.tags %}
{% render_field form.tags %}
</div>
</div> </div>
<div class="panel panel-default"> <div class="field-group mb-3">
<div class="panel-heading"><strong>Tenancy</strong></div> <h4>Tenancy</h4>
<div class="panel-body"> {% render_field form.tenant_group %}
{% render_field form.tenant_group %} {% render_field form.tenant %}
{% render_field form.tenant %}
</div>
</div> </div>
<div class="panel panel-default"> <div class="field-group mb-3">
<div class="panel-heading"> <h4>Assignment</h4>
<strong>Assignment</strong> {% with site_tab_active=form.initial.site %}
</div> <ul class="nav nav-tabs mb-3" role="tablist">
<div class="panel-body"> <li class="nav-item" role="presentation">
{% with site_tab_active=form.initial.site %} <a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
<ul class="nav nav-tabs" role="tablist"> </li>
<li role="presentation"{% if not site_tab_active %} class="active"{% endif %}><a href="#group" role="tab" data-toggle="tab">VLAN Group</a></li> <li class="nav-item" role="presentation">
<li role="presentation"{% if site_tab_active %} class="active"{% endif %}><a href="#site" role="tab" data-toggle="tab">Site</a></li> <a class="nav-link{% if site_tab_active %} active{% endif %}" href="#site" role="tab" data-bs-toggle="tab">Site</a>
</ul> </li>
<div class="tab-content"> </ul>
<div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group"> <div class="tab-content">
{% render_field form.scope_type %} <div class="tab-pane{% if not site_tab_active %} active{% endif %}" id="group">
{% render_field form.group %} {% render_field form.scope_type %}
</div> {% render_field form.group %}
<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> </div>
{% endwith %} <div class="tab-pane{% if site_tab_active %} active{% endif %}" id="site">
</div> {% render_field form.region %}
{% render_field form.sitegroup %}
{% render_field form.site %}
</div>
</div>
{% endwith %}
</div> </div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="panel panel-default"> <div class="field-group">
<div class="panel-heading"><strong>Custom Fields</strong></div> <h4>Custom Fields</h4>
<div class="panel-body"> {% render_custom_fields form %}
{% render_custom_fields form %}
</div>
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

View File

@ -3,45 +3,47 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'ipam:vlangroup_list' %}">VLAN Groups</a></li> <li class="breadcrumb-item"><a href="{% url 'ipam:vlangroup_list' %}">VLAN Groups</a></li>
{% if object.scope %} {% if object.scope %}
<li><a href="{{ object.scope.get_absolute_url }}">{{ object.scope }}</a></li> <li class="breadcrumb-item"><a href="{{ object.scope.get_absolute_url }}">{{ object.scope }}</a></li>
{% endif %} {% endif %}
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>VLAN Group</strong> VLAN Group
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th scope="row">Name</th>
<td>{{ object.name }}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<th scope="row">Scope</th>
<td>
{% if object.scope %}
<a href="{{ object.scope.get_absolute_url }}">{{ object.scope }}</a>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</tr>
<tr>
<th scope="row">VLANs</th>
<td>
<a href="{% url 'ipam:vlan_list' %}?group_id={{ object.pk }}">{{ vlans_count }}</a>
</td>
</tr>
</table>
</div> </div>
<table class="table table-hover panel-body attr-table">
<tr>
<td>Name</td>
<td>{{ object.name }}</td>
</tr>
<tr>
<td>Description</td>
<td>{{ object.description|placeholder }}</td>
</tr>
<tr>
<td>Scope</td>
<td>
{% if object.scope %}
<a href="{{ object.scope.get_absolute_url }}">{{ object.scope }}</a>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</tr>
<tr>
<td>VLANs</td>
<td>
<a href="{% url 'ipam:vlan_list' %}?group_id={{ object.pk }}">{{ vlans_count }}</a>
</td>
</tr>
</table>
</div> </div>
{% plugin_left_page object %} {% plugin_left_page object %}
</div> </div>
@ -50,16 +52,18 @@
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>
<div class="row"> <div class="row mb-3">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>VLANs</strong> VLANs
</h5>
<div class="card-body">
{% include 'inc/table.html' with table=vlans_table %}
</div> </div>
{% include 'inc/table.html' with table=vlans_table %}
{% if perms.ipam.add_vlan %} {% if perms.ipam.add_vlan %}
<div class="panel-footer text-right noprint"> <div class="card-footer text-end noprint">
<a href="{% url 'ipam:vlan_add' %}?group={{ object.pk }}" class="btn btn-xs btn-primary"> <a href="{% url 'ipam:vlan_add' %}?group={{ object.pk }}" class="btn btn-sm btn-primary">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add VLAN <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add VLAN
</a> </a>
</div> </div>

View File

@ -127,15 +127,3 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% comment %} <div class="invalid-feedback">
{% if field.errors %}
<ul>
{% for error in field.errors %}
{# Embed an HTML comment indicating the error for extraction by tests #}
<!-- FORM-ERROR {{ field.name }}: {{ error }} -->
<li class="text-danger">{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div> {% endcomment %}