gh-633 Stream Deployment: UX improvements

* Add lib SaveFile
* Fix Lint Errors
* Implement UX Deployment

Resolves #633
Resolves #647

ui/package.json

@@ -30,6 +30,7 @@
     "zone.js": "0.8.20",
     "bootstrap-sass": "3.3.7",
     "d3": "4.12.0",
+    "file-saver": "1.3.3",
     "dagre": "0.7.4",
     "moment": "2.19.3",
     "ng2-stomp-service": "1.2.2",

ui/src/app/apps/apps.module.ts

@@ -33,6 +33,10 @@ import {AppsWorkaroundService} from './apps.workaround.service';
   ],
   providers: [
     AppsService, AppsWorkaroundService
+  ],
+  exports: [
+    AppTypeComponent,
+    AppVersionLabelComponent
   ]
 })
 export class AppsModule {

ui/src/app/shared/services/shared-apps.service.ts

@@ -28,10 +28,10 @@ export class SharedAppsService {
     const params = HttpUtils.getPaginationParams(pageRequest.page, pageRequest.size);
     const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
 
-    if (type) {
+    if (type !== null) {
       params.append('type', ApplicationType[type]);
     }
-    if (search) {
+    if (search !== null) {
       params.append('search', search);
     }
     if (sort) {

ui/src/app/streams/flo/editor.service.ts

@@ -22,7 +22,7 @@ import { dia } from 'jointjs';
 import { StreamPropertiesDialogComponent } from './properties/stream-properties-dialog.component';
 import { Utils } from './support/utils';
 import * as _joint from 'jointjs';
-import {StreamGraphPropertiesSource, StreamHead} from "./properties/stream-properties-source";
+import {StreamGraphPropertiesSource, StreamHead} from './properties/stream-properties-source';
 const joint: any = _joint;
 
 const NODE_DROPPING = false;

ui/src/app/streams/flo/properties/stream-properties-source.ts

@@ -6,7 +6,7 @@ import {dia} from 'jointjs';
 import PropertiesSource = Properties.PropertiesSource;
 
 export interface StreamHead {
-  presentStreamNames: string[]
+  presentStreamNames: string[];
 }
 
 export interface StreamAppPropertiesSource extends PropertiesSource {

ui/src/app/streams/model/stream-deploy-config.ts

@@ -0,0 +1,32 @@
+/**
+ * Represents a Stream Deploy Config.
+ *
+ * @author Damien Vitrac
+ */
+export class StreamDeployConfig {
+
+  skipper = false;
+
+  id: string;
+
+  platform: any;
+
+  deployers: any;
+
+  apps: any;
+
+  constructor() {
+
+  }
+
+  platformExist(key: string): boolean {
+    if (!key) {
+      return true;
+    }
+    if (this.platform) {
+      return this.platform.values.filter((a) => a.key === key).length > 0;
+    }
+    return false;
+  }
+
+}

ui/src/app/streams/stream-definitions/deployment-properties/deployment-properties.component.ts

@@ -1,13 +1,13 @@
 import {Component, OnInit, Output, EventEmitter, Input, OnDestroy} from '@angular/core';
 import {FormGroup, FormControl, FormBuilder} from '@angular/forms';
-import {validateDeploymentProperties} from '../../stream-deploy/stream-deploy-validators';
 import {StreamDefinition} from '../../model/stream-definition';
 import {Subscription} from 'rxjs/Subscription';
 import {Platform} from '../../model/platform';
 import {SharedAboutService} from '../../../shared/services/shared-about.service';
 import {StreamsService} from '../../streams.service';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs/Subject';
+import {takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs/Subject';
+import {StreamDeployValidator} from '../../stream-deploy/stream-deploy.validator';
 
 @Component({
   selector: 'app-stream-deployment-properties',
@@ -26,7 +26,7 @@ export class DeploymentPropertiesComponent implements OnInit, OnDestroy {
 
   id: String;
   form: FormGroup;
-  deploymentProperties = new FormControl('', validateDeploymentProperties);
+  deploymentProperties = new FormControl('', StreamDeployValidator.validateDeploymentProperties);
   deploymentPlatform = new FormControl('');
 
   platforms: Platform[];
@@ -66,17 +66,17 @@ export class DeploymentPropertiesComponent implements OnInit, OnDestroy {
    */
   ngOnInit() {
     this.subscriptionFeatureInfo = this.sharedAboutService.getFeatureInfo()
-    .pipe(takeUntil(this.ngUnsubscribe$))
-    .subscribe(featureInfo => {
-      this.skipperEnabled = featureInfo.skipperEnabled;
-      if (this.skipperEnabled) {
-        this.subscriptionPlatforms = this.streamsService.platforms()
-        .pipe(takeUntil(this.ngUnsubscribe$))
-        .subscribe((platforms: Platform[]) => {
-          this.platforms = platforms;
-        });
-      }
-    });
+      .pipe(takeUntil(this.ngUnsubscribe$))
+      .subscribe(featureInfo => {
+        this.skipperEnabled = featureInfo.skipperEnabled;
+        if (this.skipperEnabled) {
+          this.subscriptionPlatforms = this.streamsService.platforms()
+            .pipe(takeUntil(this.ngUnsubscribe$))
+            .subscribe((platforms: Platform[]) => {
+              this.platforms = platforms;
+            });
+        }
+      });
     this.deploymentPlatform.setValue('default');
     if (this.stream.deploymentProperties instanceof Object) {
       if (this.stream.deploymentProperties.platformName) {

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

@@ -0,0 +1,61 @@
+import {Component, EventEmitter, ViewEncapsulation} from '@angular/core';
+import {PropertiesDialogComponent} from '../../../shared/flo/properties/properties-dialog.component';
+import {BsModalRef} from 'ngx-bootstrap';
+import {StreamsService} from '../../streams.service';
+import {StreamAppPropertiesSource, StreamHead} from '../../flo/properties/stream-properties-source';
+import {StreamPropertiesGroupModel} from '../../flo/properties/stream-properties-dialog.component';
+import {Observable} from 'rxjs/Observable';
+import {Properties} from 'spring-flo';
+
+/**
+ * Component for displaying application properties and capturing their values.
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-stream-deploy-app-properties',
+  templateUrl: '../../../shared/flo/properties/properties-dialog.component.html',
+  styleUrls: ['../../../shared/flo/properties/properties-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class StreamDeployAppPropertiesComponent extends PropertiesDialogComponent {
+
+  public title: string;
+
+  constructor(bsModalRef: BsModalRef,
+              private streamService: StreamsService) {
+
+    super(bsModalRef);
+  }
+
+  setData(propertiesSource: StreamAppPropertiesSource) {
+    this.propertiesGroupModel = new StreamPropertiesGroupModel(
+      propertiesSource,
+      this.streamService);
+    this.propertiesGroupModel.load();
+  }
+
+}
+
+export class AppPropertiesSource implements StreamAppPropertiesSource {
+
+  private options: Array<any>;
+  public confirm = new EventEmitter();
+
+  constructor(options: Array<any>) {
+    this.options = options;
+  }
+
+  getStreamHead(): StreamHead {
+    return {presentStreamNames: []};
+  }
+
+  getProperties(): Promise<Properties.Property[]> {
+    return Observable.of(this.options).toPromise();
+  }
+
+  applyChanges(properties: Properties.Property[]): void {
+    this.confirm.emit(properties);
+  }
+
+}

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

@@ -0,0 +1,12 @@
+<div *ngIf="raw && raw.length > 0" class="properties-box">
+  <div class="property" *ngFor="let val of raw" [class.invalid]="val.status == 'invalid'">
+    <span *ngIf="val.status == 'invalid'" class="fa fa-warning">
+    </span>
+    <span class="key">{{ val.key }}</span>
+    <span class="equal"> = </span>
+    <span class="value">{{ val.value }}</span>
+  </div>
+</div>
+<div class="alert alert-info" style="display: inline-block" *ngIf="raw && raw.length == 0">
+  No properties defined
+</div>

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

@@ -0,0 +1,45 @@
+import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+
+/**
+ * Component used to display parameters of a stream deployment
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-stream-deploy-properties-debug',
+  templateUrl: 'properties-debug.component.html',
+  styleUrls: ['../styles.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StreamDeployPropertiesDebugComponent implements OnChanges {
+
+  /**
+   * Array of properties
+   */
+  @Input() raw: Array<PropertiesDebug>;
+
+  constructor() {
+  }
+
+  /**
+   * On Change
+   * @param {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.raw.currentValue) {
+      this.raw = changes.raw.currentValue;
+    } else {
+      this.raw = [];
+    }
+  }
+
+}
+
+/**
+ * Dedicate Interface for {@Link StreamDeployPropertiesDebugComponent}
+ */
+export interface PropertiesDebug {
+  key: string;
+  value: string;
+  status: string;
+}