mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
3aac8f51f2
- The state filter is a row of pills, All and each state, counting the VMs the search finds (the chosen state aside); a state without any is hidden unless chosen (All never), and a status line tells screen readers how many VMs match. Every state keeps its pill. - A labelled "New VM" button replaces the bare green plus; "Find IP" says "Find IP / MAC", which it finds. - States are badges; a shut-off VM is grey, not red: it is not a fault. - A VM's cell holds its name, its title, and for those who see owners its first owner as a badge, "+N" for the others (named for screen readers and on hover); the separate user column goes. - Each row has the same button group for a superuser or the VM's owners, from the actions the user may use (states.allowed_actions), all of it disabled on a VM an administrator paused; view-only users get none. It holds Console, the power action the state calls for (Start, Resume, Shut down, or Clone for a template) and a menu of the others (Suspend, Force off, Power cycle), what does not apply now disabled. The power button is an icon, named on hover and for screen readers, so every group is as wide and they line up from row to row; the power cut confirmations stay. On a phone Console shows its icon only too. - A grouped host's row has its name, a Connected or Not connected badge, its VM count and a labelled host memory bar; an unreachable host's row is table-warning. Its collapse control and the one for all hosts are buttons, with aria-expanded kept. - vCPUs and memory hide on a phone in both layouts, and table cells keep Bootstrap's own padding there: Zephyr doubles it and a list's last column no longer fit the screen.
53 lines
3.6 KiB
HTML
53 lines
3.6 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddInstance">
|
|
<span aria-hidden="true">{% bs_icon 'plus-lg' %}</span> {% trans "New VM" %}
|
|
</button>
|
|
|
|
<div class="modal fade" id="AddInstance" tabindex="-1" aria-labelledby="AddInstanceTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title h5" id="AddInstanceTitle">{% trans "New instance" %}</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% include "create_steps.html" with step=1 %}
|
|
<div class="text-body-secondary mb-3">{% trans "Choose the host the VM runs on." %}</div>
|
|
<div class="list-group">
|
|
{% for compute in reachable_computes %}
|
|
<a class="list-group-item list-group-item-action py-3" href="{% url 'instances:create_instance_select_type' compute.id %}">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-12 col-md-3 fw-semibold">{{ compute.name }}</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="small text-body-secondary">{% trans "CPU" %} · {{ compute.cpu_count }} vCPU</div>
|
|
<div class="cpu-usage d-flex align-items-center gap-2" data-url="{% url 'compute_graph' compute.id %}">
|
|
<div class="progress flex-grow-1" role="progressbar" aria-label="{% blocktrans with name=compute.name %}CPU usage of {{ name }}{% endblocktrans %}"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<small class="cpu-usage-value"></small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="small text-body-secondary">{% trans "Memory" %} · {{ compute.ram_size|filesizeformat }}</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="progress flex-grow-1" role="progressbar" aria-label="{% blocktrans with name=compute.name %}Memory usage of {{ name }}{% endblocktrans %}"
|
|
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: {{ compute.ram_usage }}%"></div>
|
|
</div>
|
|
<small>{{ compute.ram_usage }}%</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1 d-none d-md-block text-end" aria-hidden="true">{% bs_icon 'chevron-right' %}</div>
|
|
<div class="col-12 col-md-8 offset-md-3 small text-body-secondary compute-capacity" data-url="{% url 'compute_capacity' compute.id %}"></div>
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<p>{% trans "No compute is reachable." %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|