AMBARI-19907 - On certain actions, there's no feedback from the UI when API takes a long time to respond (rzang)

ambari-web/app/controllers/main/host/bulk_operations_controller.js

@@ -252,7 +252,8 @@ App.BulkOperationsController = Em.Controller.extend({
           context: operationData.message,
           noOpsMessage: Em.I18n.t('hosts.host.maintainance.reinstallFailedComponents.context')
         },
-        success: 'bulkOperationForHostComponentsSuccessCallback'
+        success: 'bulkOperationForHostComponentsSuccessCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -274,7 +275,8 @@ App.BulkOperationsController = Em.Controller.extend({
           hosts: hosts.mapProperty('hostName')
         },
         success: 'bulkOperationForHostsDeleteDryRunCallback',
-        error: 'bulkOperationForHostsDeleteDryRunCallback'
+        error: 'bulkOperationForHostsDeleteDryRunCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -371,7 +373,8 @@ App.BulkOperationsController = Em.Controller.extend({
               hosts: hosts.mapProperty('deleted.key')
             },
             success: 'bulkOperationForHostsDeleteCallback',
-            error: 'bulkOperationForHostsDeleteCallback'
+            error: 'bulkOperationForHostsDeleteCallback',
+            showLoadingPopup: true
           });
         },
         bodyClass: Em.View.extend({
@@ -623,7 +626,8 @@ App.BulkOperationsController = Em.Controller.extend({
           }),
           context: operationData.message + ' ' + operationData.componentNameFormatted,
         },
-        success: 'bulkOperationForHostComponentsAddSuccessCallback'
+        success: 'bulkOperationForHostComponentsAddSuccessCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -932,28 +936,19 @@ App.BulkOperationsController = Em.Controller.extend({
       return;
     }
 
-    var loadingPopup = App.ModalPopup.show({
-      header: Em.I18n.t('jobs.loadingTasks'),
-      primary: false,
-      secondary: false,
-      bodyClass: Em.View.extend({
-        template: Em.Handlebars.compile('{{view App.SpinnerView}}')
-      })
-    });
-
-    this.getHostsForBulkOperations(queryParams, operationData, loadingPopup);
+    this.getHostsForBulkOperations(queryParams, operationData);
   },
 
-  getHostsForBulkOperations: function (queryParams, operationData, loadingPopup) {
+  getHostsForBulkOperations: function (queryParams, operationData) {
     return App.ajax.send({
       name: 'hosts.bulk.operations',
       sender: this,
       data: {
         parameters: App.router.get('updateController').computeParameters(queryParams),
-        operationData: operationData,
-        loadingPopup: loadingPopup
+        operationData: operationData
       },
-      success: 'getHostsForBulkOperationSuccessCallback'
+      success: 'getHostsForBulkOperationSuccessCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -979,8 +974,6 @@ App.BulkOperationsController = Em.Controller.extend({
       return;
     }
 
-    Em.tryInvoke(param.loadingPopup, 'hide');
-
     if ('SET_RACK_INFO' === operationData.action) {
       return self.bulkOperation(operationData, hosts);
     }

ambari-web/app/controllers/main/host/details.js

@@ -330,7 +330,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
       sender: this,
       data: data,
       success: 'sendComponentCommandSuccessCallback',
-      error: 'ajaxErrorCallback'
+      error: 'ajaxErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -603,7 +604,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
         hostName: this.get('content.hostName')
       },
       success: '_doDeleteHostComponentSuccessCallback',
-      error: '_doDeleteHostComponentErrorCallback'
+      error: '_doDeleteHostComponentErrorCallback',
+      showLoadingPopup: true
     }).then(callback, callback);
   },
 
@@ -1547,7 +1549,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
         resource_filters: resource_filters,
         context: context
       },
-      success: 'refreshComponentConfigsSuccessCallback'
+      success: 'refreshComponentConfigsSuccessCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -1721,7 +1724,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
                 }
               },
               success: 'installComponentSuccessCallback',
-              error: 'ajaxErrorCallback'
+              error: 'ajaxErrorCallback',
+              showLoadingPopup: true
             });
           })
         });
@@ -1827,7 +1831,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
         slaveType: slaveType
       },
       success: 'decommissionSuccessCallback',
-      error: 'decommissionErrorCallback'
+      error: 'decommissionErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -2010,7 +2015,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
         batches: batches
       },
       success: 'decommissionSuccessCallback',
