[Kimchi-devel] [PATCH 2/3] [new-ui] Guests tab

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- .../plugins/kimchi/ui/css/theme-default/list.css | 330 ---------- .../plugins/kimchi/ui/js/src/kimchi.guest_main.js | 676 +++++++++++++-------- src/wok/plugins/kimchi/ui/pages/guest.html.tmpl | 125 ++-- src/wok/plugins/kimchi/ui/pages/guests.html.tmpl | 33 +- ui/css/src/modules/_guests.scss | 241 ++++++++ ui/images/theme-default/icon-unknown.png | Bin 761 -> 3797 bytes 6 files changed, 764 insertions(+), 641 deletions(-) delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/list.css diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/list.css b/src/wok/plugins/kimchi/ui/css/theme-default/list.css deleted file mode 100644 index 1f75f6c..0000000 --- a/src/wok/plugins/kimchi/ui/css/theme-default/list.css +++ /dev/null @@ -1,330 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2015 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -.list-vm { - margin: 10px; -} - -/* Generated at http://colorzilla.com/gradient-editor/ */ -.list-vm>li { - margin-bottom: 10px; - background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -webkit-gradient(linear, left top, left bottom, - color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); - background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); - background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', - endColorstr='#e5e5e5', GradientType=0); - border: 1px solid #ccc; - color: #333; - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; -} - -.list-vm li>* { - height: 130px; - display: table-cell; - vertical-align: top; - position: relative; - border-left: 1px solid #ccc; - border-right: 1px solid #fff; -} - -.list-vm li>*:FIRST-CHILD { - border-left: none; -} - -.list-vm li>*:LAST-CHILD { - border-right: none; -} - -.list-vm li>.guest-tile{ - text-align: center; - vertical-align: middle; -} - -.list-vm .handle { - display: block; - width: 50px; - height: 130px; - box-sizing: border-box; - box-shadow: inset 4px 4px 4px #0289e2, inset -4px -4px 4px #04385d; - background: #0b6bad url(../images/theme-default/arrow_out.png) center - center no-repeat; - border-top-right: 1px solid #CCC; - -webkit-border-top-right-radius: 8px; - -moz-border-top-right-radius: 8px; - border-top-right-radius: 8px; - border-bottom-right: 1px solid #CCC; - -webkit-border-bottom-right-radius: 8px; - -moz-border-bottom-right-radius: 8px; - border-bottom-right-radius: 8px; -} - -.list-vm .subtitle { - color: #666; - font-size: 13px; - text-align: center; - line-height: 10px; - font-weight: bold; -} - -.list-vm .tile .imgload { - display: none; -} - -.list-vm .tile.shutoff .imgactive { - max-height: 110px; - max-width: 170px; - height: auto; - width: auto; - display:inline; - border: none; - position: relative; -} - -.list-vm .tile.paused .imgactive { - max-height: 110px; - max-width: 170px; - height: auto; - width: auto; - display:inline; - border: none; - position: relative; -} - -.list-vm .tile.running .imgactive{ - max-height: 110px; - max-width: 170px; - height: auto; - width: auto; - display:inline; - border: none; - cursor: crosshair; - cursor: -moz-zoom-in; - cursor: -webkit-zoom-in; -} - -.list-vm .tile .overlay { - max-height: 110px; - max-width: 170px; - height: auto; - width: auto; - position:absolute; - bottom:0; - right:0; - display:none; -} - -.guest-type { - width: 257px; -} - -.guest-cpu { - width: 90px; -} - -.guest-memory { - width: 90px; -} - -.guest-network { - width: 95px; -} - -.guest-storage { - width: 90px; -} - -.guest-tile { - width: 190px; -} - -.guest-users { - width: 93px; -} - -.guest-actions { - width: 125px; - min-width: 125px; -} - -.guest-handle { - width: 50px; -} - -.guest-general { - padding: 10px; - border-bottom: 1px solid #ccc; - width: 237px; -} - -.guest-ip { - padding: 0 10px; - border-top: 1px solid #fff; -} - -.guest-general .title { - color: #666; - font-size: 16px; - font-weight: normal; - height: 25px; - line-height: 25px; - text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff; - max-width: 237px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.guest-general .text { - font-weight: bold; - color: #999; - font-size: 11px; - text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff; -} - -.guest-users .top { - border-bottom: 1px solid #ccc; - padding: 3px 10px; -} - -.guest-users .bottom { - border-top: 1px solid #fff; - padding: 3px 10px; -} - -.guest-users .users { - height: 45px; - line-height: 45px; - background: url(../images/theme-default/icon-user.png) left - center no-repeat; - padding-left: 50px; - font-size: 36px; - font-weight: bold; -} - -.guest-users .snapshots { - height: 40px; - line-height: 40px; - background: url(../images/theme-default/icon-camera.png) left - center no-repeat; - padding-left: 50px; - font-size: 36px; - font-weight: bold; -} - -.guest-users .mini-text { - font-size: 11px; - font-weight: normal; - text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff; -} - -.guest-actions .top { - padding: 7px 10px; - width: 200px; -} - -.guest-actions .top button { - display: inline-block; - width: 42px; - height: 42px; -} - -@-moz-document url-prefix() { - .guest-actions .top button span { - margin-left: -3px; - margin-top: -1px; - } -} - -.guest-actions .bottom { - padding: 0 10px; -} - -.list-vm .tile { - max-width: 170px; - max-height: 110px; - width: auto; - height: auto; - margin: 10px; -} - -.list-vm .tile:not(.shutoff) && .tile:not(.paused) img { - box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff; -} - -.list-vm .shutoff { - position: relative; - box-shadow: none !important; -} - -.list-vm .shutoff img { - opacity: 0.4; -} - -.list-vm .paused { - position: relative; - box-shadow: none !important; -} - -.list-vm .paused img { - opacity: 0.6; -} - -.list-title { - color: #666; - font-weight: bold; - font-size: 12px; - overflow: hidden; - margin: 10px; -} - -.list-title li { - display: table-cell; - padding: 0 1px; -} - -.list-no-result { - font-size: 16px; - height: 48px; - line-height: 48px; - text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff; - padding-left: 10px; -} - -.guest-pending { - margin: 10px; -} - -.guest-pending .icon { - background: url('../images/theme-default/kimchi-loading15x15.gif') no-repeat; - display: inline-block; - width: 20px; - height: 20px; - vertical-align: middle; -} - -.guest-pending .text { - color: #666666; - margin-left: 5px; - text-shadow: -1px -1px 1px #CCCCCC, 1px 1px 1px #FFFFFF; -} diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_main.js index eb563fb..4ef3a89 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_main.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_main.js @@ -46,19 +46,29 @@ kimchi.sampleGuestObject = { }; kimchi.vmstart = function(event) { - var button=$(this); - if (!button.hasClass('loading')) { - button.addClass('loading'); - var vm=$(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); + var button = event.target; + if (!$(button).hasClass('loading')) { + $(button).addClass('loading'); + var vm = button.closest('li[name=guest]'); + var vm_id = $(vm).attr("id"); + // setting up css class when starting + $(vm).find('.guest-state').removeClass('shutoff'); + $(vm).find('.guest-state').addClass('starting'); + $(vm).find('.progress').css("display", "none"); + $(vm).find('.percentage - label').html('--'); + $(vm).find('.measure-label').html('--'); + $(vm).find('.guest-actions').css("margin-top", "3px"); + $(vm).addClass('inactive'); + $(vm).find('.distro-icon').addClass('inactive'); + $(vm).find('.vnc-link').css("display", "none"); + $(vm).find('.column-vnc').html('--'); kimchi.startVM(vm_id, function(result) { - button.removeClass('loading'); + $(button).removeClass('loading'); kimchi.listVmsAuto(); - }, function(err) { - button.removeClass('loading'); - wok.message.error(err.responseJSON.reason); - } - ); + }, function(err) { + $(button).removeClass('loading'); + wok.message.error(err.responseJSON.reason); + }); } else { event.preventDefault(); event.stopPropagation(); @@ -67,19 +77,18 @@ kimchi.vmstart = function(event) { }; kimchi.vmsuspend = function(event) { - var button=$(this); - if (!button.hasClass('pause-gray')) { - button.addClass('pause-gray'); - var vm=$(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); + var button = event.target; + if (!$(button).hasClass('pause-gray')) { + $(button).addClass('pause-gray'); + var vm = button.closest('li[name=guest]'); + var vm_id = $(vm).attr("id"); kimchi.suspendVM(vm_id, function(result) { - button.removeClass('pause-gray'); + $(button).removeClass('pause-gray'); kimchi.listVmsAuto(); - }, function(err) { - button.removeClass('pause-gray'); - wok.message.error(err.responseJSON.reason); - } - ); + }, function(err) { + $(button).removeClass('pause-gray'); + wok.message.error(err.responseJSON.reason); + }); } else { event.preventDefault(); event.stopPropagation(); @@ -88,19 +97,18 @@ kimchi.vmsuspend = function(event) { }; kimchi.vmresume = function(event) { - var button=$(this); - if (!button.hasClass('resume-gray')) { - button.addClass('resume-gray'); - var vm=$(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); + var button = event.target; + if (!$(button).hasClass('resume-gray')) { + $(button).addClass('resume-gray'); + var vm = button.closest('li[name=guest]'); + var vm_id = vm.attr("id"); kimchi.resumeVM(vm_id, function(result) { - button.removeClass('resume-gray'); + $(button).removeClass('resume-gray'); kimchi.listVmsAuto(); - }, function(err) { - button.removeClass('resume-gray'); - wok.message.error(err.responseJSON.reason); - } - ); + }, function(err) { + $(button).removeClass('resume-gray'); + wok.message.error(err.responseJSON.reason); + }); } else { event.preventDefault(); event.stopPropagation(); @@ -109,84 +117,95 @@ kimchi.vmresume = function(event) { }; kimchi.vmpoweroff = function(event) { - var button=$(this); - if (!button.hasClass('loading')) { - button.addClass('loading'); - var vm=button.closest('li[name=guest]'); - var vm_id=vm.attr("id"); - var vmObject=vm.data(); - var vm_persistent=vmObject.persistent == true; + var button = event.target; + if (!$(button).hasClass('loading')) { + $(button).addClass('loading'); + var vm = button.closest('li[name=guest]'); + var vm_id = vm.attr("id"); + var vmObject = vm.data(); + var vm_persistent = vmObject.persistent == true; var content_msg = vm_persistent ? i18n['KCHVM6003M'] : i18n['KCHVM6009M']; var settings = { - title : i18n['KCHVM6002M'], - content : content_msg, - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHVM6002M'], + content: content_msg, + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { kimchi.poweroffVM(vm_id, function(result) { - button.removeClass('loading'); + $(button).removeClass('loading'); kimchi.listVmsAuto(); }, function(err) { wok.message.error(err.responseJSON.reason); }); - }, function() { - }); + }, function() {}); } else { event.preventDefault(); event.stopPropagation(); } }; -kimchi.vmshutdown = function(event){ - var vm=$(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); +kimchi.vmshutdown = function(event) { + var button = event.target; + var vm = button.closest('li[name=guest]'); + var vm_id = vm.attr("id"); var settings = { - title : i18n['KCHVM6006M'], - content : i18n['KCHVM6007M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHVM6006M'], + content: i18n['KCHVM6007M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { kimchi.shutdownVM(vm_id, function(result) { - kimchi.listVmsAuto(); - }, function(err) { - wok.message.error(err.responseJSON.reason); - } - ); - }, function() { - }); + kimchi.listVmsAuto(); + }, function(err) { + wok.message.error(err.responseJSON.reason); + }); + }, function() {}); }; -kimchi.vmreset = function(event){ - var vm=$(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); - var settings = { - title : i18n['KCHVM6004M'], - content : i18n['KCHVM6005M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] - }; - wok.confirm(settings, function() { - kimchi.resetVM(vm_id, function(result) { +kimchi.vmreset = function(event) { + var button = event.target; + if (!$(button).hasClass('loading')) { + $(button).addClass('loading'); + var vm = button.closest('li[name=guest]'); + var vm_id = $(vm).attr("id"); + var settings = { + title: i18n['KCHVM6004M'], + content: i18n['KCHVM6005M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] + }; + wok.confirm(settings, function() { + // setting up css class when resetting + $(vm).find('.guest-state').removeClass('running'); + $(vm).find('.guest-state').addClass('resetting'); + $(vm).find('.fa-spin').addClass('active'); + kimchi.resetVM(vm_id, function(result) { + $(button).removeClass('loading'); kimchi.listVmsAuto(); }, function(err) { + $(button).removeClass('loading'); wok.message.error(err.responseJSON.reason); - } - ); - }, function() { - }); + }); + }, function() {}); + } else { + event.preventDefault(); + event.stopPropagation(); + return; + } }; kimchi.vmdelete = function(event) { - var vm = $(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); + var button = event.target; + var vm = button.closest('li[name=guest]'); + var vm_id = $(vm).attr("id"); var settings = { - title : i18n['KCHVM6008M'], - content : i18n['KCHVM6001M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHVM6008M'], + content: i18n['KCHVM6001M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }; wok.confirm(settings, function() { kimchi.deleteVM(vm_id, function(result) { @@ -194,13 +213,13 @@ kimchi.vmdelete = function(event) { }, function(err) { wok.message.error(err.responseJSON.reason); }); - }, function() { - }); + }, function() {}); }; kimchi.vmedit = function(event) { - var vm = $(this).closest('li[name=guest]'); - var vm_id=vm.attr("id"); + var button = event.target; + var vm = button.closest('li[name=guest]'); + var vm_id = $(vm).attr("id"); kimchi.selectedGuest = vm_id; wok.window.open({ url: 'plugins/kimchi/guest-edit.html', @@ -211,13 +230,13 @@ kimchi.vmedit = function(event) { }; kimchi.openVmConsole = function(event) { - var vm=$(this).closest('li[name=guest]'); - var vmObject=vm.data(); + var button = event.target; + var vm = button.closest('li[name=guest]'); + var vmObject = $(vm).data(); if (vmObject.graphics['type'] == 'vnc') { - kimchi.vncToVM(vm.attr('id')); - } - else if (vmObject.graphics['type'] == 'spice') { - kimchi.spiceToVM(vm.attr('id')); + kimchi.vncToVM($(vm).attr('id')); + } else if (vmObject.graphics['type'] == 'spice') { + kimchi.spiceToVM($(vm).attr('id')); } }; @@ -232,95 +251,149 @@ kimchi.getVmsCurrentConsoleImgs = function() { kimchi.getOpenMenuVmId = function() { var result; - var openMenu = $('#guestList div[name="actionmenu"] .popover:visible'); - if(openMenu) { - var li_element=openMenu.closest('li'); - result=li_element.attr('id'); + var openMenu = $('#guestList div[name="actionmenu"] .dropdown-menu:visible'); + if (openMenu) { + var li_element = openMenu.closest('li'); + result = li_element.attr('id'); } return result; }; kimchi.listVmsAuto = function() { - if (kimchi.vmTimeout) { - clearTimeout(kimchi.vmTimeout); - } - var getCreatingGuests = function(){ - var guests = []; - kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/plugins/kimchi/vms/[^/]+$'), function(tasks) { - for(var i=0;i<tasks.length;i++){ - var guestUri = tasks[i].target_uri; - var guestName = guestUri.split('/')[4] - guests.push($.extend({}, kimchi.sampleGuestObject, {name: guestName, isCreating: true})); - if(kimchi.trackingTasks.indexOf(tasks[i].id)==-1) - kimchi.trackTask(tasks[i].id, null, function(err){ - wok.message.error(err.message); - }, null); - } - }, null, true); - return guests; - }; - var getCloningGuests = function(){ - var guests = []; - kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/plugins/kimchi/vms/.+/clone'), function(tasks) { - for(var i=0;i<tasks.length;i++){ - var guestUri = tasks[i].target_uri; - var guestName = guestUri.split('/')[4] - guests.push($.extend({}, kimchi.sampleGuestObject, {name: guestName, isCloning: true})); - if(kimchi.trackingTasks.indexOf(tasks[i].id)==-1) - kimchi.trackTask(tasks[i].id, null, function(err){ - wok.message.error(err.message); - }, null); - } - }, null, true); - return guests; - }; - kimchi.listVMs(function(result, textStatus, jqXHR) { - if (result && textStatus=="success") { - result = getCloningGuests().concat(result); - result = getCreatingGuests().concat(result); - if(result.length) { - var listHtml = ''; - var guestTemplate = kimchi.guestTemplate; - var currentConsoleImages = kimchi.getVmsCurrentConsoleImgs(); - var openMenuGuest = kimchi.getOpenMenuVmId(); - $('#guestList').empty(); - $('#guestListField').show(); - $('#noGuests').hide(); - - $.each(result, function(index, vm) { - var guestLI = kimchi.createGuestLi(vm, currentConsoleImages[vm.name], vm.name==openMenuGuest); - $('#guestList').append(guestLI); - }); - } else { - $('#guestListField').hide(); - $('#noGuests').show(); - } - } - - kimchi.vmTimeout = window.setTimeout("kimchi.listVmsAuto();", 5000); - }, function(errorResponse, textStatus, errorThrown) { - if(errorResponse.responseJSON && errorResponse.responseJSON.reason) { - wok.message.error(errorResponse.responseJSON.reason); + //Check if the actions button is opened or not, + //if opended stop the reload of the itens until closed + var $isDropdownOpened = $('[name="guest-actions"] ul.dropdown-menu').is(":visible"); + if (!$isDropdownOpened) { + if (kimchi.vmTimeout) { + clearTimeout(kimchi.vmTimeout); } + var getCreatingGuests = function() { + var guests = []; + kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/vms/[^/]+$'), function(tasks) { + for (var i = 0; i < tasks.length; i++) { + var guestUri = tasks[i].target_uri; + var guestName = guestUri.split('/')[2] + guests.push($.extend({}, kimchi.sampleGuestObject, { + name: guestName, + isCreating: true + })); + if (kimchi.trackingTasks.indexOf(tasks[i].id) == -1) + kimchi.trackTask(tasks[i].id, null, function(err) { + wok.message.error(err.message); + }, null); + } + }, null, true); + return guests; + }; + var getCloningGuests = function() { + var guests = []; + kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/vms/.+/clone'), function(tasks) { + for (var i = 0; i < tasks.length; i++) { + var guestUri = tasks[i].target_uri; + var guestName = guestUri.split('/')[2] + guests.push($.extend({}, kimchi.sampleGuestObject, { + name: guestName, + isCloning: true + })); + if (kimchi.trackingTasks.indexOf(tasks[i].id) == -1) + kimchi.trackTask(tasks[i].id, null, function(err) { + wok.message.error(err.message); + }, null); + } + }, null, true); + return guests; + }; + kimchi.listVMs(function(result, textStatus, jqXHR) { + if (result && textStatus == "success") { + result = getCloningGuests().concat(result); + result = getCreatingGuests().concat(result); + if (result.length) { + var listHtml = ''; + var guestTemplate = kimchi.guestTemplate; + var currentConsoleImages = kimchi.getVmsCurrentConsoleImgs(); + var openMenuGuest = kimchi.getOpenMenuVmId(); + $('#guestList').empty(); + $('#guestListField').show(); + $('#noGuests').hide(); + + $.each(result, function(index, vm) { + var guestLI = kimchi.createGuestLi(vm, currentConsoleImages[vm.name], vm.name == openMenuGuest); + $('#guestList').append(guestLI); + }); + } else { + $('#guestListField').hide(); + $('#noGuests').show(); + } + } + + kimchi.vmTimeout = window.setTimeout("kimchi.listVmsAuto();", 5000); + }, + function(errorResponse, textStatus, errorThrown) { + if (errorResponse.responseJSON && errorResponse.responseJSON.reason) { + wok.message.error(errorResponse.responseJSON.reason); + } + kimchi.vmTimeout = window.setTimeout("kimchi.listVmsAuto();", 5000); + }); + } else { + clearTimeout(kimchi.vmTimeout); kimchi.vmTimeout = window.setTimeout("kimchi.listVmsAuto();", 5000); - }); + } }; + kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { - var result=kimchi.guestElem.clone(); - + var result = kimchi.guestElem.clone(); + //Setup the VM list entry - var vmRunningBool=(vmObject.state=="running"); - var vmSuspendedBool = (vmObject.state=="paused"); - var vmPoweredOffBool = (vmObject.state=="shutoff"); + var currentState = result.find('.guest-state'); + var vmRunningBool = (vmObject.state == "running"); + var vmSuspendedBool = (vmObject.state == "paused"); + var vmPoweredOffBool = (vmObject.state == "shutoff"); var vmPersistent = (vmObject.persistent == true); - result.attr('id',vmObject.name); + + if (vmObject.state !== 'undefined') { + currentState.addClass(vmObject.state); + }; + result.attr('id', vmObject.name); result.data(vmObject); //Add the Name - var guestTitle=result.find('.title').attr('title',vmObject.name); + var guestTitle = result.find('.title').attr('val', vmObject.name); guestTitle.html(vmObject.name); + //Add the OS Type and Icon + var osType = result.find('.distro-icon'); + if (vmObject.icon == 'plugins/kimchi/images/icon-fedora.png') { + osType.addClass('icon-fedora'); + osType.attr('val', 'Fedora'); + osType.html('Fedora'); + } else if (vmObject.icon == 'plugins/kimchi/images/icon-ubuntu.png') { + osType.addClass('icon-ubuntu'); + osType.attr('val', 'Ubuntu'); + osType.html('Ubuntu'); + } else if (vmObject.icon == 'plugins/kimchi/images/icon-centos.png') { + osType.addClass('icon-centos'); + osType.attr('val', 'Centos'); + osType.html('Centos'); + } else if (vmObject.icon == 'plugins/kimchi/images/icon-opensuse.png') { + osType.addClass('icon-opensuse'); + osType.attr('val', 'openSUSE'); + osType.html('openSUSE'); + } else if (vmObject.icon == 'plugins/kimchi/images/icon-gentoo.png') { + osType.addClass('icon-gentoo'); + osType.attr('val', 'Gentoo'); + osType.html('Gentoo'); + } else if (vmObject.icon == 'plugins/kimchi/images/icon-debian.png') { + osType.addClass('icon-debian'); + osType.attr('val', 'Debian'); + osType.html('Debian'); + } else { + //Unknown + osType.addClass('icon-unknown'); + osType.attr('val', 'Unknown'); + osType.html('Unknown'); + } + //Setup the VM console thumbnail display var curImg = vmObject.icon; if (vmObject.screenshot) { @@ -328,56 +401,133 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { } var load_src = curImg || 'plugins/kimchi/images/icon-vm.png'; var tile_src = prevScreenImage || vmObject['load-src']; - var liveTile=result.find('div[name=guest-tile] > .tile'); + var liveTile = result.find('div[name=guest-tile] > .tile'); liveTile.addClass(vmObject.state); - liveTile.find('.imgactive').attr('src',tile_src); - var imgLoad=liveTile.find('.imgload'); + liveTile.find('.imgactive').attr('src', tile_src); + var imgLoad = liveTile.find('.imgload'); imgLoad.on('load', function() { - var oldImg=$(this).parent().find('.imgactive'); - oldImg.removeClass("imgactive").addClass("imgload"); - oldImg.attr("src",""); - $(this).addClass("imgactive").removeClass("imgload"); - $(this).off('load'); - }); - imgLoad.attr('src',load_src); + var oldImg = $(this).parent().find('.imgactive'); + oldImg.removeClass("imgactive").addClass("imgload"); + oldImg.attr("src", ""); + $(this).addClass("imgactive").removeClass("imgload"); + $(this).off('load'); + }); + imgLoad.attr('src', load_src); //Link the stopped tile to the start action, the running tile to open the console, and the paused tile to resume - if(!(vmObject.isCloning || vmObject.isCreating)){ + if (!(vmObject.isCloning || vmObject.isCreating)) { if (vmPoweredOffBool) { - liveTile.off("click", kimchi.openVmConsole); - liveTile.off("click", kimchi.vmresume); - liveTile.on("click", kimchi.vmstart); - liveTile.hover(function(event){$(this).find('.overlay').show()}, function(event){$(this).find('.overlay').hide()}); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.vmresume(event); + }); + liveTile.on("click", function(event) { + event.preventDefault(); + kimchi.vmstart(event); + }); + liveTile.hover("click", function(event) { + event.preventDefault(); + $(this).find('.overlay').show() + }, function(event) { + $(this).find('.overlay').hide() + }); } else if (vmSuspendedBool) { - liveTile.off("click", kimchi.vmstart); - liveTile.off("click", kimchi.openVmConsole); - liveTile.on("click", kimchi.vmresume); - if(vmObject.state="paused") { - liveTile.find('.overlay').attr('src',"plugins/kimchi/images/theme-default/ac24_resume.png"); - liveTile.find('.overlay').attr('alt',"Resume"); - } - liveTile.hover(function(event){$(this).find('.overlay').show()}, function(event){$(this).find('.overlay').hide()}); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.vmstart(event); + }); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); + liveTile.on("click", function(event) { + event.preventDefault(); + kimchi.vmresume(event); + }); + liveTile.hover("click", function(event) { + event.preventDefault(); + $(this).find('.overlay').show() + }, function(event) { + $(this).find('.overlay').hide() + }); + if (vmObject.state = "paused") { + liveTile.find('.overlay').attr('src', "plugins/kimchi/images/theme-default/ac24_resume.png"); + liveTile.find('.overlay').attr('alt', "Resume"); + } + liveTile.hover(function(event) { + $(this).find('.overlay').show() + }, function(event) { + $(this).find('.overlay').hide() + }); } else { - liveTile.off("click", kimchi.vmstart); - liveTile.off("click", kimchi.vmresume); - liveTile.on("click", kimchi.openVmConsole); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.vmstart(event); + }); + liveTile.off("click", function(event) { + event.preventDefault(); + kimchi.vmresume(event); + }); + liveTile.on("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); } } - //Setup the gauges - var stats=vmObject.stats; - var gaugeValue=0; - gaugeValue=parseInt(stats.net_throughput); - kimchi.circleGaugeInit(result, "net_throughput",gaugeValue,(gaugeValue*100/stats.net_throughput_peak)); - gaugeValue=parseInt(stats.io_throughput); - kimchi.circleGaugeInit(result, "io_throughput",gaugeValue,(gaugeValue*100/stats.io_throughput_peak)); - gaugeValue=parseInt(stats.cpu_utilization); - kimchi.circleGaugeInit(result, "cpu_utilization",gaugeValue+"%",gaugeValue); - gaugeValue=parseInt(stats.mem_utilization); - kimchi.circleGaugeInit(result, "mem_utilization",gaugeValue+"%",gaugeValue); + //Setup progress bars + if (!vmPoweredOffBool) { + var cpuUtilization = 0; + var cpuMaxThreshold = 80; + var cpuMediumThreshold = 60; + cpuUtilization = parseInt(vmObject.stats.cpu_utilization); + result.find('.cpu-progress-bar').width(cpuUtilization + '%'); + result.find('.processors-percentage').html(cpuUtilization + '%'); + result.find('.medium-grey.cpu').width(cpuMaxThreshold + '%'); + result.find('.light-grey.cpu').width(cpuMediumThreshold + '%'); + + var memoryUtilization = 0; + var memoryMaxThreshold = 80; + var memoryMediumThreshold = 60; + memoryUtilization = parseInt(vmObject.stats.mem_utilization); + result.find('.memory-progress-bar').width(memoryUtilization + '%'); + result.find('.memory-percentage').html(memoryUtilization + '%'); + result.find('.medium-grey.memory').width(memoryMaxThreshold + '%'); + result.find('.light-grey.memory').width(memoryMediumThreshold + '%'); + + var ioThroughput = 0; + var ioMaxThreshold = 80; + var ioMediumThreshold = 60; + ioValue = parseInt(vmObject.stats.io_throughput); + ioThroughput = (ioValue * 100 / vmObject.stats.io_throughput_peak); + result.find('.storage-progress-bar').width(ioThroughput + '%'); + result.find('.storage-percentage').html(Math.round(ioThroughput) + 'KB/s'); + result.find('.medium-grey.io').width(ioMaxThreshold + '%'); + result.find('.light-grey.io').width(ioMediumThreshold + '%'); + + var netThroughput = 0; + var netMaxThreshold = 80; + var netMediumThreshold = 60; + netValue = parseInt(vmObject.stats.net_throughput); + netThroughput = (netValue * 100 / vmObject.stats.net_throughput_peak); + result.find('.network-progress-bar').width(netThroughput + '%'); + result.find('.network-percentage').html(Math.round(netThroughput) + 'KB/s'); + result.find('.medium-grey.network').width(netMaxThreshold + '%'); + result.find('.light-grey.network').width(netMediumThreshold + '%'); + } else { + result.find('.progress').css("display", "none"); + result.find('.percentage-label').html('--'); + result.find('.measure-label').html('--'); + result.find('.measure-label').html('--'); + result.find('.guest-actions').css("margin-top", "3px"); + } //Setup the VM Actions - var guestActions=result.find("div[name=guest-actions]"); + var guestActions = result.find("div[name=guest-actions]"); guestActions.find(".shutoff-disabled").prop("disabled", !vmRunningBool); guestActions.find(".running-disabled").prop("disabled", vmRunningBool); guestActions.find(".non-persistent-disabled").prop("disabled", !vmPersistent); @@ -390,7 +540,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { //Hide Pause button and menu guestActions.find(".pause-disabled").hide(); guestActions.find(".pause-hidden").hide(); - } + } if (vmRunningBool) { //VM IS running //Hide Start @@ -400,6 +550,10 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { } if (vmPoweredOffBool) { //VM is powered off + result.addClass('inactive'); + result.find('.distro-icon').addClass('inactive'); + result.find('.vnc-link').css("display", "none"); + result.find('.column-vnc').html('--'); //Hide PowerOff guestActions.find(".shutoff-hidden").hide(); //Hide Pause @@ -408,98 +562,116 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { guestActions.find(".resume-hidden").hide(); } - var consoleActions=guestActions.find("[name=vm-console]"); + var consoleActions = guestActions.find("[name=vm-console]"); + var consoleLinkActions = result.find(".vnc-link"); if ((vmObject.graphics['type'] == 'vnc') || (vmObject.graphics['type'] == 'spice')) { - consoleActions.on("click", kimchi.openVmConsole); + consoleActions.on("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); + consoleLinkActions.on("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); consoleActions.show(); - } else { //we don't recognize the VMs supported graphics, so hide the menu choice + } else { //we don't recognize the VMs supported graphics, so hide the menu choice consoleActions.hide(); - consoleActions.off("click",kimchi.openVmConsole); + consoleActions.off("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); + consoleLinkActions.off("click", function(event) { + event.preventDefault(); + kimchi.openVmConsole(event); + }); } //Setup action event handlers - if(!(vmObject.isCloning || vmObject.isCreating)){ - guestActions.find("[name=vm-start]").on({click : kimchi.vmstart}); - guestActions.find("[name=vm-poweroff]").on({click : kimchi.vmpoweroff}); - if ((vmRunningBool) || (vmSuspendedBool)) { - //If the guest is not running, do not enable reset; otherwise, reset is enabled (when running or paused) - guestActions.find("[name=vm-reset]").on({click : kimchi.vmreset}); + if (!(vmObject.isCloning || vmObject.isCreating)) { - //If the guest is not running, do not enable shutdown;otherwise, shutdown is enabled (when running or paused) - guestActions.find("[name=vm-shutdown]").on({click : kimchi.vmshutdown}); + guestActions.find("[name=vm-start]").on("click", function(event) { + event.preventDefault(); + kimchi.vmstart(event); + }); + guestActions.find("[name=vm-poweroff]").on("click", function(event) { + event.preventDefault(); + kimchi.vmpoweroff(event); + }); + if ((vmRunningBool) || (vmSuspendedBool)) { + //If the guest is not running, do not enable reset; otherwise, reset is enabled (when running or paused) + guestActions.find("[name=vm-reset]").on("click", function(event) { + event.preventDefault(); + kimchi.vmreset(event); + }); + //If the guest is not running, do not enable shutdown;otherwise, shutdown is enabled (when running or paused) + guestActions.find("[name=vm-shutdown]").on("click", function(event) { + event.preventDefault(); + kimchi.vmshutdown(event); + }); } if (vmSuspendedBool) { - guestActions.find("[name=vm-resume]").on({click : kimchi.vmresume}); + guestActions.find("[name=vm-resume]").on("click", function(event) { + event.preventDefault(); + kimchi.vmresume(event); + }); } if (vmRunningBool) { - guestActions.find("[name=vm-pause]").on({click : kimchi.vmsuspend}); + guestActions.find("[name=vm-pause]").on("click", function(event) { + event.preventDefault(); + kimchi.vmsuspend(event); + }); } - guestActions.find("[name=vm-edit]").on({click : kimchi.vmedit}); - guestActions.find("[name=vm-delete]").on({click : kimchi.vmdelete}); - guestActions.find("[name=vm-clone]").click(function(){ + guestActions.find("[name=vm-edit]").on("click", function(event) { + event.preventDefault(); + kimchi.vmedit(event); + }); + guestActions.find("[name=vm-delete]").on("click", function(event) { + event.preventDefault(); + kimchi.vmdelete(event); + }); + guestActions.find("[name=vm-clone]").on("click", function(event) { + event.preventDefault(); var guest = $(this).closest('li[name=guest]').attr("id"); wok.confirm({ - title : i18n['KCHAPI6006M'], - content : i18n['KCHVM6010M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6006M'], + content: i18n['KCHVM6010M'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }, function() { - kimchi.cloneGuest(guest, function(data){ + kimchi.cloneGuest(guest, function(data) { kimchi.listVmsAuto(); }); }, null); }); - - //Maintain menu open state - var actionMenu=guestActions.find("div[name=actionmenu]"); - if (openMenu) { - $('.popover', actionMenu).toggle(); - } - - }else{ + } else { guestActions.find('.btn').attr('disabled', true); - $('.popover', guestActions.find("div[name=actionmenu]")).remove(); - result.find('.guest-pending').removeClass('hide-content'); pendingText = result.find('.guest-pending .text') - if(vmObject.isCloning) + if (vmObject.isCloning) pendingText.text(i18n['KCHAPI6009M']); else pendingText.text(i18n['KCHAPI6008M']); } - return result; }; -kimchi.circleGaugeInit = function(topElement, divName, display, percentage){ - var gauge=topElement.find('div[name="' + divName + '"] .circleGauge'); - if(gauge) { - var data=Object(); - data.percentage = percentage; - data.display = display; - gauge.data(data); - } - gauge.circleGauge(); - return(gauge); -}; - kimchi.guestSetRequestHeader = function(xhr) { xhr.setRequestHeader('Accept', 'text/html'); }; kimchi.guest_main = function() { - if(wok.tabMode['guests'] === 'admin') { - $('.tools').attr('style','display'); + if (wok.tabMode['guests'] === 'admin') { + $('.tools').attr('style', 'display'); $("#vm-add").on("click", function(event) { wok.window.open('plugins/kimchi/guest-add.html'); }); } kimchi.guestTemplate = $('#guest-tmpl').html(); - kimchi.guestElem=$('<div/>').html(kimchi.guestTemplate).find('li'); + kimchi.guestElem = $('<div/>').html(kimchi.guestTemplate).find('li[name="guest"]'); $('#guests-root-container').on('remove', function() { kimchi.vmTimeout && clearTimeout(kimchi.vmTimeout); }); diff --git a/src/wok/plugins/kimchi/ui/pages/guest.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest.html.tmpl index 4aba5ad..52f595d 100644 --- a/src/wok/plugins/kimchi/ui/pages/guest.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guest.html.tmpl @@ -21,60 +21,87 @@ #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) #silent _ = t.gettext #silent _t = t.gettext - <li name="guest" class="guest"> - <div class="sortable guest-type"> - <div class="guest-general"> - <h2 class="title" title="{name}">{name}</h2> - </div> - <div class="guest-pending hide-content"> - <span class="icon"></span><span class="text"></span> - </div> - </div> - <div name="cpu_utilization" class="sortable"> - <div class="circleGauge"></div> - </div> - <div name="mem_utilization" class="sortable"> - <div class="circleGauge"></div> - </div> - <div name="io_throughput" class="sortable"> - <div class="circleGauge"></div> - <div class="subtitle">KB/s</div> - </div> - <div name="net_throughput" class="sortable"> - <div class="circleGauge"></div> - <div class="subtitle">KB/s</div> - </div> - <div name="guest-tile" class="sortable guest-tile"> + <li name="guest" class="wok-guest-list-body"> + <span class='column-state'> + <span class='guest-state'> + <i class="fa fa-power-off"></i> + <i class="fa fa-ban"></i> + <i class="fa fa-undo"></i> + <i class="fa fa-refresh fa-spin"></i> + </span> + </span><!-- + --><span class='column-name title'></span><!-- + --><span class='column-action pull-right'> + <span class="pull-right"> + <div class="dropdown menu-flat guest-actions" name="guest-actions" style="margin-top: 6px"> + <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu"> + <li role="presentation"><a nwAct="connect-vnc" class='shutoff-disabled' name="vm-console" href="#"><i class="fa fa-list-alt"></i>$_("Connect VNC")</a></li> + <!-- <li role="presentation"><a nwAct="view-vnc" class='shutoff-disabled' name="vm-view-vnc" href="#"><i class="fa fa-eye"></i>$_("View VNC Console")</a></li> --> + <li role="presentation"><a nwAct="edit" name="vm-edit" href="#"><i class="fa fa-pencil"></i>$_("Edit")</a></li> + <li role="presentation"><a href="#" nwAct="clone" class='running-disabled' name="vm-clone"><i class="fa fa-share-alt"></i>$_("Clone")</a></li> + <li role="presentation"><a nwAct="reset" class='shutoff-hidden non-persistent-disabled' name="vm-reset" href="#"><i class="fa fa-refresh"></i>$_("Reset")</a></li> + <li role="presentation"><a nwAct="pause" class='pause-hidden non-persistent-disabled' name="vm-pause" href="#"><i class="fa fa-pause"></i>$_("Pause")</a></li> + <li role="presentation"><a nwAct="resume" class='resume-hidden' name="vm-resume" href="#"><i class="fa fa-play-circle"></i>$_("Resume")</a></li> + <li role="presentation"><a nwAct="shutdown" class='shutoff-hidden' name="vm-shutdown" href="#"><i class="fa fa-ban"></i>$_("Shut Down")</a></li> + <li role="presentation"><a nwAct="start" class='running-hidden' name="vm-start" href="#"><i class="fa fa-power-off"></i>$_("Start")</a></li> + <li role="presentation"><a nwAct="power-off" class='shutoff-hidden' name="vm-poweroff" href="#"><i class="fa fa-power-off"></i>$_("Power Off")</a></li> + <li role="presentation" class='critical'><a nwAct="delete" class='non-persistent-disabled' name="vm-delete" href="#"><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> + </ul> + </div> + </span> + </span><!-- + --><span name="guest-tile" class="sortable guest-tile item-hidden"> <div class="tile "> <img class="imgactive" alt="" src=""> <img class="imgload" alt="" src=""> <img class="overlay shutoff-hidden" alt="$_("Start")" src="plugins/kimchi/images/theme-default/icon-power-down.png" > </div> - </div> - <div class="sortable guest-actions" name="guest-actions"> - <div class="top"> - <button class="btn reset-disabled" name="vm-reset" href="javascript:void(0);" title="$_("Reset")"><span class="icon reset"></span></button> - <button class="btn pause-disabled" name="vm-pause" href="javascript:void(0);" title="$_("Pause")"><span class="icon pause"></span></button> - <button class="btn resume-hidden" name="vm-resume" href="javascript:void(0);" title="$_("Resume")"><span class="icon resume"></span></button> - <button class="btn running-hidden" name="vm-start" href="javascript:void(0);" title="$_("Start")"><span class="icon power-down"></span></button> - <button class="btn shutoff-hidden" name="vm-poweroff" href="javascript:void(0);" title="$_("Power Off")"><span class="icon power-up"></span></button> + </span><!-- + --><span class='column-type distro-icon' style='padding-left: 40px !important'></span><!-- + --><span class='column-vnc'><i class="fa fa-spinner fa-spin"></i><a nwAct="connect-vnc" name="vm-console" class="vnc-link" href="#">$_("View Console")</a></span><!-- + --><span class='column-processors'> + <div class="percentage-label processors-percentage"> </div> - <div class="bottom"> - <div name="actionmenu" class="btn dropdown popable vm-action" style="width: 126px"> - <span class="text">$_("Actions")</span><span class="arrow"></span> - <div class="popover actionsheet right-side" style="width: 250px"> - <button class="button-big shutoff-disabled" name="vm-console" ><span class="text">$_("Connect")</span></button> - <button class="button-big running-disabled" name="vm-clone"><span class="text">$_("Clone")</span></button> - <button class="button-big" name="vm-edit"><span class="text">$_("Edit")</span></button> - <button class="button-big shutoff-hidden non-persistent-disabled" name="vm-reset"><span class="text">$_("Reset")</span></button> - <button class="button-big pause-hidden non-persistent-disabled" name="vm-pause"><span class="text">$_("Pause")</span></button> - <button class="button-big resume-hidden" name="vm-resume"><span class="text">$_("Resume")</span></button> - <button class="button-big shutoff-hidden" name="vm-shutdown"><span class="text">$_("Shut Down")</span></button> - <button class="button-big running-hidden" name="vm-start"><span class="text">$_("Start")</span></button> - <button class="button-big shutoff-hidden" name="vm-poweroff"><span class="text">$_("Power Off")</span></button> - <button class="button-big red non-persistent-disabled" name="vm-delete">$_("Delete")</button> - </div> - </div> + <div class="progress"> + <div class="progress-bar dark-grey cpu" style="width: 100%"></div> + <div class="progress-bar medium-grey cpu"></div> + <div class="progress-bar light-grey cpu"></div> + <div class="progress-bar cpu-progress-bar"></div> + </div> + </span><!-- + --><span class="item-hidden">$_("Processors Used")</span><!-- + --><span class='column-memory'> + <div class='percentage-label memory-percentage'></div> + <div class="progress"> + <div class="progress-bar dark-grey" style="width: 100%"></div> + <div class="progress-bar medium-grey memory"></div> + <div class="progress-bar light-grey memory"></div> + <div class="progress-bar memory-progress-bar"></div> + </div> + </span><!-- + --><span class="item-hidden">$_("Memory Available")</span><!-- + --><span class='column-storage'> + <div class='measure-label storage-percentage'></div> + <div class="progress"> + <div class="progress-bar dark-grey" style="width: 100%"></div> + <div class="progress-bar medium-grey io"></div> + <div class="progress-bar light-grey io"></div> + <div class="progress-bar storage-progress-bar"></div> + </div> + </span><!-- + --><span class="item-hidden">$_("Storage I/O")</span><!-- + --><span class='column-network'> + <div class='measure-label network-percentage'></div> + <div class="progress"> + <div class="progress-bar dark-grey" style="width: 100%"></div> + <div class="progress-bar medium-grey network" style="width: 85%"></div> + <div class="progress-bar light-grey network" style="width: 75%"></div> + <div class="progress-bar network-progress-bar"></div> </div> - </div> + </span><!-- + --><span class="item-hidden">$_("Network I/O")</span> </li> + + diff --git a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl index a5c6846..0ca6d79 100644 --- a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl @@ -55,18 +55,31 @@ </nav> <div id="guest-content-container"> <div class="container"> + <div class="row grid-control"> + <div class="pull-right"> + <label for="guests-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> + </div> + </div> <div id="alert-container"></div> <div id="guestListField" style="display: none"> - <ul class="list-title"> - <li class="guest-type">$_("Name")</li> - <li class="guest-cpu">$_("CPU")</li> - <li class="guest-memory">$_("Memory")</li> - <li class="guest-storage">$_("Disk I/O")</li> - <li class="guest-network">$_("Network I/O")</li> - <li class="guest-tile">$_("Livetile")</li> - <li class="guest-actions">$_("Actions")</li> - </ul> - <ul id="guestList" class="list-vm empty-when-logged-off"> + <ul class="wok-guest-list"> + <li class="wok-guest-list-header"> + <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- + --><span class="column-name"><span>$_("Guest Name ID")</span></span><!-- + --><span class="column-type"><span>$_("OS Type")</span></span><!-- + --><span class="column-vnc"><span>$_("Virtual Network Console")</span></span><!-- + --><span class="column-processors"><span>$_("Processors Used")</span></span><!-- + --><span class="column-memory"><span>$_("Memory Available")</span></span><!-- + --><span class="column-storage"><span>$_("Storage I/O")</span></span><!-- + --><span class="column-network"><span>$_("Network I/O")</span></span><!-- + --><span class="column-action" style="display:none"> + <span class="sr-only">Actions</span><!-- + --></span> + </li> + <li class="wok-guest-list-body"> + <ul id="guestList" class="wok-guest-list empty-when-logged-off" style="-webkit-padding-start: 0px;"> + </li> </ul> </div> <div id="noGuests" class="list-no-result" style="display: none;"> diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 23c361a..b06be5f 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -90,3 +90,244 @@ width: 592px; } } + +#guest-content-container { + .wok-guest-list { + display: block; + width: 100%; + list-style-type: none; + > li:nth-child(even) { + background-color: $table-bg-accent; + } + > li:nth-child(odd) { + background-color: $table-bg; + } + > li:first-child { + border-top: 0; + } + .wok-guest-list-header { + border-top: 0 none; + height: 60px; + > span { + padding: 6px 2px; + display: inline-block; + vertical-align: middle; + height: 60px; + font-family: $font-family-sans-serif; + font-weight: 400; + font-size: 12.5pt; + line-height: 1.42857; + border-bottom: none; + border-top: 0; + position: relative; + > span { + position: absolute; + bottom: 6px; + display: block; + } + } + > span.column-state { + width: 2.9272%; + text-align: center; + } + } + .wok-guest-list-body { + border-top: 1px solid $table-border-color; + > span { + padding: 6px 2px; + display: inline-block; + vertical-align: middle; + font-family: $font-family-sans-serif; + font-size: 12.5pt; + line-height: 2.42857; + font-weight: bold; + } + .progress { + display: inline-block; + width: 60%; + position: relative; + vertical-align: top; + margin-top: 15px; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .progress-bar { + position: absolute; + top: 0; + left: 0; + -webkit-box-shadow: none; + box-shadow: none; + &.dark-grey { + background-color: map-get($guestCharts, darkGray); + } + &.medium-grey { + background-color: map-get($guestCharts, mediumGray); + } + &.light-grey { + background-color: map-get($guestCharts, lightGray); + } + } + div.percentage-label { + display: inline-block; + width: 25%; + margin-top: 6px; + } + div.measure-label { + display: inline-block; + width: 35%; + margin-top: 6px; + } + } + } + .wok-guest-list .wok-guest-list-header, + .wok-guest-list .wok-guest-list-body { + > span.column-state { + width: 2.9272%; + text-align: center; + > span.guest-state { + font-size: 22px; + position: relative; + } + > span.guest-state.running > .fa-ban { + display: none; + } + > span.guest-state.running > .fa-power-off { + color: $fa-green; + } + > span.guest-state.running > .fa-undo { + display: none; + } + > span.guest-state.running > .fa-refresh { + display: none; + } + > span.guest-state.shutoff > .fa-ban { + color: $gray-light; + } + > span.guest-state.shutoff > .fa-power-off { + display: none; + } + > span.guest-state.shutoff > .fa-undo { + display: none; + } + > span.guest-state.shutoff > .fa-refresh { + display: none; + } + > span.guest-state.starting > .fa-ban { + display: none; + } + > span.guest-state.starting > .fa-power-off { + display: none; + } + > span.guest-state.starting > .fa-undo { + color: $gray-light; + } + > span.guest-state.starting > .fa-refresh { + display: none; + } + > span.guest-state.resetting > .fa-ban { + display: none; + } + > span.guest-state.resetting > .fa-power-off { + display: none; + } + > span.guest-state.resetting > .fa-undo { + display: none; + } + > span.guest-state.resetting > .fa-refresh { + color: $fa-green; + } + > span.guest-state.paused > .fa { + display: none; + } + } + > span.column-name { + width: 13.6867%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + > span.column-type { + width: 9.9683%; + } + > span.column-vnc { + width: 11.8670%; + > a { + font-weight: normal; + color: $vnc-blue !important; + } + .fa-spin { + display: none + } + .fa-spin.active { + display: inline-block; + margin-right: 8px; + font-size: 22px; + color: $vnc-blue !important; + } + } + > span.column-processors { + width: 12.1838%; + > div > div.progress-bar.cpu-progress-bar { + background-color: map-get($colors, administration); + } + } + > span.column-memory { + width: 12.1838%; + > div > div.progress-bar.memory-progress-bar { + background-color: map-get($colors, host); + } + } + > span.column-storage { + width: 12.9746%; + > div > div.progress-bar.storage-progress-bar { + background-color: $state-warning-border; + } + } + > span.column-network { + width: 12.9746%; + > div > div.progress-bar.network-progress-bar { + background-color: map-get($colors, network); + } + } + > span.column-action { + width: 10.9968%; + } + > span.item-hidden { + display: none !important; + } + } + .wok-guest-list .distro-icon { + background-color: transparent; + background-size: 27px 27px; + background-repeat: no-repeat; + background-position: left; + } + .wok-guest-list .distro-icon.inactive { + @include filter(grayscale(100%)) + } + .wok-guest-list .distro-icon.icon-centos { + background-image: url('#{$wok-icon-path}/icon-centos.png'); + } + .wok-guest-list .distro-icon.icon-debian { + background-image: url('#{$wok-icon-path}/icon-debian.png'); + } + .wok-guest-list .distro-icon.icon-fedora { + background-image: url('#{$wok-icon-path}/icon-fedora.png'); + } + .wok-guest-list .distro-icon.icon-opensuse { + background-image: url('#{$wok-icon-path}/icon-opensuse.png'); + } + .wok-guest-list .distro-icon.icon-ubuntu { + background-image: url('#{$wok-icon-path}/icon-ubuntu.png'); + } + .wok-guest-list .distro-icon.icon-gentoo { + background-image: url('#{$wok-icon-path}/icon-gentoo.png'); + } + .wok-guest-list .distro-icon.icon-unknown { + background-image: url('#{$wok-icon-path}/icon-unknown.png'); + } + .wok-guest-list .wok-guest-list-body.inactive { + color: $disabled-color !important; + } +} diff --git a/ui/images/theme-default/icon-unknown.png b/ui/images/theme-default/icon-unknown.png index 83c7fe0fe4a452b815fab60aabb2a915777d8921..0de494b683ffa3da1646efdb93526ed880390093 100644 GIT binary patch literal 3797 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 LNkvXXu0mjfHh&jM delta 737 zcmV<70v`R<9r*>2B!2{FK}|sb0I$e51&Zka000?uMObuGZ)S9NVRB^vL1b@YWgtmy zVP|DhWnpA_ami&o0007uNkl<Zc-pL%O-NKx6vy8<YJ+7FeL_L>MfA1E+yqS#5ft=I zi`p49n|1{mRvW2JD;J7rP@AGC+GQX?K|zaJNI?bJ2bqGT*?*!T95ZM7U-&(F%-r4_ z(+fYC``)|vf6lq*o-;wAPzW4`u~gg?1LB)_DK3c0atkLljAB*dv0E46w|FC3XIgA~ zk&xquc*gH-7O{%JHa3YrVvPAXp-eN+ST?bW%@y~=N#<9?A#sWMhM5!_5t~K5=n-?o z6VZ#u3CkvxMt`w93Gq~17Hh;p&dM1)pClT$WlH=wA(}m*&ET2aU{yH{t7m=Un)oON zMM^BeySJiW>=o^Cn<PT75{cNbH;R3D@m~BC55+K{&5B=QD<LoO%o;|Q6rb_JWnhz7 z6nWnqxqD})bE#{|xV9K$HX`J_o)G*0SFDMR&c}!)#eX9)M0kg&qf-)FE<O;#6^07q zgt{@VZK`5tSlDRH*jM5?1t7~An`)y=&0}Iz+&7B34zQXqx(ZWgEmudyVm25win-LU zjuh*(RqP@q=u==HFCfQ!omH%x#CT08%Z+N1sE)cB(1Oa=#@VEEjkqlu44q>S9Xq_- zz0nNzWq;#ZaYURJ^Z0HV7Pex&Z#bh4V_>JaAy$gr6l<^8aVmFh(Pjs*_D)RLPkG)Q z#PAAV>L<A$*`h@c#9h)l?-ANb0jMc@-X*>gt&#+BEo0U{EI%i1iCwgpDg@klb|94V zG~6DVZb_$J5YuV<S=>pOCpgcratu?5!?A_%e_EjxmGrYTALR*UAD8+&A#Ug3lU(32 zL{k*r9e9yppB8HCWVZX7XNnNH;<}z^u7ABFlsV7;nCl!tmiu`%dcL8?UjYUH-C8&C T(|TA^00000NkvXXu0mjf`2A9? -- 1.9.3