mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
0f778fe9f0
Settings > Disk was a bold title with an unlabelled "+", a CD-ROM row in an input group, and a table whose actions were four alike icons. The owner chose this layout from three rendered options: - Removable media: each CD-ROM drive a card with its device, bus and image, the ISO select and Mount (or Unmount), and Detach; "Add CD-ROM" by the heading. - Disks: a card each; one disk spans the row, two or more sit side by side from md, and the device details are capped at 32rem so values stay near their labels. The capacity large, the used size, the pool and the source path, the device's settings under "Device details" (they were in a popover), and labelled Edit, Move, Detach and Delete (danger) in its footer; "Add disk" by the heading. - While the VM runs, "Add CD-ROM" adds the drive on the SCSI bus, and a SCSI drive can be detached: IDE and SATA drives cannot be plugged into or out of a running VM, SCSI ones can. Adding a drive was disabled while the VM ran. One line says so, and why detaching other drives and detaching or deleting disks waits for a shutdown, instead of each button alone being greyed. The forms, their fields and actions are unchanged. The edit dialog of each disk is titled with its device, and its fields' ids carry the disk's number: the dialogs of two disks had the same ids, and the title was not the dialog's label.
157 lines
11 KiB
HTML
157 lines
11 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
{% if request.user.is_superuser %}
|
|
<a href="#addvol" type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal">{% bs_icon 'plus' %} {% trans "Add disk" %}</a>
|
|
|
|
<!-- Modal pool -->
|
|
<div class="modal fade" id="addvol" tabindex="-1" role="dialog" aria-labelledby="addInstanceVolumeLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Add Instance Volume" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs" aria-label="Disk attach type">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" aria-controls="NewDisk" data-bs-toggle="tab" data-bs-target="#NewDisk" type="button" role="tab" aria-selected="true">
|
|
{% trans 'New Disk' %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" aria-controls="ExistingDisk" data-bs-toggle="tab" data-bs-target="#ExistingDisk" type="button" role="tab" aria-selected="true">
|
|
{% trans 'Existing Disk' %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="NewDisk">
|
|
<form action="{% url 'instances:add_new_vol' instance.id %}" method="post" role="form" aria-label="Add new volume to disk form">{% csrf_token %}
|
|
<div class="modal-body">
|
|
<p class="fw-bold">{% trans "Volume parameters" %}</p>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Storage" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="storage" class="form-select image-format">
|
|
{% for storage in storages_host %}
|
|
<option value="{{ storage }}">{{ storage }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<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\.\-_]+">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Format" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="format" class="form-select image-format">
|
|
{% for format in instance.formats %}
|
|
<option value="{{ format }}" {% if format == default_format %}selected{% endif %}>{% trans format %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Size" %}</label>
|
|
<div class="col-sm-6">
|
|
<input type="text" class="form-control" name="size" value="10" maxlength="5" required pattern="[0-9]+">
|
|
</div>
|
|
<label class="col-sm-1 col-form-label">{% trans "GB" %}</label>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Bus" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="bus" class="form-select image-format">
|
|
{% for bus in bus_host %}
|
|
<option value="{{ bus }}" {% if bus == default_bus %}selected{% endif %}>{% trans bus %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Cache" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="cache" class="form-select image-format">
|
|
{% for mode, name in instance.cache_modes %}
|
|
<option value="{{ mode }}" {% if mode == default_cache %}selected{% endif %}>{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row meta-prealloc">
|
|
<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> <!-- /.modal-body -->
|
|
<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="add_new_vol">{% trans "Add Volume" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane" id="ExistingDisk">
|
|
<form action="{% url 'instances:add_existing_vol' instance.id %}" method="post" role="form" aria-label="Add existing volume to instance form">{% csrf_token %}
|
|
<div class="modal-body">
|
|
<p class="fw-bold">{% trans "Volume parameters" %}</p>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Storage" %}</label>
|
|
<div class="col-sm-6">
|
|
<div class="dropdown">
|
|
<button id="select_storage" class="btn btn-secondary dropdown-toggle form-control" type="button" data-bs-toggle="dropdown">{% trans 'Select Pool' %}...</button>
|
|
<div class="dropdown-menu">
|
|
{% for storage in storages_host %}
|
|
<a class="dropdown-item" href="#" onclick="get_volumes({{ instance.compute.id }}, '{{ storage }}')">{{ storage }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
<input id="selected_storage" name="selected_storage" hidden/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label" >{% trans "Volume" %}</label>
|
|
<div class="col-sm-6">
|
|
<select id="vols" name="vols" class="form-select" disabled>
|
|
<option value="" selected>{% trans 'None' %}</option>
|
|
<!-- populate with javascript -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Bus" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="bus" class="form-select image-format">
|
|
{% for bus in bus_host %}
|
|
<option value="{{ bus }}" {% if bus == default_bus %}selected{% endif %}>{% trans bus %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label class="col-sm-3 col-form-label">{% trans "Cache" %}</label>
|
|
<div class="col-sm-6">
|
|
<select name="cache" class="form-select image-format">
|
|
{% for mode, name in instance.cache_modes %}
|
|
<option value="{{ mode }}" {% if mode == default_cache %}selected{% endif %}>{% trans name %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</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">{% trans "Add Volume" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- /.modal-content -->
|
|
</div> <!-- /.modal-dialog -->
|
|
</div> <!-- /.modal -->
|
|
{% endif %}
|