Revision 4529511c
| b/ui/static/main.css | ||
|---|---|---|
| 3261 | 3261 |
margin: 0; |
| 3262 | 3262 |
} |
| 3263 | 3263 |
|
| 3264 |
.vm-stats div img.stat-busy {
|
|
| 3265 |
margin-top: -7px; |
|
| 3266 |
margin-left: 90px; |
|
| 3267 |
} |
|
| 3268 |
|
|
| 3264 | 3269 |
.vm-stats div.stat-content img.busy {
|
| 3265 | 3270 |
margin-left: 95px; |
| 3266 | 3271 |
} |
| ... | ... | |
| 3269 | 3274 |
display:none; |
| 3270 | 3275 |
} |
| 3271 | 3276 |
|
| 3277 |
div.stat-error {
|
|
| 3278 |
color: #f00; |
|
| 3279 |
} |
|
| 3280 |
|
|
| 3281 |
.single div.stat-error {
|
|
| 3282 |
text-align: center; |
|
| 3283 |
font-size: 0.8em; |
|
| 3284 |
} |
|
| 3285 |
|
|
| 3272 | 3286 |
.vm-details {
|
| 3273 | 3287 |
width: 130px; |
| 3274 | 3288 |
margin-left:17px; |
| 3275 | 3289 |
} |
| 3276 | 3290 |
|
| 3291 |
.single-container .lower .stat-busy {
|
|
| 3292 |
margin-top: 10px; |
|
| 3293 |
margin-left: 325px; |
|
| 3294 |
} |
|
| 3295 |
|
|
| 3277 | 3296 |
.vm-metadata {
|
| 3278 | 3297 |
padding-left: 10px; |
| 3279 | 3298 |
width: 100px; |
| b/ui/static/synnefo.js | ||
|---|---|---|
| 1523 | 1523 |
var os = os_icon_from_value(meta_value); |
| 1524 | 1524 |
var state = $("#metadata-wizard div#on-off").text()
|
| 1525 | 1525 |
var state_single = $(".state", machine_single).hasClass("terminated-state") ? "off" : "on";
|
| 1526 |
|
|
| 1526 | 1527 |
set_machine_os_image(machine_icon, "icon", state, os); |
| 1527 | 1528 |
set_machine_os_image(machine_single, "single", state_single, os); |
| 1528 | 1529 |
} |
| ... | ... | |
| 1541 | 1542 |
dataType: "json", |
| 1542 | 1543 |
timeout: TIMEOUT, |
| 1543 | 1544 |
error: function(jqXHR, textStatus, errorThrown) {
|
| 1544 |
// report error as text inline |
|
| 1545 |
$('#' + serverID + ' img.busy').hide();
|
|
| 1546 |
$('#' + serverID + ' div.stat-error').show();
|
|
| 1545 |
try {
|
|
| 1546 |
ajax_error(jqXHR.status, undefined, 'Get server stats', jqXHR.responseText); |
|
| 1547 |
} catch(err) {
|
|
| 1548 |
if (!isXhrException(err)) {
|
|
| 1549 |
ajax_error(-520, "UI Error", "Get server stats", err); |
|
| 1550 |
} |
|
| 1551 |
} |
|
| 1547 | 1552 |
}, |
| 1548 | 1553 |
success: function(data, textStatus, jqXHR) {
|
| 1549 |
// in icon view |
|
| 1550 |
if ( $.cookie('view') == 0 ) {
|
|
| 1551 |
$('#' + serverID + ' img.busy').removeClass('busy');
|
|
| 1552 |
$('#' + serverID + ' img.cpu').attr("src", data.stats.cpuBar);
|
|
| 1553 |
$('#' + serverID + ' img.net').attr("src", data.stats.netBar);
|
|
| 1554 |
update_machine_stats(serverID, data); |
|
| 1555 |
}, |
|
| 1556 |
|
|
| 1557 |
// pass server id to ajax settings |
|
| 1558 |
serverID: serverID |
|
| 1559 |
}); |
|
| 1560 |
return false; |
|
| 1561 |
} |
|
| 1562 |
|
|
| 1563 |
// set timeout function to update machine stats |
|
| 1564 |
function set_stats_update_handler(vm_id, interval) {
|
|
| 1565 |
console.log("setting stats update interval:", vm_id, interval);
|
|
| 1566 |
window.setTimeout(function(){
|
|
| 1567 |
get_server_stats(vm_id); |
|
| 1568 |
}, interval * 1000); |
|
| 1569 |
} |
|
| 1570 |
|
|
| 1571 |
// update machine stats |
|
| 1572 |
// call set_stats_update_handler if machine stats are visible |
|
| 1573 |
// to reupdate the stats (based on api interval) |
|
| 1574 |
function update_machine_stats(vm_id, data) {
|
|
| 1575 |
var els = get_current_view_stats_elements(vm_id); |
|
| 1576 |
var from_error = false; |
|
| 1577 |
var vm = get_machine(vm_id); |
|
| 1578 |
|
|
| 1579 |
// api error |
|
| 1580 |
if (!data) {
|
|
| 1581 |
from_error = true; |
|
| 1582 |
} |
|
| 1583 |
|
|
| 1584 |
// hide helpers |
|
| 1585 |
function hide_imgs(els) {
|
|
| 1586 |
els.cpu.img.hide(); |
|
| 1587 |
els.net.img.hide(); |
|
| 1588 |
} |
|
| 1589 |
|
|
| 1590 |
function hide_busy(els) {
|
|
| 1591 |
els.cpu.busy.hide(); |
|
| 1592 |
els.net.busy.hide(); |
|
| 1593 |
} |
|
| 1594 |
|
|
| 1595 |
function hide_errors(els) {
|
|
| 1596 |
els.cpu.error.hide(); |
|
| 1597 |
els.net.error.hide(); |
|
| 1598 |
} |
|
| 1599 |
|
|
| 1600 |
// apply logic |
|
| 1601 |
if (from_error) {
|
|
| 1602 |
// api call returned error show error messages |
|
| 1603 |
return; |
|
| 1604 |
} else {
|
|
| 1605 |
// no need to show stats while machine in building state |
|
| 1606 |
if (vm.status == "BUILD") {
|
|
| 1607 |
hide_imgs(els); |
|
| 1608 |
hide_errors(els); |
|
| 1609 |
els.cpu.busy.show(); |
|
| 1610 |
els.net.busy.show(); |
|
| 1611 |
} else {
|
|
| 1612 |
hide_busy(els); |
|
| 1613 |
|
|
| 1614 |
// update stats, decide for series or bar image |
|
| 1615 |
// based on img class |
|
| 1616 |
if (els.cpu.img.hasClass("series")) {
|
|
| 1617 |
els.cpu.img.attr("src", data.stats.cpuTimeSeries);
|
|
| 1618 |
} else {
|
|
| 1619 |
els.cpu.img.attr("src", data.stats.cpuBar);
|
|
| 1554 | 1620 |
} |
| 1555 |
// in single view |
|
| 1556 |
else if ( $.cookie('view') == 2 ) {
|
|
| 1557 |
$('#' + serverID + ' div.cpu-graph img.stats').attr("src", data.stats.cpuTimeSeries);
|
|
| 1558 |
$('#' + serverID + ' div.network-graph img.stats').attr("src", data.stats.netTimeSeries);
|
|
| 1621 |
|
|
| 1622 |
if (els.net.img.hasClass("series")) {
|
|
| 1623 |
els.net.img.attr("src", data.stats.netTimeSeries);
|
|
| 1624 |
} else {
|
|
| 1625 |
els.net.img.attr("src", data.stats.netBar);
|
|
| 1626 |
} |
|
| 1627 |
} |
|
| 1628 |
} |
|
| 1629 |
|
|
| 1630 |
// stats container is hidden |
|
| 1631 |
// do not update the stats |
|
| 1632 |
if (!els.cont.is(":visible")) {
|
|
| 1633 |
return false; |
|
| 1634 |
} |
|
| 1635 |
|
|
| 1636 |
// set timeout to call the stats update |
|
| 1637 |
set_stats_update_handler(vm_id, data.stats.refresh); |
|
| 1638 |
} |
|
| 1639 |
|
|
| 1640 |
|
|
| 1641 |
// get stats elements based on current view |
|
| 1642 |
function get_current_view_stats_elements(vm_id) {
|
|
| 1643 |
// in icon view |
|
| 1644 |
if ( $.cookie('view') == 0 ) {
|
|
| 1645 |
vm_el = $("#" + vm_id);
|
|
| 1646 |
return {
|
|
| 1647 |
'cont': vm_el.find('.vm-stats'),
|
|
| 1648 |
'cpu': {
|
|
| 1649 |
'img': vm_el.find(' img.cpu'),
|
|
| 1650 |
'busy': vm_el.find('.cpu-cont .stat-busy'),
|
|
| 1651 |
'error': vm_el.find('.cpu-cont .stat-error')
|
|
| 1652 |
}, |
|
| 1653 |
'net': {
|
|
| 1654 |
'img': vm_el.find('img.net'),
|
|
| 1655 |
'busy': vm_el.find('.net-cont .stat-busy'),
|
|
| 1656 |
'error': vm_el.find('.net-cont .stat-error')
|
|
| 1657 |
} |
|
| 1658 |
} |
|
| 1659 |
} |
|
| 1660 |
// in single view |
|
| 1661 |
else if ( $.cookie('view') == 2 ) {
|
|
| 1662 |
vm_el = $("#" + vm_id);
|
|
| 1663 |
return {
|
|
| 1664 |
'cont': vm_el.find('.lower'),
|
|
| 1665 |
'cpu': {
|
|
| 1666 |
'img': vm_el.find('div.cpu-graph img.stats'),
|
|
| 1667 |
'busy': vm_el.find('div.cpu-graph img.stat-busy'),
|
|
| 1668 |
'error': vm_el.find('div.cpu-graph .stat-error')
|
|
| 1669 |
}, |
|
| 1670 |
'net': {
|
|
| 1671 |
'img': vm_el.find('div.network-graph img.stats'),
|
|
| 1672 |
'busy': vm_el.find('div.network-graph img.stat-busy'),
|
|
| 1673 |
'error': vm_el.find('div.network-graph .stat-error')
|
|
| 1674 |
} |
|
| 1559 | 1675 |
} |
| 1560 | 1676 |
} |
| 1561 |
}); |
|
| 1562 |
return false; |
|
| 1563 | 1677 |
} |
| 1564 | 1678 |
|
| 1565 | 1679 |
// create network |
| b/ui/templates/machines_icon.html | ||
|---|---|---|
| 76 | 76 |
</div> |
| 77 | 77 |
<div class="vm-stats metadata-column"> |
| 78 | 78 |
<div class='stat-label'>{% trans "CPU" %}</div>
|
| 79 |
<div class='stat-content'> |
|
| 80 |
<img src="./static/icons/indicators/small/progress.gif" class="cpu busy" /> |
|
| 81 |
<div class='stat-error'>{% trans "Could not fetch CPU stats." %}</div>
|
|
| 79 |
<div class='stat-content cpu-cont'> |
|
| 80 |
<img src="./static/icons/indicators/small/progress.gif" class="cpu bar" /> |
|
| 81 |
<img src="./static/icons/indicators/small/progress.gif" class="stat-busy" /> |
|
| 82 |
<div class='stat-error'>{% trans "Could not fetch CPU stats graph." %}</div>
|
|
| 82 | 83 |
</div> |
| 83 | 84 |
<div class='stat-label'>{% trans "Net" %}</div>
|
| 84 |
<div class='stat-content'> |
|
| 85 |
<img src="./static/icons/indicators/small/progress.gif" class="net busy" /> |
|
| 86 |
<div class='stat-error'>{% trans "Could not fetch Net stats." %}</div>
|
|
| 85 |
<div class='stat-content net-cont'> |
|
| 86 |
<img src="./static/icons/indicators/small/progress.gif" class="net bar" /> |
|
| 87 |
<img src="./static/icons/indicators/small/progress.gif" class="stat-busy" /> |
|
| 88 |
<div class='stat-error'>{% trans "Could not fetch Net stats graph." %}</div>
|
|
| 87 | 89 |
</div> |
| 88 | 90 |
<a href="#" class="stats-report">{% trans "Full report" %}</a>
|
| 89 | 91 |
</div> |
| ... | ... | |
| 264 | 266 |
} else {
|
| 265 | 267 |
// reset stats |
| 266 | 268 |
$(this).closest('.machine-container').find('.vm-stats div.stat-error').hide();
|
| 267 |
$(this).closest('.machine-container').find('.vm-stats img.cpu').attr('src', './static/icons/indicators/small/progress.gif').addClass('busy').show();
|
|
| 268 |
$(this).closest('.machine-container').find('.vm-stats img.net').attr('src', './static/icons/indicators/small/progress.gif').addClass('busy').show();
|
|
| 269 |
$(this).closest('.machine-container').find('.vm-stats img.cpu').attr('src', './static/icons/indicators/small/progress.gif').show();
|
|
| 270 |
$(this).closest('.machine-container').find('.vm-stats img.net').attr('src', './static/icons/indicators/small/progress.gif').show();
|
|
| 269 | 271 |
// get new stats |
| 270 | 272 |
var serverID = $(this).closest('.machine-container').attr('id');
|
| 271 | 273 |
get_server_stats(serverID); |
| ... | ... | |
| 279 | 281 |
return false; |
| 280 | 282 |
}); |
| 281 | 283 |
|
| 284 |
|
|
| 282 | 285 |
// intercept manage metadata click |
| 283 | 286 |
$("#machinesview-icon.standard a.manage-metadata").live('click', function() {
|
| 284 | 287 |
// get server name and server ID |
| ... | ... | |
| 702 | 705 |
var ips = get_public_ips(server); |
| 703 | 706 |
machine.find("span.ip span.public").text(ips['ip4']);
|
| 704 | 707 |
machine.find("span.ip span.public.ipv6-text").text(ips['ip6']);
|
| 708 |
|
|
| 709 |
// add stats images error events handlers |
|
| 710 |
$("img.cpu, img.net").error(function(){
|
|
| 711 |
$(this).hide(); |
|
| 712 |
$(this).parent().find(".stat-error").show();
|
|
| 713 |
}).load(function(){
|
|
| 714 |
$(this).show(); |
|
| 715 |
$(this).parent().find(".stat-error").hide();
|
|
| 716 |
}); |
|
| 705 | 717 |
} |
| 706 | 718 |
/* |
| 707 | 719 |
Do some repeated actions that include: |
| ... | ... | |
| 724 | 736 |
$(existing).find('.wave').hide();
|
| 725 | 737 |
} |
| 726 | 738 |
} |
| 727 |
|
|
| 728 |
|
|
| 729 | 739 |
}); |
| 730 | 740 |
/* |
| 731 | 741 |
Do some standard stuff, repeated each time |
| ... | ... | |
| 820 | 830 |
$('#machinesview-icon.standard #'+serverID+ ' .action_error').show();
|
| 821 | 831 |
} |
| 822 | 832 |
|
| 833 |
// handle update stats |
|
| 834 |
function update_server_stats() {
|
|
| 835 |
// TODO: only reload images for expanded machines |
|
| 836 |
$(".vm-stats").each(function(){
|
|
| 837 |
var serverID = $(this).closest(".machine-container").attr("id");
|
|
| 838 |
get_server_stats(serverID); |
|
| 839 |
}); |
|
| 840 |
} |
|
| 841 |
|
|
| 823 | 842 |
// basic functions executed on page load |
| 824 | 843 |
if ( flavors.length == 0 && images.length == 0 ) {
|
| 825 | 844 |
// configure flavors, this also calls update_vms(UPDATE_INTERVAL) |
| b/ui/templates/machines_single.html | ||
|---|---|---|
| 148 | 148 |
{% trans "CPU Utilization" %}
|
| 149 | 149 |
</div> |
| 150 | 150 |
<div class="cpu-graph"> |
| 151 |
<img src="./static/icons/indicators/small/progress.gif" class="stats" /> |
|
| 151 |
<img src="./static/icons/indicators/small/progress.gif" class="stats series" /> |
|
| 152 |
<img src="./static/icons/indicators/small/progress.gif" class="stat-busy" /> |
|
| 153 |
<div class='stat-error'>{% trans "Could not fetch CPU stats graph." %}</div>
|
|
| 152 | 154 |
</div> |
| 153 | 155 |
</div> |
| 154 | 156 |
<div class="single-network"> |
| ... | ... | |
| 156 | 158 |
{% trans "Network Utilization" %}
|
| 157 | 159 |
</div> |
| 158 | 160 |
<div class="network-graph"> |
| 159 |
<img src="./static/icons/indicators/small/progress.gif" class="stats" /> |
|
| 161 |
<img src="./static/icons/indicators/small/progress.gif" class="stats series" /> |
|
| 162 |
<img src="./static/icons/indicators/small/progress.gif" class="stat-busy" /> |
|
| 163 |
<div class='stat-error'>{% trans "Could not fetch Net stats graph." %}</div>
|
|
| 160 | 164 |
</div> |
| 161 | 165 |
</div> |
| 162 | 166 |
</div> |
| ... | ... | |
| 620 | 624 |
//show the first machine and select it in the widget |
| 621 | 625 |
$('.single-container:eq(1)').show();
|
| 622 | 626 |
$('.single .column3').find('.server-name:eq(1)').addClass('column3-selected');
|
| 627 |
|
|
| 628 |
// add stats images error events handlers |
|
| 629 |
$(".cpu-graph img.stats, .network-graph img.stats").error(function(){
|
|
| 630 |
$(this).hide(); |
|
| 631 |
$(this).parent().find(".stat-error").show();
|
|
| 632 |
}).load(function(){
|
|
| 633 |
$(this).show(); |
|
| 634 |
$(this).parent().find(".stat-error").hide();
|
|
| 635 |
}); |
|
| 623 | 636 |
} |
| 624 | 637 |
update_iconview_actions(server.id, server.status); |
| 625 | 638 |
if (!(server.metadata == undefined)) {
|
Also available in: Unified diff