mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 20:26:48 +00:00
refactor(templates): Bootstrap's components instead of the panel's own CSS for capacity, steps and disclosures
The fork's own rules in webvirtcloud.css redid what Bootstrap 5.3 has: - the capacity bars (.cap-*) are Bootstrap progress bars: the memory a .progress-stacked of running VMs' memory and shut-off VMs' (at half opacity), each segment a progressbar with its amount as its value text; the pool bars a thin .progress. The line where the host's memory ends goes: the share above the bar says it, red when over; - the status dot (.compute-dot) is a rounded-circle, the big figures (.compute-ratio) fs-4, the Computes table's cell padding py-3; - the steps of creating a VM (.create-steps) are a breadcrumb with "›" as its divider; - the XML and Advanced disclosures (.disclosure with a turning chevron) are Bootstrap accordions; - the chosen volumes and networks (.row-list) are list-unstyled, their names text-break; - a chart's container is position-relative by utility; its height stays. Dead rules go too: .netIN, .netOUT, .diskRD, .diskWR, .input-xs and .bottom-bar-margin had no users.
This commit is contained in:
catborise
parent
2f5e3ccf62
commit
c1e30aeb7f
11 changed files with 75 additions and 180 deletions
|
|
@ -1,11 +1,18 @@
|
|||
{% load i18n %}
|
||||
{# the memory a host has given its VMs: given, from views.shown_capacity #}
|
||||
<div class="compute-ratio {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
|
||||
<div class="fs-4 lh-sm {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
|
||||
<div class="small text-body-secondary mb-1">{{ given.assigned.all|filesizeformat }} / {{ given.memory|filesizeformat }}</div>
|
||||
<div class="cap-bar" role="img" aria-label="{% blocktrans with percent=given.memory_percent %}{{ percent }}% of the host's memory given{% endblocktrans %}"
|
||||
title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start. Line: the host's memory." %}">
|
||||
<div class="cap-running {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.running|stringformat:".1f" }}%"></div>
|
||||
<div class="cap-stopped {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"></div>
|
||||
<div class="cap-host" style="left: {{ given.bar.host|stringformat:".1f" }}%"></div>
|
||||
{# running VMs' memory, then shut-off VMs', on a scale that holds the host's memory or all given, whichever is larger #}
|
||||
<div class="progress-stacked" style="--bs-progress-height: 0.6rem;" title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start." %}">
|
||||
<div class="progress" role="progressbar" style="width: {{ given.bar.running|stringformat:".1f" }}%"
|
||||
aria-label="{% trans "Memory of running VMs" %}" aria-valuenow="{{ given.bar.running|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
|
||||
aria-valuetext="{% blocktrans with running=given.assigned.running|filesizeformat memory=given.memory|filesizeformat %}{{ running }} of the host's {{ memory }}{% endblocktrans %}">
|
||||
<div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %}"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"
|
||||
aria-label="{% trans "Memory of shut-off VMs" %}" aria-valuenow="{{ given.bar.stopped|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
|
||||
aria-valuetext="{% blocktrans with stopped=given.assigned.stopped|filesizeformat memory=given.memory|filesizeformat %}{{ stopped }} of the host's {{ memory }}{% endblocktrans %}">
|
||||
<div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %} bg-opacity-50"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small text-body-secondary mt-1">{% blocktrans with running=given.assigned.running|filesizeformat %}{{ running }} running{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% load i18n %}
|
||||
{# the vCPUs a host has given its VMs: given, what its list cell and its overview show #}
|
||||
<div class="compute-ratio {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
|
||||
<div class="fs-4 lh-sm {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
|
||||
<div class="small text-body-secondary">{% blocktrans count counter=given.vcpus.all %}{{ counter }} vCPU{% plural %}{{ counter }} vCPUs{% endblocktrans %} {% blocktrans count counter=given.cpus %}on {{ counter }} CPU{% plural %}on {{ counter }} CPUs{% endblocktrans %}</div>
|
||||
<div class="small text-body-secondary">{% blocktrans with running=given.vcpus.running %}{{ running }} running{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="col-lg-12">
|
||||
{# position-relative: the hidden status texts are positioned within it, not the page #}
|
||||
<div class="table-responsive position-relative">
|
||||
<table class="table align-middle compute-list" data-sortable>
|
||||
<table class="table align-middle" data-sortable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{% trans "Host" %}</th>
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
{% for compute in computes %}
|
||||
{% with given=compute.shown_capacity %}
|
||||
<tr>
|
||||
<td>
|
||||
<td class="py-3">
|
||||
<div class="d-flex align-items-baseline gap-2">
|
||||
{% if compute.status is True %}
|
||||
<span class="compute-dot bg-success" title="{% trans "Connected" %}"></span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" title="{% trans "Connected" %}" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">{% trans "Connected" %}</span>
|
||||
{% else %}
|
||||
<span class="compute-dot bg-danger" title="{% trans "Not Connected" %}"></span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" title="{% trans "Not Connected" %}" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">{% trans "Not Connected" %}</span>
|
||||
{% endif %}
|
||||
<span class="fw-semibold">{{ compute.name }}</span>
|
||||
|
|
@ -54,19 +54,19 @@
|
|||
{% endif %}
|
||||
</td>
|
||||
{% if given %}
|
||||
<td data-sort="{{ given.ratio|stringformat:".2f" }}">
|
||||
<td class="py-3" data-sort="{{ given.ratio|stringformat:".2f" }}">
|
||||
{% include "computes/capacity_vcpus.html" %}
|
||||
</td>
|
||||
<td data-sort="{{ given.memory_percent }}" class="compute-memory">
|
||||
<td class="py-3" data-sort="{{ given.memory_percent }}">
|
||||
{% include "computes/capacity_memory.html" %}
|
||||
</td>
|
||||
<td class="compute-storage">
|
||||
<td class="py-3">
|
||||
{% include "computes/capacity_storage.html" %}
|
||||
</td>
|
||||
{% else %}
|
||||
<td colspan="3" class="small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
|
||||
<td colspan="3" class="py-3 small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
|
||||
{% endif %}
|
||||
<td class="text-end">
|
||||
<td class="py-3 text-end">
|
||||
<div class="btn-group">
|
||||
{# a host the panel cannot reach opens too: its page says why #}
|
||||
<a class="btn {% if compute.status is True %}btn-success{% else %}btn-light{% endif %}" title="{% trans "Overview" %}" href="{% url 'overview' compute.id %}">{% bs_icon 'eye-fill' %}</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{% load i18n %}
|
||||
<div class="small">{{ pool.name }}</div>
|
||||
<div class="cap-bar cap-thin my-1" role="img" aria-label="{% blocktrans with name=pool.name percent=pool.used_percent|floatformat:0 %}{{ name }} {{ percent }}% used{% endblocktrans %}">
|
||||
<div class="cap-running {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
|
||||
<div class="progress my-1" role="progressbar" style="--bs-progress-height: 0.3rem;"
|
||||
aria-label="{% blocktrans with name=pool.name %}{{ name }} used{% endblocktrans %}" aria-valuenow="{{ pool.used_percent|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
|
||||
</div>
|
||||
<div class="small text-body-secondary">{% blocktrans with free=pool.free|filesizeformat size=pool.size|filesizeformat %}{{ free }} free of {{ size }}{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
<div id="host_status" class="d-flex flex-wrap align-items-baseline column-gap-3 text-body-secondary mb-3">
|
||||
<span>
|
||||
{% if connected %}
|
||||
<span class="compute-dot bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
|
||||
{% else %}
|
||||
<span class="compute-dot bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text-break">{{ compute.hostname }}</span>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'server' %} {% trans "VMs" %}</div>
|
||||
<div class="card-body">
|
||||
<div class="compute-ratio">{{ given.vm_count }}</div>
|
||||
<div class="fs-4 lh-sm">{{ given.vm_count }}</div>
|
||||
<div class="small text-body-secondary">
|
||||
{% blocktrans with running=given.vms.running shutoff=given.vms.shutoff %}{{ running }} running, {{ shutoff }} shut off{% endblocktrans %}{% if given.vms.paused %}, {% blocktrans with paused=given.vms.paused %}{{ paused }} paused{% endblocktrans %}{% endif %}{% if given.vms.other %}, {% blocktrans with other=given.vms.other %}{{ other }} other{% endblocktrans %}{% endif %}
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'memory' %} {% trans "Memory" %}</div>
|
||||
<div class="card-body compute-memory">
|
||||
<div class="card-body">
|
||||
{% include "computes/capacity_memory.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</div>
|
||||
<div class="card-body compute-storage">
|
||||
<div class="card-body">
|
||||
{% include "computes/capacity_storage.html" %}
|
||||
<a class="small" href="{% url 'storages' compute.id %}">{% trans "Storages" %} →</a>
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<span>{% bs_icon 'speedometer2' %} {% trans "CPU in use" %}</span> <span id="cpu_now" class="fw-semibold">–</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
<span>{% bs_icon 'memory' %} {% trans "Memory in use" %}</span> <span id="mem_now" class="fw-semibold">–</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@ def shown_capacity(compute):
|
|||
be read."""
|
||||
given = compute.capacity
|
||||
if given:
|
||||
# the memory bar: running and shut-off VMs' memory, and a mark at the
|
||||
# host's memory, on a scale that holds whichever is larger
|
||||
# the memory bar: running and shut-off VMs' memory, on a scale that
|
||||
# holds the host's memory or all given, whichever is larger
|
||||
assigned, memory = given["assigned"], given["memory"]
|
||||
assigned["stopped"] = assigned["all"] - assigned["running"]
|
||||
scale = max(assigned["all"], memory) or 1
|
||||
given["bar"] = {"running": assigned["running"] * 100 / scale,
|
||||
"stopped": (assigned["all"] - assigned["running"]) * 100 / scale,
|
||||
"host": memory * 100 / scale, "over": assigned["all"] > memory}
|
||||
given["bar"] = {"running": assigned["running"] * 100 / scale, "stopped": assigned["stopped"] * 100 / scale,
|
||||
"over": assigned["all"] > memory}
|
||||
given["memory_percent"] = round(assigned["all"] * 100 / memory) if memory else 0
|
||||
given["vm_count"] = sum(given["vms"].values())
|
||||
# the default pool (else the first) shows; the others (a host may
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue