Some comments: 1. In the Templates tab, when there is a Template with invalid parameters, there is an warning icon + mouse hover to information the user about it. But when selecting "Edit" to fix the template configuration, there is no way to know which field is invalid. It'd be good to point the user to the right location. We can use the same warning icon to do that. First in the tab level in Edit dialog and then in the field itself. For example, when a storage pool is invalid, add the warning icon to the Storage tab (In the Edit dialog) and when on Storage tab, add the same warning icon to the invalid field. 2. After editing the Template to turn it back to a valid state, the warning icon disappears but the mouse hover message continues to be displayed "This template has invalid parameters". On 03/31/2016 03:56 PM, peterpnns@gmail.com wrote:

From: peterpennings <peterpnns@gmail.com>

Signed-off-by: peterpennings <peterpnns@gmail.com> --- ui/css/kimchi.css | 28 ++++++++++++++++++--- ui/css/src/modules/_guests.scss | 6 +++++ ui/css/src/modules/_templates.scss | 18 +++++++++++--- ui/js/src/kimchi.guest_add_main.js | 8 ++++++ ui/js/src/kimchi.network_add_main.js | 48 +++++++++++++++++++++++++----------- ui/js/src/kimchi.template_main.js | 9 +++++-- ui/pages/guest-add.html.tmpl | 7 +++--- ui/pages/tabs/templates.html.tmpl | 6 +++-- 8 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 27f7787..15040cd 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -255,6 +255,13 @@ padding: 10px 30px; }

+.guests-modal .invalid-icon { + position: absolute; + right: 10px; + bottom: 10px; + font-size: 32px; +} + #guest-add-window .modal-body { margin: 0; padding: 0; @@ -1771,16 +1778,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 +1886,17 @@ body.wok-gallery { cursor: default; }

+#templates-root-container .wok-vm-gallery .column-status { + position: relative; +} + +#templates-root-container .wok-vm-gallery .invalid-icon { + position: absolute; + bottom: 10px; + right: -3px; + 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; } diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 6f5dbf0..b30f25d 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -38,6 +38,12 @@ overflow: auto; padding: 10px 30px; } + .invalid-icon { + position: absolute; + right: 10px; + bottom: 10px; + font-size: 32px; + } }

#guest-add-window { diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 86b9305..ff4cae2 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -340,14 +340,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%; @@ -425,6 +428,15 @@ white-space: nowrap; cursor: default; } + .column-status { + position: relative; + } + .invalid-icon { + position: absolute; + bottom: 10px; + right: -3px; + font-size: 32px; + } .item-hidden { &.column-type, &.column-version, diff --git a/ui/js/src/kimchi.guest_add_main.js b/ui/js/src/kimchi.guest_add_main.js index 87ad6fa..523ad7e 100644 --- a/ui/js/src/kimchi.guest_add_main.js +++ b/ui/js/src/kimchi.guest_add_main.js @@ -29,9 +29,17 @@ 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); + $('.invalid-radio[data-invalid="invalid"]').attr("disabled", true); + $('.invalid-icon[data-invalid="valid"]').hide(); + $('.template-opacity[data-invalid="invalid"]').css({ opacity: 0.7 }); + $('[data-toggle="tooltip"]').tooltip(); return; }

diff --git a/ui/js/src/kimchi.network_add_main.js b/ui/js/src/kimchi.network_add_main.js index 99e42c1..f0507be 100644 --- a/ui/js/src/kimchi.network_add_main.js +++ b/ui/js/src/kimchi.network_add_main.js @@ -32,21 +32,23 @@ kimchi.startNetworkCreation = function() { var data = { name : network.name, connection: network.type, - interfaces: [ network.interface ], + interfaces: network.interface, vlan_id: network.vlan_id };

- kimchi.createNetwork(data, function(result) { - network.state = result.state === "active" ? "up" : "down"; - network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"]; - network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"]; - network.persistent = result.persistent; - $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network)); - wok.window.close(); - }, function(data) { - wok.message.error(data.responseJSON.reason,'#alert-modal-container'); - errorCallback(); - }); + console.log(data); + + // kimchi.createNetwork(data, function(result) { + // network.state = result.state === "active" ? "up" : "down"; + // network.interface = result.interfaces ? result.interfaces[0] : i18n["KCHNET6001M"]; + // network.addrSpace = result.subnet ? result.subnet : i18n["KCHNET6001M"]; + // network.persistent = result.persistent; + // $('#networkGrid').dataGrid('addRow', kimchi.addNetworkItem(network)); + // wok.window.close(); + // }, function(data) { + // wok.message.error(data.responseJSON.reason,'#alert-modal-container'); + // errorCallback(); + // }); };

