mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 20:26:48 +00:00
321749f8fa
- Totals above the list: hosts connected of all, VMs running of all, vCPUs given on the CPUs, memory given of the memory of the hosts the panel reads, as cards; the connected count is red while a host is not. - A host's name links its overview; its state is a Connected or Not connected badge (the dot goes), beside a badge of how the panel reaches it (TCP, SSH, TLS, Socket); its address in monospace. - A VMs column: the host's VMs, linked to its Instances, and how many run. - The vCPUs have a bar like the memory's: running VMs' and shut-off VMs' vCPUs against the CPUs, amber over 2:1 and red over 4:1 as the ratio is; the overview's vCPU card shares it. - The three coloured buttons of each row are one menu: Overview, Edit connection and Remove from panel (its popper fixed, as the table's scrolling box would cut it off). - The four green add buttons are one "Add host" menu that says what each kind of connection is. - The table is table-hover; a host the panel cannot reach has a table-warning row.
122 lines
7.1 KiB
HTML
122 lines
7.1 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load bootstrap_icons %}
|
|
{% block title %}{% trans "Computes" %}{% endblock %}
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
{% include 'create_comp_block.html' %}
|
|
{% include 'search_block.html' %}
|
|
<h3 class="mb-3">{% trans "Computes" %}</h3>
|
|
</div>
|
|
</div>
|
|
{% if not computes %}
|
|
<div class="alert alert-warning shadow-sm">
|
|
{% bs_icon 'exclamation-triangle'%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
|
|
</div>
|
|
{% else %}
|
|
{# the totals of the hosts the panel reaches #}
|
|
<div class="row row-cols-2 row-cols-lg-4 g-3 mb-4">
|
|
<div class="col">
|
|
<div class="card h-100"><div class="card-body">
|
|
<div class="small text-body-secondary">{% bs_icon 'hdd-rack' %} {% trans "Hosts" %}</div>
|
|
<div class="fs-4 lh-sm">{{ totals.connected }} / {{ totals.hosts }}</div>
|
|
<div class="small {% if totals.connected < totals.hosts %}text-danger{% else %}text-body-secondary{% endif %}">{% trans "connected" %}</div>
|
|
</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card h-100"><div class="card-body">
|
|
<div class="small text-body-secondary">{% bs_icon 'server' %} {% trans "VMs" %}</div>
|
|
<div class="fs-4 lh-sm">{{ totals.running }} / {{ totals.vms }}</div>
|
|
<div class="small text-body-secondary">{% trans "running" %}</div>
|
|
</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card h-100"><div class="card-body">
|
|
<div class="small text-body-secondary">{% bs_icon 'cpu' %} {% trans "vCPUs given" %}</div>
|
|
<div class="fs-4 lh-sm">{{ totals.vcpus }}</div>
|
|
<div class="small text-body-secondary">{% blocktrans count counter=totals.cpus %}on {{ counter }} CPU{% plural %}on {{ counter }} CPUs{% endblocktrans %}</div>
|
|
</div></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card h-100"><div class="card-body">
|
|
<div class="small text-body-secondary">{% bs_icon 'memory' %} {% trans "Memory given" %}</div>
|
|
<div class="fs-4 lh-sm">{{ totals.assigned|filesizeformat }}</div>
|
|
<div class="small text-body-secondary">{% blocktrans with memory=totals.memory|filesizeformat %}of {{ memory }}{% endblocktrans %}</div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{# position-relative: the hidden status texts are positioned within it, not the page #}
|
|
<div class="table-responsive position-relative">
|
|
<table class="table table-hover align-middle" data-sortable>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "Host" %}</th>
|
|
<th scope="col" data-sort-method="number">{% trans "VMs" %}</th>
|
|
<th scope="col" data-sort-method="number">{% trans "vCPUs" %}</th>
|
|
<th scope="col" data-sort-method="number">{% trans "Memory" %}</th>
|
|
<th scope="col" data-sort-method="none"><span class="visually-hidden">{% trans "Actions" %}</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="searchable">
|
|
{% for compute in computes %}
|
|
{% with given=compute.shown_capacity %}
|
|
<tr{% if compute.status is not True %} class="table-warning"{% endif %}>
|
|
<td class="py-3">
|
|
<div class="d-flex flex-wrap align-items-center gap-2">
|
|
<a class="fw-semibold" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
|
|
{% if compute.status is True %}
|
|
<span class="badge text-bg-success">{% trans "Connected" %}</span>
|
|
{% else %}
|
|
<span class="badge text-bg-danger">{% trans "Not connected" %}</span>
|
|
{% endif %}
|
|
<span class="badge text-bg-light border">{{ compute.connection_name }}</span>
|
|
</div>
|
|
<div class="small text-body-secondary font-monospace mt-1">{{ compute.hostname }}</div>
|
|
{% if compute.details %}<div class="small text-body-secondary">{{ compute.details }}</div>{% endif %}
|
|
{% if compute.status is not True %}
|
|
<div class="small text-danger">{{ compute.connection_error }}</div>
|
|
{% endif %}
|
|
</td>
|
|
{% if given %}
|
|
<td class="py-3" data-sort="{{ given.vm_count }}">
|
|
<a class="fs-4 lh-sm text-decoration-none" href="{% url 'instances' compute.id %}">{{ given.vm_count }}</a>
|
|
<div class="small text-body-secondary">{% blocktrans with running=given.vms.running %}{{ running }} running{% endblocktrans %}</div>
|
|
</td>
|
|
<td class="py-3" data-sort="{{ given.ratio|stringformat:".2f" }}">
|
|
{% include "computes/capacity_vcpus.html" %}
|
|
</td>
|
|
<td class="py-3" data-sort="{{ given.memory_percent }}">
|
|
{% include "computes/capacity_memory.html" %}
|
|
</td>
|
|
{% else %}
|
|
<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="py-3 text-end">
|
|
{# fixed: the menu would be cut off by the table's scrolling box #}
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
data-bs-popper-config='{"strategy": "fixed"}'
|
|
aria-label="{% blocktrans with name=compute.name %}Actions for {{ name }}{% endblocktrans %}">{% bs_icon 'three-dots' %}</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow">
|
|
<li><a class="dropdown-item" href="{% url 'overview' compute.id %}">{% bs_icon 'eye' %} {% trans "Overview" %}</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'compute_update' compute.id %}">{% bs_icon 'pencil' %} {% trans "Edit connection" %}</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'compute_delete' compute.id %}">{% bs_icon 'x-circle' %} {% trans "Remove from panel" %}</a></li>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock content %}
|
|
|
|
{% block script %}
|
|
<script src="{% static 'js/table_filter.js' %}"></script>
|
|
{% endblock script %}
|