[Kimchi-devel] [PATCH] [Kimchi] Disable Template when it has invalid parameters
Aline Manera
alinefm at linux.vnet.ibm.com
Wed Apr 13 16:49:31 UTC 2016
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 at gmail.com wrote:
> From: peterpennings <peterpnns at gmail.com>
>
> Signed-off-by: peterpennings <peterpnns at 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>
More information about the Kimchi-devel
mailing list