gh-564 When deploying streams, show spinner after clicking Deploy

Author: ghillert

ui/src/app/streams/stream-create-dialog/stream-create-dialog.component.html

@@ -4,7 +4,7 @@ <h4 class="modal-title pull-left">Create Stream</h4>
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="modal-body" [formGroup]="form">
+<div class="modal-body" [formGroup]="form" [ngBusy]="busy">
   <div *ngIf="errors && errors.length > 0" class="dialog-validation">
     <div *ngFor="let error of errors">
       <label class="glyphicon glyphicon-exclamation-sign dialog-error-sign">{{error}}</label>

ui/src/app/streams/stream-create-dialog/stream-create-dialog.component.scss

@@ -23,3 +23,7 @@
     line-height: 1em;
   }
 }
+
+.ng-busy {
+  margin-top: 0;
+}

ui/src/app/streams/stream-create-dialog/stream-create-dialog.component.ts

@@ -7,6 +7,7 @@ import { Utils } from '../flo/support/utils';
 import { StreamsService } from '../streams.service';
 import { ToastyService } from 'ng2-toasty';
 import { Properties } from 'spring-flo';
+import { Subscription } from 'rxjs/Subscription';
 
 /**
  * Stores progress percentage.
@@ -46,6 +47,7 @@ export class StreamCreateDialogComponent implements OnInit {
   deploy = false;
   successCallback: () => void;
 
+  busy: Subscription;
 
   constructor(
     private bsModalRef: BsModalRef,
@@ -220,7 +222,7 @@ export class StreamCreateDialogComponent implements OnInit {
     } else {
       // Send the request to create a stream
       const def = this.streamDefs[index];
-      this.streamService.createDefinition(def.name, def.def, this.deploy).subscribe(() => {
+      this.busy = this.streamService.createDefinition(def.name, def.def, this.deploy).subscribe(() => {
         console.log('Stream ' + def.name + ' created OK');
         // Stream created successfully, mark it as created
         def.created = true;

ui/src/app/streams/stream-deploy/stream-deploy.component.html

@@ -1,4 +1,4 @@
-<h1>Deploy Stream Definition {{id}}</h1>
+<h1 [ngBusy]="busy">Deploy Stream Definition {{id}}</h1>
 
 <p class="index-page--subtitle">
   Please specify any <strong>optional</strong> deployment properties.

ui/src/app/streams/stream-deploy/stream-deploy.component.spec.ts

@@ -27,7 +27,6 @@ describe('StreamDeployComponent', () => {
   let activeRoute: MockActivatedRoute;
   const commonTestParams = { id: '1' };
 
-
   beforeEach(async(() => {
     activeRoute = new MockActivatedRoute();
 

ui/src/app/streams/stream-deploy/stream-deploy.component.ts

@@ -4,25 +4,26 @@ import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
 import { StreamsService } from '../streams.service';
 import { ToastyService } from 'ng2-toasty';
 import { validateDeploymentProperties } from './stream-deploy-validators';
-
-@Component({
-  selector: 'app-stream-deploy',
-  templateUrl: './stream-deploy.component.html',
-})
+import { Subscription } from 'rxjs/Subscription';
 
 /**
  * Component used to deploy stream definitions.
  *
  * @author Janne Valkealahti
  * @author Glenn Renfro
  */
+@Component({
+  selector: 'app-stream-deploy',
+  templateUrl: './stream-deploy.component.html'
+})
 export class StreamDeployComponent implements OnInit, OnDestroy {
 
   id: String;
   private sub: any;
   form: FormGroup;
   deploymentProperties = new FormControl('', validateDeploymentProperties);
   propertiesAsMap = {};
+  busy: Subscription;
 
   /**
    * Adds deployment properties to the FormBuilder
@@ -82,7 +83,7 @@ export class StreamDeployComponent implements OnInit, OnDestroy {
       }
     }
 
-    this.streamsService.deployDefinition(this.id, this.propertiesAsMap).subscribe(
+    this.busy = this.streamsService.deployDefinition(this.id, this.propertiesAsMap).subscribe(
       data => {
         this.toastyService.success('Successfully deployed stream definition "'
           + this.id + '"');