mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 12:16:49 +00:00
refactor(instances): the VM page's scripts load from static files
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.
This commit is contained in:
catborise
parent
393aecb8f1
commit
561937b31a
18 changed files with 507 additions and 460 deletions
|
|
@ -12,7 +12,11 @@
|
|||
{% block content %}
|
||||
{% include 'pleasewaitdialog.html' %}
|
||||
{# the VM at a glance in one card: who and where it is, what it has, and its sections as the card's footer #}
|
||||
<section class="card mb-3" aria-labelledby="vm-name">
|
||||
<section class="card mb-3" aria-labelledby="vm-name" id="vm-summary" data-status="{{ instance.status }}"
|
||||
data-status-url="{% url 'instances:status' instance.id %}" data-osinfo-url="{% url 'instances:osinfo' instance.id %}"
|
||||
data-opens-on="{% if instance.is_template and can_clone %}#clone{% endif %}"
|
||||
data-random-mac-url="{% url 'instances:random_mac_address' %}"
|
||||
{% if can_open_console and vdi_reachable %}data-vdi-url="{% url 'vdi_url' compute.id instance.name %}"{% endif %}>
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
|
|
@ -27,10 +31,10 @@
|
|||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if instance.is_template and can_clone %}
|
||||
<button type="button" class="btn btn-sm btn-primary" onclick="show_tab('#settings'); show_tab('#clone');">{% bs_icon 'copy' %} {% trans "Clone" %}</button>
|
||||
<button type="button" class="btn btn-sm btn-primary" id="clone-button">{% bs_icon 'copy' %} {% trans "Clone" %}</button>
|
||||
{% endif %}
|
||||
{% if instance.guest_agent_ready %}
|
||||
<button type="button" class="btn btn-sm btn-secondary" onclick="get_osinfo();">{% bs_icon 'info-circle' %} {% trans "OS details" %}</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" id="os-details-button">{% bs_icon 'info-circle' %} {% trans "OS details" %}</button>
|
||||
{% endif %}
|
||||
<a class="btn btn-sm btn-secondary" href="{% url 'instances:instance' instance.id %}">{% bs_icon 'arrow-clockwise' %} {% trans "Refresh" %}</a>
|
||||
</div>
|
||||
|
|
@ -123,375 +127,13 @@
|
|||
{% endblock %}
|
||||
{% block script %}
|
||||
<script src="{% static 'js/ace/ace.js' %}" type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
// the volumes of the pool chosen in the Add disk dialog
|
||||
function get_volumes(compute_id, pool) {
|
||||
$.getJSON("/computes/" + compute_id + "/storage/" + encodeURIComponent(pool) + "/volumes/", function (data) {
|
||||
var vols = $("#vols").empty();
|
||||
$.each(data['vols'], function (i, item) {
|
||||
vols.append($("<option>").val(item).text(item));
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="{% static 'js/xml_editor.js' %}"></script>
|
||||
<script>
|
||||
function random_mac(net) {
|
||||
$.getJSON("{% url 'instances:random_mac_address' %}", function (data) {
|
||||
$('input[name="' + net + '"]').val(data['mac']);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function guess_mac_address(src_elem, net) {
|
||||
new_vname = $(src_elem).val();
|
||||
guess_mac_address_url = "{% url 'instances:guess_mac_address' 1 %}".replace(1, new_vname);
|
||||
$.getJSON(guess_mac_address_url, function(data) {
|
||||
$('input[name="clone-net-mac-'+net+'"]').val(data['mac']);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function guess_clone_name() {
|
||||
$.getJSON("{% url 'instances:guess_clone_name' %}", function(data) {
|
||||
// a free name of the DHCP file, if there is one
|
||||
if (!data.name) {
|
||||
$('#clone-name-help').text("{{ _("The DHCP file has no free name to suggest.")|escapejs }}");
|
||||
return;
|
||||
}
|
||||
$('#clone-name-help').text('');
|
||||
guessed_name = data['name'].split(".")[0];
|
||||
$('#clone_name').val(guessed_name);
|
||||
update_clone_disk_name(guessed_name);
|
||||
guess_mac_address('#clone_name', 0);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function update_clone_disk_name(new_vname) {
|
||||
vname = '{{ instance.name|escapejs }}';
|
||||
{% for disk in instance.config_disks %}
|
||||
disk_name = '{{ disk.image|escapejs }}';
|
||||
disk_dot = disk_name.split('.');
|
||||
disk_dot_suffix = disk_dot[disk_dot.length-1];
|
||||
if (disk_name.startsWith(vname)) {
|
||||
image = disk_name.replace(vname, new_vname);
|
||||
} else if (disk_name.lastIndexOf('.') > -1 && disk_dot_suffix.length <= 7) {
|
||||
disk_dot.pop();
|
||||
disk_name_only = disk_dot.join('-');
|
||||
image = new_vname + "-" + disk_name_only + "." + disk_dot_suffix
|
||||
} else if (new_vname != disk_name) {
|
||||
image = new_vname
|
||||
} else {
|
||||
image = new_vname + '-clone';
|
||||
}
|
||||
$('#disk_name-{{ disk.dev|escapejs }}').val(image);
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$('#clone_name').on('input', function () {
|
||||
update_clone_disk_name($(this).val());
|
||||
});
|
||||
$(document).ready(function () {
|
||||
// get video model or fall back to default
|
||||
let video_model = "{{ instance.config_video_model }}";
|
||||
if (video_model != '') {
|
||||
$("#video_model_select option[value='" + video_model + "']").prop('selected', true);
|
||||
}
|
||||
});
|
||||
{% if can_open_console and vdi_reachable %}
|
||||
$(document).ready(function () {
|
||||
// set vdi url
|
||||
$.get("{% url 'vdi_url' compute.id instance.name %}", function(data) {
|
||||
$("#vdi_url_input").attr("value", data);
|
||||
$("#vdi_url").attr("href", data);
|
||||
});
|
||||
});
|
||||
{% endif %}
|
||||
{% if request.user.is_superuser %}
|
||||
$(document).ready(function () {
|
||||
// every NIC of the clone a new address: one the VM has would clash with it
|
||||
$('input[name^="clone-net-mac-"]').each(function () { random_mac(this.name); });
|
||||
random_mac('add-net-mac');
|
||||
update_clone_disk_name($('#clone_name').val());
|
||||
});
|
||||
{% endif %}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('[data-bs-toggle="popover"]').popover({
|
||||
placement : 'top'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// the boot order: the checked devices, top to bottom, as "disk:vda,cdrom:sda"
|
||||
function set_orderlist() {
|
||||
var order = $('#b_order input:checked').map(function () { return this.value; }).get();
|
||||
$('#bootorder').val(order.join(','));
|
||||
}
|
||||
$(function () {
|
||||
set_orderlist();
|
||||
$('#b_order').on('change', 'input', set_orderlist);
|
||||
|
||||
$('#boot_order_up').on('click', function () {
|
||||
$('#b_order label input:checked').each(function () {
|
||||
var label = $(this).parent();
|
||||
var newPos = label.index() - 1;
|
||||
if (newPos > -1) {
|
||||
$('#b_order label').eq(newPos).before(label);
|
||||
}
|
||||
});
|
||||
set_orderlist();
|
||||
});
|
||||
|
||||
$('#boot_order_down').on('click', function () {
|
||||
var countOptions = $('#b_order label').length;
|
||||
var countSelected = $('#b_order label input:checked').length;
|
||||
$('#b_order label input:checked').each(function () {
|
||||
var label = $(this).parent();
|
||||
var newPos = label.index() + countSelected;
|
||||
if (newPos < countOptions) {
|
||||
$('#b_order label').eq(newPos).after(label);
|
||||
}
|
||||
});
|
||||
set_orderlist();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="{% static 'js/chart.umd.min.js' %}"></script>
|
||||
<script src="{% static 'js/charts.js' %}"></script>
|
||||
<script src="{% static 'js/poll.js' %}"></script>
|
||||
{% if not instance.is_template %}
|
||||
<script>
|
||||
{% trans "average over" as average_over %}
|
||||
{% trans "In" as rx_label %}{% trans "Out" as tx_label %}{% trans "Read" as rd_label %}{% trans "Write" as wr_label %}
|
||||
var stats_tab = document.querySelector('#graphics-tab');
|
||||
var stats_poll = null;
|
||||
// the seconds each CPU point averages
|
||||
var cpuWindows = [];
|
||||
// the usage sample of the previous answer: the next one averages since then
|
||||
var statsSample = null;
|
||||
// The charts are polled while the Stats tab is shown; they are made once.
|
||||
// a reading for the line above a chart: one decimal, a dash where it is missing
|
||||
function reading(value) {
|
||||
return value == null ? "–" : String(Math.round(value * 10) / 10);
|
||||
}
|
||||
stats_tab.addEventListener('hidden.bs.tab', function (event) {
|
||||
stats_poll.stop();
|
||||
});
|
||||
stats_tab.addEventListener('shown.bs.tab', function (event) {
|
||||
if (stats_poll !== null) {
|
||||
stats_poll.start();
|
||||
return;
|
||||
}
|
||||
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 (RSS)"]);
|
||||
var diskChart = {};
|
||||
{% for disk in instance.disks %}
|
||||
diskChart['{{ disk.dev|escapejs }}'] = lineChart(document.getElementById("blk{{ disk.dev|escapejs }}Chart"), "MB/s", ["Read", "Write"]);
|
||||
{% endfor %}
|
||||
// two NICs with one MAC (a misconfiguration) share the first one's chart
|
||||
var netChart = {};
|
||||
{% for net in instance.networks %}
|
||||
netChart['{{ net.mac|escapejs }}'] = netChart['{{ net.mac|escapejs }}'] || lineChart(document.getElementById("net{{ net.mac|escapejs }}Chart"), "Mbit/s", ["Inbound", "Outbound"]);
|
||||
{% endfor %}
|
||||
|
||||
// the first point at once, then every 5 s like the host graph
|
||||
stats_poll = pollWhileVisible(5000, function () {
|
||||
return $.getJSON("{% url 'instances:stats' instance.id %}", statsSample ? {sample: statsSample} : {})
|
||||
.fail(function () {
|
||||
statsSample = null;
|
||||
});
|
||||
}, function graph_usage(data) {
|
||||
statsSample = data.sample || null;
|
||||
cpuWindows.push(data.window);
|
||||
if (cpuWindows.length > CHART_POINTS) {
|
||||
cpuWindows.shift();
|
||||
}
|
||||
addPoint(cpuChart, data.timeline, [data.cpudata]);
|
||||
document.getElementById("cpuNow").textContent = reading(data.cpudata) + " %";
|
||||
// a VM whose memory could not be read gives total 0: a gap, same axis;
|
||||
// the RSS may pass the balloon size: then the axis grows to it
|
||||
if (data.memdata.total) {
|
||||
var used = Math.round(data.memdata.used / 1024), total = Math.round(data.memdata.total / 1024);
|
||||
memChart.options.scales.y.max = Math.max(total, used);
|
||||
addPoint(memChart, data.timeline, [used]);
|
||||
document.getElementById("memNow").textContent = used + " / " + total + " MiB";
|
||||
} else {
|
||||
addPoint(memChart, data.timeline, [null]);
|
||||
document.getElementById("memNow").textContent = "";
|
||||
}
|
||||
// a disk or NIC added after the page loaded has no chart until a reload,
|
||||
// and one removed keeps its last points
|
||||
function push(chart, id, labels, unit, values) {
|
||||
if (chart) {
|
||||
addPoint(chart, data.timeline, values);
|
||||
document.getElementById(id).textContent =
|
||||
labels[0] + " " + reading(values[0]) + " · " + labels[1] + " " + reading(values[1]) + " " + unit;
|
||||
}
|
||||
}
|
||||
data.blkdata.forEach(function (disk) {
|
||||
push(diskChart[disk.dev], "blk" + disk.dev + "Now", ["{{ rd_label|escapejs }}", "{{ wr_label|escapejs }}"], "MB/s", disk.data);
|
||||
});
|
||||
data.netdata.forEach(function (nic) {
|
||||
push(netChart[nic.mac], "net" + nic.mac + "Now", ["{{ rx_label|escapejs }}", "{{ tx_label|escapejs }}"], "Mbit/s", nic.data);
|
||||
});
|
||||
}, 0);
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
<script>
|
||||
backgroundJobRunning = false;
|
||||
// not "status": that is window.status, which the browser may not keep
|
||||
var vm_status = {{ instance.status|lower }};
|
||||
var status_poll = pollWhileVisible(5000, function () {
|
||||
return $.getJSON("{% url 'instances:status' instance.id %}");
|
||||
}, function get_status(data) {
|
||||
// an XML edit not saved yet stays: the reload waits until it is saved or undone
|
||||
if (data['status'] != vm_status && !backgroundJobRunning && !(window.xmlEditUnsaved && window.xmlEditUnsaved())) {
|
||||
window.location.reload()
|
||||
}
|
||||
});
|
||||
|
||||
// Stop getting status info before delete instance
|
||||
$('#delete_form').submit(function(){
|
||||
status_poll.stop();
|
||||
return true;
|
||||
});
|
||||
</script>
|
||||
{% if not instance.is_template %}<script src="{% static 'js/instance_stats.js' %}"></script>{% endif %}
|
||||
<script src="{% static 'js/instance_status.js' %}"></script>
|
||||
{% job_panel_script job_resource %}
|
||||
<script src="{% static 'js/instance_tabs.js' %}"></script>
|
||||
<script>
|
||||
// Open the tab whose control targets "#<pane id>"
|
||||
function show_tab(target) {
|
||||
var controls = document.querySelectorAll('[data-bs-target], a[data-bs-toggle][href]');
|
||||
for (var i = 0; i < controls.length; i++) {
|
||||
var c = controls[i];
|
||||
if ((c.getAttribute('data-bs-target') || c.getAttribute('href')) === target) {
|
||||
bootstrap.Tab.getOrCreateInstance(c).show();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// after the whole page is parsed: load_osinfo is defined further down
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// a template opens on its clone form
|
||||
restoreInstanceTab(document, location.hash || "{% if instance.is_template and can_clone %}#clone{% endif %}", show_tab, load_osinfo);
|
||||
// none open (a template has no Power tab): the first section the page has
|
||||
if (!document.querySelector("#navbtn .nav-link.active")) {
|
||||
var first = document.querySelector("#navbtn .nav-link");
|
||||
if (first) { show_tab(first.getAttribute("data-bs-target")); }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// the Host devices tab's add forms: loaded once, when the tab first opens
|
||||
var hostDevices = document.getElementById("host-devices");
|
||||
if (hostDevices) {
|
||||
document.querySelector('[data-bs-target="#hostdevs"]').addEventListener("shown.bs.tab", function () {
|
||||
if (hostDevices.dataset.loaded) return;
|
||||
hostDevices.dataset.loaded = "true";
|
||||
fetch(hostDevices.dataset.url).then(function (response) {
|
||||
if (!response.ok) throw new Error(response.statusText);
|
||||
return response.text();
|
||||
}).then(function (html) {
|
||||
hostDevices.innerHTML = html;
|
||||
}).catch(function () {
|
||||
hostDevices.textContent = "{{ _("The host's devices could not be read.")|escapejs }}";
|
||||
});
|
||||
});
|
||||
}
|
||||
// the Migrate tab's disks: loaded for the chosen destination when the tab opens or the choice changes
|
||||
// the form is not sent until the disks of the chosen destination are shown
|
||||
var migratePlan = document.getElementById("migrate-plan");
|
||||
var migrateCompute = document.getElementById("migrate_compute");
|
||||
var migrateLoading = null;
|
||||
function loadMigratePlan() {
|
||||
if (!migrateCompute.value) return;
|
||||
if (migrateLoading) migrateLoading.abort();
|
||||
var loading = migrateLoading = new AbortController();
|
||||
var submit = migratePlan.closest("form").querySelector('button[name="migrate"]');
|
||||
submit.disabled = true;
|
||||
migratePlan.textContent = "{{ _("Checking the disks…")|escapejs }}";
|
||||
fetch(migratePlan.dataset.url + "?compute_id=" + encodeURIComponent(migrateCompute.value),
|
||||
{signal: loading.signal}).then(function (response) {
|
||||
if (!response.ok) throw new Error(response.statusText);
|
||||
return response.text();
|
||||
}).then(function (html) {
|
||||
migratePlan.innerHTML = html;
|
||||
// a destination that did not answer, or a disk that cannot go there
|
||||
submit.disabled = migratePlan.querySelector("[data-refused]") !== null;
|
||||
}).catch(function () {
|
||||
if (loading.signal.aborted) return; // another destination was chosen
|
||||
migratePlan.textContent = "{{ _("The disks could not be checked.")|escapejs }}";
|
||||
submit.disabled = false; // the migration checks them again
|
||||
});
|
||||
}
|
||||
// the destinations that cannot be chosen (unreachable, or this host under
|
||||
// another record) are marked first; then the disks of the first one left
|
||||
function loadMigrateTargets() {
|
||||
var submit = migratePlan.closest("form").querySelector('button[name="migrate"]');
|
||||
submit.disabled = true;
|
||||
migrateCompute.disabled = true; // no disks are checked for a host before the hosts are
|
||||
migratePlan.textContent = "{{ _("Checking the hosts…")|escapejs }}";
|
||||
fetch(migratePlan.dataset.targetsUrl).then(function (response) {
|
||||
if (!response.ok) throw new Error(response.statusText);
|
||||
return response.json();
|
||||
}).then(function (refused) {
|
||||
migrateCompute.disabled = false;
|
||||
Array.prototype.forEach.call(migrateCompute.options, function (option) {
|
||||
if (refused[option.value]) {
|
||||
option.disabled = true;
|
||||
option.textContent = refused[option.value]; // it names the host
|
||||
}
|
||||
});
|
||||
var first = Array.prototype.find.call(migrateCompute.options, function (option) { return !option.disabled; });
|
||||
if (!first) {
|
||||
migratePlan.textContent = "{{ _("No host can take the VM now.")|escapejs }}";
|
||||
return;
|
||||
}
|
||||
if (migrateCompute.selectedOptions[0].disabled) migrateCompute.value = first.value;
|
||||
loadMigratePlan();
|
||||
}).catch(function () {
|
||||
migratePlan.textContent = "{{ _("The hosts could not be checked.")|escapejs }}";
|
||||
});
|
||||
}
|
||||
if (migratePlan && migrateCompute) {
|
||||
document.querySelector('[data-bs-target="#migrate"]').addEventListener("shown.bs.tab", function () {
|
||||
if (!migratePlan.dataset.loaded) {
|
||||
migratePlan.dataset.loaded = "true";
|
||||
loadMigrateTargets();
|
||||
}
|
||||
});
|
||||
migrateCompute.addEventListener("change", loadMigratePlan);
|
||||
}
|
||||
function get_osinfo() {
|
||||
show_tab('#settings');
|
||||
show_tab('#osinfo');
|
||||
load_osinfo();
|
||||
}
|
||||
function load_osinfo() {
|
||||
$.getJSON("{% url 'instances:osinfo' instance.id %}", function (data) {
|
||||
$('#osinfo-error').addClass('d-none');
|
||||
$('#oshostname').text(data['host-name'] || '');
|
||||
$('#osname').text(data.id || '');
|
||||
$('#osprettyname').text(data['pretty-name'] || '');
|
||||
$('#oskernelrelease').text(data['kernel-release'] || '');
|
||||
$('#oskernelversion').text(data['kernel-version'] || '');
|
||||
$('#osversion').text(data.version || '');
|
||||
$('#ostimezone').text(data.zone ? data.zone + " / " + data.offset : '');
|
||||
}).fail(function (xhr) {
|
||||
var error = xhr.responseJSON && xhr.responseJSON.error;
|
||||
$('#osinfo-error').text(error || "{% trans 'The guest agent did not answer' %}").removeClass('d-none');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="{% static 'js/instance_page.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue