mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 19:56:48 +00:00
7cf12b997b
sortable.js 0.8.0 (abandoned since 2014) sorted only a table's first
body: in the grouped VM list the first host's row moved among its VMs
and the other hosts never sorted, and memory sorted as text ("1024 MB"
before "512 MB"). tablesort 5.7.1 sorts each table body on its own and
keeps a row marked data-sort-method="none" in place, so hosts stay in
name order with their row on top and their VMs sort below it. Memory,
vCPUs and volume sizes sort by their numbers (data-sort). Headers are
reachable by keyboard and carry aria-sort.
base.html loads tablesort for every table marked data-sortable; the
per-page sortable includes and sortable-theme-bootstrap.css go, so these
tables take the theme's table style like the others. The grouped list's
row numbers go (meaningless once sorted). The VM owners and VM logs
tables were marked sortable but never loaded the script; they stay
unsorted.
94 lines
4.1 KiB
HTML
94 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% block title %}{% trans "Instances" %}{% endblock %}
|
|
{% block page_heading %}{% trans "Instances" %}{% endblock page_heading %}
|
|
|
|
{% block page_heading_extra %}
|
|
{% if request.user.is_superuser %}
|
|
{% include 'create_inst_block.html' %}
|
|
{% endif %}
|
|
{% include 'search_block.html' %}
|
|
<div class="float-end search">
|
|
<select id="state-filter" class="form-select" aria-label="{% trans 'State' %}">
|
|
<option value="">{% trans 'All states' %}</option>
|
|
{% for state in states %}
|
|
<option>{{ state }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endblock page_heading_extra %}
|
|
|
|
{% block content %}
|
|
{% if show_hosts %}
|
|
{% for compute in computes %}
|
|
{% if compute.status is not True %}
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{% trans 'Problem occurred with host' %} {{ compute.name }}: {{ compute.connection_error }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% elif own_hosts_down %}
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
{% trans 'A host of some of your virtual machines cannot be reached right now.' %}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-lg-12">
|
|
{% if app_settings.VIEW_INSTANCES_LIST_STYLE == 'grouped' and request.user.is_superuser %}
|
|
{% include 'allinstances_index_grouped.html' %}
|
|
{% else %}
|
|
{% include 'allinstances_index_nongrouped.html' %}
|
|
{% endif %}
|
|
</div>
|
|
{% endblock content %}
|
|
{% block script %}
|
|
<script src="{% static 'js/instance_filter.js' %}"></script>
|
|
{% if request.user.is_superuser %}
|
|
<script>
|
|
// The new-VM dialog's CPU bars: each compute's load over one second,
|
|
// read when the dialog opens, two computes at a time (each read holds
|
|
// a worker for that second). Answers of an earlier opening are ignored.
|
|
const addInstance = document.getElementById("AddInstance");
|
|
let cpuOpening = 0, cpuQueue = [], cpuReading = 0;
|
|
|
|
function setCpuUsage(cell, percent, text) {
|
|
const meter = cell.querySelector(".progress");
|
|
cell.querySelector(".progress-bar").style.width = (percent || 0) + "%";
|
|
if (percent === null) {
|
|
meter.removeAttribute("aria-valuenow");
|
|
} else {
|
|
meter.setAttribute("aria-valuenow", percent);
|
|
}
|
|
cell.querySelector(".cpu-usage-value").textContent = text;
|
|
}
|
|
|
|
function readCpuUsage() {
|
|
while (cpuReading < 2 && cpuQueue.length) {
|
|
const cell = cpuQueue.shift(), opening = cpuOpening;
|
|
const show = (percent, text) => { if (opening === cpuOpening) setCpuUsage(cell, percent, text); };
|
|
cpuReading++;
|
|
$.getJSON(cell.dataset.url)
|
|
.done((data) => {
|
|
const usage = typeof data.cpudata === "number" ? Math.round(data.cpudata) : null;
|
|
show(usage, usage === null ? "—" : usage + "%");
|
|
})
|
|
.fail(() => show(null, "—"))
|
|
.always(() => { cpuReading--; readCpuUsage(); });
|
|
}
|
|
}
|
|
|
|
addInstance.addEventListener("show.bs.modal", function () {
|
|
cpuOpening++;
|
|
cpuQueue = Array.from(addInstance.querySelectorAll(".cpu-usage"));
|
|
cpuQueue.forEach((cell) => setCpuUsage(cell, null, "…"));
|
|
readCpuUsage();
|
|
});
|
|
addInstance.addEventListener("hide.bs.modal", function () {
|
|
cpuOpening++;
|
|
cpuQueue = [];
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock script %}
|