mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
b45f673da7
The pool, network and interface cards had a solid green or red header with light text, and status words (Connected, ON, OFF, the DRBD state) were in the theme's green or red text colour. axe found them below the WCAG AA 4.5:1 contrast on the live theme (4.29:1, 3.52:1), on the default zephyr theme, whose green is light (2.5:1), and on dark themes (darkly 1.18:1). The card headers, and the status words as badges, are now the theme's pale status background with its dark status text (bg-*-subtle with text-*-emphasis). Bootstrap derives the pair from each theme's palette, and it does not depend on the page's background: the dark Bootswatch themes keep light-mode emphasis colours, which on their own would be dark text on a dark page. The card border keeps the status colour.
106 lines
No EOL
4.5 KiB
HTML
106 lines
No EOL
4.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load bootstrap_icons %}
|
|
|
|
{% block title %}{% trans "Interfaces" %} - {{ compute.name }}{% endblock %}
|
|
|
|
{% block page_heading %}{{ compute.name }} - {% trans "Interfaces" %}{% endblock page_heading %}
|
|
|
|
{% block page_heading_extra %}
|
|
{% if changeable %}{% include 'create_iface_block.html' %}{% endif %}
|
|
{% endblock page_heading_extra %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb shadow-sm">
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<span class="fw-bold">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</span>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{% if changeable is False %}{% include 'interfaces_unchangeable.html' %}{% endif %}
|
|
<div class="row">
|
|
{% if not ifaces_all %}
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-warning shadow-sm">
|
|
{% bs_icon 'exclamation-triangle' %} <strong>{% trans "Warning" %}:</strong> {% trans "Hypervisor doesn't have any Interfaces" %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% for iface in ifaces_all %}
|
|
<div class="col-12 col-sm-4">
|
|
<div class="mb-3 card {% if iface.state == 1 %}border-success{% else %}border-danger{% endif %} shadow-sm">
|
|
<div class="card-header {% if iface.state == 1 %}bg-success-subtle{% else %}bg-danger-subtle{% endif %}">
|
|
<h6 class="my-0 card-title">
|
|
<a class="card-link {% if iface.state == 1 %}text-success-emphasis{% else %}text-danger-emphasis{% endif %}" href="{% url 'interface' compute.id iface.name %}">{{ iface.name }}</a>
|
|
</h6>
|
|
</div>
|
|
<div class="ps-0 pe-0 card-body">
|
|
<div class="row">
|
|
<div class="col-3 col-sm-4">
|
|
<p><strong>{% trans "Type" %}:</strong></p>
|
|
<p><strong>{% trans "MAC" %}:</strong></p>
|
|
</div>
|
|
<div class="col-9 col-sm-8">
|
|
<p>{{ iface.type }}</p>
|
|
<p>{{ iface.mac }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#itype').change(function (eventObject) {
|
|
if ($(this).val() == 'bridge') {
|
|
$('.bridge_name_form_group').show();
|
|
} else {
|
|
$('.bridge_name_form_group').hide();
|
|
}
|
|
}).change();
|
|
$('#ipv4').change(function (eventObject) {
|
|
if ($(this).val() == 'static') {
|
|
$('.static_ipv4_form_group').show();
|
|
} else {
|
|
$('.static_ipv4_form_group').hide();
|
|
}
|
|
}).change();
|
|
$('#ipv6').change(function (eventObject) {
|
|
if ($(this).val() == 'static') {
|
|
$('.static_ipv6_form_group').show();
|
|
} else {
|
|
$('.static_ipv6_form_group').hide();
|
|
}
|
|
}).change();
|
|
});
|
|
</script>
|
|
{% endblock %} |