mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 11:46:49 +00:00
86c708ed68
Eleven host pages (overview, instances, storages, networks, interfaces, nwfilters, secrets and their item pages) each carried their own copy of the links to the host's sections, as a breadcrumb: the sections are siblings, not a path, and on a phone the separators were left at the start of wrapped lines. The item pages marked no section at all. computes/host_nav.html is the one nav, labelled "Host sections": pills that wrap, the page's section marked active, with aria-current="page" on the section's own page and "true" on an item of it.
132 lines
6 KiB
HTML
132 lines
6 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load bootstrap_icons %}
|
|
|
|
{% block title %}{% trans "Overview" %} - {{ compute.name }}{% endblock %}
|
|
|
|
{% block page_heading %}{{ compute.name }}{% endblock page_heading %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
{% include "computes/host_nav.html" with section="overview" %}
|
|
</div>
|
|
|
|
<div class="shadow-sm">
|
|
<h3 class="page-header">{% trans "Basic details" %}</h3>
|
|
<dl class="mx-3 row">
|
|
<dt class="col-3">{% trans "Hostname" %}</dt>
|
|
<dd class="col-9">{{ hostname }}</dd>
|
|
<dt class="col-3">{% trans "Hypervisors" %}</dt>
|
|
<dd class="col-9">
|
|
<div class="dropdown">
|
|
{% for arch, hpv in hypervisor.items|slice:":4" %}
|
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvArchDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ arch }}
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="hpvArchDrop{{ forloop.counter0 }}">
|
|
{% for h in hpv %}
|
|
<a class="dropdown-item" href="#">{{ h }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="dropdown">
|
|
{% if hypervisor.items|length > 4 %}
|
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown">
|
|
{{ hypervisor.items|slice:"4:"|length }} {% trans 'more' %}...
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="hpvDrop{{ forloop.counter0 }}" role="menu">
|
|
{% for arc in hypervisor.keys|slice:"4:" %}
|
|
<a class="dropdown-item" tabindex="-1" href="#">{{ arc }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</dd>
|
|
<dt class="col-3">{% trans "Emulator" %}</dt>
|
|
<dd class="col-9">{{ emulator }}</dd>
|
|
<dt class="col-3">{% trans "Version" %}</dt>
|
|
<dd class="col-9">
|
|
<span class="badge bg-secondary">{% trans 'Qemu' %} </span>
|
|
<span class="badge bg-primary">{{ version }}</span>
|
|
<span class="badge bg-secondary">{% trans 'Libvirt' %} </span>
|
|
<span class="badge bg-primary">{{ lib_version }}</span>
|
|
</dd>
|
|
<dt class="col-3">{% trans "Memory" %}</dt>
|
|
<dd class="col-9">{{ host_memory|filesizeformat }}</dd>
|
|
<dt class="col-3">{% trans "Architecture" %}</dt>
|
|
<dd class="col-9">{{ host_arch }}</dd>
|
|
<dt class="col-3">{% trans "Logical CPUs" %}</dt>
|
|
<dd class="col-9">{{ logical_cpu }}</dd>
|
|
<dt class="col-3">{% trans "Processor" %}</dt>
|
|
<dd class="col-9">{{ model_cpu }}</dd>
|
|
<dt class="col-3">{% trans "Connection" %}</dt>
|
|
<dd class="col-9">{{ uri_conn }}</dd>
|
|
<dt class="col-3">{% trans "Details" %}</dt>
|
|
<dd class="col-9">{{ compute.details }}</dd>
|
|
</dl>
|
|
|
|
<h3 class="page-header">{% trans "Performance" %}</h3>
|
|
<div class="mx-3 shadow-sm">
|
|
<div class="my-3 card border-success">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
{% bs_icon 'arrow-right' %}
|
|
{% trans "CPU Utilization" %}
|
|
</h5>
|
|
<div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Utilization" %}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-3 card border-primary">
|
|
<div class="card-body">
|
|
<h5 class="card-title ">
|
|
{% bs_icon 'arrow-right'%} {% trans "RAM Utilization" %}
|
|
</h5>
|
|
<div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "RAM Utilization" %}"></canvas></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script src="{% static "js/chart.umd.min.js" %}"></script>
|
|
<script src="{% static "js/charts.js" %}"></script>
|
|
<script src="{% static "js/poll.js" %}"></script>
|
|
<script>
|
|
|
|
{% trans "average over" as average_over %}
|
|
// the seconds each CPU point averages
|
|
var cpuWindows = [];
|
|
var cpuChart = lineChart(document.getElementById("cpuChart"), "%", ["Usage"], {
|
|
max: 100,
|
|
tooltip: function (context, text) {
|
|
var span = cpuWindows[context.dataIndex];
|
|
return span ? text + ' ({{ average_over|escapejs }} ' + span + ' s)' : text;
|
|
},
|
|
});
|
|
var memChart = lineChart(document.getElementById("memChart"), "MiB", ["Usage"]);
|
|
if (Boolean({{ status }}) === true) {
|
|
// the CPU sample of the previous answer: usage is taken since then
|
|
var cpuSample = null;
|
|
pollWhileVisible(5000, function () {
|
|
return $.getJSON('{% url 'compute_graph' compute_id %}', cpuSample ? {cpu_sample: cpuSample} : {});
|
|
}, function graph_usage(data) {
|
|
cpuSample = data.cpu_sample || null;
|
|
cpuWindows.push(data.window);
|
|
if (cpuWindows.length > CHART_POINTS) {
|
|
cpuWindows.shift();
|
|
}
|
|
addPoint(cpuChart, data.timeline, [data.cpudata]);
|
|
// a host that could not be read gives no memory value: a gap, same axis
|
|
if (data.memdata.total) {
|
|
memChart.options.scales.y.max = Math.round(data.memdata.total / 1048576);
|
|
addPoint(memChart, data.timeline, [Math.round(data.memdata.usage / 1048576)]);
|
|
} else {
|
|
addPoint(memChart, data.timeline, [null]);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|