mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-11 04:36:48 +00:00
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>
121 lines
No EOL
5.5 KiB
HTML
121 lines
No EOL
5.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load operations %}
|
|
{% load bootstrap_icons %}
|
|
{% block title %}{% trans "Instances" %} - {{ compute.name }}{% endblock %}
|
|
{% block style %}
|
|
<link rel="stylesheet" href="{% static "css/sortable-theme-bootstrap.css" %}" />
|
|
{% endblock %}
|
|
{% block page_heading %}{{ compute.name }} - {% trans "Instances" %}{% endblock page_heading %}
|
|
|
|
{% block page_heading_extra %}
|
|
<a href="{% url 'instances:create_instance_select_type' compute.id %}"
|
|
class="btn btn-success btn-header float-end" title="{% trans "New Instance" %}">
|
|
{% bs_icon 'plus-circle-fill' %}
|
|
</a>
|
|
{% if instances %}
|
|
{% include 'search_block.html' %}
|
|
{% endif %}
|
|
{% endblock page_heading_extra %}
|
|
|
|
{% block content %}
|
|
<div id="job-panel" aria-live="polite"></div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb shadow-sm">
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<span class="fw-bold">{% bs_icon 'server' %} {% trans "Instances" %}</span>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
{% if compute.status is not True %}
|
|
<div class="alert alert-danger shadow-sm">
|
|
{% trans 'Problem occurred with host' %} {{ compute.name }}: {{ compute.connection_error }}
|
|
</div>
|
|
{% endif %}
|
|
{% if not instances %}
|
|
{% if compute.status is True %}
|
|
<div class="alert alert-warning shadow-sm fade show">
|
|
{% bs_icon 'exclamation-triangle' %} <strong>{% trans "Warning" %}:</strong>
|
|
{% trans "Hypervisor doesn't have any Instances" %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<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>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script src="{% static 'js/poll.js' %}"></script>
|
|
{% job_panel_script job_resource %}
|
|
<script src="{% static "js/sortable.min.js" %}"></script>
|
|
<script src="{% static 'js/filter-table.js' %}"></script>
|
|
{% endblock %} |