kimchi.openNetworkDialog = function(okCallback) { @@ -80,13 +82,24 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) { kimchi.getNetworkDialogValues = function() { var network = { name : $("#networkName").val(), - type : $("#networkType").val() + type : $("#networkType").val(), + interface : [] }; + if (network.type === kimchi.NETWORK_TYPE_MACVTAP || network.type === kimchi.NETWORK_TYPE_VEPA) { - network.interface = $("#networkDestinationID").val(); + //network.interface = $("#networkDestinationID").val(); + if (network.type === 'vepa') { + var destinations = $("#networkDestinationID").val(); + $.each(destinations, function( index, value ){ + network.interface.push(value); + }); + } else { + network.interface.push($("#networkDestinationID").val()); + } } if (network.type === kimchi.NETWORK_TYPE_BRIDGED) { - network.interface = $("#networkDestinationID").val(); + //network.interface = $("#networkDestinationID").val(); + network.interface.push($("#networkDestinationID").val()); if ($("#enableVlan").prop("checked") && ($("#networkDestinationID").find(':selected').data('type') === 'nic' || $("#networkDestinationID").find(':selected').data('type') === 'bonding')) { network.vlan_id = parseInt($("#networkVlanID").val()); } @@ -121,6 +134,10 @@ kimchi.setupNetworkFormEvent = function() { } else { kimchi.loadInterfaces(); } + if(selectedType === kimchi.NETWORK_TYPE_VEPA) { + $("#networkDestinationID").multiselect('enable'); + } + });

$('#networkDestinationID').on('change', function() { @@ -186,6 +203,7 @@ kimchi.loadInterfaces = function(interfaceFilterArray) { } } } + selectDestinationOptionHTML += '<option data-type="teste" value="teste">teste</option>'; $selectDestination.append(selectDestinationOptionHTML); $('#networkDestinationID').selectpicker('refresh'); kimchi.setDefaultNetworkType(result.length!==0); diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 5787d77..0a4f090 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() {}); + $('.invalid-icon[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..5d7ed41 100644 --- a/ui/pages/guest-add.html.tmpl +++ b/ui/pages/guest-add.html.tmpl @@ -51,11 +51,12 @@ <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 invalid-radio" data-invalid="{invalid_indicator}"> <span class="box-iso-border"> <span class="box-iso-inner"> + <h3 class="iso-title {os_distro}" title="{name}">{name}</h3> <dl class="iso-info"> <dt>{os_distro}</dt> @@ -65,7 +66,7 @@ <dt>{cpu_info.vcpus} Cores</dt> <dd>$_("Current CPUs")</dd> <dt>{memory.current} M</dt> - <dd>$_("Memory")</dd> + <dd>$_("Memory")<i class="fa fa-exclamation-triangle invalid-icon" data-invalid="{invalid_indicator}"data-toggle="tooltip" title="$_("This template has invalid parameters.")"></i></dd> </dl> </span> </span> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index 50e2b22..611af35 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -85,6 +85,7 @@ --><span class="column-version">$_("Version")</span><!-- --><span class="column-processors">$_("Current CPUs")</span><!-- --><span class="column-memory">$_("Memory")</span><!-- + --><span class="column-status"></span><!-- --><span class="column-action" style="display:none"><span class="sr-only">$_("Actions")</span></span> </li> <li> @@ -108,7 +109,7 @@ kimchi.template_main(); </script> <script id="templateTmpl" type="html/text"> - <li class="wok-vm-body"> + <li class="wok-vm-body" data-invalid="{invalid_indicator}" data-toggle="tooltip" title="$_("This template has invalid parameters.")"> <span class='column-name name-filter name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!-- --><span class='column-action pull-right'> <span class="pull-right"> @@ -130,7 +131,8 @@ --><span class='column-processors cpus-filter' val="{cpu_info.vcpus}"><strong>{cpu_info.vcpus} $_("Cores")</strong></span><!-- --><span class="item-hidden column-processors cpus-filter">$_("Current CPUs")</span><!-- --><span class='column-memory memory-filter' val="{memory.current}"><strong>{memory.current} $_("M")</strong></span><!-- - --><span class="item-hidden column-memory memory-filter">$_("Memory")</span> + --><span class="item-hidden column-memory memory-filter">$_("Memory")</span><!-- + --><span class="column-status"><i class="fa fa-exclamation-triangle invalid-icon" data-invalid="{invalid_indicator}"></i></span> </li> </script> </body>