1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 11:16:47 +00:00

fix(templates): a wide table scrolls in its own box on a narrow screen

Twenty tables had no .table-responsive wrapper, so on a phone the user
list, compute list, VM lists, network and network filter pages scrolled
sideways as a whole. Each table now scrolls inside its box, as the
other ten already did. The page test walks the network page too, and
checks that every table on every page has the wrapper.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
catborise 2026-10-21 12:49:52 +03:00
parent 6ddde9376c
commit e324e79fcb
15 changed files with 1038 additions and 982 deletions

View file

@ -38,57 +38,61 @@
<div class="tab-content">
<div class="tab-pane active" id="instances">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">{% trans "Instance" %}</th>
<th scope="col">{% trans "VNC" %}</th>
<th scope="col">{% trans "Resize" %}</th>
<th scope="col">{% trans "Delete" %}</th>
<th scope="colgroup" colspan="2">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for inst in user_insts %}
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<td>{{ forloop.counter }}</td>
<td><a href="{% url 'instances:instance' inst.instance.id %}">{{ inst.instance.name }}</a></td>
<td>{{ inst.is_vnc }}</td>
<td>{{ inst.is_change }}</td>
<td>{{ inst.is_delete }}</td>
<td style="width:5px;">
<a href="{% url 'accounts:user_instance_update' inst.id %}" class="btn btn-sm btn-secondary" title="{% trans "edit" %}">
{% bs_icon 'pencil' %}
</a>
</td>
<td style="width:5px;">
<a class="btn btn-sm btn-secondary" href="{% url 'accounts:user_instance_delete' inst.id %}" title="{% trans "Delete" %}">
{% bs_icon 'trash' %}
</a>
</td>
<th scope="col">#</th>
<th scope="col">{% trans "Instance" %}</th>
<th scope="col">{% trans "VNC" %}</th>
<th scope="col">{% trans "Resize" %}</th>
<th scope="col">{% trans "Delete" %}</th>
<th scope="colgroup" colspan="2">{% trans "Action" %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for inst in user_insts %}
<tr>
<td>{{ forloop.counter }}</td>
<td><a href="{% url 'instances:instance' inst.instance.id %}">{{ inst.instance.name }}</a></td>
<td>{{ inst.is_vnc }}</td>
<td>{{ inst.is_change }}</td>
<td>{{ inst.is_delete }}</td>
<td style="width:5px;">
<a href="{% url 'accounts:user_instance_update' inst.id %}" class="btn btn-sm btn-secondary" title="{% trans "edit" %}">
{% bs_icon 'pencil' %}
</a>
</td>
<td style="width:5px;">
<a class="btn btn-sm btn-secondary" href="{% url 'accounts:user_instance_delete' inst.id %}" title="{% trans "Delete" %}">
{% bs_icon 'trash' %}
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="public-keys">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{% trans "Key name" %}</th>
<th scope="col">{% trans "Public key" %}</th>
</tr>
</thead>
<tbody>
{% for publickey in publickeys %}
<tr>
<td>{{ publickey.keyname }}</td>
<td title="{{ publickey.keypublic }}">{{ publickey.keypublic|truncatechars:64 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{% trans "Key name" %}</th>
<th scope="col">{% trans "Public key" %}</th>
</tr>
</thead>
<tbody>
{% for publickey in publickeys %}
<tr>
<td>{{ publickey.keyname }}</td>
<td title="{{ publickey.keypublic }}">{{ publickey.keypublic|truncatechars:64 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock content %}

View file

@ -22,33 +22,35 @@
</div>
{% else %}
<div class="col-lg-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Group Name" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for group in groups %}
<tr>
<td>
<a href=""><strong>{{ group.name }}</strong></a>
</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-primary" href="{% url 'admin:group_update' group.id %}" title="{%trans "Edit" %}">
{% bs_icon 'pencil' %}
</a>
<a class="btn btn-danger" href="{% url 'admin:group_delete' group.id %}" title="{%trans "Delete" %}">
{% bs_icon 'x' %}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Group Name" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for group in groups %}
<tr>
<td>
<a href=""><strong>{{ group.name }}</strong></a>
</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-primary" href="{% url 'admin:group_update' group.id %}" title="{%trans "Edit" %}">
{% bs_icon 'pencil' %}
</a>
<a class="btn btn-danger" href="{% url 'admin:group_delete' group.id %}" title="{%trans "Delete" %}">
{% bs_icon 'x' %}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>

View file

@ -20,39 +20,41 @@
</div>
{% else %}
<div class="col-lg-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Name" %}</th>
<th span="col">{% trans "UUID" %}</th>
<th span="col">{% trans "Owners" %}</th>
<th span="col">{% trans "Removed" %}</th>
<th span="col">{% trans "Expires" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for tombstone in tombstones %}
<tr>
<td>
<strong>{{ tombstone.name }}</strong>
{% if tombstone.is_template %}<span class="badge bg-secondary">{% trans "Template" %}</span>{% endif %}
</td>
<td>{{ tombstone.uuid }}</td>
<td>{{ tombstone.owner_names|join:", " }}</td>
<td>{{ tombstone.removed|date:"Y-m-d H:i" }}</td>
<td>{{ tombstone.expires|date:"Y-m-d H:i" }}</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-danger" href="{% url 'admin:tombstone_delete' tombstone.id %}" title="{% trans "Delete" %}">
{% bs_icon 'x' %}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Name" %}</th>
<th span="col">{% trans "UUID" %}</th>
<th span="col">{% trans "Owners" %}</th>
<th span="col">{% trans "Removed" %}</th>
<th span="col">{% trans "Expires" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for tombstone in tombstones %}
<tr>
<td>
<strong>{{ tombstone.name }}</strong>
{% if tombstone.is_template %}<span class="badge bg-secondary">{% trans "Template" %}</span>{% endif %}
</td>
<td>{{ tombstone.uuid }}</td>
<td>{{ tombstone.owner_names|join:", " }}</td>
<td>{{ tombstone.removed|date:"Y-m-d H:i" }}</td>
<td>{{ tombstone.expires|date:"Y-m-d H:i" }}</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-danger" href="{% url 'admin:tombstone_delete' tombstone.id %}" title="{% trans "Delete" %}">
{% bs_icon 'x' %}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>

View file

@ -25,56 +25,58 @@
</div>
{% else %}
<div class="col-lg-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Username" %}</th>
<th span="col">{% trans "Status" %}</th>
<th span="col">{% trans "Last Login" %}</th>
<th span="col">{% trans "Staff" %}</th>
<th span="col">{% trans "Superuser" %}</th>
<th span="col">{% trans "Can Clone" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for user in users %}
{% has_perm user 'instances.clone_instances' as can_clone %}
<tr class="{% if not user.is_active %}danger{% endif %}">
<td>
{{ user.username }}
</td>
<td>
{% if user.is_active %}
{% trans "Active" %}
{% else %}
{% trans "Blocked" %}
{% endif %}
</td>
<td>{{ user.last_login }}</td>
<td>{% if user.is_staff %}{% bs_icon 'check' %}{% endif %}</td>
<td>{% if user.is_superuser %}{% bs_icon 'check' %}{% endif %}</td>
<td>{% if can_clone %}{% bs_icon 'check' %}{% endif %}</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% bs_icon 'eye-fill' %}</a>
<a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% bs_icon 'pencil-fill' %}</a>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th span="col">{% trans "Username" %}</th>
<th span="col">{% trans "Status" %}</th>
<th span="col">{% trans "Last Login" %}</th>
<th span="col">{% trans "Staff" %}</th>
<th span="col">{% trans "Superuser" %}</th>
<th span="col">{% trans "Can Clone" %}</th>
<th span="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for user in users %}
{% has_perm user 'instances.clone_instances' as can_clone %}
<tr class="{% if not user.is_active %}danger{% endif %}">
<td>
{{ user.username }}
</td>
<td>
{% if user.is_active %}
<form method="post" action="{% url 'admin:user_block' user.id %}">{% csrf_token %}
<button type="submit" class="btn btn-warning rounded-0" title="{%trans "Block" %}">{% bs_icon 'stop-fill' %}</button>
</form>
{% trans "Active" %}
{% else %}
<form method="post" action="{% url 'admin:user_unblock' user.id %}">{% csrf_token %}
<button type="submit" class="btn btn-success rounded-0" title="{%trans "Unblock" %}">{% bs_icon 'play-fill' %}</button>
</form>
{% trans "Blocked" %}
{% endif %}
<a class="btn btn-danger" title="{%trans "Delete" %}" href="{% url 'admin:user_delete' user.id %}">{% bs_icon 'x-circle-fill' %}</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
<td>{{ user.last_login }}</td>
<td>{% if user.is_staff %}{% bs_icon 'check' %}{% endif %}</td>
<td>{% if user.is_superuser %}{% bs_icon 'check' %}{% endif %}</td>
<td>{% if can_clone %}{% bs_icon 'check' %}{% endif %}</td>
<td>
<div class="float-end btn-group">
<a class="btn btn-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% bs_icon 'eye-fill' %}</a>
<a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% bs_icon 'pencil-fill' %}</a>
{% if user.is_active %}
<form method="post" action="{% url 'admin:user_block' user.id %}">{% csrf_token %}
<button type="submit" class="btn btn-warning rounded-0" title="{%trans "Block" %}">{% bs_icon 'stop-fill' %}</button>
</form>
{% else %}
<form method="post" action="{% url 'admin:user_unblock' user.id %}">{% csrf_token %}
<button type="submit" class="btn btn-success rounded-0" title="{%trans "Unblock" %}">{% bs_icon 'play-fill' %}</button>
</form>
{% endif %}
<a class="btn btn-danger" title="{%trans "Delete" %}" href="{% url 'admin:user_delete' user.id %}">{% bs_icon 'x-circle-fill' %}</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>

