netbox/netbox/templates/dcim/inc/_interface.html

<tr{% if iface.connection and not iface.connection.connection_status %} class="info"{% endif %}>
    <td>
        <i class="fa fa-fw fa-{{ icon|default:"exchange" }}"></i> <span title="{{ iface.get_form_factor_display }}">{{ iface.name }}</span>
        {% if iface.description %}
            <i class="fa fa-fw fa-comment-o" title="{{ iface.description }}"></i>
        {% endif %}
    </td>
    <td>
        <small>{{ iface.mac_address|default:'' }}</small>
    </td>
    {% if not iface.is_physical %}
        <td colspan="2">Virtual</td>
    {% elif iface.connection %}
        {% with iface.get_connected_interface as connected_iface %}
            <td>
                <a href="{% url 'dcim:device' pk=connected_iface.device.pk %}">{{ connected_iface.device }}</a>
            </td>
            <td>
                <span title="{{ connected_iface.get_form_factor_display }}">{{ connected_iface }}</span>
            </td>
        {% endwith %}
    {% elif iface.circuit %}
        <td colspan="2">
            <a href="{% url 'circuits:circuit' pk=iface.circuit.pk %}">{{ iface.circuit }}</a>
        </td>
    {% else %}
        <td colspan="2">
            <span class="text-muted">Not connected</span>
        </td>
    {% endif %}
    <td class="text-right">
        {% if iface.circuit or iface.connection %}
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#graphs_modal" data-obj="{{ device.name }} - {{ iface.name }}" data-url="{% url 'dcim-api:interface_graphs' pk=iface.pk %}" title="Show graphs">
                <i class="glyphicon glyphicon-signal" aria-hidden="true"></i>
            </button>
        {% endif %}
        {% if perms.dcim.change_interface %}
            {% if iface.is_physical %}
                {% if iface.connection %}
                    {% if iface.connection.connection_status %}
                        <a href="#" class="btn btn-warning btn-xs interface-toggle connected" data="{{ iface.connection.pk }}" title="Mark planned">
                            <i class="glyphicon glyphicon-ban-circle" aria-hidden="true"></i>
                        </a>
                    {% else %}
                        <a href="#" class="btn btn-success btn-xs interface-toggle" data="{{ iface.connection.pk }}" title="Mark connected">
                            <i class="fa fa-plug" aria-hidden="true"></i>
                        </a>
                    {% endif %}
                    <a href="{% url 'dcim:interfaceconnection_delete' pk=iface.connection.pk %}?device={{ device.pk }}" class="btn btn-danger btn-xs" title="Delete connection">
                        <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
                    </a>
                {% else %}
                    <a href="{% url 'dcim:interfaceconnection_add' pk=device.pk %}?interface={{ iface.pk }}" class="btn btn-success btn-xs" title="Connect">
                        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                    </a>
                {% endif %}
            {% endif %}
            <a href="{% url 'dcim:interface_edit' pk=iface.pk %}" class="btn btn-info btn-xs" title="Edit interface">
                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
            </a>
        {% endif %}
        {% if perms.dcim.delete_interface %}
            {% if iface.connection or iface.circuit %}
                <button class="btn btn-danger btn-xs" disabled="disabled">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
            {% else %}
                <a href="{% url 'dcim:interface_delete' pk=iface.pk %}" class="btn btn-danger btn-xs" title="Delete interface">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </a>
            {% endif %}
        {% endif %}
    </td>
</tr>