bootstrap 5 template updates

This commit is contained in:
checktheroads 2021-03-13 11:16:29 -07:00
parent 912cd220cc
commit 4c60a602b9
14 changed files with 485 additions and 321 deletions

View File

@ -5,8 +5,8 @@
{% load plugins %} {% load plugins %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'dcim:cable_list' %}">Cables</a></li> <li class="breadcrumb-item"><a href="{% url 'dcim:cable_list' %}">Cables</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block buttons %} {% block buttons %}
@ -28,21 +28,21 @@
<div class="card-body"> <div class="card-body">
<table class="table table-hover attr-table"> <table class="table table-hover attr-table">
<tr> <tr>
<td>Type</td> <th scope="row">Type</th>
<td>{{ object.get_type_display|placeholder }}</td> <td>{{ object.get_type_display|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Status</td> <th scope="row">Status</th>
<td> <td>
<span class="badge bg-{{ object.get_status_class }}">{{ object.get_status_display }}</span> <span class="badge bg-{{ object.get_status_class }}">{{ object.get_status_display }}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Label</td> <th scope="row">Label</th>
<td>{{ object.label|placeholder }}</td> <td>{{ object.label|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Color</td> <th scope="row">Color</th>
<td> <td>
{% if object.color %} {% if object.color %}
<span class="color-label" style="background-color: #{{ object.color }}">&nbsp;</span> <span class="color-label" style="background-color: #{{ object.color }}">&nbsp;</span>
@ -52,7 +52,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Length</td> <th scope="row">Length</th>
<td> <td>
{% if object.length %} {% if object.length %}
{{ object.length }} {{ object.get_length_unit_display }} {{ object.length }} {{ object.get_length_unit_display }}
@ -73,13 +73,17 @@
<h5 class="card-header"> <h5 class="card-header">
Termination A Termination A
</h5> </h5>
<div class="card-body">
{% include 'dcim/inc/cable_termination.html' with termination=object.termination_a %} {% include 'dcim/inc/cable_termination.html' with termination=object.termination_a %}
</div>
</div> </div>
<div class="card"> <div class="card">
<h5 class="card-header"> <h5 class="card-header">
Termination B Termination B
</h5> </h5>
<div class="card-body">
{% include 'dcim/inc/cable_termination.html' with termination=object.termination_b %} {% include 'dcim/inc/cable_termination.html' with termination=object.termination_b %}
</div>
</div> </div>
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>

View File

@ -1,11 +1,12 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load buttons %} {% load buttons %}
{% block title %}{{ title }}{% endblock %}
{% block content %} {% block content %}
<div class="pull-right noprint"> <div class="float-end noprint">
{% export_button content_type %} {% export_button content_type %}
</div> </div>
<h1>{% block title %}{{ title }}{% endblock %}</h1>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="col-md-3 pull-right right-side-panel noprint"> <div class="col-md-3 pull-right right-side-panel noprint">

View File

@ -5,52 +5,53 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<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>Console Port</strong> Console 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>
<th scope="row">{{ object.name }}</th>
</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>
</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>
</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>
{% if object.mark_connected %} <div class="card-body">
<div class="panel-body text-muted"> {% if object.mark_connected %}
<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> {% elif object.cable %}
{% elif object.cable %} <table class="table table-hover attr-table">
<table class="table table-hover panel-body 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:consoleport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace"> <a href="{% url 'dcim:consoleport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
@ -60,27 +61,27 @@
</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="label label-success">Reachable</span>
@ -92,23 +93,45 @@
{% 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"> <div class="dropdown">
<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-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-right">
<li><a href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='console-server-port' %}?return_url={{ object.get_absolute_url }}">Console Server Port</a></li> <li>
<li><a href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a></li> <a
<li><a href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a></li> class="dropdown-item"
href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='console-server-port' %}?return_url={{ object.get_absolute_url }}"
>
Console Server Port
</a>
</li>
<li>
<a
class="dropdown-item"
href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}"
>
Front Port
</a>
</li>
<li>
<a
class="dropdown-item"
href="{% url 'dcim:consoleport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}"
>
Rear Port
</a>
</li>
</ul> </ul>
</span> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>
</div> </div>

View File

@ -5,52 +5,53 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<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>Console Server Port</strong> Console Server 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>
</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>
</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>
{% if object.mark_connected %} <div class="card-body">
<div class="panel-body text-muted"> {% if object.mark_connected %}
<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> {% elif object.cable %}
{% elif object.cable %} <table class="table table-hover attr-table">
<table class="table table-hover panel-body 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:consoleserverport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace"> <a href="{% url 'dcim:consoleserverport_trace' pk=object.pk %}" class="btn btn-primary btn-xs" title="Trace">
@ -60,54 +61,76 @@
</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"> <div 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-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:consoleserverport_connect' termination_a_id=object.pk termination_b_type='console-port' %}?return_url={{ object.get_absolute_url }}">Console Port</a></li> <li>
<li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}">Front Port</a></li> <a
<li><a href="{% url 'dcim:consoleserverport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}">Rear Port</a></li> class="dropdown-item"
href="{% url 'dcim:consoleserverport_connect' termination_a_id=object.pk termination_b_type='console-port' %}?return_url={{ object.get_absolute_url }}"
>
Console Port
</a>
</li>
<li>
<a
class="dropdown-item"
href="{% url 'dcim:consoleserverport_connect' termination_a_id=object.pk termination_b_type='front-port' %}?return_url={{ object.get_absolute_url }}"
>
Front Port
</a>
</li>
<li>
<a
class="dropdown-item"
href="{% url 'dcim:consoleserverport_connect' termination_a_id=object.pk termination_b_type='rear-port' %}?return_url={{ object.get_absolute_url }}"
>
Rear Port
</a>
</li>
</ul> </ul>
</span> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div>
</div> </div>
{% plugin_right_page object %} {% plugin_right_page object %}
</div> </div>

