Stream deployment info popup

Author: BoykoAlex

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

@@ -9,6 +9,40 @@ import { Utils } from './utils';
  * @author Alex Boyko
  * @author Andy Clement
  */
+export class AppPropertyMetadata implements Flo.PropertyMetadata {
+
+  public options: string[];
+
+  public code: CodeOptions;
+
+  constructor(private metadata: ConfigurationMetadataProperty) {}
+
+  get id(): string {
+    return this.metadata.id;
+  }
+
+  get name(): string {
+    return this.metadata.name;
+  }
+
+  get description(): string {
+    return this.metadata.description || this.metadata.shortDescription;
+  }
+
+  get defaultValue() {
+    return this.metadata.defaultValue;
+  }
+
+  get type(): string {
+    return this.metadata.type;
+  }
+
+  get sourceType(): string {
+    return this.metadata.sourceType;
+  }
+
+}
+
 export class AppMetadata implements Flo.ElementMetadata {
 
   private _dataPromise: Promise<DetailedAppRegistration>;
@@ -114,37 +148,3 @@ export interface CodeOptions {
   readonly language?: string;
   readonly langPropertyName?: string;
 }
-
-export class AppPropertyMetadata implements Flo.PropertyMetadata {
-
-  public options: string[];
-
-  public code: CodeOptions;
-
-  constructor(private metadata: ConfigurationMetadataProperty) {}
-
-  get id(): string {
-    return this.metadata.id;
-  }
-
-  get name(): string {
-    return this.metadata.name;
-  }
-
-  get description(): string {
-    return this.metadata.description || this.metadata.shortDescription;
-  }
-
-  get defaultValue() {
-    return this.metadata.defaultValue;
-  }
-
-  get type(): string {
-    return this.metadata.type;
-  }
-
-  get sourceType(): string {
-    return this.metadata.sourceType;
-  }
-
-}

ui/src/app/streams/model/stream-definition.spec.ts

@@ -20,7 +20,7 @@ describe('StreamsDefinition', () => {
       expect(streamDefinition.isExpanded).toBe(true);
       streamDefinition.isSelected = true;
       expect(streamDefinition.force).toBe(true);
-      expect(Object.keys(streamDefinition.deploymentProperties).length).toBe(0);
+      expect(streamDefinition.deploymentProperties).toBeUndefined();
     });
   });
 });

ui/src/app/streams/model/stream-definition.ts

