mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-11 12:46:49 +00:00
561937b31a
The VM page's thirteen inline script blocks and its inline handlers move to static files: instance_page.js (tabs, OS details, clone names and MACs, Add disk dialog, boot order, host devices, migrate plan, console window, switches that send their form), instance_stats.js (charts and the Logs view) and instance_status.js (the reload when the VM's state changes). Their values and messages come as data attributes of the elements they belong to, page-wide ones on #vm-summary; a form marked data-please-wait shows the please-wait dialog. Three blocks that did nothing are dropped: popovers (the page has none), the video model preselection (the server selects it) and the delete form's poll stop (that form is on the destroy page). The HTML sink inventory now also reads the app's own scripts.
84 lines
5.1 KiB
HTML
84 lines
5.1 KiB
HTML
{% load i18n %}
|
|
<div class="tab-pane" id="graphics" role="tabpanel" data-url="{% url 'instances:stats' instance.id %}"
|
|
data-average-over="{% trans "average over" %}" data-in="{% trans "In" %}" data-out="{% trans "Out" %}"
|
|
data-read="{% trans "Read" %}" data-write="{% trans "Write" %}">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
|
|
<p class="small text-body-secondary mb-0 me-auto">
|
|
{% if instance.status == 1 %}
|
|
{% trans "Updates every 5 seconds." %}
|
|
{% else %}
|
|
{% trans "The VM is not running: nothing is measured." %}
|
|
{% endif %}
|
|
</p>
|
|
{% if request.user.is_superuser %}
|
|
<div class="btn-group btn-group-sm" role="tablist" aria-label="{% trans "Stats view" %}">
|
|
<button class="btn btn-outline-secondary active" type="button" data-bs-toggle="tab" data-bs-target="#graphs" role="tab" aria-controls="graphs" aria-selected="true">{% trans "Graphs" %}</button>
|
|
<button class="btn btn-outline-secondary" id="logs-tab" type="button" data-bs-toggle="tab" data-bs-target="#logs" role="tab" aria-controls="logs" aria-selected="false">{% trans "Logs" %}</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="graphs" role="tabpanel">
|
|
<div class="row g-3">
|
|
<section class="col-12 col-md-6">
|
|
<div class="d-flex flex-wrap align-items-baseline gap-2 mb-2">
|
|
<h2 class="h6 mb-0">{% trans "CPU" %}</h2>
|
|
<span><span id="cpuNow"></span> <span class="small text-body-secondary">{% trans "of the host" %}</span></span>
|
|
</div>
|
|
<div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU use, recent readings" %}"></canvas></div>
|
|
</section>
|
|
<section class="col-12 col-md-6">
|
|
<div class="d-flex flex-wrap align-items-baseline gap-2 mb-2">
|
|
<h2 class="h6 mb-0">{% trans "Memory" %}</h2>
|
|
<span id="memNow"></span>
|
|
</div>
|
|
<div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory use, recent readings" %}"></canvas></div>
|
|
</section>
|
|
</div>
|
|
<div class="border-top mt-3 pt-3">
|
|
<div class="row g-3">
|
|
{% for net in instance.networks %}
|
|
<section class="col-12 col-md-6 col-lg-4">
|
|
<h2 class="h6 mb-1">{% trans "Network" %} · {{ net.mac }}</h2>
|
|
<p class="small text-body-secondary mb-2" id="net{{ net.mac }}Now"> </p>
|
|
<div class="chart position-relative"><canvas id="net{{ net.mac }}Chart" data-mac="{{ net.mac }}" role="img" aria-label="{% blocktrans with mac=net.mac %}Network {{ mac }}, recent readings{% endblocktrans %}"></canvas></div>
|
|
</section>
|
|
{% endfor %}
|
|
{% for disk in instance.disks %}
|
|
<section class="col-12 col-md-6 col-lg-4">
|
|
<h2 class="h6 mb-1">{% trans "Disk" %} · {{ disk.dev }}</h2>
|
|
<p class="small text-body-secondary mb-2" id="blk{{ disk.dev }}Now"> </p>
|
|
<div class="chart position-relative"><canvas id="blk{{ disk.dev }}Chart" data-disk="{{ disk.dev }}" role="img" aria-label="{% blocktrans with dev=disk.dev %}Disk {{ dev }}, recent readings{% endblocktrans %}"></canvas></div>
|
|
</section>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if request.user.is_superuser %}
|
|
<div class="tab-pane" id="logs" role="tabpanel">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm align-middle mb-0" id="logs_table" data-url="{% url 'vm_logs' instance.id %}"
|
|
data-empty="{% trans "None" %}" data-failed="{% trans "The logs could not be loaded." %}">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "Date" %}</th>
|
|
<th scope="col">{% trans "User" %}</th>
|
|
<th scope="col">{% trans "Message" %}</th>
|
|
<th scope="col">{% trans "Result" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
<p class="small text-body-secondary mt-2 mb-0">
|
|
{% trans "The latest rows, newest first." %}
|
|
<a href="{% url 'admin:logs' %}?q={{ instance.uuid|urlencode }}">{% trans "All of this VM's logs" %}</a>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|