View File

@ -15,142 +15,270 @@
<li class="breadcrumb-item">{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block buttons %} {% block extra_controls %}
{% if perms.dcim.change_device %} {% if perms.dcim.change_device %}
<div class="btn-group"> <div class="dropdown m-1">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button id="add-device-components" type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Components <span class="caret"></span> <i class="bi bi-plus" aria-hidden="true"></i> Add Components
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" aria-labeled-by="add-device-components">
{% if perms.dcim.add_consoleport %} {% if perms.dcim.add_consoleport %}
<li><a href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}">Console Ports</a></li> <li>
{% endif %} <a
{% if perms.dcim.add_consoleserverport %} class="dropdown-item"
<li><a href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">Console Server Ports</a></li> href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}"
{% endif %} >
{% if perms.dcim.add_powerport %} Console Ports
<li><a href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">Power Ports</a></li> </a>
{% endif %} </li>
{% if perms.dcim.add_poweroutlet %} {% endif %}
<li><a href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">Power Outlets</a></li> {% if perms.dcim.add_consoleserverport %}
{% endif %} <li>
{% if perms.dcim.add_interface %} <a
<li><a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">Interfaces</a></li> class="dropdown-item"
{% endif %} href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}">
{% if perms.dcim.add_frontport %} Console Server Ports
<li><a href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">Front Ports</a></li> </a>
{% endif %} </li>
{% if perms.dcim.add_rearport %} {% endif %}
<li><a href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">Rear Ports</a></li> {% if perms.dcim.add_powerport %}
{% endif %} <li>
{% if perms.dcim.add_devicebay %} <a
<li><a href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">Device Bays</a></li> class="dropdown-item"
{% endif %} href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}">
{% if perms.dcim.add_inventoryitem %} Power Ports
<li><a href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">Inventory Items</a></li> </a>
{% endif %} </li>
</ul> {% endif %}
</div> {% if perms.dcim.add_poweroutlet %}
{% endif %} <li>
{% if perms.dcim.add_device %} <a
{% clone_button object %} class="dropdown-item"
{% endif %} href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}">
{% if perms.dcim.change_device %} Power Outlets
{% edit_button object %} </a>
{% endif %} </li>
{% if perms.dcim.delete_device %} {% endif %}
{% delete_button object %} {% if perms.dcim.add_interface %}
{% endif %} <li>
<a
class="dropdown-item"
href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}">
Interfaces
</a>
</li>
{% endif %}
{% if perms.dcim.add_frontport %}
<li>
<a
class="dropdown-item"
href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}">
Front Ports
</a>
</li>
{% endif %}
{% if perms.dcim.add_rearport %}
<li>
<a
class="dropdown-item"
href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}">
Rear Ports
</a>
</li>
{% endif %}
{% if perms.dcim.add_devicebay %}
<li>
<a
class="dropdown-item"
href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_devicebays' pk=object.pk %}">
Device Bays
</a>
</li>
{% endif %}
{% if perms.dcim.add_inventoryitem %}
<li>
<a
class="dropdown-item"
href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}">
Inventory Items
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% endblock %} {% endblock %}
{% block tabs %} {% block tab_items %}
<ul class="nav nav-tabs"> <li
<li role="presentation" {% if active_tab == 'device' %} class="active"{% endif %}> role="presentation"
<a href="{% url 'dcim:device' pk=object.pk %}">Device</a> class="nav-item">
<a
href="{% url 'dcim:device' pk=object.pk %}"
class="nav-link{% if active_tab == 'device' %} active{% endif %}"
>
Device
</a>
</li>
{% with interface_count=object.vc_interfaces.count %}
{% if interface_count %}
<li
role="presentation"
class="nav-item">
<a
href="{% url 'dcim:device_interfaces' pk=object.pk %}"
class="nav-link{% if active_tab == 'interfaces' %} active{% endif %}"
>
Interfaces {% badge interface_count %}
</a>
</li> </li>
{% with interface_count=object.vc_interfaces.count %} {% endif %}
{% if interface_count %} {% endwith %}
<li role="presentation" {% if active_tab == 'interfaces' %} class="active"{% endif %}> {% with frontport_count=object.frontports.count %}
<a href="{% url 'dcim:device_interfaces' pk=object.pk %}">Interfaces {% badge interface_count %}</a> {% if frontport_count %}
</li> <li
{% endif %} role="presentation"
{% endwith %} class="nav-item">
{% with frontport_count=object.frontports.count %} <a
{% if frontport_count %} href="{% url 'dcim:device_frontports' pk=object.pk %}"
<li role="presentation" {% if active_tab == 'front-ports' %} class="active"{% endif %}> class="nav-link{% if active_tab == 'front-ports' %} active{% endif %}"
<a href="{% url 'dcim:device_frontports' pk=object.pk %}">Front Ports {% badge frontport_count %}</a> >
</li> Front Ports {% badge frontport_count %}
{% endif %} </a>
{% endwith %} </li>
{% with rearport_count=object.rearports.count %} {% endif %}
{% if rearport_count %} {% endwith %}
<li role="presentation" {% if active_tab == 'rear-ports' %} class="active"{% endif %}> {% with rearport_count=object.rearports.count %}
<a href="{% url 'dcim:device_rearports' pk=object.pk %}">Rear Ports {% badge rearport_count %}</a> {% if rearport_count %}
</li> <li
{% endif %} role="presentation"
{% endwith %} class="nav-item">
{% with consoleport_count=object.consoleports.count %} <a
{% if consoleport_count %} href="{% url 'dcim:device_rearports' pk=object.pk %}"
<li role="presentation" {% if active_tab == 'console-ports' %} class="active"{% endif %}> class="nav-link{% if active_tab == 'rear-ports' %} active{% endif %}"
<a href="{% url 'dcim:device_consoleports' pk=object.pk %}">Console Ports {% badge consoleport_count %}</a> >
</li> Rear Ports {% badge rearport_count %}
{% endif %} </a>
{% endwith %} </li>
{% with consoleserverport_count=object.consoleserverports.count %} {% endif %}
{% if consoleserverport_count %} {% endwith %}
<li role="presentation" {% if active_tab == 'console-server-ports' %} class="active"{% endif %}> {% with consoleport_count=object.consoleports.count %}
<a href="{% url 'dcim:device_consoleserverports' pk=object.pk %}">Console Server Ports {% badge consoleserverport_count %}</a> {% if consoleport_count %}
</li> <li
{% endif %} role="presentation"
{% endwith %} class="nav-item">
{% with powerport_count=object.powerports.count %} <a
{% if powerport_count %} href="{% url 'dcim:device_consoleports' pk=object.pk %}"
<li role="presentation" {% if active_tab == 'power-ports' %} class="active"{% endif %}> class="nav-link{% if active_tab == 'console-ports' %} active{% endif %}"
<a href="{% url 'dcim:device_powerports' pk=object.pk %}">Power Ports {% badge powerport_count %}</a> >
</li> Console Ports {% badge consoleport_count %}
{% endif %} </a>
{% endwith %} </li>
{% with poweroutlet_count=object.poweroutlets.count %} {% endif %}
{% if poweroutlet_count %} {% endwith %}
<li role="presentation" {% if active_tab == 'power-outlets' %} class="active"{% endif %}> {% with consoleserverport_count=object.consoleserverports.count %}
<a href="{% url 'dcim:device_poweroutlets' pk=object.pk %}">Power Outlets {% badge poweroutlet_count %}</a> {% if consoleserverport_count %}
</li> <li
{% endif %} role="presentation"
{% endwith %} class="nav-item">
{% with devicebay_count=object.devicebays.count %} <a
{% if devicebay_count %} href="{% url 'dcim:device_consoleserverports' pk=object.pk %}"
<li role="presentation" {% if active_tab == 'device-bays' %} class="active"{% endif %}> class="nav-link{% if active_tab == 'console-server-ports' %} active{% endif %}"
<a href="{% url 'dcim:device_devicebays' pk=object.pk %}">Device Bays {% badge devicebay_count %}</a> >
</li> Console Server Ports {% badge consoleserverport_count %}
{% endif %} </a>
{% endwith %} </li>
{% with inventoryitem_count=object.inventoryitems.count %} {% endif %}
{% if inventoryitem_count %} {% endwith %}
<li role="presentation" {% if active_tab == 'inventory' %} class="active"{% endif %}> {% with powerport_count=object.powerports.count %}
<a href="{% url 'dcim:device_inventory' pk=object.pk %}">Inventory {% badge inventoryitem_count %}</a> {% if powerport_count %}
</li> <li
{% endif %} role="presentation"
{% endwith %} class="nav-item">
{% if perms.dcim.napalm_read_device %} <a
{% if object.status != 'active' %} href="{% url 'dcim:device_powerports' pk=object.pk %}"
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='Device must be in active status' %} class="nav-link{% if active_tab == 'power-ports' %} active{% endif %}"
{% elif not object.platform %} >
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No platform assigned to this device' %} Power Ports {% badge powerport_count %}
{% elif not object.platform.napalm_driver %} </a>
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No NAPALM driver assigned for this platform' %} </li>
{% else %} {% endif %}
{% include 'dcim/inc/device_napalm_tabs.html' %} {% endwith %}
{% endif %} {% with poweroutlet_count=object.poweroutlets.count %}
{% endif %} {% if poweroutlet_count %}
{% if perms.extras.view_configcontext %} <li
<li role="presentation"{% if active_tab == 'config-context' %} class="active"{% endif %}> role="presentation"
<a href="{% url 'dcim:device_configcontext' pk=object.pk %}">Config Context</a> class="nav-item">
</li> <a
{% endif %} href="{% url 'dcim:device_poweroutlets' pk=object.pk %}"
{% if perms.extras.view_objectchange %} class="nav-link{% if active_tab == 'power-outlets' %} active{% endif %}"
<li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}> >
<a href="{% url 'dcim:device_changelog' pk=object.pk %}">Change Log</a> Power Outlets {% badge poweroutlet_count %}
</li> </a>
{% endif %} </li>
</ul> {% endif %}
{% endwith %}
{% with devicebay_count=object.devicebays.count %}
{% if devicebay_count %}
<li
role="presentation"
class="nav-item">
<a
href="{% url 'dcim:device_devicebays' pk=object.pk %}"
class="nav-link{% if active_tab == 'device-bays' %} active{% endif %}"
>
Device Bays {% badge devicebay_count %}
</a>
</li>
{% endif %}
{% endwith %}
{% with inventoryitem_count=object.inventoryitems.count %}
{% if inventoryitem_count %}
<li
role="presentation"
class="nav-item">
<a
href="{% url 'dcim:device_inventory' pk=object.pk %}"
class="nav-link{% if active_tab == 'inventory' %} active{% endif %}"
>
Inventory {% badge inventoryitem_count %}
</a>
</li>
{% endif %}
{% endwith %}
{% if perms.dcim.napalm_read_device %}
{% if object.status != 'active' %}
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='Device must be in active status' %}
{% elif not object.platform %}
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No platform assigned to this device' %}
{% elif not object.platform.napalm_driver %}
{% include 'dcim/inc/device_napalm_tabs.html' with disabled_message='No NAPALM driver assigned for this platform' %}
{% else %}
{% include 'dcim/inc/device_napalm_tabs.html' %}
{% endif %}
{% endif %}
{% if perms.extras.view_configcontext %}
<li
role="presentation"
class="nav-item">
<a
href="{% url 'dcim:device_configcontext' pk=object.pk %}"
class="nav-link{% if active_tab == 'config-context' %} active{% endif %}"
>
Config Context
</a>
</li>
{% endif %}
{% if perms.extras.view_objectchange %}
<li
role="presentation"
class="nav-item">
<a
href="{% url 'dcim:device_changelog' pk=object.pk %}"
class="nav-link{% if active_tab == 'changelog' %} active{% endif %}"
>
Change Log
</a>
</li>
{% endif %}
{% endblock %} {% endblock %}

