mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-11 04: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.
155 lines
9.5 KiB
HTML
155 lines
9.5 KiB
HTML
{% load i18n %}
|
|
<div class="tab-pane active mt-3" id="power" role="tabpanel">
|
|
{% if not can_power %}
|
|
<p>{% trans "Only the owners of this instance and administrators can change its power state." %}</p>
|
|
{% else %}
|
|
<!-- Nav tabs -->
|
|
<div class="card">
|
|
<div class="card-header bg-transparent pb-0">
|
|
<ul class="nav nav-underline small" role="tablist" aria-label="Instance power actions">
|
|
{% if instance.status == 1 or instance.status == 2 %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#poweroff" type="button" role="tab" aria-controls="poweroff" aria-selected="true">
|
|
{% trans "Power Off" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#powercycle" type="button" role="tab" aria-controls="powercycle" aria-selected="false">
|
|
{% trans "Power Cycle" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#powerforce" type="button" role="tab" aria-controls="powerforce" aria-selected="false">
|
|
{% trans "Force Off" %}
|
|
</button>
|
|
</li>
|
|
{% if request.user.is_superuser %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#suspend" type="button" role="tab" aria-controls="suspend" aria-selected="false">
|
|
{% trans "Suspend" %}
|
|
</button>
|
|
</li>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if instance.status == 3 %}
|
|
{% if request.user.is_superuser %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#resume" type="button" role="tab" aria-controls="resume" aria-selected="false">
|
|
{% trans "Resume" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#powerforce" type="button" role="tab" aria-controls="powerforce" aria-selected="false">
|
|
{% trans "Force Off" %}
|
|
</button>
|
|
</li>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if instance.status == 4 or instance.status == 6 or instance.status == 7 %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#powerforce" type="button" role="tab" aria-controls="powerforce" aria-selected="true">
|
|
{% trans "Force Off" %}
|
|
</button>
|
|
</li>
|
|
{% endif %}
|
|
{% if instance.status == 5 %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#boot" type="button" role="tab" aria-controls="boot" aria-selected="true">
|
|
{% trans "Power On" %}
|
|
</button>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content card-body">
|
|
{% if instance.status == 1 or instance.status == 2 %}
|
|
<div class="tab-pane active" id="poweroff" role="tabpanel" aria-labelledby="poweroff-tab">
|
|
<p>{% trans "This action sends an ACPI shutdown signal to the instance." %}</p>
|
|
<form action="{% url 'instances:poweroff' instance.id %}" method="post" role="form" aria-label="Power off instance form">
|
|
{% csrf_token %}
|
|
<input type="submit" name="poweroff" class="btn btn-primary float-end" value="{% trans "Power Off" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane" id="powercycle" role="tabpanel" aria-labelledby="powercycle-tab">
|
|
<p>{% trans "This action forcibly powers off and start the instance and may cause data corruption." %}</p>
|
|
<form action="{% url 'instances:powercycle' instance.id %}" method="post" role="form" aria-label="Power cycle instance form">{% csrf_token %}
|
|
<input type="submit" name="powercycle" class="btn btn-danger float-end" value="{% trans "Power Cycle" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
|
|
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
|
|
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown instance form">
|
|
{% csrf_token %}
|
|
<input type="submit" name="powerforce" class="btn btn-danger float-end" value="{% trans "Force Off" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% if request.user.is_superuser %}
|
|
<div class="tab-pane" id="suspend" role="tabpanel" aria-labelledby="suspend-tab">
|
|
<p>{% trans "This action suspends the instance." %}</p>
|
|
<form action="{% url 'instances:suspend' instance.id %}" method="post" role="form" aria-label="Suspend instance form">{% csrf_token %}
|
|
<input type="submit" name="suspend" class="btn btn-primary float-end" value="{% trans "Suspend" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if instance.status == 3 %}
|
|
{% if request.user.is_superuser %}
|
|
<div class="tab-pane active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
|
|
<p>{% trans "This action restore the instance after suspend." %}</p>
|
|
<form action="{% url 'instances:resume' instance.id %}" method="post" role="form" aria-label="Resume instance from suspension form">{% csrf_token %}
|
|
<input type="submit" name="resume" class="btn btn-primary float-end" value="{% trans "Resume" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
<div class="tab-pane" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
|
|
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
|
|
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown form">{% csrf_token %}
|
|
<input type="submit" name="powerforce" class="btn btn-danger float-end" value="{% trans "Force Off" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div class="tab-pane active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
|
|
<p>{% trans "Administrator blocked your instance." %}</p>
|
|
<form action="{% url 'instances:resume' instance.id %}" method="post" role="form" aria-label="Resume instance form">{% csrf_token %}
|
|
<button class="btn btn-primary disabled float-end">{% trans "Resume" %}</button>
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if instance.status == 4 or instance.status == 6 or instance.status == 7 %}
|
|
{# shutting down, crashed or suspended by the guest: a forced power off ends it, then it can be started #}
|
|
<div class="tab-pane active" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
|
|
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
|
|
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown instance form">
|
|
{% csrf_token %}
|
|
<input type="submit" name="powerforce" class="btn btn-danger float-end" value="{% trans "Force Off" %}">
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% if instance.status == 5 %}
|
|
<div class="tab-pane active" id="boot" role="tabpanel" aria-labelledby="boot-tab">
|
|
<p>{% trans "Click on Power On button to start this instance." %}</p>
|
|
<form action="{% url 'instances:poweron' instance.id %}" method="post" role="form" aria-label="Start instance form">
|
|
{% csrf_token %}
|
|
{% if instance.is_template %}
|
|
<p>{% trans "Template instance cannot be started." %}</p>
|
|
<input type="submit" name="poweron" class="btn btn-primary float-end disabled" value="{% trans "Power On" %}">
|
|
{% else %}
|
|
<input type="submit" name="poweron" class="btn btn-primary float-end" onclick="showPleaseWaitDialog()" value="{% trans "Power On" %}">
|
|
{% endif %}
|
|
<div class="clearfix"></div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|