mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 19:56:48 +00:00
607c8381b4
Each sub-tab (CPU, Memory, Disks) opened on a two-column card that put a heading and a sentence of current values beside the forms, and the CPU tab added two more rows: Live vCPUs as a row of "0 · Fixed / 1 · On" buttons and vCPU hot plug as a select with its own Save. Now each sub-tab opens on the VM's size. CPU: one cell per vCPU up to the maximum, filled when on, with "2 on, up to 4" and the host's logical CPUs; on a running VM with hot-pluggable vCPUs the cells are the buttons that turn them on and off. Memory: a bar of the current memory within the maximum, with the host's memory. Disks: a row per disk with its format, size now and a new size. The forms below keep their names and posts; the CPU fields are disabled while the VM runs, and hot plug is a switch that posts on change. A memory or disk resize returns to its own sub-tab.
134 lines
11 KiB
HTML
134 lines
11 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<div class="tab-pane" id="resize" role="tabpanel">
|
|
{# each resource on its own tab: how much the VM has now within its maximum, and the form that changes it #}
|
|
<div class="card">
|
|
{% if not can_change %}
|
|
<div class="card-body">
|
|
<p class="mb-0">{% trans "You don't have permission for resizing instance" %}</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="card-header bg-transparent pb-0">
|
|
<ul class="nav nav-underline small" role="tablist" aria-label="{% trans "Resources to resize" %}">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="resizevm_cpu-tab" data-bs-toggle="tab" data-bs-target="#resizevm_cpu" type="button" role="tab" aria-controls="resizevm_cpu" aria-selected="true">{% trans "CPU" %}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="resizevm_mem-tab" data-bs-toggle="tab" data-bs-target="#resizevm_mem" type="button" role="tab" aria-controls="resizevm_mem" aria-selected="false">{% trans "Memory" %}</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="resizevm_disk-tab" data-bs-toggle="tab" data-bs-target="#resizevm_disk" type="button" role="tab" aria-controls="resizevm_disk" aria-selected="false">{% trans "Disks" %}</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-content card-body">
|
|
<div class="tab-pane active" id="resizevm_cpu" role="tabpanel" aria-labelledby="resizevm_cpu-tab">
|
|
{# one cell per vCPU up to the maximum, filled when on; a running VM's hot-pluggable ones turn on and off here #}
|
|
{% with toggles=request.user.is_superuser %}
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
|
|
<div class="d-flex flex-wrap gap-1" role="group" aria-label="{% trans "vCPUs" %}">
|
|
{% for cell in instance.vcpu_cells %}
|
|
{% if toggles and instance.status != 5 and instance.vcpus and not cell.fixed %}
|
|
<form action="{% url 'instances:set_vcpu' instance.id %}" method="post">{% csrf_token %}
|
|
<input type="hidden" name="id" value="{{ cell.id }}">
|
|
{% if cell.on %}
|
|
<button type="submit" class="vcpu-cell on" name="set_vcpu" value="False"{% if instance.status == 3 %} disabled{% endif %}>{{ cell.id }}<span class="visually-hidden"> {% trans "on, turn off" %}</span></button>
|
|
{% else %}
|
|
<button type="submit" class="vcpu-cell" name="set_vcpu" value="True">{{ cell.id }}<span class="visually-hidden"> {% trans "off, turn on" %}</span></button>
|
|
{% endif %}
|
|
</form>
|
|
{% else %}
|
|
<span class="vcpu-cell{% if cell.on %} on{% endif %}">{{ cell.id }}<span class="visually-hidden"> {% if cell.on %}{% trans "on" %}{% else %}{% trans "off" %}{% endif %}</span></span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<span class="small">{% blocktrans with cur=instance.cur_vcpu max=instance.vcpu %}{{ cur }} on, up to {{ max }}{% endblocktrans %}</span>
|
|
<span class="small ms-auto text-body-secondary">{% blocktrans with count=vcpu_host %}Host: {{ count }} logical CPUs{% endblocktrans %}</span>
|
|
</div>
|
|
{% if toggles and instance.status != 5 and instance.vcpus %}
|
|
<p class="small text-body-secondary mt-n2 mb-3">{% trans "Click a vCPU to turn it on or off now; the next start keeps it so." %}{% if instance.status == 3 %} {% trans "A paused VM cannot let one go: resume it to turn vCPUs off." %}{% endif %}</p>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<form class="row g-2 align-items-end" action="{% url 'instances:resizevm_cpu' instance.id %}" method="post">{% csrf_token %}
|
|
<div class="col-6 col-sm-3">
|
|
<label class="form-label small mb-1" for="cur_vcpu">{% trans "Current" %}</label>
|
|
<select class="form-select" id="cur_vcpu" name="cur_vcpu" aria-describedby="cpu-help"{% if instance.status != 5 %} disabled{% endif %}>
|
|
{% for cpu in instance.vcpu_range %}<option value="{{ cpu }}"{% if cpu == instance.config_cur_vcpu %} selected{% endif %}>{{ cpu }}</option>{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<label class="form-label small mb-1" for="max_vcpu">{% trans "Maximum" %}</label>
|
|
<select class="form-select" id="max_vcpu" name="vcpu" aria-describedby="cpu-help"{% if instance.status != 5 %} disabled{% endif %}>
|
|
{% for cpu in instance.vcpu_range %}<option value="{{ cpu }}"{% if cpu == instance.config_vcpu %} selected{% endif %}>{{ cpu }}</option>{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-sm-auto ms-sm-auto">
|
|
<button type="submit" class="btn btn-primary resize-act" name="resizevm_cpu"{% if instance.status != 5 %} disabled{% endif %}>{% trans "Resize CPU" %}</button>
|
|
</div>
|
|
</form>
|
|
<p class="small text-body-secondary mt-1 mb-0" id="cpu-help">{% if instance.status == 5 %}{% trans "The VM gets these at its next start." %}{% else %}{% trans "Shut the VM down to change its vCPUs." %}{% endif %}</p>
|
|
{% if request.user.is_superuser %}
|
|
<form class="mt-3" action="{% url 'instances:set_vcpu_hotplug' instance.id %}" method="post">{% csrf_token %}
|
|
<input type="hidden" name="vcpu_hotplug" value="{% if instance.config_vcpu_hotplug %}False{% else %}True{% endif %}">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="vcpu_hotplug" aria-describedby="vcpu-hotplug-help"{% if instance.config_vcpu_hotplug %} checked{% endif %}{% if instance.status != 5 %} disabled{% endif %} data-submit-on-change>
|
|
<label class="form-check-label" for="vcpu_hotplug">{% trans "vCPU hot plug" %}</label>
|
|
</div>
|
|
<p class="small text-body-secondary mb-0" id="vcpu-hotplug-help">{% trans "Lets vCPUs up to the maximum be turned on and off while the VM runs." %}{% if instance.status != 5 %} {% trans "Shut the VM down to change this." %}{% endif %}</p>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
<div class="tab-pane" id="resizevm_mem" role="tabpanel" aria-labelledby="resizevm_mem-tab">
|
|
<div class="d-flex flex-wrap align-items-center gap-2 gap-sm-3 mb-3">
|
|
<div class="memory-bar" aria-hidden="true"><div class="memory-bar-now" style="width: {% widthratio instance.cur_memory instance.memory 100 %}%"></div></div>
|
|
<span class="small">{% blocktrans with cur=instance.cur_memory max=instance.memory %}{{ cur }} MiB of {{ max }} MiB{% endblocktrans %}</span>
|
|
<span class="small ms-auto text-body-secondary">{% blocktrans with total=memory_host|filesizeformat %}Host: {{ total }}{% endblocktrans %}</span>
|
|
</div>
|
|
<form class="row g-2 align-items-end" action="{% url 'instances:resize_memory' instance.id %}" method="post">{% csrf_token %}
|
|
<div class="col-6 col-sm-3">
|
|
<label class="form-label small mb-1" for="cur_memory">{% trans "Current (MiB)" %}</label>
|
|
<input class="form-control" type="number" id="cur_memory" name="cur_memory" min="1" step="1" value="{{ instance.cur_memory }}" aria-describedby="memory-help">
|
|
</div>
|
|
<div class="col-6 col-sm-3">
|
|
<label class="form-label small mb-1" for="max_memory">{% trans "Maximum (MiB)" %}</label>
|
|
{# a running VM keeps its maximum: only the current memory changes #}
|
|
<input class="form-control" type="number" id="max_memory" name="memory" min="1" step="1" value="{{ instance.memory }}" aria-describedby="memory-help"{% if instance.status != 5 %} disabled{% endif %}>
|
|
</div>
|
|
<div class="col-12 col-sm-auto ms-sm-auto">
|
|
<button type="submit" class="btn btn-primary resize-act" name="resizevm_mem">{% trans "Resize memory" %}</button>
|
|
</div>
|
|
</form>
|
|
<p class="small text-body-secondary mt-1 mb-0" id="memory-help">{% if instance.status == 5 %}{% trans "The VM gets these at its next start." %}{% else %}{% trans "The current memory changes now, up to the maximum; shut the VM down to change the maximum." %}{% endif %}</p>
|
|
</div>
|
|
<div class="tab-pane" id="resizevm_disk" role="tabpanel" aria-labelledby="resizevm_disk-tab">
|
|
<p class="small text-body-secondary mb-3" id="disks-grow-help">{% trans "A new size in GiB, larger than the disk's; empty keeps a disk as it is. Disks grow while the VM runs; the guest then grows its partition and file system." %}</p>
|
|
<form action="{% url 'instances:resize_disk' instance.id %}" method="post">{% csrf_token %}
|
|
{% for disk in instance.disks %}
|
|
<div class="row g-2 align-items-center mb-2">
|
|
<label class="col-5 col-sm-3 col-form-label" for="disk_size_{{ disk.dev }}"><span class="fw-semibold">{{ disk.dev }}</span>{% if disk.format %} <span class="small text-body-secondary">{{ disk.format }}</span>{% endif %}</label>
|
|
{% if disk.storage is None %}
|
|
<div class="col"><span class="small text-danger">{% trans "Error getting disk info" %}</span></div>
|
|
{% else %}
|
|
<div class="col-7 col-sm-2 small">{% blocktrans with size=disk.size|filesizeformat %}Now {{ size }}{% endblocktrans %}</div>
|
|
<div class="col-12 col-sm-4">
|
|
<div class="input-group">
|
|
<input class="form-control" type="number" id="disk_size_{{ disk.dev }}" name="disk_size_{{ disk.dev }}" min="1" step="1" placeholder="{% trans "New size" %}" aria-describedby="disks-grow-help">
|
|
<span class="input-group-text">GiB</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
<div class="d-flex justify-content-end">
|
|
{% if instance.status == 1 or instance.status == 3 or instance.status == 5 %}
|
|
<button type="submit" class="btn btn-primary resize-act" name="resizevm_disk">{% trans "Grow disks" %}</button>
|
|
{% else %}
|
|
<button type="button" class="btn btn-primary resize-act" disabled>{% trans "Grow disks" %}</button>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|