@@ -15,7 +15,7 @@ export class StreamDefinition implements Expandable {
   public isExpanded = false;
   public force = false;
 
-  public deploymentProperties: any = {};
+  public deploymentProperties: any;
 
   constructor(
       name: String,

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

@@ -0,0 +1,14 @@
+<div *ngIf="deploymentProperties | async as appsProperties; else loading">
+  <div *ngFor="let app of appsProperties" class="panel panel-default">
+    <div class="panel-heading"><label>{{getAppTitle(app)}}</label></div>
+    <div class="table-responsive">
+      <table *ngIf="app.props.length" class="table table-bordered">
+        <tr *ngFor="let pair of app.props">
+          <td class="deployment-properties-key">{{pair.key}}</td>
+          <td class="deployment-properties-value">{{pair.value}}</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+<ng-template #loading><div>Loading...</div></ng-template>

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

@@ -0,0 +1,11 @@
+.deployment-properties-key {
+  width: 70%;
+}
+
+.deployment-properties-value {
+  width: 30%;
+}
+
+.deployment-properties-container {
+  display: inline-table;
+}

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

@@ -0,0 +1,81 @@
+import {DeployedAppProperties, DeploymentPropertiesInfoComponent} from './deployment-properties-info.component';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MockStreamsService} from '../../../tests/mocks/streams';
+import {StreamsService} from '../../streams.service';
+import {StreamDefinition} from '../../model/stream-definition';
+
+/**
+ * Test {@link DeploymentPropertiesInfoComponent}.
+ *
+ * @author Alex Boyko
+ */
+describe('DeploymentPropertiesInfoComponent', () => {
+  let component: DeploymentPropertiesInfoComponent;
+  let fixture: ComponentFixture<DeploymentPropertiesInfoComponent>;
+
+  const streamsService = new MockStreamsService();
+
+  const deploymentProperties = {
+    time: {
+      'spring.property.key1': 'time_value1',
+      'spring.property.key2': 'time_value2',
+      'maven://org.springframework.cloud.stream.app:time-source-rabbit': '1.3.1.RELEASE'
+    },
+    log: {
+      'spring.property.key1': 'log_value1',
+      'spring.property.key2': 'log_value2',
+      'maven://org.springframework.cloud.stream.app:log-sink-rabbit': '1.3.0.RELEASE'
+    }
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DeploymentPropertiesInfoComponent
+      ],
+      imports: [],
+      providers: [
+        {provide: StreamsService, useValue: streamsService}
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeploymentPropertiesInfoComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('app title', () => {
+    expect(component.getAppTitle(new DeployedAppProperties('test', '1.0.0', []))).toBe('test (1.0.0)');
+    expect(component.getAppTitle(new DeployedAppProperties('test', '', []))).toBe('test');
+    expect(component.getAppTitle(new DeployedAppProperties('test', undefined, []))).toBe('test');
+  });
+
+  it('data from stream definition', (done) => {
+    const streamDef = new StreamDefinition('tick', 'time | log', 'deployed');
+    streamDef.deploymentProperties = deploymentProperties;
+    component.streamDefinition = streamDef;
+    component.deploymentProperties.subscribe(data => {
+      expect(Array.isArray(data)).toBeTruthy();
+      expect(data.length).toBe(2);
+
+      const timeData = data[0];
+      expect(timeData.name).toBe('time');
+      expect(timeData.version).toBe('1.3.1.RELEASE');
+      expect(timeData.props.length).toBe(2);
+      expect(timeData.props[0].key).toBe('spring.property.key1');
+      expect(timeData.props[0].value).toBe('time_value1');
+
+      const logData = data[1];
+      expect(logData.name).toBe('log');
+      expect(logData.version).toBe('1.3.0.RELEASE');
+      expect(logData.props.length).toBe(2);
+      expect(logData.props[1].key).toBe('spring.property.key2');
+      expect(logData.props[1].value).toBe('log_value2');
+
+      done();
+    });
+  });
+
+});

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

@@ -0,0 +1,78 @@
+import {Component, Input} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {share} from 'rxjs/operators';
+import {StreamDefinition} from '../../model/stream-definition';
+import {StreamsService} from '../../streams.service';
+
+const VERSION_PROPERTY_KEY_PREFIX = 'maven://';
+
+export class KeyValuePair {
+  constructor(
+    public key: string,
+    public value: string
+  ) {}
+}
+
+export class DeployedAppProperties {
+  constructor(
+    public name: string,
+    public version: string,
+    public props: KeyValuePair[]
+  ) {}
+}
+
+
+@Component({
+  selector: 'app-stream-deployment-properties-info',
+  templateUrl: './deployment-properties-info.component.html',
+  styleUrls: [ './deployment-properties-info.component.scss' ],
+})
+/**
+ * Component that shows stream deployment info.
+ *
+ * @author Alex Boyko
+ */
+export class DeploymentPropertiesInfoComponent {
+
+  public deploymentProperties: Observable<DeployedAppProperties[]>;
+
+  constructor(private streamsService: StreamsService) {}
+
+  @Input()
+  set streamDefinition(streamDef: StreamDefinition) {
+    if (streamDef.deploymentProperties) {
+      this.deploymentProperties = Observable.of(this.extractData(streamDef.deploymentProperties)).pipe(share());
+    } else {
+      this.deploymentProperties = this.streamsService.getDeploymentInfo(streamDef.name.toString()).map(d => {
+        streamDef.deploymentProperties = d.deploymentProperties;
+        return this.extractData(streamDef.deploymentProperties);
+      }).pipe(share());
+    }
+  }
+
+  getAppTitle(app: DeployedAppProperties): string {
+    if (app.version) {
+      return `${app.name} (${app.version})`;
+    } else {
+      return app.name;
+    }
+  }
+
+  private extractData(deploymentProperties: any) {
+    return Object.keys(deploymentProperties).map(k => this.extractSingleApp(k, deploymentProperties[k]));
+  }
+
+  private extractSingleApp(app: string, data: any) {
+    const props = [];
+    let version;
+    Object.keys(data).forEach(k => {
+      if (k.startsWith(VERSION_PROPERTY_KEY_PREFIX)) {
+        version = data[k];
+      } else {
+        props.push(new KeyValuePair(k, data[k]));
+      }
+    });
+    return new DeployedAppProperties(app, version, props);
+  }
+
+}

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

@@ -88,7 +88,11 @@
         </td>
         <td>{{item.name}}</td>
         <td>{{item.dslText}}</td>
-        <td>{{item.status}}</td>
+        <td *ngIf="canShowDeploymentInfo(item); else deployment_status_only_content">
+          <a href="" (click)="false" [popover]="stream_info" placement="bottom" triggers="focus" containerClass="deployment-info-popup">{{item.status}}</a>
+        </td>
+        <ng-template #deployment_status_only_content><td>{{item.status ? item.status : 'unknown'}}</td></ng-template>
+        <ng-template #stream_info><app-stream-deployment-properties-info [streamDefinition]="item"></app-stream-deployment-properties-info></ng-template>
         <td class="action-column">
           <button type="button" (click)="details(item)"
                   class="btn btn-default" title="Details">

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

@@ -0,0 +1,3 @@
+.deployment-info-popup {
+  max-width: 500px;
+}

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

@@ -27,7 +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';
+import { DeploymentPropertiesInfoComponent } from './deployment-properties-info/deployment-properties-info.component';
 
 /**
  * Test {@link StreamDefinitionsComponent}.
@@ -46,11 +46,7 @@ describe('StreamDefinitionsComponent', () => {
 
   beforeEach(async(() => {
     activeRoute = new MockActivatedRoute();
-
-    // Disable skipper mode initially to get Deploy UI tests to pass
-    const info = new DataflowVersionInfo();
-    info.featureInfo.skipperEnabled = false;
-    const aboutService = new MocksSharedAboutService(info);
+    const aboutService = new MocksSharedAboutService();
 
     TestBed.configureTestingModule({
       declarations: [
@@ -61,7 +57,8 @@ describe('StreamDefinitionsComponent', () => {
         StreamDefinitionsComponent,
         TriStateButtonComponent,
         TriStateCheckboxComponent,
-        DeploymentPropertiesComponent
+        DeploymentPropertiesComponent,
+        DeploymentPropertiesInfoComponent
       ],
       imports: [
         BusyModule,
@@ -354,4 +351,30 @@ describe('StreamDefinitionsComponent', () => {
     expect(show2).not.toHaveBeenCalled();
   });
 
+  it('can show deployment info', () => {
+    const stream = new StreamDefinition('test', 'time | log', 'unknown');
+    expect(component.canShowDeploymentInfo(stream)).toBeFalsy();
+
+    stream.status = undefined;
+    expect(component.canShowDeploymentInfo(stream)).toBeFalsy();
+
+    stream.status = 'undeployed';
+    expect(component.canShowDeploymentInfo(stream)).toBeFalsy();
+
+    stream.status = 'deployed';
+    expect(component.canShowDeploymentInfo(stream)).toBeTruthy();
+
+    stream.status = 'deploying';
+    expect(component.canShowDeploymentInfo(stream)).toBeTruthy();
+
+    stream.status = 'failed';
+    expect(component.canShowDeploymentInfo(stream)).toBeTruthy();
+
+    stream.status = 'incomplete';
+    expect(component.canShowDeploymentInfo(stream)).toBeTruthy();
+
+    stream.status = 'foo';
+    expect(component.canShowDeploymentInfo(stream)).toBeFalsy();
+  });
+
 });