-      error: 'decommissionErrorCallback'
+      error: 'decommissionErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -2117,7 +2123,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
         batches: batches
       },
       success: 'decommissionSuccessCallback',
-      error: 'decommissionErrorCallback'
+      error: 'decommissionErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -2516,7 +2523,8 @@ App.MainHostDetailsController = Em.Controller.extend(App.SupportClientConfigsDow
           },
           callback: completeCallback,
           success: 'deleteHostSuccessCallback',
-          error: 'deleteHostErrorCallback'
+          error: 'deleteHostErrorCallback',
+          showLoadingPopup: true
         });
       }
       else {

ambari-web/app/controllers/main/service.js

@@ -171,7 +171,8 @@ App.MainServiceController = Em.ArrayController.extend(App.SupportClientConfigsDo
         query: query
       },
       success: 'allServicesCallSuccessCallback',
-      error: 'allServicesCallErrorCallback'
+      error: 'allServicesCallErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -196,7 +197,8 @@ App.MainServiceController = Em.ArrayController.extend(App.SupportClientConfigsDo
           state: 'INSTALLED'
         }
       },
-      success: 'silentStopSuccess'
+      success: 'silentStopSuccess',
+      showLoadingPopup: true
     });
   },
 
@@ -246,7 +248,8 @@ App.MainServiceController = Em.ArrayController.extend(App.SupportClientConfigsDo
             state: 'STARTED'
           }
         },
-        success: 'silentCallSuccessCallback'
+        success: 'silentCallSuccessCallback',
+        showLoadingPopup: true
       });
     }
   }.observes('shouldStart', 'controllers.backgroundOperationsController.allOperationsCount'),
@@ -333,7 +336,8 @@ App.MainServiceController = Em.ArrayController.extend(App.SupportClientConfigsDo
     App.ajax.send({
       name: 'restart.staleConfigs',
       sender: this,
-      success: 'restartAllRequiredSuccessCallback'
+      success: 'restartAllRequiredSuccessCallback',
+      showLoadingPopup: true
     });
   },
 

ambari-web/app/controllers/main/service/item.js

@@ -488,7 +488,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
       'sender': this,
       'success': 'startStopPopupSuccessCallback',
       'error': 'startStopPopupErrorCallback',
-      'data': data
+      'data': data,
+      'showLoadingPopup': true
     });
   },
 
@@ -544,7 +545,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
         forceRefreshConfigTags : "capacity-scheduler"
       },
       success : 'refreshYarnQueuesSuccessCallback',
-      error : 'refreshYarnQueuesErrorCallback'
+      error : 'refreshYarnQueuesErrorCallback',
+      showLoadingPopup: true
     });
     });
   },
@@ -589,7 +591,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
           componentName: "KNOX_GATEWAY"
         },
         success: 'startStopLdapKnoxSuccessCallback',
-        error: 'startStopLdapKnoxErrorCallback'
+        error: 'startStopLdapKnoxErrorCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -636,7 +639,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
         componentName: "HIVE_SERVER_INTERACTIVE"
       },
       success: 'requestSuccessCallback',
-      error: 'requestErrorCallback'
+      error: 'requestErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -681,7 +685,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
         batches: batches
       },
       success: 'requestSuccessCallback',
-      error: 'requestErrorCallback'
+      error: 'requestErrorCallback',
+      showLoadingPopup: true
     });
   },
 
@@ -733,7 +738,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
             threshold: this.get('inputValue')
           },
           success : 'rebalanceHdfsNodesSuccessCallback',
-          error : 'rebalanceHdfsNodesErrorCallback'
+          error : 'rebalanceHdfsNodesErrorCallback',
+          showLoadingPopup: true
         });
         this.hide();
       },
@@ -858,7 +864,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
       'sender': this,
       'success':'runSmokeTestSuccessCallBack',
       'error':'runSmokeTestErrorCallBack',
-      'data': requestData
+      'data': requestData,
+      showLoadingPopup: true
     });
   },
 
@@ -1087,7 +1094,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
           componentName : context.component
         },
         success : 'executeCustomCommandSuccessCallback',
-        error : 'executeCustomCommandErrorCallback'
+        error : 'executeCustomCommandErrorCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -1111,7 +1119,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
           forceRefreshConfigTags : "capacity-scheduler"
         },
         success : 'executeCustomCommandSuccessCallback',
