mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-11 12:46:49 +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.
113 lines
5.9 KiB
HTML
113 lines
5.9 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" data-sortable="false"><a class="link-primary" href="#" id="hide-all-instances" onclick="hide_all_host_instances()">#</a></th>
|
|
<th scope="col">{% trans "Name" %}<br>{% trans "Description" %}</th>
|
|
<th scope="col" class="d-none d-sm-table-cell">{% trans "User"%}</th>
|
|
<th scope="col">{% trans "Status" %}</th>
|
|
{% if app_settings.VM_DRBD_STATUS == 'True' %}
|
|
<th scope="col">{% trans "Role/Disk" %}</th>
|
|
{% endif %}
|
|
<th scope="col" class="d-none d-sm-table-cell">{% trans "VCPU" %}</th>
|
|
<th scope="col" class="d-none d-sm-table-cell">{% trans "Memory" %}</th>
|
|
<th scope="col" style="width:200px;" data-sortable="false">{% trans "Actions" %} & {% trans "Mem Usage" %}</th>
|
|
</tr>
|
|
</thead>
|
|
{% for compute in computes %}
|
|
<tbody class="searchable">
|
|
{% if compute.instance_set.count > 0 %}
|
|
<tr class="table-secondary fw-bold border-bottom border-dark">
|
|
<td>
|
|
<span id="collapse_host_instances_{{ compute.id }}" onclick="hide_host_instances('{{ compute.id }}');" class="bi bi-chevron-up" ></span>
|
|
</td>
|
|
<td>
|
|
<a class="link-dark" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
|
|
<span id="inst_count_badge_{{ compute.id }}" class="badge bg-secondary d-none">{{ compute.instance_set.count }}</span>
|
|
</td>
|
|
<td class="d-none d-sm-table-cell"></td>
|
|
<td>
|
|
{% if compute.status is True %}
|
|
<span class="badge bg-success-subtle text-success-emphasis">{% trans "Connected" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Not Connected" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% if app_settings.VM_DRBD_STATUS == 'True' %}
|
|
<td class="d-none d-sm-table-cell"></td>
|
|
{% endif %}
|
|
{% if compute.status is True %}
|
|
<td class="d-none d-sm-table-cell text-center">{{ compute.cpu_count }}</td>
|
|
<td class="d-none d-sm-table-cell text-right">{{ compute.ram_size|filesizeformat }}</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
|
|
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
|
|
</div>
|
|
</div>
|
|
</td>
|
|
{% else %}
|
|
<td class="d-none d-sm-table-cell"></td>
|
|
<td class="d-none d-sm-table-cell"></td>
|
|
<td></td>
|
|
{% endif %}
|
|
</tr>
|
|
{% for instance in compute.instance_set.all %}
|
|
<tr host="{{ compute.id }}">
|
|
<td class="text-right">{{ forloop.counter }} </td>
|
|
<td>
|
|
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a>
|
|
<br>
|
|
{% if instance.info %}<p class="m-0 small fst-italic">{{ instance.title }}</p>{% endif %}
|
|
</td>
|
|
<td>
|
|
<em>
|
|
{% if instance.userinstance_set.all.count > 0 %}
|
|
{{ instance.userinstance_set.all.0.user }}
|
|
{% if instance.userinstance_set.all.count > 1 %}
|
|
(+{{ instance.userinstance_set.all.count|add:"-1" }})
|
|
{% endif %}
|
|
{% endif %}
|
|
</em>
|
|
</td>
|
|
<td>
|
|
{% include 'instance_state.html' %}
|
|
</td>
|
|
{% if app_settings.VM_DRBD_STATUS == 'True' %}
|
|
<td>
|
|
{% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="badge bg-success-subtle text-success-emphasis">{% else %}<span class="badge bg-danger-subtle text-danger-emphasis">{% endif %}{{ instance.drbd }}</span>
|
|
</td>
|
|
{% endif %}
|
|
<td>{{ instance.info.3 }}</td>
|
|
<td>{% if instance.info %}{% widthratio instance.info.2 1024 1 %} MB{% endif %}</td>
|
|
<td class="text-nowrap">
|
|
{% include 'instance_actions.html' %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
{% empty %}
|
|
<tbody></tbody>{# sortable.js needs a table body #}
|
|
{% endfor %}
|
|
</table>
|
|
|
|
{% block script %}
|
|
<script>
|
|
function hide_all_host_instances() {
|
|
var rows = $('table tr');
|
|
all_host_rows = rows.filter('[host]');
|
|
all_host_rows.toggle();
|
|
$('span[id^=collapse_host_instances_]').toggleClass("bi bi-chevron-down ").toggleClass("bi bi-chevron-up");
|
|
$('span[id^=inst_count_badge_]').toggleClass("d-none");
|
|
}
|
|
function hide_host_instances(host) {
|
|
var rows = $('table tr');
|
|
host_rows = rows.filter("[host='"+host+"']");
|
|
host_rows.toggle();
|
|
$("span[id='collapse_host_instances_"+host+"']").toggleClass("bi bi-chevron-down ").toggleClass("bi bi-chevron-up");
|
|
$("span[id='inst_count_badge_"+host+"']").toggleClass("d-none");
|
|
}
|
|
</script>
|
|
{% endblock %}
|