Stream UI adjustments for skipper mode

Fixed comments on merge

Author: BoykoAlex

ui/src/app/shared/flo/support/app-metadata.ts

@@ -18,6 +18,7 @@ export class AppMetadata implements Flo.ElementMetadata {
   constructor(
     private _group: string,
     private _name: string,
+    private _version: string,
     private _dataObs: Observable<DetailedAppRegistration>,
     private _metadata?: Flo.ExtraMetadata
   ) {}
@@ -103,6 +104,10 @@ export class AppMetadata implements Flo.ElementMetadata {
     return this._metadata;
   }
 
+  get version(): string {
+    return this._version;
+  }
+
 }
 
 export interface CodeOptions {

ui/src/app/shared/model/app-registration.model.spec.ts

@@ -7,6 +7,8 @@ describe('AppRegistration', () => {
       const json = {
         'name': 'file',
         'type': 'source',
+        'version': '1.2.0.RELEASE',
+        'defaultVersion': true,
         'uri': 'maven://org.springframework.cloud.stream.app:file-source-rabbit:1.2.0.RELEASE',
         '_links':
         {
@@ -21,6 +23,8 @@ describe('AppRegistration', () => {
       expect(appRegistration.name).toBe('file');
       expect(appRegistration.type.toString()).toEqual(ApplicationType[ApplicationType.source].toString());
       expect(appRegistration.uri).toBe('maven://org.springframework.cloud.stream.app:file-source-rabbit:1.2.0.RELEASE');
+      expect(appRegistration.version).toBe('1.2.0.RELEASE');
+      expect(appRegistration.defaultVersion).toBe(true);
     });
   });
 });

ui/src/app/shared/model/app-registration.model.ts

@@ -15,6 +15,10 @@ export class AppRegistration implements Selectable, Serializable<AppRegistration
   public metaDataUri: string;
   public force: boolean;
 
+  public version: string;
+  public defaultVersion: boolean;
+
+
   constructor(
     name?: string,
     type?: ApplicationType,
@@ -41,6 +45,8 @@ export class AppRegistration implements Selectable, Serializable<AppRegistration
     this.name = input.name;
     this.type = input.type as ApplicationType;
     this.uri = input.uri;
+    this.version = input.version;
+    this.defaultVersion = input.defaultVersion;
     return this;
   }
 

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

@@ -66,6 +66,9 @@ export class EditorService implements Flo.Editor {
                 createHandle(owner, Constants.PROPERTIES_HANDLE_TYPE, () => {
                     const modalRef = this.bsModalService.show(StreamPropertiesDialogComponent);
                     modalRef.content.title = `Properties for ${element.attr('metadata/name').toUpperCase()}`;
+                    if (element.attr('metadata/version')) {
+                      modalRef.content.title += ` (${element.attr('metadata/version')})`;
+                    }
                     modalRef.content.setData(element, flo.getGraph());
                 }, pt);
             }

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

@@ -42,7 +42,7 @@ export class MetamodelService implements Flo.Metamodel {
      * @param errorHandler used to generate the error messages.
      */
     constructor(
-      private appsService: SharedAppsService,
+      private appsService: SharedAppsService
     ) {}
 
     textToGraph(flo: Flo.EditorContext, dsl: string): Promise<any> {
@@ -94,7 +94,7 @@ export class MetamodelService implements Flo.Metamodel {
                         if (group.has(item.name)) {
                             console.error(`Group '${item.type}' has duplicate element '${item.name}'`);
                         } else {
-                            group.set(item.name, this.createEntry(item.type, item.name));
+                            group.set(item.name, this.createEntry(item.type, item.name, item.version));
                         }
                     });
                     resolve(metamodel);
@@ -108,10 +108,11 @@ export class MetamodelService implements Flo.Metamodel {
         return this.request;
     }
 
-    private createEntry(type: ApplicationType, name: string, metadata?: Flo.ExtraMetadata): AppMetadata {
+    private createEntry(type: ApplicationType, name: string, version: string, metadata?: Flo.ExtraMetadata): AppMetadata {
       return new AppMetadata(
         type.toString(),
         name,
+        version,
         this.appsService.getAppInfo(type, name),
         metadata
       );

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

@@ -40,8 +40,10 @@ <h4 class="modal-title pull-left">Create Stream</h4>
       </td>
     </tr>
   </tbody>
-  <label class="dialog-control"><input [disabled]="isStreamCreationInProgress()" type="checkbox" [(ngModel)]="deploy"
-                                       [ngModelOptions]="{standalone: true}"/>Deploy stream(s)</label>
+  <label class="dialog-control" *ngIf="(featureInfo | async) && !(featureInfo | async)?.skipperEnabled">
+    <input [disabled]="isStreamCreationInProgress()" type="checkbox" [(ngModel)]="deploy"
+                                       [ngModelOptions]="{standalone: true}"/>Deploy stream(s)
+  </label>
   <div *ngIf="progressData">
     <hr/>
     <div>Creating Streams...</div>

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

@@ -9,6 +9,10 @@ import { ToastyService } from 'ng2-toasty';
 import { Properties } from 'spring-flo';
 import { Subscription } from 'rxjs/Subscription';
 import { Router } from '@angular/router';
+import { SharedAboutService } from '../../shared/services/shared-about.service';
+import { FeatureInfo } from '../../shared/model/about/feature-info.model';
+import { Observable } from 'rxjs/Observable';
+import { share } from 'rxjs/operators';
 
 /**
  * Stores progress percentage.
@@ -47,6 +51,7 @@ export class StreamCreateDialogComponent implements OnInit {
   progressData: ProgressData;
   deploy = false;
   successCallback: () => void;
+  featureInfo: Observable<FeatureInfo>;
 
   busy: Subscription;
 
@@ -55,14 +60,15 @@ export class StreamCreateDialogComponent implements OnInit {
     private toastyService: ToastyService,
     private parserService: ParserService,
     private streamService: StreamsService,
-    private router: Router
+    private router: Router,
+    private aboutService: SharedAboutService
   ) {}
 
   ngOnInit() {
     this.form = new FormGroup({}, this.uniqueStreamNames());
+    this.featureInfo = this.aboutService.getFeatureInfo().pipe(share());
   }
 
-
   setDsl(dsl: string) {
     // Remove empty lines from text definition and strip off white space
     let newLineNumber = 0;

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

@@ -98,10 +98,16 @@
                   class="btn btn-default" style="margin-left: 0;" title="Undeploy">
             <span class="glyphicon glyphicon-stop"></span>
           </button>
-          <button type="button" [appRoles]="['ROLE_CREATE']" [disabled]="(item.status==='deployed' || item.status==='deploying')" (click)="deploy(item)"
+
+          <button *ngIf="!(featureInfo | async)?.skipperEnabled" type="button" [appRoles]="['ROLE_CREATE']" [disabled]="(item.status==='deployed' || item.status==='deploying')" (click)="deploy(item)"
                   class="btn btn-default" style="margin-left: 0;" title="Deploy">
             <span class="glyphicon glyphicon-play"></span>
           </button>
+          <button *ngIf="(featureInfo | async)?.skipperEnabled" type="button" [appRoles]="['ROLE_CREATE']" class="btn btn-default" style="margin-left: 0;"
+                  popover="Switch to the Shell to deploy a stream using Skipper. The Dashboard support for it is under development" popoverTitle="Unsupported" placement="bottom" triggers="focus">
+            <span class="glyphicon glyphicon-play"></span>
+          </button>
+
           <button type="button" [appRoles]="['ROLE_CREATE']" (click)="destroy(item)"
                   class="btn btn-default" style="margin-left: 0;" title="Destroy">
             <span class="glyphicon glyphicon-remove"></span>

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

@@ -27,6 +27,7 @@ import {TriStateCheckboxComponent} from '../../shared/components/tri-state-check
 import {DeploymentPropertiesComponent} from './deployment-properties/deployment-properties.component';
 import { MocksSharedAboutService } from '../../tests/mocks/shared-about';
 import { SharedAboutService } from '../../shared/services/shared-about.service';
+import { DataflowVersionInfo } from '../../tests/mocks/about';
 
 /**
  * Test {@link StreamDefinitionsComponent}.
@@ -45,7 +46,11 @@ describe('StreamDefinitionsComponent', () => {
 
   beforeEach(async(() => {
     activeRoute = new MockActivatedRoute();
-    const aboutService = new MocksSharedAboutService();
+
+    // Disable skipper mode initially to get Deploy UI tests to pass
+    const info = new DataflowVersionInfo();
+    info.featureInfo.skipperEnabled = false;
+    const aboutService = new MocksSharedAboutService(info);
 
     TestBed.configureTestingModule({
       declarations: [

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

@@ -10,6 +10,10 @@ import { StreamMetrics } from '../model/stream-metrics';
 
 import { ToastyService} from 'ng2-toasty';
 import { Router } from '@angular/router';
+import { SharedAboutService } from '../../shared/services/shared-about.service';
+import { FeatureInfo } from '../../shared/model/about/feature-info.model';
+import { Observable } from 'rxjs/Observable';
+import { share } from 'rxjs/operators';
 
 @Component({
   selector: 'app-stream-definitions',
@@ -42,6 +46,8 @@ export class StreamDefinitionsComponent implements OnInit, OnDestroy {
 
   selectStreamDefinition: StreamDefinition;
 
+  featureInfo: Observable<FeatureInfo>;
+
   @ViewChild('destroyMultipleStreamDefinitionsModal')
   public destroyMultipleStreamDefinitionsModal: ModalDirective;
 
@@ -60,6 +66,7 @@ export class StreamDefinitionsComponent implements OnInit, OnDestroy {
   constructor(
     public streamsService: StreamsService,
     private toastyService: ToastyService,
+    private aboutService: SharedAboutService,
     private router: Router) {
   }
 
@@ -69,6 +76,7 @@ export class StreamDefinitionsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.loadStreamDefinitions();
     this.metricsSubscription = IntervalObservable.create(2000).subscribe(() => this.loadStreamMetrics());
+    this.featureInfo = this.aboutService.getFeatureInfo().pipe(share());
   }
 
   ngOnDestroy() {