mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 12:16:49 +00:00
e5c7dc338d
The list pages' search (filter-table.js) read what was typed as a
regular expression: a "(" or "[" stopped it with an error. It also
needed jQuery, while the instance list had its own script for the same
search. Both are now static/js/table_filter.js: plain text in any case,
the instance list's state list and host groups where a page has them,
remembered for a day as before. A group's header row is marked as one
(data-group-header) instead of being any row without a state.
110 lines
7.6 KiB
HTML
110 lines
7.6 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load common_tags %}
|
|
{% 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="page-header">{% trans "Computes" %}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
{% if not computes %}
|
|
<div class="col-lg-12">
|
|
<div class="alert alert-warning shadow-sm">
|
|
{% bs_icon 'exclamation-triangle'%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<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>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "Host" %}</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">{% trans "Storage" %}</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.capacity %}
|
|
<tr>
|
|
<td>
|
|
<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="visually-hidden">{% trans "Connected" %}</span>
|
|
{% else %}
|
|
<span class="compute-dot bg-danger" title="{% trans "Not Connected" %}"></span>
|
|
<span class="visually-hidden">{% trans "Not Connected" %}</span>
|
|
{% endif %}
|
|
<span class="fw-semibold">{{ compute.name }}</span>
|
|
</div>
|
|
<div class="small text-body-secondary ms-3">{{ compute.hostname }}{% if compute.details %}<br>{{ compute.details }}{% endif %}</div>
|
|
{% if compute.status is not True %}
|
|
<div class="small text-danger ms-3">{{ compute.connection_error }}</div>
|
|
{% endif %}
|
|
</td>
|
|
{% if given %}
|
|
<td data-sort="{{ given.ratio|stringformat:".2f" }}">
|
|
<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="small text-body-secondary text-nowrap">{% 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>
|
|
</td>
|
|
<td data-sort="{{ given.memory_percent }}" class="compute-memory">
|
|
<div class="mb-1 text-nowrap">{% blocktrans with all=given.assigned.all|filesizeformat memory=given.memory|filesizeformat %}{{ all }} given of {{ memory }}{% endblocktrans %}</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>
|
|
</div>
|
|
<div class="small text-body-secondary mt-1">{% blocktrans with running=given.assigned.running|filesizeformat %}{{ running }} of it running{% endblocktrans %}</div>
|
|
</td>
|
|
<td class="compute-storage">
|
|
{% if given.pool %}{% include "computes/pool_bar.html" with pool=given.pool %}{% endif %}
|
|
{% if given.more_pools %}
|
|
<details class="mt-2">
|
|
<summary class="small text-body-secondary">{% blocktrans count counter=given.more_pools|length %}{{ counter }} more pool{% plural %}{{ counter }} more pools{% endblocktrans %}</summary>
|
|
{% for pool in given.more_pools %}
|
|
<div class="mt-2">{% include "computes/pool_bar.html" %}</div>
|
|
{% endfor %}
|
|
</details>
|
|
{% endif %}
|
|
</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>
|
|
{% endif %}
|
|
<td class="text-end">
|
|
<div class="btn-group">
|
|
{% if compute.status is True %}
|
|
<a class="btn btn-success" title="{%trans "Overview" %}" href="{% url 'overview' compute.id %}">{% bs_icon 'eye-fill' %}</a>
|
|
{% else %}
|
|
<a class="btn btn-light" title="{%trans "Overview" %}">{% bs_icon 'eye' %}</a>
|
|
{% endif %}
|
|
<a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'compute_update' compute.id %}">{% bs_icon 'pencil-fill' %}</a>
|
|
<a class="btn btn-danger" title="{%trans "Delete" %}" href="{% url 'compute_delete' compute.id %}">{% bs_icon 'x-circle-fill' %}</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block script %}
|
|
<script src="{% static 'js/table_filter.js' %}"></script>
|
|
{% endblock script %}
|