Stream History

Resolves #841

Author: oodamien

ui/src/app/streams/components/stream-history-status/stream-status.component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { StreamHistoryStatusComponent } from './stream-status.component';
+
+/**
+ * Test {@link StreamHistoryComponent}.
+ *
+ * @author Damien Vitrac
+ */
+describe('StreamHistoryStatusComponent', () => {
+  let component: StreamHistoryStatusComponent;
+  let fixture: ComponentFixture<StreamHistoryStatusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        StreamHistoryStatusComponent
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StreamHistoryStatusComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+});

ui/src/app/streams/components/stream-history-status/stream-status.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+/**
+ * Component used to display a stream history status.
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-stream-history-status',
+  template: `<span class="label label-stream-status label-{{ labelClass }}">{{ label }}</span>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StreamHistoryStatusComponent implements OnChanges {
+
+  /**
+   * Stream Definition
+   */
+  @Input() status: string;
+
+  /**
+   * Label
+   */
+  label: string;
+
+  /**
+   * Dedicate CSS class
+   */
+  labelClass: string;
+
+  /**
+   * On Changes listener
+   * @param {SimpleChanges} changes
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.status && changes.status.currentValue) {
+      this.label = changes.status.currentValue.toString().toUpperCase()
+    } else {
+      this.label = 'unknown'.toUpperCase();
+    }
+    switch (this.label.toLowerCase()) {
+      default:
+      case 'undeployed':
+        this.labelClass = 'default';
+        break;
+      case 'deleted':
+        this.labelClass = 'danger';
+        break;
+      case 'incomplete':
+        this.labelClass = 'warning';
+        break;
+      case 'deployed':
+        this.labelClass = 'primary';
+        break;
+    }
+  }
+}

ui/src/app/streams/components/stream-status/stream-status.component.ts

@@ -34,6 +34,7 @@ export class StreamStatusComponent implements OnChanges {
    */
   ngOnChanges(changes: SimpleChanges) {
     if (changes.streamDefinition) {
+      console.log(changes.streamDefinition.currentValue.status);
       if (changes.streamDefinition.currentValue.status) {
         this.label = changes.streamDefinition.currentValue.status.toString().toUpperCase();
       } else {
@@ -44,6 +45,7 @@ export class StreamStatusComponent implements OnChanges {
         case 'undeployed':
           this.labelClass = 'default';
           break;
+        case 'deleted':
         case 'failed':
           this.labelClass = 'danger';
           break;

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

@@ -0,0 +1,23 @@
+import { StreamHistory } from './stream-history';
+
+/**
+ * Test {@link StreamHistory} model.
+ *
+ * @author Damien Vitrac
+ */
+describe('StreamHistory', () => {
+
+  describe('basicValidationCheck', () => {
+    it('Constructor should setup stream history properly.', () => {
+      const date = new Date();
+      const history = new StreamHistory('foo', 1, date, 'deployed', 'Upgrade complete', 'default');
+      expect(history.stream).toBe('foo');
+      expect(history.version).toBe(1);
+      expect(history.firstDeployed).toBe(date);
+      expect(history.statusCode).toBe('deployed');
+      expect(history.description).toBe('Upgrade complete');
+      expect(history.platformName).toBe('default');
+    });
+  });
+
+});

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

@@ -0,0 +1,46 @@
+/**
+ * Represents a deployment history of a stream definition
+ *
+ * @author Damien Vitrac
+ */
+export class StreamHistory {
+
+  public stream: string;
+
+  public version: number;
+
+  public firstDeployed: Date;
+
+  public statusCode: string;
+
+  public description: string;
+
+  public platformName: string;
+
+  constructor(stream: string, version: number, firstDeployed: Date, statusCode: string, description: string, platformName: string) {
+    this.stream = stream;
+    this.version = version;
+    this.firstDeployed = firstDeployed;
+    this.statusCode = statusCode;
+    this.description = description;
+    this.platformName = platformName;
+  }
+
+  static fromJSON(input) {
+    let firstDeployed;
+    let statusCode;
+    let description;
+
+    console.log(input);
+
+    if (input['info']) {
+      description = input.info.description;
+      firstDeployed = input.info.firstDeployed;
+      if (input.info['status'] && input.info.status['statusCode']) {
+        statusCode = input.info.status.statusCode;
+      }
+    }
+    return new StreamHistory(input.name, input.version, firstDeployed, statusCode, description, input.platformName);
+  }
+
+}

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

@@ -0,0 +1,37 @@
+<div *ngIf="stream$ | async as stream; else loading">
+
+  <table class="table table-hover" id="table-history" *ngIf="stream.history.length > 0">
+    <thead>
+    <tr>
+      <th>Version</th>
+      <th>Date</th>
+      <th>Stream Status</th>
+      <th>Description</th>
+      <th>platformName</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let history of stream.history">
+      <td>
+        <strong>{{ history.version }}</strong>
+      </td>
+      <td>{{ history.firstDeployed | date: 'short'}}</td>
+      <td>
+        <app-stream-history-status [status]="history.statusCode"></app-stream-history-status>
+      </td>
+      <td>{{ history.description}}</td>
+      <td>{{ history.platformName}}</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <div *ngIf="stream.history.length == 0" class="alert alert-warning" style="display:inline-block;margin:0 auto">
+    <div style="padding-right: 15px">
+      No history.
+    </div>
+  </div>
+
+</div>
+<ng-template #loading>
+  <app-loader></app-loader>
+</ng-template>

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

@@ -0,0 +1,111 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockStreamsService } from '../../../tests/mocks/streams';
+import { MockActivatedRoute } from '../../../tests/mocks/activated-route';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StreamsService } from '../../streams.service';
+import { ActivatedRoute } from '@angular/router';
+import { FloModule } from 'spring-flo';
+import { MockNotificationService } from '../../../tests/mocks/notification';
+import { BsModalService } from 'ngx-bootstrap';
+import { MockModalService } from '../../../tests/mocks/modal';
+import { StreamStatusComponent } from '../../components/stream-status/stream-status.component';
+import { AppTypeComponent } from '../../../apps/components/app-type/app-type.component';
+import { RolesDirective } from '../../../auth/directives/roles.directive';
+import { StreamDslComponent } from '../../../shared/components/dsl/dsl.component';
+import { STREAM_DEFINITIONS } from '../../../tests/mocks/mock-data';
+import { MockAuthService } from '../../../tests/mocks/auth';
+import { AuthService } from '../../../auth/auth.service';
+import { MocksSharedAboutService } from '../../../tests/mocks/shared-about';
+import { SharedAboutService } from '../../../shared/services/shared-about.service';
+import { LoaderComponent } from '../../../shared/components/loader/loader.component';
+import { DeploymentPropertiesInfoComponent } from '../../streams/deployment-properties-info/deployment-properties-info.component';
+import { NotificationService } from '../../../shared/services/notification.service';
+import { LoggerService } from '../../../shared/services/logger.service';
+import { StreamHistoryComponent } from './stream-history.component';
+import { StreamHistoryStatusComponent } from '../../components/stream-history-status/stream-status.component';
+import { By } from '@angular/platform-browser';
+
+/**
+ * Test {@link StreamHistoryComponent}.
+ *
+ * @author Damien Vitrac
+ */
+describe('StreamHistoryComponent', () => {
+  let component: StreamHistoryComponent;
+  let fixture: ComponentFixture<StreamHistoryComponent>;
+  let activeRoute: MockActivatedRoute;
+  const streamsService = new MockStreamsService();
+  const commonTestParams = { id: '1' };
+  const notificationService = new MockNotificationService();
+  const modalService = new MockModalService();
+  const authService = new MockAuthService();
+  const aboutService = new MocksSharedAboutService();
+  const loggerService = new LoggerService();
+
+  beforeEach(async(() => {
+    activeRoute = new MockActivatedRoute();
+
+    TestBed.configureTestingModule({
+      declarations: [
+        StreamHistoryComponent,
+        StreamStatusComponent,
+        AppTypeComponent,
+        StreamDslComponent,
+        RolesDirective,
+        DeploymentPropertiesInfoComponent,
+        LoaderComponent,
+        StreamHistoryStatusComponent
+      ],
+      imports: [
+        RouterTestingModule.withRoutes([]),
+        FloModule
+      ],
+      providers: [
+        { provide: StreamsService, useValue: streamsService },
+        { provide: ActivatedRoute, useValue: activeRoute },
+        { provide: BsModalService, useValue: modalService },
+        { provide: SharedAboutService, useValue: aboutService },
+        { provide: AuthService, useValue: authService },
+        { provide: NotificationService, useValue: notificationService },
+        { provide: LoggerService, useValue: loggerService }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    activeRoute.testParams = commonTestParams;
+    fixture = TestBed.createComponent(StreamHistoryComponent);
+    component = fixture.componentInstance;
+    streamsService.streamDefinitions = STREAM_DEFINITIONS;
+  });
+
+  it('should be created', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should populate 2 history', () => {
+    fixture.detectChanges();
+
+    const trs = fixture.debugElement.queryAll(By.css('#table-history tbody tr'));
+    expect(trs.length).toBe(2);
+
+    const tds0 = trs[0].queryAll(By.css('td'));
+    const tds1 = trs[1].queryAll(By.css('td'));
+
+    expect(tds0.length).toBe(5);
+    expect(tds1.length).toBe(5);
+
+    expect(tds0[0].nativeElement.textContent).toBe('2');
+    expect(tds0[2].nativeElement.textContent).toContain('DEPLOYED');
+    expect(tds0[3].nativeElement.textContent).toContain('Upgrade complete');
+    expect(tds0[4].nativeElement.textContent).toContain('default');
+
+    expect(tds1[0].nativeElement.textContent).toBe('1');
+    expect(tds1[2].nativeElement.textContent).toContain('DELETED');
+    expect(tds1[3].nativeElement.textContent).toContain('Delete complete');
+    expect(tds1[4].nativeElement.textContent).toContain('default');
+  });
+
+});

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

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+import { StreamDefinition } from '../../model/stream-definition';
+import { map, mergeMap } from 'rxjs/internal/operators';
+import { StreamsService } from '../../streams.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { StreamHistory } from '../../model/stream-history';
+
+/**
+ * Component that shows the history of a Stream Definition
+ * Available only if skipper is enabled
+ *
+ * @author Damien Vitrac
+ */
+@Component({
+  selector: 'app-stream-history',
+  templateUrl: 'stream-history.component.html',
+  styleUrls: ['../styles.scss'],
+})
+export class StreamHistoryComponent implements OnInit {
+
+  /**
+   * Observable of stream information
+   * Contains the stream definition, a list of the streams"s apps
+   */
+  stream$: Observable<any>;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private streamsService: StreamsService) {
+  }
+
+  ngOnInit() {
+    this.stream$ = this.route.parent.params
+      .pipe(mergeMap(
+        val => this.streamsService.getDefinition(val.id)
+      ))
+      .pipe(mergeMap(
+        (streamDefinition: StreamDefinition) => this.streamsService.getHistory(streamDefinition.name)
+          .pipe(map((streamHistory: StreamHistory[]) => {
+            return {
+              stream: streamDefinition,
+              history: streamHistory
+            };
+          }))
+      ));
+  }
+
+}

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

@@ -1,8 +1,8 @@
-<div *ngIf="streamDefinitions$ | async as streamDefinitions; else loading">
+<div *ngIf="streamDefinition$ | async as streamDefinition; else loading">
 
   <div class="heading">
     <div class="description">
-      <h1>Detailed view of stream <strong>'{{ streamDefinitions.name }}'</strong></h1>
+      <h1>Detailed view of stream <strong>'{{ streamDefinition.streamDefinition.name }}'</strong></h1>
       <p>This section shows the details of a stream.</p>
     </div>
   </div>
@@ -11,6 +11,9 @@ <h1>Detailed view of stream <strong>'{{ streamDefinitions.name }}'</strong></h1>
     <ul class="nav nav-tabs">
       <li role="presentation" routerLinkActive="active"><a routerLink="summary">Summary</a></li>
       <li role="presentation" routerLinkActive="active"><a routerLink="graph">Graph</a></li>
+      <li role="presentation" routerLinkActive="active" *ngIf="streamDefinition.featureInfo.skipperEnabled">
+        <a routerLink="history">History</a>
+      </li>
     </ul>
     <div class="tab-content">
       <div class="tab-pane in active">