View file

@ -66,47 +66,49 @@
{% endif %}
</div>
{% else %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>
<th scope="col">{% trans 'User' %}</th>
<th scope="col">{% trans 'Status' %}</th>
<th scope="col">{% trans 'VCPU' %}</th>
<th scope="col" class="text-end">{% trans 'Memory' %}</th>
<th scope="col" data-sortable="false">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for instance in instances %}
<tr>
<td>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a>
<br>
{% if instance.info %}<p class="m-0 small fst-italic">{{ instance.title }}</p>{% endif %}
</td>
<td>
<em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em>
</td>
<td>
{% include 'instance_state.html' %}
</td>
<td>{{ instance.info.3 }}</td>
<td><p class="text-end">{% if instance.info %}{% widthratio instance.info.1 1024 1 %} MiB{% endif %}</p></td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>
<th scope="col">{% trans 'User' %}</th>
<th scope="col">{% trans 'Status' %}</th>
<th scope="col">{% trans 'VCPU' %}</th>
<th scope="col" class="text-end">{% trans 'Memory' %}</th>
<th scope="col" data-sortable="false">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for instance in instances %}
<tr>
<td>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a>
<br>
{% if instance.info %}<p class="m-0 small fst-italic">{{ instance.title }}</p>{% endif %}
</td>
<td>
<em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em>
</td>
<td>
{% include 'instance_state.html' %}
</td>
<td>{{ instance.info.3 }}</td>
<td><p class="text-end">{% if instance.info %}{% widthratio instance.info.1 1024 1 %} MiB{% endif %}</p></td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
</div>

View file

@ -21,44 +21,46 @@
</div>
{% else %}
<div class="col-lg-12">
<table class="table table-striped table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th span="col" class="col-sm-3">{% trans "Name" %}</th>
<th span="col" class="col-sm-2">{% trans "Status" %}</th>
<th span="col" class="col-sm-5">{% trans "Details" %}</th>
<th span="col" class="col-sm-2 text-center">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for compute in computes %}
<tr>
<td class="col-sm-3">
{{ compute.name }}
</td>
<td class="col-sm-2">
{% if compute.status is True %}{% trans "Connected" %}{% else %}{% trans "Not Connected" %}
<br><small class="text-danger">{{ compute.connection_error }}</small>
{% endif %}
</td>
<td class="col-sm-5">
{{ compute.details|default:"" }}
</td>
<td class="col-sm-2">
<div class="float-end 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>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th span="col" class="col-sm-3">{% trans "Name" %}</th>
<th span="col" class="col-sm-2">{% trans "Status" %}</th>
<th span="col" class="col-sm-5">{% trans "Details" %}</th>
<th span="col" class="col-sm-2 text-center">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for compute in computes %}
<tr>
<td class="col-sm-3">
{{ compute.name }}
</td>
<td class="col-sm-2">
{% if compute.status is True %}{% trans "Connected" %}{% else %}{% trans "Not Connected" %}
<br><small class="text-danger">{{ compute.connection_error }}</small>
{% endif %}
</td>
<td class="col-sm-5">
{{ compute.details|default:"" }}
</td>
<td class="col-sm-2">
<div class="float-end 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>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
</div>

View file

