Re: [Kimchi-devel] [PATCH] [Kimchi] Disable Template when it has invalid parameters

From: peterpennings <peterpnns(a)gmail.com&gt; Signed-off-by: peterpennings <peterpnns(a)gmail.com&gt; --- 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>