-        error : 'executeCustomCommandErrorCallback'
+        error : 'executeCustomCommandErrorCallback',
+        showLoadingPopup: true
       });
     });
   },
@@ -1566,7 +1575,8 @@ App.MainServiceItemController = Em.Controller.extend(App.SupportClientConfigsDow
         servicesToDeleteNext: servicesToDeleteNext
       },
       success : 'deleteServiceCallSuccessCallback',
-      error: 'deleteServiceCallErrorCallback'
+      error: 'deleteServiceCallErrorCallback',
+      showLoadingPopup: true
     });
   },
 

ambari-web/app/utils/ajax/ajax.js

@@ -3103,13 +3103,29 @@ var ajax = Em.Object.extend({
       return null;
     }
 
+    var loadingPopup = null;
+    var loadingPopupTimeout = null;
+    if(config.hasOwnProperty("showLoadingPopup") && config.showLoadingPopup === true) {
+      loadingPopupTimeout = setTimeout(function() {
+        loadingPopup = App.ModalPopup.show({
+          header: Em.I18n.t('jobs.loadingTasks'),
+          backdrop: false,
+          primary: false,
+          secondary: false,
+          bodyClass: Em.View.extend({
+            template: Em.Handlebars.compile('{{view App.SpinnerView}}')
+          })
+        });
+      }, 500);
+    }
+
     // default parameters
     var params = {
       clusterName: (App.get('clusterName') || App.clusterStatus.get('clusterName'))
     };
 
     // extend default parameters with provided
-    if (config.data) {
+    if (config.hasOwnProperty("data") && config.data) {
       jQuery.extend(params, config.data);
     }
 
@@ -3152,6 +3168,12 @@ var ajax = Em.Object.extend({
       }
     };
     opt.complete = function () {
+      if (loadingPopupTimeout) {
+        clearTimeout(loadingPopupTimeout);
+      }
+      if(loadingPopup) {
+        Em.tryInvoke(loadingPopup, 'hide');
+      }
       App.logger.logTimerIfMoreThan(consoleMsg, 1000);
       if (config.callback) {
         config.callback();

ambari-web/app/utils/batch_scheduled_requests.js

@@ -244,7 +244,8 @@ module.exports = {
           operation_level: operation_level
         },
         success: 'successCallback',
-        error: 'errorCallback'
+        error: 'errorCallback',
+        showLoadingPopup: true
       });
     }
   },
@@ -318,7 +319,8 @@ module.exports = {
         batches: this.getBatchesForRollingRestartRequest(restartHostComponents, batchSize)
       },
       success: 'successCallback',
-      error: 'errorCallback'
+      error: 'errorCallback',
+      showLoadingPopup: true
     });
   },
 

ambari-web/app/views/common/modal_popup.js

@@ -72,11 +72,20 @@ App.ModalPopup = Ember.View.extend({
       .on('enter-key-pressed', this.enterKeyPressed.bind(this))
       .on('escape-key-pressed', this.escapeKeyPressed.bind(this));
     this.fitZIndex();
+    this.handleBackDrop();
     var firstInputElement = this.$('#modal').find(':input').not(':disabled, .no-autofocus').first();
     this.focusElement(firstInputElement);
     this.subscribeResize();
   },
 
+  handleBackDrop: function () {
+    if (this.get('backdrop') === false) {
+      $('.modal-backdrop').css('visibility', 'hidden');
+    } else {
+      $('.modal-backdrop').css('visibility', 'visible');
+    }
+  },
+
   subscribeResize: function() {
     if (this.get('autoHeight') && !$.mocho) {
       this.fitHeight();

ambari-web/test/controllers/main/service_test.js

@@ -462,7 +462,8 @@ describe('App.MainServiceController', function () {
             state: 'INSTALLED'
           }
         },
-        success: 'silentStopSuccess'
+        success: 'silentStopSuccess',
+        showLoadingPopup: true
       });
     });
   });
@@ -598,7 +599,8 @@ describe('App.MainServiceController', function () {
             state: 'STARTED'
           }
         },
-        success: 'silentCallSuccessCallback'
+        success: 'silentCallSuccessCallback',
+        showLoadingPopup: true
       });
       expect(mainServiceController.get('shouldStart')).to.be.false;
     });