@ -1,97 +1,99 @@
{% load i18n %}
{% load bootstrap_icons %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col" data-sortable="false"><a class="link-primary" href="#" id="hide-all-instances" onclick="hide_all_host_instances()">#</a></th>
<th scope="col">{% trans "Name" %}<br>{% trans "Description" %}</th>
<th scope="col" class="d-none d-sm-table-cell">{% trans "User"%}</th>
<th scope="col">{% trans "Status" %}</th>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<th scope="col">{% trans "Role/Disk" %}</th>
{% endif %}
<th scope="col" class="d-none d-sm-table-cell">{% trans "VCPU" %}</th>
<th scope="col" class="d-none d-sm-table-cell">{% trans "Memory" %}</th>
<th scope="col" style="width:200px;" data-sortable="false">{% trans "Actions" %} & {% trans "Mem Usage" %}</th>
</tr>
</thead>
{% for compute in computes %}
<tbody class="searchable">
{% if compute.instance_set.count > 0 %}
<tr class="table-secondary fw-bold border-bottom border-dark">
<td>
<span id="collapse_host_instances_{{ compute.id }}" onclick="hide_host_instances('{{ compute.id }}');" class="bi bi-chevron-up" ></span>
</td>
<td>
<a class="link-dark" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
<span id="inst_count_badge_{{ compute.id }}" class="badge bg-secondary d-none">{{ compute.instance_set.count }}</span>
</td>
<td class="d-none d-sm-table-cell"></td>
<td>
{% if compute.status is True %}
<span class="badge bg-success-subtle text-success-emphasis">{% trans "Connected" %}</span>
{% else %}
<span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Not Connected" %}</span>
{% endif %}
</td>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<div class="table-responsive">
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col" data-sortable="false"><a class="link-primary" href="#" id="hide-all-instances" onclick="hide_all_host_instances()">#</a></th>
<th scope="col">{% trans "Name" %}<br>{% trans "Description" %}</th>
<th scope="col" class="d-none d-sm-table-cell">{% trans "User"%}</th>
<th scope="col">{% trans "Status" %}</th>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<th scope="col">{% trans "Role/Disk" %}</th>
{% endif %}
<th scope="col" class="d-none d-sm-table-cell">{% trans "VCPU" %}</th>
<th scope="col" class="d-none d-sm-table-cell">{% trans "Memory" %}</th>
<th scope="col" style="width:200px;" data-sortable="false">{% trans "Actions" %} & {% trans "Mem Usage" %}</th>
</tr>
</thead>
{% for compute in computes %}
<tbody class="searchable">
{% if compute.instance_set.count > 0 %}
<tr class="table-secondary fw-bold border-bottom border-dark">
<td>
<span id="collapse_host_instances_{{ compute.id }}" onclick="hide_host_instances('{{ compute.id }}');" class="bi bi-chevron-up" ></span>
</td>
<td>
<a class="link-dark" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
<span id="inst_count_badge_{{ compute.id }}" class="badge bg-secondary d-none">{{ compute.instance_set.count }}</span>
</td>
<td class="d-none d-sm-table-cell"></td>
{% endif %}
{% if compute.status is True %}
<td class="d-none d-sm-table-cell text-center">{{ compute.cpu_count }}</td>
<td class="d-none d-sm-table-cell text-right">{{ compute.ram_size|filesizeformat }}</td>
<td>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
</div>
</div>
</td>
{% else %}
<td class="d-none d-sm-table-cell"></td>
<td class="d-none d-sm-table-cell"></td>
<td></td>
{% endif %}
</tr>
{% for instance in compute.instance_set.all %}
<tr host="{{ compute.id }}">
<td class="text-right">{{ forloop.counter }} </td>
<td>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a>
<br>
{% if instance.info %}<p class="m-0 small fst-italic">{{ instance.title }}</p>{% endif %}
</td>
<td>
<em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em>
</td>
<td>
{% include 'instance_state.html' %}
{% if compute.status is True %}
<span class="badge bg-success-subtle text-success-emphasis">{% trans "Connected" %}</span>
{% else %}
<span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Not Connected" %}</span>
{% endif %}
</td>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<td>
{% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="badge bg-success-subtle text-success-emphasis">{% else %}<span class="badge bg-danger-subtle text-danger-emphasis">{% endif %}{{ instance.drbd }}</span>
</td>
<td class="d-none d-sm-table-cell"></td>
{% endif %}
<td>{{ instance.info.3 }}</td>
<td>{% if instance.info %}{% widthratio instance.info.2 1024 1 %} MB{% endif %}</td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
{% if compute.status is True %}
<td class="d-none d-sm-table-cell text-center">{{ compute.cpu_count }}</td>
<td class="d-none d-sm-table-cell text-right">{{ compute.ram_size|filesizeformat }}</td>
<td>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
</div>
</div>
</td>
{% else %}
<td class="d-none d-sm-table-cell"></td>
<td class="d-none d-sm-table-cell"></td>
<td></td>
{% endif %}
</tr>
{% endfor %}
{% endif %}
</tbody>
{% empty %}
<tbody></tbody>{# sortable.js needs a table body #}
{% endfor %}
</table>
{% for instance in compute.instance_set.all %}
<tr host="{{ compute.id }}">
<td class="text-right">{{ forloop.counter }} </td>
<td>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">{{ instance.name }}</a>
<br>
{% if instance.info %}<p class="m-0 small fst-italic">{{ instance.title }}</p>{% endif %}
</td>
<td>
<em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em>
</td>
<td>
{% include 'instance_state.html' %}
</td>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<td>
{% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="badge bg-success-subtle text-success-emphasis">{% else %}<span class="badge bg-danger-subtle text-danger-emphasis">{% endif %}{{ instance.drbd }}</span>
</td>
{% endif %}
<td>{{ instance.info.3 }}</td>
<td>{% if instance.info %}{% widthratio instance.info.2 1024 1 %} MB{% endif %}</td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
{% empty %}
<tbody></tbody>{# sortable.js needs a table body #}
{% endfor %}
</table>
</div>
{% block script %}
<script>

View file

@ -1,57 +1,59 @@
{% load i18n %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>
{% if request.user.is_superuser %}
<th scope="col">{% trans 'Host' %}<br>{% trans 'User' %}</th>
{% endif %}
<th scope="col">{% trans 'Status' %}</th>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<th scope="col">{% trans 'Role/Disk' %}</th>
{% endif %}
<th scope="col">{% trans 'VCPU' %}</th>
<th scope="col">{% trans 'Memory' %}</th>
<th scope="col" data-sortable="false">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for instance in instances %}
<tr>
<td>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">
{{ instance.name }}
</a>
<br>
{% if instance.info %}<p class="m-0 small font-italic">{{ instance.title }}</p>{% endif %}
</td>
{% if request.user.is_superuser %}
<div class="table-responsive">
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>
{% if request.user.is_superuser %}
<th scope="col">{% trans 'Host' %}<br>{% trans 'User' %}</th>
{% endif %}
<th scope="col">{% trans 'Status' %}</th>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<th scope="col">{% trans 'Role/Disk' %}</th>
{% endif %}
<th scope="col">{% trans 'VCPU' %}</th>
<th scope="col">{% trans 'Memory' %}</th>
<th scope="col" data-sortable="false">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for instance in instances %}
<tr>
<td>
<a href="{% url 'overview' instance.compute.id %}">{{ instance.compute.name }}</a><br>
<small><em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em></small>
<a class="link-primary" href="{% url 'instances:instance' instance.id %}">
{{ instance.name }}
</a>
<br>
{% if instance.info %}<p class="m-0 small font-italic">{{ instance.title }}</p>{% endif %}
</td>
{% endif %}
<td>
{% include 'instance_state.html' %}
</td>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<td>
{% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="badge bg-success-subtle text-success-emphasis">{% else %}<span class="badge bg-danger-subtle text-danger-emphasis">{% endif %}{{ instance.drbd }}</span>
</td>
{% endif %}
<td>{{ instance.info.3 }}</td>
<td>{% if instance.info %}{% widthratio instance.info.2 1024 1 %} MB{% endif %}</td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if request.user.is_superuser %}
<td>
<a href="{% url 'overview' instance.compute.id %}">{{ instance.compute.name }}</a><br>
<small><em>
{% if instance.userinstance_set.all.count > 0 %}
{{ instance.userinstance_set.all.0.user }}
{% if instance.userinstance_set.all.count > 1 %}
(+{{ instance.userinstance_set.all.count|add:"-1" }})
{% endif %}
{% endif %}
</em></small>
</td>
{% endif %}
<td>
{% include 'instance_state.html' %}
</td>
{% if app_settings.VM_DRBD_STATUS == 'True' %}
<td>
{% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="badge bg-success-subtle text-success-emphasis">{% else %}<span class="badge bg-danger-subtle text-danger-emphasis">{% endif %}{{ instance.drbd }}</span>
</td>
{% endif %}
<td>{{ instance.info.3 }}</td>
<td>{% if instance.info %}{% widthratio instance.info.2 1024 1 %} MB{% endif %}</td>
<td class="text-nowrap">
{% include 'instance_actions.html' %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

View file

@ -15,49 +15,51 @@
<div class="modal-body">
<form method="post" aria-label="Select compute for instance create form">{% csrf_token %}
<div class="row">
<table class="table">
<thead>
<tr style="cursor:default;pointer-events:none">
<th>{% trans "Name" %}</th>
<th>{% trans "VCPU" %}
<th>{% trans "CPU Usage" %}</th>
<th>{% trans "Memory" %}</th>
<th>{% trans "Mem Usage" %}</th>
<th>{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for compute in computes %}
{% if compute.status is True %}
<tr style="text-decoration: none">
<td>{{ compute.name }}</td>
<td>{{ compute.cpu_count }}</td>
<td class="cpu-usage" data-url="{% url 'compute_graph' compute.id %}">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: 0%"
aria-valuemin="0" aria-valuemax="100" aria-label="{% trans "CPU Usage" %}">
<div class="table-responsive">
<table class="table">
<thead>
<tr style="cursor:default;pointer-events:none">
<th>{% trans "Name" %}</th>
<th>{% trans "VCPU" %}
<th>{% trans "CPU Usage" %}</th>
<th>{% trans "Memory" %}</th>
<th>{% trans "Mem Usage" %}</th>
<th>{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for compute in computes %}
{% if compute.status is True %}
<tr style="text-decoration: none">
<td>{{ compute.name }}</td>
<td>{{ compute.cpu_count }}</td>
<td class="cpu-usage" data-url="{% url 'compute_graph' compute.id %}">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: 0%"
aria-valuemin="0" aria-valuemax="100" aria-label="{% trans "CPU Usage" %}">
</div>
</div>
</div>
<small class="cpu-usage-value"></small>
</td>
<td>{{ compute.ram_size|filesizeformat }}</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
<small class="cpu-usage-value"></small>
</td>
<td>{{ compute.ram_size|filesizeformat }}</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
</div>
</div>
</div>
</td>
<td class="col-1">
<button class="btn btn-success btn-sm" type="button" onclick="goto_compute('{{ compute.id }}');">
{% trans "Choose" %}
</button>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</td>
<td class="col-1">
<button class="btn btn-success btn-sm" type="button" onclick="goto_compute('{{ compute.id }}');">
{% trans "Choose" %}
</button>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</form>
</div>

View file

@ -248,99 +248,101 @@
<span class="fw-bold">{% trans "Instance Volume" %}</span>
{% include 'add_instance_volume.html' %}
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "Device" %}</th>
<th scope="col">{% trans "Used" %}</th>
<th scope="col">{% trans "Capacity" %}</th>
<th scope="col">{% trans "Storage" %}</th>
<th scope="col">{% trans "Source" %}</th>
<th scope="col">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for disk in instance.config_disks %}
<tr>
<td>
<button type="submit" class="btn btn-sm btn-secondary"
name="details{{ forloop.counter0 }}"
title="{% trans 'Details' %}"
tabindex="1"
data-trigger="focus"
data-bs-toggle="popover"
data-bs-html="true"
data-bs-content="<strong>{% trans 'Bus' %}:</strong> {{ disk.bus }} <br/>
<strong>{% trans 'Format' %}:</strong> {{ disk.format }} <br/>
<strong>{% trans 'Cache' %}:</strong> {{ disk.cache }} <br/>
<strong>{% trans 'Serial' %}:</strong> {{ disk.serial }} <br/>
<strong>{% trans 'Readonly' %}:</strong> {{ disk.readonly }} <br/>
<strong>{% trans 'Shareable' %}:</strong> {{ disk.shareable }}</br>
<strong>{% trans 'IO Mode' %}:</strong> {{ disk.io }} <br/>
<strong>{% trans 'Discard' %}:</strong> {{ disk.discard }} <br/>
<strong>{% trans 'Detect Zeroes' %}:</strong> {{ disk.detect_zeroes }}">
<span>{% bs_icon 'info' %} </span>
</button>
{{ disk.dev }}
</td>
{% if disk.storage is None %}
<td colspan="4">
<div class="alert alert-danger">
{% trans "Error getting disk info" %}
</div>
</td>
{% else %}
<td>{{ disk.used | filesizeformat}}</td>
<td>{{ disk.size | filesizeformat }}</td>
<td>{{ disk.storage }}</td>
<td>{{ disk.path }}</td>
{% endif %}
<td class="text-nowrap">
<form class="d-inline" action="{% url 'instances:edit_volume' instance.id %}" method="post" role="form" aria-label="Edit instance volume form">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% include 'instances/edit_instance_volume.html' with id=forloop.counter0 %}
</form>
<form class="d-inline" action="{% url 'instances:detach_vol' instance.id %}" method="post">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% if instance.status == 5 %}
<button type="submit" class="btn btn-sm btn-secondary" value="{{ disk.dev }}" title="{% trans "Detach" %}" onclick="return confirm('{% trans "Are you sure to detach volume?" %}')">
{% bs_icon 'eject' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled" disabled value="{{ disk.dev }}" title="{% trans "Detach" %}" onclick="return confirm('{% trans "Are you sure? This may lead data corruption!" %}')">
{% bs_icon 'eject' %}
</button>
{% endif %}
</form>
<form class="d-inline" action="{% url 'instances:delete_vol' instance.id %}" method="post">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% if instance.status == 5 %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure to delete volume?" %}')">
{% bs_icon 'trash' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled" disabled title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure? This may lead data corruption!" %}')">
{% bs_icon 'trash' %}
</button>
{% endif %}
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "Device" %}</th>
<th scope="col">{% trans "Used" %}</th>
<th scope="col">{% trans "Capacity" %}</th>
<th scope="col">{% trans "Storage" %}</th>
<th scope="col">{% trans "Source" %}</th>
<th scope="col">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for disk in instance.config_disks %}
<tr>
<td>
<button type="submit" class="btn btn-sm btn-secondary"
name="details{{ forloop.counter0 }}"
title="{% trans 'Details' %}"
tabindex="1"
data-trigger="focus"
data-bs-toggle="popover"
data-bs-html="true"
data-bs-content="<strong>{% trans 'Bus' %}:</strong> {{ disk.bus }} <br/>
<strong>{% trans 'Format' %}:</strong> {{ disk.format }} <br/>
<strong>{% trans 'Cache' %}:</strong> {{ disk.cache }} <br/>
<strong>{% trans 'Serial' %}:</strong> {{ disk.serial }} <br/>
<strong>{% trans 'Readonly' %}:</strong> {{ disk.readonly }} <br/>
<strong>{% trans 'Shareable' %}:</strong> {{ disk.shareable }}</br>
<strong>{% trans 'IO Mode' %}:</strong> {{ disk.io }} <br/>
<strong>{% trans 'Discard' %}:</strong> {{ disk.discard }} <br/>
<strong>{% trans 'Detect Zeroes' %}:</strong> {{ disk.detect_zeroes }}">
<span>{% bs_icon 'info' %} </span>
</button>
{{ disk.dev }}
</td>
{% if disk.storage is None %}
<td colspan="4">
<div class="alert alert-danger">
{% trans "Error getting disk info" %}
</div>
</td>
{% else %}
<td>{{ disk.used | filesizeformat}}</td>
<td>{{ disk.size | filesizeformat }}</td>
<td>{{ disk.storage }}</td>
<td>{{ disk.path }}</td>
{% endif %}
<td class="text-nowrap">
<form class="d-inline" action="{% url 'instances:edit_volume' instance.id %}" method="post" role="form" aria-label="Edit instance volume form">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% include 'instances/edit_instance_volume.html' with id=forloop.counter0 %}
</form>
<form class="d-inline" action="{% url 'instances:detach_vol' instance.id %}" method="post">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% if instance.status == 5 %}
<button type="submit" class="btn btn-sm btn-secondary" value="{{ disk.dev }}" title="{% trans "Detach" %}" onclick="return confirm('{% trans "Are you sure to detach volume?" %}')">
{% bs_icon 'eject' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled" disabled value="{{ disk.dev }}" title="{% trans "Detach" %}" onclick="return confirm('{% trans "Are you sure? This may lead data corruption!" %}')">
{% bs_icon 'eject' %}
</button>
{% endif %}
</form>
<form class="d-inline" action="{% url 'instances:delete_vol' instance.id %}" method="post">
{% csrf_token %}
<input type="hidden" name="path" value="{{ disk.path }}">
<input type="hidden" name="dev" value="{{ disk.dev }}">
<input type="hidden" name="storage" value="{{ disk.storage }}">
<input type="hidden" name="name" value="{{ disk.image }}">
{% if instance.status == 5 %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure to delete volume?" %}')">
{% bs_icon 'trash' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled" disabled title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure? This may lead data corruption!" %}')">
{% bs_icon 'trash' %}
</button>
{% endif %}
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="network">
@ -352,165 +354,167 @@
<div class="row mt-3">
<div class="col-lg-12 mt-3">
<h5 class="fw-bold">{% trans "Network Devices" %}</h5>
<table class="table">
<thead>
<tr>
<th scope="col">{% trans 'Name' %}</th>
<th scope="col" class="d-none d-table-cell d-sm-table-cell" colspan="2">{% trans 'Info' %}</th>
<th scope="colgroup" colspan="3" class="col-sm-2">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody>
{% for network in instance.config_networks %}
<tr>
<td rowspan="2">eth{{ forloop.counter0 }}({{ network.target|default:"no target" }})
<form action="{% url 'instances:set_link_state' instance.id %}" method="post" aria-label="set instance link state form">
{% csrf_token %}
<input name="mac" value="{{ network.mac }}" hidden/>
<input name="set_link_state" value="{{ network.state }}" hidden/>
<input type="checkbox" {% if network.state == 'up' %} checked{% endif %} onclick='submit();' />
<strong>{% trans 'active' %}</strong>
<small>{{ network.type }}</small>
</form>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'MAC' %}</span>
<input type="text" class="form-control" value="{{ network.mac }}" aria-label="mac" aria-describedby="mac" readonly>
</div>
</td>
<td class="d-none d-table-cell">
<div class="input-group">
<span class="input-group-text">{% trans 'Filter' %}</span>
<input type="text" class="form-control" value="{{ network.filterref|default:'None' }}" aria-label="filter" aria-describedby="filter" readonly>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'Source' %}</span>
<input type="text" class="form-control" value="{{ network.nic }}" aria-label="source" aria-describedby="source" readonly>
</div>
</td>
<td>
<form action="{% url 'instances:change_network' instance.id %}" method="post" name="edit_network{{ forloop.counter0 }}" role="form">{% csrf_token %}
<button class="btn btn-sm btn-primary"
type="button"
title="{% trans "Edit NIC" %}"
data-bs-target="#editInstanceNetwork{{ forloop.counter0 }}"
data-bs-toggle="modal">
<span aria-hidden="true">{% bs_icon 'pencil-square' %} </span>
</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">{% trans 'Name' %}</th>
<th scope="col" class="d-none d-table-cell d-sm-table-cell" colspan="2">{% trans 'Info' %}</th>
<th scope="colgroup" colspan="3" class="col-sm-2">{% trans 'Actions' %}</th>
</tr>
</thead>
<tbody>
{% for network in instance.config_networks %}
<tr>
<td rowspan="2">eth{{ forloop.counter0 }}({{ network.target|default:"no target" }})
<form action="{% url 'instances:set_link_state' instance.id %}" method="post" aria-label="set instance link state form">
{% csrf_token %}
<input name="mac" value="{{ network.mac }}" hidden/>
<input name="set_link_state" value="{{ network.state }}" hidden/>
<input type="checkbox" {% if network.state == 'up' %} checked{% endif %} onclick='submit();' />
<strong>{% trans 'active' %}</strong>
<small>{{ network.type }}</small>
</form>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'MAC' %}</span>
<input type="text" class="form-control" value="{{ network.mac }}" aria-label="mac" aria-describedby="mac" readonly>
</div>
</td>
<td class="d-none d-table-cell">
<div class="input-group">
<span class="input-group-text">{% trans 'Filter' %}</span>
<input type="text" class="form-control" value="{{ network.filterref|default:'None' }}" aria-label="filter" aria-describedby="filter" readonly>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'Source' %}</span>
<input type="text" class="form-control" value="{{ network.nic }}" aria-label="source" aria-describedby="source" readonly>
</div>
</td>
<td>
<form action="{% url 'instances:change_network' instance.id %}" method="post" name="edit_network{{ forloop.counter0 }}" role="form">{% csrf_token %}
<button class="btn btn-sm btn-primary"
type="button"
title="{% trans "Edit NIC" %}"
data-bs-target="#editInstanceNetwork{{ forloop.counter0 }}"
data-bs-toggle="modal">
<span aria-hidden="true">{% bs_icon 'pencil-square' %} </span>
</button>
<div class="modal fade" id="editInstanceNetwork{{ forloop.counter0 }}" role="dialog" aria-labelledby="editInstanceNetworkLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Edit Instance Network" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<label class="col-form-label">{% trans "MAC" %}</label>
<div class="input-group">
<input class="form-control" type="text" name="net-old-mac-{{ forloop.counter0 }}" value="{{ network.mac }}" readonly/>
<input class="form-control" type="text" name="net-mac-{{ forloop.counter0 }}" value="{{ network.mac }}"/>
<div class="modal fade" id="editInstanceNetwork{{ forloop.counter0 }}" role="dialog" aria-labelledby="editInstanceNetworkLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Edit Instance Network" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<label class="col-form-label">{% trans "MAC" %}</label>
<div class="input-group">
<input class="form-control" type="text" name="net-old-mac-{{ forloop.counter0 }}" value="{{ network.mac }}" readonly/>
<input class="form-control" type="text" name="net-mac-{{ forloop.counter0 }}" value="{{ network.mac }}"/>
</div>
</div>
<div class="row">
<label class="col-form-label">{% trans "Net Source" %}</label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.nic }}" readonly/>
<select class="form-select" name="net-source-{{ forloop.counter0 }}">
{% for c_net in networks_host %}
<option value="net:{{ c_net }}" {% if c_net == network.nic %} selected {% endif %}>{% trans 'Network' %} {{ c_net }}</option>
{% endfor %}
{% for c_iface in interfaces_host %}
<option value="iface:{{ c_iface }}" {% if c_iface == network.nic %} selected {% endif %}>{% trans 'Interface' %} {{ c_iface }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<label class="col-form-label">{% trans "NWFilter" %}</label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.filterref }}" readonly/>
<select class="form-select" name="net-nwfilter-{{ forloop.counter0 }}">
<option value="">{% trans "None" %}</option>
{% for c_filters in nwfilters_host %}
<option value="{{ c_filters }}" {% if c_filters == network.filterref %} selected {% endif %}>{{ c_filters }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<label class="col-form-label">{% trans "Model" %} </label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.model }}" readonly/>
<select class="form-select" name="net-model-{{ forloop.counter0 }}">
{% for model in net_models_host %}
<option value="{{ model }}" {% if model == network.model %} selected {% endif %}>{{ model }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-form-label">{% trans "Net Source" %}</label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.nic }}" readonly/>
<select class="form-select" name="net-source-{{ forloop.counter0 }}">
{% for c_net in networks_host %}
<option value="net:{{ c_net }}" {% if c_net == network.nic %} selected {% endif %}>{% trans 'Network' %} {{ c_net }}</option>
{% endfor %}
{% for c_iface in interfaces_host %}
<option value="iface:{{ c_iface }}" {% if c_iface == network.nic %} selected {% endif %}>{% trans 'Interface' %} {{ c_iface }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<label class="col-form-label">{% trans "NWFilter" %}</label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.filterref }}" readonly/>
<select class="form-select" name="net-nwfilter-{{ forloop.counter0 }}">
<option value="">{% trans "None" %}</option>
{% for c_filters in nwfilters_host %}
<option value="{{ c_filters }}" {% if c_filters == network.filterref %} selected {% endif %}>{{ c_filters }}</option>
{% endfor %}
</select>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
<button class="btn btn-success" name="change_network" title="{% trans "Apply network changes" %}">{% trans "Apply" %}</button>
</div>
<div class="row">
<label class="col-form-label">{% trans "Model" %} </label>
<div class="input-group">
<input class="form-control" type="text" value="{{ network.model }}" readonly/>
<select class="form-select" name="net-model-{{ forloop.counter0 }}">
{% for model in net_models_host %}
<option value="{{ model }}" {% if model == network.model %} selected {% endif %}>{{ model }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">{% trans 'Close' %}</button>
<button class="btn btn-success" name="change_network" title="{% trans "Apply network changes" %}">{% trans "Apply" %}</button>
</div>
</div>
</div>
</form>
</td>
<td>
<form action="{% url 'instances:set_qos' instance.id %}" method="post" name="add_qos{{ forloop.counter0 }}" role="form" aria-label="Add network qos form">
{% csrf_token %}
<input type="text" name="net-mac-{{ forloop.counter0 }}" value="{{ network.mac }}" hidden/>
{% include 'add_network_qos.html' with id=forloop.counter0 %}
</form>
</td>
<td>
<form action="{% url 'instances:delete_network' instance.id %}" method="post" name="delete_network" role="form">{% csrf_token %}
<button class="btn btn-sm btn-danger" value="{{ network.mac }}" name="delete_network" title="{% trans "Delete Device" %}"
onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'IPv4' %}</span>
<input type="text" class="form-control" value="{% for ipv4 in network.ipv4|default:'unknown' %}{{ ipv4 }}{% endfor %}" aria-label="ipv4" aria-describedby="ipv4" readonly>
</div>
</form>
</td>
<td>
<form action="{% url 'instances:set_qos' instance.id %}" method="post" name="add_qos{{ forloop.counter0 }}" role="form" aria-label="Add network qos form">
{% csrf_token %}
<input type="text" name="net-mac-{{ forloop.counter0 }}" value="{{ network.mac }}" hidden/>
{% include 'add_network_qos.html' with id=forloop.counter0 %}
</form>
</td>
<td>
<form action="{% url 'instances:delete_network' instance.id %}" method="post" name="delete_network" role="form">{% csrf_token %}
<button class="btn btn-sm btn-danger" value="{{ network.mac }}" name="delete_network" title="{% trans "Delete Device" %}"
onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'IPv4' %}</span>
<input type="text" class="form-control" value="{% for ipv4 in network.ipv4|default:'unknown' %}{{ ipv4 }}{% endfor %}" aria-label="ipv4" aria-describedby="ipv4" readonly>
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'IPv6' %}</span>
<input type="text" class="form-control" value="{% for ipv6 in network.ipv6|default:'unknown' %}{{ ipv6 }}{% endfor %}" aria-label="ipv6" aria-describedby="ipv6" readonly>
</div>
</td>
<td colspan="3">
<div class="input-group">
<span class="input-group-text px-2">{% trans 'Model' %}</span>
<input type="text" class="form-control px-2" value="{{ network.model }}" aria-label="model" aria-describedby="model" readonly>
</div>
</td>
</tr>
<tr>
<td class="py-1 bg-primary text-white" colspan="9">
{% if network.type == 'direct' %}
<small>{% trans 'In most configurations, macvtap does not work for host to guest network communication' %}</small>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
<td>
<div class="input-group">
<span class="input-group-text">{% trans 'IPv6' %}</span>
<input type="text" class="form-control" value="{% for ipv6 in network.ipv6|default:'unknown' %}{{ ipv6 }}{% endfor %}" aria-label="ipv6" aria-describedby="ipv6" readonly>
</div>
</td>
<td colspan="3">
<div class="input-group">
<span class="input-group-text px-2">{% trans 'Model' %}</span>
<input type="text" class="form-control px-2" value="{{ network.model }}" aria-label="model" aria-describedby="model" readonly>
</div>
</td>
</tr>
<tr>
<td class="py-1 bg-primary text-white" colspan="9">
{% if network.type == 'direct' %}
<small>{% trans 'In most configurations, macvtap does not work for host to guest network communication' %}</small>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
@ -520,57 +524,59 @@
<p><strong>{% trans "QoS Configuration" %}</strong></p>
</div>
<div class="col-12 col-sm-12">
<table class="table table-hover">
<thead>
<tr class="d-flex">
<th scope="col" class="col-2">{% trans "MAC" %}/{% trans "Direction" %}</th>
<th scope="col" class="col-2">{% trans "Average" %}</th>
<th scope="col" class="col-3">{% trans "Peak" %}</th>
<th scope="col" class="col-3">{% trans "Burst" %}</th>
<th scope="col" class="col-2">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for q, attrs in instance.config_qos.items %}
{% for att in attrs %}
<tr class="d-flex">
<form action="{% url 'instances:set_qos' instance.id %}" method="post" role="form" aria-label="Instance QoS configuration form">
{% csrf_token %}
<td class="col-2"><label class="col-form-label">{{ q }} {{ att.direction | capfirst }}</label></td>
<td class="col-2"><input id="qos_average" class="form-control" name="qos_average"
value="{{ att.average|default:'' }}"/>
</td>
<td class="col-3"><input id="qos_peak" class="form-control" name="qos_peak"
value="{{ att.peak|default:'' }}"/>
</td>
<td class="col-3"><input id="qos_burst" class="form-control" name="qos_burst"
value="{{ att.burst|default:'' }}"/>
</td>
<td class="col-sm-2">
<input name="qos_direction" value="{{ att.direction }}" hidden/>
<input name="net-mac" value="{{ q }}" hidden/>
<button type="submit" class="btn btn-sm btn-primary"
name="set_qos" data-bs-toggle="modal"
title="{% trans "Edit QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'save' %} </span>
</button>
</form>
<form action="{% url 'instances:unset_qos' instance.id %}" method="post" role="form" aria-label="Instance QoS configuration form">
{% csrf_token %}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr class="d-flex">
<th scope="col" class="col-2">{% trans "MAC" %}/{% trans "Direction" %}</th>
<th scope="col" class="col-2">{% trans "Average" %}</th>
<th scope="col" class="col-3">{% trans "Peak" %}</th>
<th scope="col" class="col-3">{% trans "Burst" %}</th>
<th scope="col" class="col-2">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for q, attrs in instance.config_qos.items %}
{% for att in attrs %}
<tr class="d-flex">
<form action="{% url 'instances:set_qos' instance.id %}" method="post" role="form" aria-label="Instance QoS configuration form">
{% csrf_token %}
<td class="col-2"><label class="col-form-label">{{ q }} {{ att.direction | capfirst }}</label></td>
<td class="col-2"><input id="qos_average" class="form-control" name="qos_average"
value="{{ att.average|default:'' }}"/>
</td>
<td class="col-3"><input id="qos_peak" class="form-control" name="qos_peak"
value="{{ att.peak|default:'' }}"/>
</td>
<td class="col-3"><input id="qos_burst" class="form-control" name="qos_burst"
value="{{ att.burst|default:'' }}"/>
</td>
<td class="col-sm-2">
<input name="qos_direction" value="{{ att.direction }}" hidden/>
<input name="net-mac" value="{{ q }}" hidden/>
<button type="submit" class="btn btn-sm btn-danger"
name="unset_qos"
title="{% trans "Delete QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
<button type="submit" class="btn btn-sm btn-primary"
name="set_qos" data-bs-toggle="modal"
title="{% trans "Edit QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'save' %} </span>
</button>
</form>
</td>
</tr>
</form>
<form action="{% url 'instances:unset_qos' instance.id %}" method="post" role="form" aria-label="Instance QoS configuration form">
{% csrf_token %}
<input name="qos_direction" value="{{ att.direction }}" hidden/>
<input name="net-mac" value="{{ q }}" hidden/>
<button type="submit" class="btn btn-sm btn-danger"
name="unset_qos"
title="{% trans "Delete QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</tbody>
</table>
</tbody>
</table>
</div>
</div>
</div>
{% endif %}

