Disable some buttons if something is loading. Show progress bar for install, uninstall and deploy to server as we don't want any actions from the user if those actions are being done.

Author: maeisabelle08

quick-start/src/main/webapp/WEB-INF/static/app/directives/header.html

@@ -4,8 +4,8 @@
         	<img id="img_logo" src="images/logo.png">
         </div>
         <div id="sitemenu" class="col-xs-6 col-sm-6 col-md-6 dropdown" ng-if="status != null">
-        	<button type="submit" name="installUserModules" class="btn btn-primary" ng-if="status.installed" ng-click="installUserModules()">Deploy to server</button>
-			<button type="submit" name="uninstall" class="btn btn-primary" ng-if="status.installed" ng-click="uninstall()">Uninstall</button>
+        	<button type="submit" name="installUserModules" class="btn btn-primary" ng-if="status.installed" ng-click="installUserModules()" ng-disabled="action.type != null">Deploy to server</button>
+			<button type="submit" name="uninstall" class="btn btn-primary" ng-if="status.installed" ng-click="uninstall()" ng-disabled="action.type != null">Uninstall</button>
 			<button class="btn btn-default dropdown-toggle" type="button" id="headerDropdownMenu" data-toggle="dropdown" aria-expanded="true">
 			    Welcome {{status.mlUsername}}! <span class="caret"></span>
 			</button>
@@ -14,8 +14,8 @@
 			</ul>
 		</div>
     </div>
-    <div id="message" class="alert alert-info" ng-if="status != null && action.type !== 'Uninstall'">
-		<a href="dismiss" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+    <div id="message" class="alert alert-info" ng-if="status != null && action.type === 'Install'">
+		    <a href="dismiss" class="close" data-dismiss="alert" aria-label="close">&times;</a>
         <ul>
             <li ng-if="status.serverVersionAccepted">ML version is acceptable.</li>
             <li ng-if="!status.serverVersionAccepted">ML version is unacceptable.</li>

quick-start/src/main/webapp/WEB-INF/static/app/directives/headerDirective.js

@@ -17,6 +17,9 @@ module.directive('header', [
             }
             ,link : function(scope, element, attrs) {
             	scope.logout = function () {
+            		if(scope.action.type != null) {
+            			return;
+            		}
             		scope.loading = true;
             		DataHub.logout()
             		.finally(function () {
@@ -28,10 +31,12 @@ module.directive('header', [
             		DataHub.preUninstall();
                 },
                 scope.installUserModules = function () {
-                	scope.loading = true;
+                	scope.action.type = 'Deploy to Server';
+                	scope.action.progressType = 'success';
+                	scope.action.message = 'Deploy to Server is in progress';
                     DataHub.installUserModules()
                     .finally(function () {
-                    	scope.loading = false;
+                    	scope.action.type = null;
                     });
                 }
             }

quick-start/src/main/webapp/WEB-INF/static/app/services/dataHubService.js

@@ -22,7 +22,7 @@ module.factory('DataHub', [
                     service.status = data;
                     if(!service.status.installed) {
                     	service.action.type = "Install";
-                    	service.action.message = "Install in progress...";
+                    	service.action.message = "Install is in progress...";
                     	service.action.progressType = "success";
                     }
                 })

quick-start/src/main/webapp/WEB-INF/static/login/login.html

@@ -45,7 +45,7 @@ <h4 class="no_margin_top"><strong>Login</strong></h4>
 
                         <div class="row center-block text-center">
                             <div class="col-md-12">
-                                <button class="btn btn-primary width_100" ng-click="login">Login</button>
+                                <button class="btn btn-primary width_100" ng-click="login" ng-disabled="loading">Login</button>
                             </div>
                         </div>
                     </div>