[Kimchi-devel] [PATCH] UI enhancement: Request /config/capabilities as soon as possible

[Paulo Ricardo Paz Vital]

-- 
Tested-by: Paulo Vital <pvital at linux.vnet.ibm.com>
Reviewed-by: Paulo Vital <pvital at linux.vnet.ibm.com>


On Fri, 2014-08-08 at 20:56 -0300, Aline Manera wrote:
> /config/capabilities was requested twice for the templates tab: one
> request to identify if qemu has spice support and other one to identify
> if the qemu has ISO streaming support.
> 
> Those requests were made right before using the information, causing a
> delay on UI until get the server response.
> 
> For example, for distant servers, while creating a new template the
> "Remote ISO" option was disabled at the first time and after some time it was
> enabled.
> The same behavior was identified while editing a template, as the graphics
> options blinked to add the spice on it.
> 
> To fix it, request /config/capabilities when loading the templates tab to have
> this information prior to edit or create a new template.
> 
> Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
> ---
>  ui/js/src/kimchi.host.js               | 21 +++++++++++--------
>  ui/js/src/kimchi.main.js               |  8 ++++++++
>  ui/js/src/kimchi.template_add_main.js  | 37 ++++++++++++++++++++--------------
>  ui/js/src/kimchi.template_edit_main.js | 20 ++++++++++--------
>  4 files changed, 55 insertions(+), 31 deletions(-)
> 
> diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js
> index 75360bb..b2e08b8 100644
> --- a/ui/js/src/kimchi.host.js
> +++ b/ui/js/src/kimchi.host.js
> @@ -454,11 +454,15 @@ kimchi.host_main = function() {
>              });
>          });
> 
> -        kimchi.getCapabilities(function(capabilities) {
> -            kimchi.host.capabilities=capabilities;
> -            if((capabilities['repo_mngt_tool']) && (capabilities['repo_mngt_tool']!="None")) {
> -                initRepositoriesGrid(capabilities['repo_mngt_tool']);
> -                $('#repositories-section').switchClass('hidden', capabilities['repo_mngt_tool']);
> +        var setupUI = function() {
> +            if (kimchi.capabilities == undefined) {
> +                setTimeout(setupUI, 2000);
> +                return;
> +            }
> +
> +            if((kimchi.capabilities['repo_mngt_tool']) && (kimchi.capabilities['repo_mngt_tool']!="None")) {
> +                initRepositoriesGrid(kimchi.capabilities['repo_mngt_tool']);
> +                $('#repositories-section').switchClass('hidden', kimchi.capabilities['repo_mngt_tool']);
>                  kimchi.topic('kimchi/repositoryAdded')
>                      .subscribe(listRepositories);
>                  kimchi.topic('kimchi/repositoryUpdated')
> @@ -467,7 +471,7 @@ kimchi.host_main = function() {
>                      .subscribe(listRepositories);
>              }
> 
> -            if(capabilities['update_tool']) {
> +            if(kimchi.capabilities['update_tool']) {
>                  $('#software-update-section').removeClass('hidden');
>                  initSoftwareUpdatesGrid();
>                  kimchi.topic('kimchi/softwareUpdated')
> @@ -477,14 +481,15 @@ kimchi.host_main = function() {
>                  });
>              }
> 
> -            if(capabilities['system_report_tool']) {
> +            if(kimchi.capabilities['system_report_tool']) {
>                  listDebugReports();
>                  kimchi.topic('kimchi/debugReportAdded')
>                      .subscribe(listDebugReports);
>                  kimchi.topic('kimchi/debugReportRenamed')
>                      .subscribe(listDebugReports);
>              }
> -        });
> +        };
> +        setupUI();
>      };
> 
>      kimchi.getHost(function(data) {
> diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js
> index 1bb26e6..613ab41 100644
> --- a/ui/js/src/kimchi.main.js
> +++ b/ui/js/src/kimchi.main.js
> @@ -16,6 +16,14 @@
>   * limitations under the License.
>   */
>  kimchi.tabMode = {};
> +
> +kimchi.capabilities = undefined;
> +kimchi.getCapabilities(function(result) {
> +    kimchi.capabilities = result;
> +}, function() {
> +    kimchi.capabilities = {};
> +});
> +
>  kimchi.main = function() {
>      kimchi.popable();
> 
> diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
> index a24a306..0306571 100644
> --- a/ui/js/src/kimchi.template_add_main.js
> +++ b/ui/js/src/kimchi.template_add_main.js
> @@ -222,22 +222,29 @@ kimchi.template_add_main = function() {
> 
>      //1-2 remote iso
>      $('#iso-remote').css('opacity', 0.3).css('cursor', 'not-allowed');
> -    kimchi.getCapabilities(function(result) {
> -        if (result.qemu_stream == true) {
> -            $('#iso-remote').css('opacity', 1).css('cursor', 'pointer');
> -
> -            $('#iso-remote').click(function() {
> -                kimchi.switchPage('iso-type-box', 'iso-remote-box');
> -                initRemoteIsoField();
> -                initIsoUrlField();
> -                kimchi.listDistros(function(isos) {
> -                    showRemoteIsoField(isos);
> -                }, function() {
> -                });
> -            });
> +
> +    var enabledRemoteIso = function() {
> +        if (kimchi.capabilities == undefined) {
> +            setTimeout(enabledRemoteIso, 2000);
> +            return;
>          }
> -    }, function() {
> -    });
> +
> +        if (kimchi.capabilities.qemu_stream != true) {
> +            return;
> +        }
> +
> +        $('#iso-remote').css('opacity', 1).css('cursor', 'pointer');
> +        $('#iso-remote').click(function() {
> +            kimchi.switchPage('iso-type-box', 'iso-remote-box');
> +            initRemoteIsoField();
> +            initIsoUrlField();
> +            kimchi.listDistros(function(isos) {
> +                showRemoteIsoField(isos);
> +            }, function() {
> +            });
> +        });
> +    };
> +    enabledRemoteIso();
> 
>      $('#iso-remote-box-back').click(function() {
>          kimchi.switchPage('iso-remote-box', 'iso-type-box', 'right');
> diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
> index d42108c..97d6b6c 100644
> --- a/ui/js/src/kimchi.template_edit_main.js
> +++ b/ui/js/src/kimchi.template_edit_main.js
> @@ -38,15 +38,19 @@ kimchi.template_edit_main = function() {
>              $('input[name="disks"]', templateEditForm).attr('disabled','disabled');
>          }
> 
> -        var options = [{label: 'VNC', value: 'vnc'}];
> -        kimchi.getCapabilities(function(result) {
> -            if (result.qemu_spice == true) {
> -                options.push({label: 'Spice', value: 'spice'})
> +        var vncOpt = [{label: 'VNC', value: 'vnc'}];
> +        kimchi.select('template-edit-graphics-list', vncOpt);
> +        var enableSpice = function() {
> +            if (kimchi.capabilities == undefined) {
> +                setTimeout(enableSpice, 2000);
> +                return;
>              }
> -        }, function() {
> -        }, function() {
> -            kimchi.select('template-edit-graphics-list', options);
> -        });
> +            if (kimchi.capabilities.qemu_spice == true) {
> +                spiceOpt = [{label: 'Spice', value: 'spice'}]
> +                kimchi.select('template-edit-graphics-list', spiceOpt);
> +            }
> +        };
> +        enableSpice();
> 
>          var scsipools = {};
>          kimchi.listStoragePools(function(result) {