View File

@ -7,9 +7,9 @@
{% include 'inc/ajax_loader.html' %} {% include 'inc/ajax_loader.html' %}
<div class="row"> <div class="row">
<div class="col-md-10 col-md-offset-1"> <div class="col-md-10 col-md-offset-1">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"><strong>Device Configuration</strong></div> <h5 class="card-header">Device Configuration</h5>
<div class="panel-body"> <div class="card-body">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">Running</a></li> <li role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">Running</a></li>
<li role="presentation"><a href="#startup" aria-controls="startup" role="tab" data-toggle="tab">Startup</a></li> <li role="presentation"><a href="#startup" aria-controls="startup" role="tab" data-toggle="tab">Startup</a></li>

View File

@ -6,10 +6,10 @@
{% block title %}{{ object.device }} / {{ object }}{% endblock %} {% block title %}{{ object.device }} / {{ object }}{% endblock %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'dcim:device_list' %}">Devices</a></li> <li class="breadcrumb-item"><a href="{% url 'dcim:device_list' %}">Devices</a></li>
<li><a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a></li> <li class="breadcrumb-item"><a href="{{ object.device.get_absolute_url }}">{{ object.device }}</a></li>
{% if breadcrumb_url %} {% if breadcrumb_url %}
<li><a href="{% url breadcrumb_url pk=object.device.pk %}">{{ object|meta:"verbose_name_plural"|bettertitle }}</a></li> <li class="breadcrumb-item"><a href="{% url breadcrumb_url pk=object.device.pk %}">{{ object|meta:"verbose_name_plural"|bettertitle }}</a></li>
{% endif %} {% endif %}
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}

