mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 20:26:48 +00:00
faa6e4bb14
webvirtcloud.css still carried the upstream panel's rules for what
Bootstrap 5.3 has as utilities and components:
- the page's bottom space (body padding) is pb-5 on base.html's body,
and the console page no longer has to undo it;
- the VM page's action tabs (.action-button, .action-block with a
fixed 65px width) are text-center with a d-block icon; its tab panes
(#power ... #undefine, one rule each) mt-3;
- the bordered sub-tab panes (.tab-pane-bordered, a fixed #eee border
that dark themes could not change) border border-top-0 p-3;
- the search box and header buttons (.search, .btn-header) m-1 and
mt-1; the SSH key select (.keyselect) a form-select;
- the boot order list (.multipleselect, fixed size, #c0c0c0 border) a
list-group of form-check-input items; its unused .multipleselect-on
goes;
- table cells centred by a global rule are align-middle on each table.
Two rules against Bootstrap's behaviour go: menus opened on hover on
wide screens (Bootstrap opens them on a click, and keyboard and touch
users had no hover), and "a { outline: 0 }", which hid the keyboard
focus ring.
The paragraph and page-header margins and the 900px container stay
for a separate change: they set every page's layout.
104 lines
4.8 KiB
HTML
104 lines
4.8 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<div class="tab-pane mt-3" id="graphics" role="tabpanel" >
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist" aria-label="Instance graphs and logs menu">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#graphs" type="button" role="tab" aria-controls="graphs" aria-selected="true">
|
|
{% trans "Real Time" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#logs" type="button" role="tab" aria-controls="logs" aria-selected="false" onclick="update_logs_table();">
|
|
{% trans "Logs" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="graphs">
|
|
<div class="mb-1 card border-success">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{% bs_icon 'arrow-right' %}
|
|
{% trans "CPU Usage" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Usage" %}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1 card border-danger">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{% bs_icon 'arrow-right' %}
|
|
{% trans "Memory Usage" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory Usage" %}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
{% for net in instance.networks %}
|
|
<div class="mb-1 card border-info">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{% bs_icon 'arrow-right' %}
|
|
{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart position-relative"><canvas id="netEth{{ forloop.counter0 }}Chart" role="img" aria-label="{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% for disk in instance.disks %}
|
|
<div class="mb-1 card border-warning">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{% bs_icon 'arrow-right' %}
|
|
{% trans "Disk I/O device" %}: {{ disk.dev }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart position-relative"><canvas id="blk{{ disk.dev }}Chart" role="img" aria-label="{% trans "Disk I/O device" %}: {{ disk.dev }}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="logs">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped align-middle" id="logs_table">
|
|
<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 class="searchable">
|
|
<tr>
|
|
<td colspan="4"><i>{% trans 'None' %}...</i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function update_logs_table() {
|
|
$.getJSON("{% url 'vm_logs' instance.id %}", function(data) {
|
|
// Log messages contain user-entered names (snapshots, disks, clones);
|
|
// insert them as text, never as HTML.
|
|
var tbody = $("#logs_table > tbody").empty();
|
|
$.each(data, function(id, row) {
|
|
$("<tr>")
|
|
.append($("<td>").css("width", "150px").text(row['date']))
|
|
.append($("<td>").text(row['user']))
|
|
.append($("<td>").text(row['message']))
|
|
.append($("<td>").text(row['result']))
|
|
.appendTo(tbody);
|
|
});
|
|
});
|
|
}
|
|
</script>
|