netbox-community-netbox/netbox/templates/dcim/device/interfaces.html

{% extends 'dcim/device/components_base.html' %}
{% load helpers %}
{% load i18n %}

{% block table_controls %}
    {% include 'dcim/device/inc/interface_table_controls.html' with table_modal="DeviceInterfaceTable_config" %}
{% endblock table_controls %}

{% block bulk_delete_controls %}
    {{ block.super }}
    {% with bulk_disconnect_view=child_model|validated_viewname:"bulk_disconnect" %}
        {% if 'bulk_disconnect' in actions and bulk_disconnect_view %}
            <button type="submit" name="_disconnect"
                    formaction="{% url bulk_disconnect_view %}?return_url={{ return_url }}"
                    class="btn btn-outline-danger btn-sm">
                <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> {% trans "Disconnect" %}
            </button>
        {% endif %}
    {% endwith %}
{% endblock bulk_delete_controls %}

{% block bulk_extra_controls %}
    {{ block.super }}
    {% if perms.dcim.add_interface %}
        <div class="bulk-button-group">
            <a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}"
               class="btn btn-primary btn-sm">
                <i class="mdi mdi-plus-thick" aria-hidden="true"></i> {% trans "Add Interfaces" %}
            </a>
        </div>
    {% endif %}
{% endblock bulk_extra_controls %}

{% block head %}
    {{ block.super }}
    <style>
        {% for status, color in table.Meta.cable_status_styles %}
            tr[data-cable-status={{ status }}] {
                background-color: var(--nbx-color-{{ color }}-a15);
            }
        {% endfor %}
        tr[data-mark-connected=true] {
            background-color: var(--nbx-color-success-a15);
        }
        tr[data-virtual=true] {
            background-color: var(--nbx-color-primary-a15);
        }
        tr[data-enabled=disabled] {
            background-color: var(--nbx-color-danger-a15);
        }
        tr[data-cable-status=connected] button.mark-installed {
            display: none;
        }
        tr:not([data-cable-status=connected]) button.mark-planned {
            display: none;
        }
    </style>
{% endblock %}