View File

@ -4,33 +4,29 @@
{% block title %}Create {{ component_type }}{% endblock %} {% block title %}Create {{ component_type }}{% endblock %}
{% block content %} {% block content %}
<form action="" method="post" class="form form-horizontal"> <form action="" method="post">
{% csrf_token %} {% csrf_token %}
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3"> <div class="col-md-6 col-md-offset-3">
{% if form.non_field_errors %} {% if form.non_field_errors %}
<div class="panel panel-danger"> <div class="card bg-danger">
<div class="panel-heading"><strong>Errors</strong></div> <h5 class="card-header">Errors</h5>
<div class="panel-body"> <div class="card-body">
{{ form.non_field_errors }} {{ form.non_field_errors }}
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">{{ component_type|title }}</h5>
<strong>{{ component_type|title }}</strong> <div class="card-body">
</div>
<div class="panel-body">
{% render_form form %} {% render_form form %}
</div> </div>
</div> </div>
<div class="form-group"> <div class="col-md-9 col-md-offset-3">
<div class="col-md-9 col-md-offset-3"> <button type="submit" name="_create" class="btn btn-primary">Create</button>
<button type="submit" name="_create" class="btn btn-primary">Create</button> <button type="submit" name="_addanother" class="btn btn-primary">Create and Add More</button>
<button type="submit" name="_addanother" class="btn btn-primary">Create and Add More</button> <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
<a href="{{ return_url }}" class="btn btn-default">Cancel</a> </div>
</div>
</div>
</div> </div>
</div> </div>
</form> </form>

