mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 03:36:48 +00:00
935a0e9bdc
The top of a VM's page was one line of values between pipes, an icon for the guest agent and a hidden snapshot count, then a row of big action icons; the host links sat in a bar fixed to the bottom of the window, over the content. One card now holds it all (design chosen by the owner from four): - the name with the state badge, the title under it, and where the VM is: its host and the host's VM list for administrators, the VM list for owners; - OS details (with a connected guest agent) and Refresh; - the guest agent's state in words and the snapshot count; - CPU, memory, each disk with its device name and size, and the IPv4 addresses, labelled; - the page's sections as small labelled pills in the card's footer: one row from 992 px, wrapping below. The page has no other heading: base.html's heading area is a block it leaves out. Each section below it (Power, Access, Resize, Snapshot, Settings, Stats, Destroy) is a card of the same kind, so the page reads as one design (owner's choice of two): its sub-tabs as a small underlined nav in the card's header, its panes in the card's body without their own borders. Buttons are of normal size in the theme's primary colour, and those that cannot be undone (Power Cycle, Force Off, Destroy) in the danger colour. The Stats charts lose their coloured borders. instance_tabs.js finds the Settings tabs by their tablist role. The bottom bar and its setting (VIEW_INSTANCE_DETAIL_BOTTOM_BAR) are removed, and with it the CSS that kept the old Settings tabs on one line.
159 lines
11 KiB
HTML
159 lines
11 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
{% if request.user.is_superuser %}
|
|
<a href="#addvol" type="button" class="btn btn-primary float-end" data-bs-toggle="modal" title="{% trans "Add Volume" %}">
|
|
<span aria-hidden="true">{% bs_icon 'plus'%} </span>
|
|
</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 %}
|