From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Added a warning icon when a template has invalid parameters in Templates list and when editing a template. Signed-off-by: peterpennings <peterpnns(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/kimchi.css | 97 ++++++++++++++++++++++++++++++++-- ui/css/src/modules/_guests.scss | 6 +++ ui/css/src/modules/_iso-list.scss | 22 +++++++- ui/css/src/modules/_templates.scss | 53 +++++++++++++++++-- ui/js/src/kimchi.guest_add_main.js | 7 +++ ui/js/src/kimchi.template_edit_main.js | 52 ++++++++++++++---- ui/js/src/kimchi.template_main.js | 9 +++- ui/pages/guest-add.html.tmpl | 11 ++-- ui/pages/i18n.json.tmpl | 1 + ui/pages/tabs/templates.html.tmpl | 24 +++++---- ui/pages/template-edit.html.tmpl | 6 ++- 11 files changed, 255 insertions(+), 33 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 1d33d45..e7bed2e 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -121,6 +121,38 @@ transition: all .1s ease-in-out; } +#template-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-inner, +#guest-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-inner { + font-size: 10pt; + padding: 6px 8px; +} + +#template-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-inner, +#guest-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-inner { + max-width: 300px; +} + +#template-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip[style], +#guest-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip[style] { + left: 7px !important; + right: 7px !important; +} + +#template-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-arrow[style], +#guest-add-window.modal-content label.box-iso-outer span.box-iso-inner .tooltip-arrow[style] { + left: 216px !important; +} + +#template-add-window.modal-content li[data-invalid="invalid"] label.box-iso-outer, +#guest-add-window.modal-content li[data-invalid="invalid"] label.box-iso-outer { + color: #999 !important; +} + +#template-add-window.modal-content li[data-invalid="invalid"] label.box-iso-outer span.box-iso-inner, +#guest-add-window.modal-content li[data-invalid="invalid"] label.box-iso-outer span.box-iso-inner { + background: rgba(255, 255, 255, 0.4); +} + #template-add-window.modal-content ul.list-template, #template-add-window.modal-content ul.list-iso, #guest-add-window.modal-content ul.list-template, @@ -255,6 +287,13 @@ padding: 10px 30px; } +.guests-modal .template-status { + position: absolute; + right: 15px; + bottom: 15px; + font-size: 32px; +} + #guest-add-window .modal-body { margin: 0; padding: 0; @@ -1807,16 +1846,20 @@ body.wok-gallery { } #templates-root-container .wok-vm-list .column-version { - width: 14.2435%; + width: 12.2435%; font-weight: bold; } #templates-root-container .wok-vm-list .column-processors { - width: 12.8413%; + width: 10.8413%; } #templates-root-container .wok-vm-list .column-memory { - width: 7.3800%; + width: 9.6900%; +} + +#templates-root-container .wok-vm-list .column-status { + width: 1.6900%; } #templates-root-container .wok-vm-list .column-action { @@ -1875,6 +1918,7 @@ body.wok-gallery { } #templates-root-container .wok-vm-gallery .wok-vm-body { + position: relative; padding: 0 20px 0 20px; width: 240px; display: inline-block; @@ -1911,6 +1955,19 @@ body.wok-gallery { cursor: default; } +#templates-root-container .wok-vm-gallery span.template-status { + position: absolute; + bottom: 10px; + right: 10px; + width: 32px; + height: 32px; +} + +#templates-root-container .wok-vm-gallery .invalid-icon { + position: absolute; + font-size: 32px; +} + #templates-root-container .wok-vm-gallery .item-hidden.column-type, #templates-root-container .wok-vm-gallery .item-hidden.column-version, #templates-root-container .wok-vm-gallery .item-hidden.column-processors { padding-bottom: 11px; } @@ -1979,6 +2036,40 @@ body.wok-gallery { background-image: url("/images/theme-default/icon-unknown.png"); } +#templates-root-container span.template-status { + color: #999; +} + +#templates-root-container .tooltip-inner { + font-size: 10pt; + padding: 6px 8px; +} + +#templates-root-container .wok-vm-list .tooltip-inner { + max-width: 300px; +} + +#templates-root-container .wok-vm-list .tooltip[style] { + left: 79px !important; +} + +#templates-root-container .wok-vm-list .tooltip-arrow[style] { + left: 10px !important; +} + +#templates-root-container .wok-vm-gallery .tooltip-inner { + max-width: 320px; +} + +#templates-root-container .wok-vm-gallery .tooltip[style] { + left: 7px !important; + right: 7px !important; +} + +#templates-root-container .wok-vm-gallery .tooltip-arrow[style] { + left: 207px !important; +} + .network-config input.invalid-field[type="text"] { border-color: #FF4444; } diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 6f5dbf0..6c24800 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -38,6 +38,12 @@ overflow: auto; padding: 10px 30px; } + .template-status { + position: absolute; + right: 15px; + bottom: 15px; + font-size: 32px; + } } #guest-add-window { diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss index 222dcdb..355f590 100644 --- a/ui/css/src/modules/_iso-list.scss +++ b/ui/css/src/modules/_iso-list.scss @@ -46,9 +46,29 @@ label.box-iso-outer span.box-iso-inner { display: block; border: 1px solid transparent; - background: $gray-lighter; + background: $body-bg; transition: all .1s ease-in-out; } + label.box-iso-outer span.box-iso-inner .tooltip-inner { + font-size: 10pt; + padding: 6px 8px; + } + label.box-iso-outer span.box-iso-inner .tooltip-inner { + max-width: 300px; + } + label.box-iso-outer span.box-iso-inner .tooltip[style] { + left: 7px !important; + right: 7px !important; + } + label.box-iso-outer span.box-iso-inner .tooltip-arrow[style] { + left: 216px !important; + } + li[data-invalid="invalid"] label.box-iso-outer { + color: $gray-light !important; + } + li[data-invalid="invalid"] label.box-iso-outer span.box-iso-inner { + background: rgba($body-bg, 0.4); + } ul.list-template, ul.list-iso { display: block; diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index a9f0e8f..ad76d0f 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -370,14 +370,17 @@ font-weight: bold; } .column-version { - width: 14.2435%; + width: 12.2435%; font-weight: bold; } .column-processors { - width: 12.8413%; + width: 10.8413%; } .column-memory { - width: 7.3800%; + width: 9.6900%; + } + .column-status { + width: 1.6900%; } .column-action { width: 33.8000%; @@ -423,6 +426,7 @@ display: none; } .wok-vm-body { + position: relative;; padding: 0 20px 0 20px; width: 240px; display: inline-block; @@ -455,6 +459,17 @@ white-space: nowrap; cursor: default; } + span.template-status { + position: absolute; + bottom: 10px; + right: 10px; + width: 32px; + height: 32px; + } + .invalid-icon { + position: absolute; + font-size: 32px; + } .item-hidden { &.column-type, &.column-version, @@ -515,4 +530,36 @@ } } } + span.template-status { + color: #999; + } + .tooltip-inner { + font-size: 10pt; + padding: 6px 8px; + } + + .wok-vm-list .tooltip-inner { + max-width: 300px; + } + + .wok-vm-list .tooltip[style] { + left: 79px !important; + } + + .wok-vm-list .tooltip-arrow[style] { + left: 10px !important; + } + + .wok-vm-gallery .tooltip-inner { + max-width: 320px; + } + + .wok-vm-gallery .tooltip[style] { + left: 7px !important; + right: 7px !important; + } + + .wok-vm-gallery .tooltip-arrow[style] { + left: 207px !important; + } } diff --git a/ui/js/src/kimchi.guest_add_main.js b/ui/js/src/kimchi.guest_add_main.js index 87ad6fa..2b311fc 100644 --- a/ui/js/src/kimchi.guest_add_main.js +++ b/ui/js/src/kimchi.guest_add_main.js @@ -29,9 +29,16 @@ kimchi.guest_add_main = function() { var html = ''; var tmpl = $('#tmpl-template').html(); $.each(result, function(index, value) { + value.invalid_indicator = "invalid"; + if ($.isEmptyObject(value.invalid)) { + value.invalid_indicator = "valid"; + } html += wok.substitute(tmpl, value); }); $('#templateTile').html(html); + $('.iso-radio-hidden[data-invalid="invalid"]').attr("disabled", true); + $('.template-status[data-invalid="valid"]').hide(); + $('[data-toggle="tooltip"]').tooltip(); return; } diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index bc3c2ef..f639e0a 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -133,9 +133,14 @@ kimchi.template_edit_main = function() { storageOptions += '<option value="' + poolName + '">' + poolName + '</option>'; }); - $(storageRow + ' #selectStorageName').append(storageOptions); - $(storageRow + ' #selectStorageName').val(storageData.storageName); - $(storageRow + ' #selectStorageName').selectpicker(); + $(storageRow + ' .selectStorageName').append(storageOptions); + if(!$(storageRow + ' .selectStorageName option[value="'+storageData.storageName+'"]').length){ + var invalidOption = '<option disabled="disabled" selected="selected" value="' + storageData.storageName + '">' + storageData.storageName + '</option>'; + $(storageRow + ' .selectStorageName').prepend(invalidOption); + $(storageRow + ' .selectStorageName').parent().addClass('has-error') + } + $(storageRow + ' .selectStorageName').val(storageData.storageName); + $(storageRow + ' .selectStorageName').selectpicker(); if (storageData.storageType === 'iscsi' || storageData.storageType === 'scsi') { $(storageRow + ' .template-storage-disk').attr('readonly', true).prop('disabled', true); @@ -164,7 +169,8 @@ kimchi.template_edit_main = function() { $(this).parent().parent().remove(); }); - $(storageRow + ' #selectStorageName').change(function() { + $(storageRow + ' select.selectStorageName').change(function() { + $(this).parent().parent().removeClass('has-error'); var poolType = storagePoolsInfo[$(this).val()].type; $(storageRow + ' .template-storage-name').val($(this).val()); $(storageRow + ' .template-storage-type').val(poolType); @@ -319,9 +325,24 @@ kimchi.template_edit_main = function() { $('#guest-show-max-processor i.fa').toggleClass('fa-plus-circle fa-minus-circle'); }); }; + + var checkInvalids = function(){ + $.each(template.invalid, function(key, value) { + if(key === 'cdrom' || key === 'vm-image'){ + $('.tab-content input[name="'+key+'"]').attr('disabled',false).parent().addClass('has-error has-feedback'); + return true; + }else if(key === 'storagepools'){ + return true; + }else { + return false; + } + }); + } + kimchi.listNetworks(initInterface); kimchi.listStoragePools(initStorage); initProcessor(); + checkInvalids(); }; kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate); @@ -415,16 +436,27 @@ kimchi.template_edit_main = function() { data.networks = []; } - kimchi.updateTemplate($('#template-name').val(), data, function() { - kimchi.doListTemplates(); - wok.window.close(); - }, function(err) { + if($('.has-error', '#form-template-storage').length){ + // Workaround to check if invalid storage wasn't changed + $('a[href="#storage"]','#edit-template-tabs').tab('show'); $button.html(i18n['KCHAPI6007M']); $('.modal input[type="text"]').prop('disabled', false); $('.modal input[type="checkbox"]').prop('disabled', false); $('.modal select').prop('disabled', false); $('.modal .selectpicker').removeClass('disabled'); - wok.message.error(err.responseJSON.reason,'#alert-modal-container'); - }); + wok.message.error(i18n['KCHTMPL6007M'],'#alert-modal-container'); + }else { + kimchi.updateTemplate($('#template-name').val(), data, function() { + kimchi.doListTemplates(); + wok.window.close(); + }, function(err) { + $button.html(i18n['KCHAPI6007M']); + $('.modal input[type="text"]').prop('disabled', false); + $('.modal input[type="checkbox"]').prop('disabled', false); + $('.modal select').prop('disabled', false); + $('.modal .selectpicker').removeClass('disabled'); + wok.message.error(err.responseJSON.reason,'#alert-modal-container'); + }); + } }); }; diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 5787d77..22a3509 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -7,7 +7,7 @@ * 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 + * http://www.apache.org/licenses/LICENSE-2.0invalid_indicator_template * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, @@ -24,6 +24,10 @@ kimchi.doListTemplates = function() { var listHtml = ''; var templateHtml = $('#templateTmpl').html(); $.each(result, function(index, value) { + value.invalid_indicator = "invalid"; + if ($.isEmptyObject(value.invalid)) { + value.invalid_indicator = "valid"; + } listHtml += wok.substitute(templateHtml, value); }); $('.wok-vm-list').removeClass('hidden'); @@ -31,6 +35,7 @@ kimchi.doListTemplates = function() { $('#templateList').html(listHtml); kimchi.templateBindClick(); $('.wok-mask').fadeOut(300, function() {}); + $('.template-status[data-invalid="valid"]').hide(); } else { $('#templateList').html(''); $('#noTemplates').show(); @@ -43,7 +48,7 @@ kimchi.doListTemplates = function() { valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter'] }; var templatesList = new List('templates-container', options); - + $('[data-invalid="invalid"][data-toggle="tooltip"]').tooltip(); }, function(err) { wok.message.error(err.responseJSON.reason); $('.wok-mask').fadeOut(300, function() { diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl index 33472ce..8289a7f 100644 --- a/ui/pages/guest-add.html.tmpl +++ b/ui/pages/guest-add.html.tmpl @@ -51,12 +51,17 @@ <ul id="templateTile" class="list-template tile-check tile-template"> </ul> <script type="html/text" id="tmpl-template" class="tmpl-html"> - <li class="col-md-3"> + <li class="col-md-3 template-opacity" data-invalid="{invalid_indicator}"> <label class="box-iso-outer"> - <input type="radio" name="template" value="/plugins/kimchi/templates/{name}" class="iso-radio-hidden"> + <input type="radio" name="template" value="/plugins/kimchi/templates/{name}" class="iso-radio-hidden" data-invalid="{invalid_indicator}"> <span class="box-iso-border"> <span class="box-iso-inner"> - <h3 class="iso-title {os_distro}" title="{name}">{name}</h3> + + <h3 class="iso-title {os_distro}" title="{name}"> + <span data-invalid="{invalid_indicator}" data-placement="top" class="template-status" data-toggle="tooltip" title="$_("This template has invalid parameters.")"> + <i role="presentation" class="fa fa-exclamation-triangle invalid-icon"></i> + <span class="sr-only">$_("This template has invalid parameters")</span> + </span>{name}</h3> <dl class="iso-info"> <dt>{os_distro}</dt> <dd>$_("OS")</dd> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index 8da568a..95c5600 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -51,6 +51,7 @@ "KCHTMPL6004M": "$_("View Table")", "KCHTMPL6005M": "$_("View Gallery")", "KCHTMPL6006M": "$_("Not Available")", + "KCHTMPL6007M": "$_("Please check the invalid Storage Pools")", "KCHVM6001M": "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", "KCHVM6002M": "$_("Power off Confirmation")", diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index 50e2b22..7616796 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -60,11 +60,11 @@ <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" title="Status" aria-expanded="false"><span class="filter-option pull-left">$_("Status")</span>&nbsp;<span class="caret"></span></button> <div class="dropdown-menu open" style="max-height: 668px; overflow: hidden; min-height: 0px;padding: 0px;"> <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 656px; overflow-y: auto; min-height: 0px;"> - <li role="presentation" nwAct="sort"><a href="#" class="sort" data-sort="name-filter">$_("Name")</a></li> - <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter">$_("OS")</a></li> - <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter">$_("Version")</a></li> - <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter">$_("Current CPUs")</a></li> - <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="memory-filter">$_("Memory")</a></li> + <li nwAct="sort"><a href="#" class="sort" data-sort="name-filter">$_("Name")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter">$_("OS")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter">$_("Version")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter">$_("Current CPUs")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter">$_("Memory")</a></li> </ul> </div> </div> @@ -108,17 +108,21 @@ kimchi.template_main(); </script> <script id="templateTmpl" type="html/text"> - <li class="wok-vm-body"> - <span class='column-name name-filter name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!-- + <li class="wok-vm-body" data-invalid="{invalid_indicator}"> + <span class='column-name name-filter name-distro-icon icon-{os_distro}' title="{name}" val="{name}"> + <span class="template-status" data-invalid="{invalid_indicator}" data-toggle="tooltip" title="$_("This template has invalid parameters.")"> + <i role="presentation" class="fa fa-exclamation-triangle invalid-icon"></i> + <span class="sr-only">$_("This template has invalid parameters")</span> + </span>{name}</span><!-- --><span class='column-action pull-right'> <span class="pull-right"> <div class="dropdown menu-flat"> <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" nwAct="edit" class='template-edit'><a href="#" data-template='{name}'><i class="fa fa-pencil"></i>$_("Edit")</a></li> - <li role="presentation" nwAct="clone" class='template-clone'><a href="#" data-template='{name}'><i class="fa fa-files-o"></i>$_("Clone")</a></li> - <li role="presentation" nwAct="delete" class='critical template-delete'><a href="#" data-template='{name}'><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> + <li nwAct="edit" class='template-edit'><a href="#" data-template='{name}'><i class="fa fa-pencil"></i>$_("Edit")</a></li> + <li nwAct="clone" class='template-clone'><a href="#" data-template='{name}'><i class="fa fa-files-o"></i>$_("Clone")</a></li> + <li nwAct="delete" class='critical template-delete'><a href="#" data-template='{name}'><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> </ul> </div> </span> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index d094e66..8fb4a56 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -93,9 +93,13 @@ </div> <div class="template-edit-wrapper-controls templ-edit-cdrom"> <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" /> + <span class="form-control-feedback"> + <i class="fa fa-times"></i> + </span> </div> <div class="template-edit-wrapper-controls templ-edit-vm-image hide"> <input id="template-edit-vmimage-textbox" class="form-control" name="vm-image" type="text" disabled="disabled" /> + <span class="fa fa-times form-control-feedback"></span> </div> <div class="template-edit-wrapper-controls"> <select id="template-edit-graphics" name="graphics" class="form-control" /> @@ -172,7 +176,7 @@ <div id="storageRow{storageIndex}" class='item'> <span class="template-storage-cell storage-pool"> <input class="template-storage-name" value={storageName} type="text" style="display:none" /> - <select id="selectStorageName"></select> + <select id="selectStorageName-{storageIndex}" class="selectStorageName"></select> </span> <span class="template-storage-cell type"> <input class="template-storage-type form-control" value={storageType} readonly=true type="text" />