View File

@ -1,15 +1,15 @@
{% if not disabled_message %} {% if not disabled_message %}
<li role="presentation"{% if active_tab == 'status' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'dcim:device_status' pk=object.pk %}">Status</a> <a class="nav-link{% if active_tab == 'status' %} active{% endif %}" href="{% url 'dcim:device_status' pk=object.pk %}">Status</a>
</li> </li>
<li role="presentation"{% if active_tab == 'lldp-neighbors' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'dcim:device_lldp_neighbors' pk=object.pk %}">LLDP Neighbors</a> <a class="nav-link{% if active_tab == 'lldp-neighbors' %} active{% endif %}" href="{% url 'dcim:device_lldp_neighbors' pk=object.pk %}">LLDP Neighbors</a>
</li> </li>
<li role="presentation"{% if active_tab == 'config' %} class="active"{% endif %}> <li class="nav-item" role="presentation">
<a href="{% url 'dcim:device_config' pk=object.pk %}">Configuration</a> <a class="nav-link{% if active_tab == 'config' %} active{% endif %}" href="{% url 'dcim:device_config' pk=object.pk %}">Configuration</a>
</li> </li>
{% else %} {% else %}
<li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">Status</a></li> <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">Status</a></li>
<li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">LLDP Neighbors</a></li> <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">LLDP Neighbors</a></li>
<li role="presentation" class="disabled"><a href="#" title="{{ disabled_message }}">Configuration</a></li> <li class="nav-item" role="presentation"><a class="nav-link disabled" href="#" title="{{ disabled_message }}">Configuration</a></li>
{% endif %} {% endif %}