View file

@ -74,28 +74,30 @@
<div class="col-sm-12">
<h5>{% trans 'Slaves' %}</h5>
{% if itype == 'bridge' %}
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">{% trans 'MAC' %}</th>
<th scope="col">{% trans 'Name' %}</th>
<th scope="col">{% trans 'Type' %}</th>
<th scope="col">{% trans 'Speed' %}</th>
<th scope="col">{% trans 'State' %}</th>
</tr>
</thead>
<tbody>
{% for iface in slave_ifaces %}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<td>{{ iface.mac }}</td>
<td>{{ iface.name }}</td>
<td>{{ iface.type }}</td>
<td>{{ iface.speed }}</td>
<td>{{ iface.state }}</td>
<th scope="col">{% trans 'MAC' %}</th>
<th scope="col">{% trans 'Name' %}</th>
<th scope="col">{% trans 'Type' %}</th>
<th scope="col">{% trans 'Speed' %}</th>
<th scope="col">{% trans 'State' %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for iface in slave_ifaces %}
<tr>
<td>{{ iface.mac }}</td>
<td>{{ iface.name }}</td>
<td>{{ iface.type }}</td>
<td>{{ iface.speed }}</td>
<td>{{ iface.state }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
</div>

View file

@ -167,40 +167,42 @@
</div>
</div>
<table id="ipv4_table" class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "MAC" %}</th>
<th scope="col">{% trans "Address" %}</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for fix4 in ipv4_fixed_address %}
<tr>
<form method="post" role="form" aria-label="IPv4 edit/delete form">{% csrf_token %}
<td><input class="form-control" value="{{ fix4.mac }}" name="mac" readonly/></td>
<td><input class="form-control" value="{{ fix4.ip }}" name="address" /></td>
<td><input class="form-control" value="{{ fix4.name }}" name="name" /></td>
<td class="text-nowrap">
<input hidden name="family" value="ipv4"/>
<button type="submit" class="btn btn-sm btn-primary"
name="modify_fixed_address"
title="{% trans "Edit entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'save' %}
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="delete_fixed_address"
title="{% trans "Delete entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</td>
</form>
<div class="table-responsive">
<table id="ipv4_table" class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "MAC" %}</th>
<th scope="col">{% trans "Address" %}</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for fix4 in ipv4_fixed_address %}
<tr>
<form method="post" role="form" aria-label="IPv4 edit/delete form">{% csrf_token %}
<td><input class="form-control" value="{{ fix4.mac }}" name="mac" readonly/></td>
<td><input class="form-control" value="{{ fix4.ip }}" name="address" /></td>
<td><input class="form-control" value="{{ fix4.name }}" name="name" /></td>
<td class="text-nowrap">
<input hidden name="family" value="ipv4"/>
<button type="submit" class="btn btn-sm btn-primary"
name="modify_fixed_address"
title="{% trans "Edit entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'save' %}
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="delete_fixed_address"
title="{% trans "Delete entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
@ -276,40 +278,42 @@
<button type="button" class="btn btn-secondary" id="filter_clear_ipv6">{% trans 'Clear' %}</button>
</div>
</div>
<table id="ipv6_table" class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "ID" %}</th>
<th scope="col">{% trans "Address" %}</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for fix6 in ipv6_fixed_address %}
<div class="table-responsive">
<table id="ipv6_table" class="table table-hover">
<thead>
<tr>
<form method="post" role="form" aria-label="IP v6 edit/delete form">{% csrf_token %}
<td><input class="form-control" value="{{ fix6.id }}" name="id" readonly/></td>
<td><input class="form-control" value="{{ fix6.ip }}" name="address" /></td>
<td><input class="form-control" value="{{ fix6.name }}" name="name" /></td>
<td class="text-nowrap">
<input hidden name="family" value="ipv6"/>
<button type="submit" class="btn btn-sm btn-primary"
name="modify_fixed_address"
title="{% trans "Edit entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'save' %} </span>
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="delete_fixed_address"
title="{% trans "Delete entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'trash' %} </span>
</button>
</td>
</form>
<th scope="col">{% trans "ID" %}</th>
<th scope="col">{% trans "Address" %}</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for fix6 in ipv6_fixed_address %}
<tr>
<form method="post" role="form" aria-label="IP v6 edit/delete form">{% csrf_token %}
<td><input class="form-control" value="{{ fix6.id }}" name="id" readonly/></td>
<td><input class="form-control" value="{{ fix6.ip }}" name="address" /></td>
<td><input class="form-control" value="{{ fix6.name }}" name="name" /></td>
<td class="text-nowrap">
<input hidden name="family" value="ipv6"/>
<button type="submit" class="btn btn-sm btn-primary"
name="modify_fixed_address"
title="{% trans "Edit entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'save' %} </span>
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="delete_fixed_address"
title="{% trans "Delete entry" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span>{% bs_icon 'trash' %} </span>
</button>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
@ -323,48 +327,50 @@
<h5 class="page-header">{% trans "QoS Configuration" %}</h5>
<div class="col-sm-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "Direction" %}</th>
<th scope="col">{% trans "Average" %}</th>
<th scope="col">{% trans "Peak" %}</th>
<th scope="col">{% trans "Burst" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for q, att in qos.items %}
<form method="post" role="form" aria-label="QoS configuration form">{% csrf_token %}
<tr>
<td><label class="col-form-label">{{ q | capfirst }}</label></td>
<td><input id="qos_average" class="form-control" name="qos_average"
value="{{ att.average|default:'' }}"/>
</td>
<td><input id="qos_peak" class="form-control" name="qos_peak"
value="{{ att.peak|default:'' }}"/>
</td>
<td><input id="qos_burst" class="form-control" name="qos_burst"
value="{{ att.burst|default:'' }}"/>
</td>
<td class="text-nowrap">
<input name="qos_direction" value="{{ q }}" hidden/>
<button type="submit" class="btn btn-sm btn-primary"
name="set_qos" data-bs-toggle="modal"
title="{% trans "Edit QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'save' %}
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="unset_qos"
title="{% trans "Delete QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</td>
</tr>
</form>
{% endfor %}
</tbody>
</table>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "Direction" %}</th>
<th scope="col">{% trans "Average" %}</th>
<th scope="col">{% trans "Peak" %}</th>
<th scope="col">{% trans "Burst" %}</th>
<th scope="col">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for q, att in qos.items %}
<form method="post" role="form" aria-label="QoS configuration form">{% csrf_token %}
<tr>
<td><label class="col-form-label">{{ q | capfirst }}</label></td>
<td><input id="qos_average" class="form-control" name="qos_average"
value="{{ att.average|default:'' }}"/>
</td>
<td><input id="qos_peak" class="form-control" name="qos_peak"
value="{{ att.peak|default:'' }}"/>
</td>
<td><input id="qos_burst" class="form-control" name="qos_burst"
value="{{ att.burst|default:'' }}"/>
</td>
<td class="text-nowrap">
<input name="qos_direction" value="{{ q }}" hidden/>
<button type="submit" class="btn btn-sm btn-primary"
name="set_qos" data-bs-toggle="modal"
title="{% trans "Edit QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'save' %}
</button>
<button type="submit" class="btn btn-sm btn-danger"
name="unset_qos"
title="{% trans "Delete QoS" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
{% bs_icon 'trash' %}
</button>
</td>
</tr>
</form>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
{% endblock %}