View File

@ -35,21 +35,23 @@
</div> </div>
{% endblock %} {% endblock %}
{% block content %}
{% block tabs %} {% block tabs %}
<ul class="nav nav-tabs"> <ul class="nav nav-tabs mb-3">
{% block tab_items %}
<li role="presentation"{% if not active_tab %} class="active"{% endif %}> <li role="presentation"{% if not active_tab %} class="active"{% endif %}>
<a href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a> <a href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
</li> </li>
{% if perms.extras.view_objectchange %} {% if perms.extras.view_objectchange %}
<li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}> <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
{# TODO: Fix changelog URL resolution hack #} {# TODO: Fix changelog URL resolution hack #}
<a href="{{ object.get_absolute_url }}changelog/">Change Log</a> <a href="{{ object.get_absolute_url }}changelog/">Change Log</a>
</li> </li>
{% endif %} {% endif %}
{% endblock %}
</ul> </ul>
{% endblock %} {% endblock %}
{% endblock %}
{% block content %}{% endblock %}
{% block header %} {% block header %}
<div class="row noprint"> <div class="row noprint">

View File

@ -3,7 +3,6 @@
{% load plugins %} {% load plugins %}
{% load render_table from django_tables2 %} {% load render_table from django_tables2 %}
{% block header %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'ipam:ipaddress_list' %}">IP Addresses</a></li> <li class="breadcrumb-item"><a href="{% url 'ipam:ipaddress_list' %}">IP Addresses</a></li>
{% if object.vrf %} {% if object.vrf %}
@ -11,7 +10,6 @@
{% endif %} {% endif %}
<li class="breadcrumb-item">{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row">

View File

@ -4,35 +4,26 @@
{% block title %}Bulk Add IP Addresses{% endblock %} {% block title %}Bulk Add IP Addresses{% endblock %}
{% block tabs %}
{% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
{% endblock %}
{% block form %} {% block form %}
<div class="card"> {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='bulk_add' %}
<h5 class="card-header">IP Addresses</h5> <div class="field-group">
<div class="card-body"> <h4>IP Addresses</h4>
{% render_field form.pattern %} {% render_field form.pattern %}
{% render_field model_form.status %} {% render_field model_form.status %}
{% render_field model_form.role %} {% render_field model_form.role %}
{% render_field model_form.vrf %} {% render_field model_form.vrf %}
{% render_field model_form.description %} {% render_field model_form.description %}
{% render_field model_form.tags %} {% render_field model_form.tags %}
</div>
</div> </div>
<div class="card"> <div class="field-group">
<h5 class="card-header">Tenancy</h5> <h4>Tenancy</h4>
<div class="card-body"> {% render_field model_form.tenant_group %}
{% render_field model_form.tenant_group %} {% render_field model_form.tenant %}
{% render_field model_form.tenant %}
</div>
</div> </div>
{% if model_form.custom_fields %} {% if model_form.custom_fields %}
<div class="card"> <div class="field-group">
<h5 class="card-header">Custom Fields</h5> <h4>Custom Fields</h4>
<div class="card-body"> {% render_custom_fields model_form %}
{% render_custom_fields model_form %}
</div>
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

View File

@ -3,13 +3,10 @@
{% load form_helpers %} {% load form_helpers %}
{% load helpers %} {% load helpers %}
{% block tabs %}
{% if not obj.pk %}
{% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
{% endif %}
{% endblock %}
{% block form %} {% block form %}
{% if not obj.pk %}
{% include 'ipam/inc/ipadress_edit_header.html' with active_tab='add' %}
{% endif %}
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">IP Address</h4> <h4 class="mb-3">IP Address</h4>
{% render_field form.address %} {% render_field form.address %}

View File

@ -49,6 +49,7 @@
{% block controls %}{% endblock %} {% block controls %}{% endblock %}
</div> </div>
<div id="content" class="container-fluid p-0 m-0"> <div id="content" class="container-fluid p-0 m-0">
{% block tabs %}{% endblock %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
</div> </div>