View file

@ -87,73 +87,77 @@
<div class="row">
<div class="col-12 col-sm-12">
<table class="table table-hover mb-3">
<div class="table-responsive">
<table class="table table-hover mb-3">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">{% trans "Reference" %}</th>
<th scope="col">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for ref in refs %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td>{{ ref }}</td>
<td style="width:30px;">
<form action="" method="post" role="form" aria-label="Delete NWFilter form">{% csrf_token %}
<input type="hidden" name="ref" value="{{ ref }}">
<button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_ref" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}');">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% include 'add_nwf_rule.html' %}
<h5 class="page-header">{% trans "Rules" %}</h5>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">{% trans "Reference" %}</th>
<th scope="col">{% trans "Action" %}</th>
<th scope="col">{% trans "Rule" %}</th>
<th scope="col" class="text-nowrap">{% trans "Action Type" %}</th>
<th scope="col">{% trans "Direction" %}</th>
<th scope="col">{% trans "Priority" %}</th>
<th scope="col">{% trans "Statematch" %}</th>
<th scope="col">{% trans "Directives" %}</th>
<th scope="col" style="width:30px;">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for ref in refs %}
{% for rule in rules %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td>{{ ref }}</td>
<td style="width:30px;">
<form action="" method="post" role="form" aria-label="Delete NWFilter form">{% csrf_token %}
<input type="hidden" name="ref" value="{{ ref }}">
<button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_ref" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}');">
<td>{{ rule.action }}</td>
<td>{{ rule.direction }}</td>
<td>{{ rule.priority }}</td>
<td>{{ rule.statematch }}</td>
<td>{{ rule.directives }}</td>
<td>
<form action="" method="post" role="form" aria-label="Delete NWFilter rule">{% csrf_token %}
<input type="hidden" name="action" value="{{ rule.action }}">
<input type="hidden" name="direction" value="{{ rule.direction }}">
<input type="hidden" name="priority" value="{{ rule.priority }}">
<button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_rule" title="{% trans 'Delete' %}" onclick="return confirm('{% trans "Are you sure?" %}');">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% include 'add_nwf_rule.html' %}
<h5 class="page-header">{% trans "Rules" %}</h5>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">{% trans "Rule" %}</th>
<th scope="col" class="text-nowrap">{% trans "Action Type" %}</th>
<th scope="col">{% trans "Direction" %}</th>
<th scope="col">{% trans "Priority" %}</th>
<th scope="col">{% trans "Statematch" %}</th>
<th scope="col">{% trans "Directives" %}</th>
<th scope="col" style="width:30px;">{% trans "Action" %}</th>
</tr>
</thead>
<tbody>
{% for rule in rules %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td>{{ rule.action }}</td>
<td>{{ rule.direction }}</td>
<td>{{ rule.priority }}</td>
<td>{{ rule.statematch }}</td>
<td>{{ rule.directives }}</td>
<td>
<form action="" method="post" role="form" aria-label="Delete NWFilter rule">{% csrf_token %}
<input type="hidden" name="action" value="{{ rule.action }}">
<input type="hidden" name="direction" value="{{ rule.direction }}">
<input type="hidden" name="priority" value="{{ rule.priority }}">
<button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_rule" title="{% trans 'Delete' %}" onclick="return confirm('{% trans "Are you sure?" %}');">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block script %}

View file

@ -91,97 +91,99 @@
<h5 class="page-header">{% trans "Volumes" %}</h5>
</div>
{% if volumes %}
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Allocated" %}</th>
<th scope="col">{% trans "Size" %}</th>
<th scope="col">{% trans "Format" %}</th>
<th scope="colgroup" data-sortable="false" colspan="2">{% trans "Action" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for volume in volumes %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ volume.name|truncatechars:55 }}</td>
<td>{{ volume.allocation|filesizeformat }}</td>
<td>{{ volume.size|filesizeformat }}</td>
<td>{{ volume.type }}</td>
<td>
<!-- Modal Clone -->
<div class="modal fade" id="Clone{{ forloop.counter }}" tabindex="-1" role="dialog"
aria-labelledby="addHostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Clone image" %} <span class="text-danger">{{ volume.name }}</span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" role="form" aria-label="Clone image file form">{% csrf_token %}{% submission_key %}
<div class="modal-body">
<div class="row">
<label class="col-sm-3 col-form-label">{% trans "Name" %}</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" required pattern="[a-zA-Z0-9\.\-_]+">
<input type="hidden" name="image" value="{{ volume.name }}">
</div>
</div>
<div class="row" id="image_format">
<label class="col-sm-3 col-form-label" for="clone{{ forloop.counter }}_convert">{% trans "Convert" %}</label>
<div class="col-sm-6">
<input class="volume-convert" type="checkbox" name="convert" value="true" id="clone{{ forloop.counter }}_convert">
</div>
</div>
<div class="row format-convert">
<label class="col-sm-3 col-form-label">{% trans "Format" %}</label>
<div class="col-sm-6">
<select name="format" class="form-select image-format">
<option value="raw">{% trans "raw" %}</option>
<option value="qcow">{% trans "qcow" %}</option>
<option value="qcow2">{% trans "qcow2" %}</option>
</select>
</div>
</div>
<div class="row meta-prealloc" style="display: none;">
<label class="col-sm-3 col-form-label">{% trans "Metadata" %}</label>
<div class="col-sm-6">
<input type="checkbox" name="meta_prealloc" value="true">
</div>
</div>
<div class="table-responsive">
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">{% trans "Name" %}</th>
<th scope="col">{% trans "Allocated" %}</th>
<th scope="col">{% trans "Size" %}</th>
<th scope="col">{% trans "Format" %}</th>
<th scope="colgroup" data-sortable="false" colspan="2">{% trans "Action" %}</th>
</tr>
</thead>
<tbody class="searchable">
{% for volume in volumes %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ volume.name|truncatechars:55 }}</td>
<td>{{ volume.allocation|filesizeformat }}</td>
<td>{{ volume.size|filesizeformat }}</td>
<td>{{ volume.type }}</td>
<td>
<!-- Modal Clone -->
<div class="modal fade" id="Clone{{ forloop.counter }}" tabindex="-1" role="dialog"
aria-labelledby="addHostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Clone image" %} <span class="text-danger">{{ volume.name }}</span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
<button type="submit" class="btn btn-primary" name="cln_volume">{% trans "Clone" %}</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
{% if volume.type != "iso" %}
<button class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#Clone{{ forloop.counter }}" title="{% trans "Clone" %}">
{% bs_icon 'files' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled">
{% bs_icon 'files' %}
</button>
{% endif %}
</td>
<td>
<form action="" method="post" role="form" aria-label="Delete volume form" class="confirm-form">{% csrf_token %}
<input type="hidden" name="volname" value="{{ volume.name }}">
<button type="submit" class="btn btn-sm btn-secondary" name="del_volume" title="{% trans "Delete" %}">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<form method="post" role="form" aria-label="Clone image file form">{% csrf_token %}{% submission_key %}
<div class="modal-body">
<div class="row">
<label class="col-sm-3 col-form-label">{% trans "Name" %}</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" placeholder="{% trans "Name" %}" required pattern="[a-zA-Z0-9\.\-_]+">
<input type="hidden" name="image" value="{{ volume.name }}">
</div>
</div>
<div class="row" id="image_format">
<label class="col-sm-3 col-form-label" for="clone{{ forloop.counter }}_convert">{% trans "Convert" %}</label>
<div class="col-sm-6">
<input class="volume-convert" type="checkbox" name="convert" value="true" id="clone{{ forloop.counter }}_convert">
</div>
</div>
<div class="row format-convert">
<label class="col-sm-3 col-form-label">{% trans "Format" %}</label>
<div class="col-sm-6">
<select name="format" class="form-select image-format">
<option value="raw">{% trans "raw" %}</option>
<option value="qcow">{% trans "qcow" %}</option>
<option value="qcow2">{% trans "qcow2" %}</option>
</select>
</div>
</div>
<div class="row meta-prealloc" style="display: none;">
<label class="col-sm-3 col-form-label">{% trans "Metadata" %}</label>
<div class="col-sm-6">
<input type="checkbox" name="meta_prealloc" value="true">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
<button type="submit" class="btn btn-primary" name="cln_volume">{% trans "Clone" %}</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
{% if volume.type != "iso" %}
<button class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#Clone{{ forloop.counter }}" title="{% trans "Clone" %}">
{% bs_icon 'files' %}
</button>
{% else %}
<button class="btn btn-sm btn-secondary disabled">
{% bs_icon 'files' %}
</button>
{% endif %}
</td>
<td>
<form action="" method="post" role="form" aria-label="Delete volume form" class="confirm-form">{% csrf_token %}
<input type="hidden" name="volname" value="{{ volume.name }}">
<button type="submit" class="btn btn-sm btn-secondary" name="del_volume" title="{% trans "Delete" %}">
{% bs_icon 'trash' %}
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="col-lg-12">
<div class="alert alert-warning shadow-sm">

View file

@ -1,6 +1,4 @@
"""Every HTML page a superuser can open has unique element IDs: a repeated
ID makes getElementById, labels and Bootstrap targets reach the first one
only. Pages are rendered on libvirt's test driver."""
"""Every HTML page a superuser can open, rendered on libvirt's test driver."""
from collections import Counter
from unittest.mock import patch
@ -23,8 +21,9 @@ def named_urls(patterns, prefix="", keys=()):
yield prefix + p.name, keys + tuple(p.pattern.regex.groupindex)
class UniqueIdTests(TestCase):
def test_no_page_repeats_an_id(self):
class PageTests(TestCase):
def pages(self):
"""(URL name, parsed page) for every HTML page; asserts the main ones are among them."""
conn = libvirt.open("test:///default")
self.addCleanup(conn.close)
compute = Compute.objects.create(name="testdrv", hostname="localhost", login="", password="", type=4)
@ -49,8 +48,25 @@ class UniqueIdTests(TestCase):
if response.status_code != 200 or not response["Content-Type"].startswith("text/html"):
continue
checked.append(name)
ids = Counter(html.fromstring(response.content).xpath("//@id"))
with self.subTest(page=name):
self.assertEqual({i: n for i, n in ids.items() if n > 1}, {})
yield name, html.fromstring(response.content)
# its pool key names a network, not the storage pool above
response = self.client.get(reverse("network", kwargs={"compute_id": compute.id, "pool": "default"}))
self.assertEqual(response.status_code, 200)
checked.append("network")
yield "network", html.fromstring(response.content)
self.assertTrue({"index", "overview", "instances:instance", "nwfilter"} <= set(checked), checked)
self.assertIn("instances:create_instance", checked)
def test_no_page_repeats_an_id(self):
# a repeated ID makes getElementById, labels and Bootstrap targets reach the first one only
for name, page in self.pages():
ids = Counter(page.xpath("//@id"))
with self.subTest(page=name):
self.assertEqual({i: n for i, n in ids.items() if n > 1}, {})
def test_every_table_scrolls_in_its_own_box(self):
# a wide table scrolls inside .table-responsive instead of widening the page on a phone
for name, page in self.pages():
bare = [t.get("class") for t in page.xpath("//table[not(parent::div[contains(@class, 'table-responsive')])]")]
with self.subTest(page=name):
self.assertEqual(bare, [])