Merge remote-tracking branch 'origin/develop' into feature/labelDelete

Author: Johannes Duesing

app/controllers/InstanceRegistryController.scala

@@ -219,8 +219,6 @@ class InstanceRegistryController @Inject()(implicit system: ActorSystem, mat: Ma
 
   def authentication(): Action[AnyContent] = Action.async {
     request =>
-      //val json = request.body.asJson.get
-
 
       val jsonBody: Option[JsValue] = request.body.asJson
 

build.sbt

@@ -42,7 +42,7 @@ libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "3.1.2
 libraryDependencies += "net.codingwell" %% "scala-guice" % "4.1.1"
 libraryDependencies += "com.iheart" %% "ficus" % "1.4.3"
 libraryDependencies += "org.webjars" % "bootstrap" % "4.1.0"
-libraryDependencies += "org.webjars" %% "webjars-play" % "2.6.3"
+libraryDependencies += "org.webjars" %% "webjars-play" % "2.7.0"
 libraryDependencies += "com.adrianhurt" %% "play-bootstrap" % "1.4-P26-B4-SNAPSHOT"
 libraryDependencies += "eu.bitwalker" % "UserAgentUtils" % "1.20"
 libraryDependencies += "com.typesafe.akka" %% "akka-http" % "10.1.5"
@@ -58,7 +58,7 @@ libraryDependencies ++= Seq(
   "com.nimbusds" % "nimbus-jose-jwt" % "5.14",
   "org.bouncycastle" % "bcprov-jdk15on" % "1.60",
   "com.google.guava" % "guava" % "25.1-jre",
-  "org.apache.commons" % "commons-compress" % "1.16"
+  "org.apache.commons" % "commons-compress" % "1.18"
 )
 
 libraryDependencies += "com.pauldijou" %% "jwt-core" % "1.0.0"

client/src/app/dashboard/add-dialog/add-dialog.component.ts

@@ -39,7 +39,6 @@ export class AddDialogComponent implements OnInit {
   }
 
   onKeydown(event) {
-    console.log(event);
     this.thisDialogRef.close({
       status: 'Add',
       name: this.name

client/src/app/dashboard/graph-view/graph-view.service.ts

@@ -62,7 +62,6 @@ export class GraphViewService {
     this.elementRemover = new BehaviorSubject<Array<string>>([]);
 
     this.modelService.getObservableForInstances().subscribe((change: InstanceChange) => {
-      console.log('received notification in graph view service', change);
       if (change.elements !== undefined) {
         if (change.type === Actions.DELETE) {
           this.removeElements(change.elements);
@@ -74,7 +73,6 @@ export class GraphViewService {
   }
 
   public reconnect(from: string, to: string) {
-    console.log('trying to reconnect', from, to);
     this.apiService.postReconnect(Number(from), Number(to)).subscribe((res) => {
       console.log('reconnect returned with result', res);
     });
@@ -86,9 +84,8 @@ export class GraphViewService {
   }
 
   private handleElements(type: Actions, instances: Array<Instance>) {
-    console.log('received new instance in graph view service', instances);
+
     const eles: Array<cytoscape.ElementDefinition> = this.createCytoscapeElements(instances);
-    console.log('parsed instance to eles', eles);
     this.elementProvider.next({type: type, elements: eles});
   }
 
@@ -135,7 +132,6 @@ export class GraphViewService {
     return new Observable((observer) => {
       // calculate init value
       const allInstances = Object.values(this.storeService.getState().instances);
-      console.log('all instances', allInstances);
       const cyElements = this.createCytoscapeElements(allInstances);
       observer.next({type: Actions.ADD, elements: cyElements});
       this.elementProvider.subscribe(observer);

client/src/app/dashboard/info-center/info-center-datasource.ts

@@ -1,11 +1,9 @@
 import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator, MatSort } from '@angular/material';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
-import { SocketService } from 'src/app/api/api/socket.service';
 import { Instance } from 'src/app/model/models/instance';
-import { DatePipe } from '@angular/common';
-import { EventTypeEnum } from 'src/app/model/models/socketMessage';
 import { StoreService } from 'src/app/model/store.service';
+import { EventService } from 'src/app/model/event.service';
 
 export interface InfoCenterItem {
   instanceId: number;
@@ -23,16 +21,15 @@ export interface InfoCenterItem {
 export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
   private infoCenterSubject: BehaviorSubject<InfoCenterItem[]>;
 
-  private instanceAddedSubscription: Subscription;
-  private instanceChangedSubscription: Subscription;
-  private instanceRemovedSubscription: Subscription;
+  private eventSubscription: Subscription;
   private data: InfoCenterItem[];
   public numberEvents = 0;
   private instance: Instance;
 
-  constructor(private storeService: StoreService, private socketService: SocketService,
-    private paginator: MatPaginator, private sort: MatSort, private compType: string, private instanceId: string) {
+  constructor(private storeService: StoreService, private paginator: MatPaginator,
+      private sort: MatSort, private compType: string, private instanceId: string, private eventService: EventService) {
     super();
+
     this.data = [];
     if (this.instanceId) {
       this.instance = this.storeService.getState().instances[this.instanceId];
@@ -44,36 +41,17 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
 
     this.paginator.page.subscribe(() => { this.infoCenterSubject.next(this.getPagedData()); });
     this.sort.sortChange.subscribe(() => {this.data = this.getSortedData(this.data); this.infoCenterSubject.next(this.getPagedData()); });
-
-    this.instanceAddedSubscription = this.socketService.subscribeForEvent<Instance>(EventTypeEnum.InstanceAddedEvent).
-      subscribe((newInstance: Instance) => {
-        if (this.applyFilter(newInstance)) {
-          const newEntry = this.transformEventToNotificaton(newInstance, 'new Instance added', 'add_circle');
-          this.applyUpdate(newEntry);
-        }
-      });
-
-      this.instanceRemovedSubscription = this.socketService.subscribeForEvent<Instance>(EventTypeEnum.InstanceRemovedEvent).
-        subscribe((removeInstance: Instance) => {
-          if (this.applyFilter(removeInstance)) {
-            const newEntry = this.transformEventToNotificaton(removeInstance, 'Instance removed', 'delete_sweep');
-            this.applyUpdate(newEntry);
-          }
-        });
-
-      this.instanceChangedSubscription = this.socketService.subscribeForEvent<Instance>(EventTypeEnum.StateChangedEvent).
-        subscribe((changeInstance: Instance) => {
-          if (this.applyFilter(changeInstance)) {
-            const newEntry = this.transformEventToNotificaton(changeInstance, 'Instance changed', 'link');
-            this.applyUpdate(newEntry);
-          }
-        });
+    this.paginator.initialized.subscribe(() => { this.infoCenterSubject.next(this.getPagedData()); });
+    this.eventSubscription = this.eventService.getEventObservable().subscribe((newNotifs: InfoCenterItem[]) => {
+      this.applyUpdate(newNotifs);
+    });
   }
 
-  applyFilter(instance: Instance): boolean {
+  applyFilter(notifItem: InfoCenterItem): boolean {
     if (!this.instanceId && !this.compType) {
       return true;
     } else {
+      const instance = this.storeService.getState().instances[notifItem.instanceId];
       if (this.instanceId) {
         return instance.id === this.instance.id;
       } else {
@@ -91,8 +69,11 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
     return this.infoCenterSubject.asObservable();
   }
 
-  private applyUpdate(newEntry: InfoCenterItem) {
-    this.data = this.getSortedData([newEntry, ...this.data]);
+  private applyUpdate(newEntry: InfoCenterItem[]) {
+
+    const filteredEntries = newEntry.filter((entry => this.applyFilter(entry)));
+
+    this.data = this.getSortedData([...filteredEntries]);
     this.numberEvents = this.data.length;
     this.infoCenterSubject.next(this.getPagedData());
   }
@@ -102,9 +83,9 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
    * any open connections or free any held resources that were set up during connect.
    */
   disconnect() {
-    this.instanceAddedSubscription.unsubscribe();
-    this.instanceChangedSubscription.unsubscribe();
-    this.instanceRemovedSubscription.unsubscribe();
+    this.eventSubscription.unsubscribe();
+    this.paginator.page.unsubscribe();
+    this.sort.sortChange.unsubscribe();
     this.infoCenterSubject.complete();
   }
 
@@ -113,8 +94,12 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
    * this would be replaced by requesting the appropriate data from the server.
    */
   private getPagedData() {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return [...this.data].splice(startIndex, this.paginator.pageSize);
+
+    if (this.paginator && this.paginator.pageIndex !== undefined && this.paginator.pageSize !== undefined) {
+      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+      return [...this.data].splice(startIndex, this.paginator.pageSize);
+    }
+    return [...this.data];
   }
 
   /**
@@ -137,13 +122,6 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
     });
   }
 
-  private transformEventToNotificaton(instance: Instance, notifName: string, type: string): InfoCenterItem {
-    const datePipe = new DatePipe('en-US');
-    const actualDate = datePipe.transform(Date.now(), 'dd/MM/yyyy hh:mm:ss:SSS');
-    return {instanceId: instance.id, type: type,
-      notifName: notifName, dateTime: actualDate, details: instance.name};
-  }
-
 }
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */

client/src/app/dashboard/info-center/info-center.component.html

@@ -22,7 +22,7 @@ <h4>Information Center</h4>
 
     <!-- Details Column -->
     <ng-container matColumnDef="details">
-      <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Instance Name</mat-header-cell>
       <mat-cell *matCellDef="let row">{{row.details}}</mat-cell>
     </ng-container>
 

client/src/app/dashboard/info-center/info-center.component.ts

@@ -1,8 +1,8 @@
-import {Component, ViewChild, Input, AfterViewInit, OnInit} from '@angular/core';
+import {Component, ViewChild, Input, OnInit} from '@angular/core';
 import {MatPaginator, MatSort, MatTable} from '@angular/material';
 import {InfoCenterDataSource, InfoCenterItem } from './info-center-datasource';
-import {SocketService} from '../../api/api/socket.service';
 import { StoreService } from 'src/app/model/store.service';
+import { EventService } from 'src/app/model/event.service';
 
 
 @Component({
@@ -21,11 +21,12 @@ export class InfoCenterComponent implements OnInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['type', 'notifName', 'dateTime', 'details'];
 
-  constructor(private socketService: SocketService, private storeService: StoreService) {}
+  constructor(private storeService: StoreService, private eventService: EventService) {}
 
   ngOnInit() {
     this.dataSource =
-      new InfoCenterDataSource(this.storeService, this.socketService, this.paginator, this.sort, this.compType, this.instanceId);
+      new InfoCenterDataSource(this.storeService, this.paginator, this.sort,
+        this.compType, this.instanceId, this.eventService);
   }
 
 }

client/src/app/model/event.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventService } from './event.service';
+
+describe('EventService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: EventService = TestBed.get(EventService);
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/model/event.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { StoreService, StateUpdate, Actions } from './store.service';
+import { BehaviorSubject } from 'rxjs';
+import { InfoCenterItem } from '../dashboard/info-center/info-center-datasource';
+import { Instance } from './models/instance';
+import { DatePipe } from '@angular/common';
+
+
+const ACTION_NOTIF_MAP = {
+  'ADD': {type: 'add_circle', description: 'Instance Added'},
+  'DELETE': {type: 'delete_sweep', description: 'Instance Deleted'},
+  'CHANGE': {type: 'link', description: 'Instance Changed'},
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventService {
+  private eventState: BehaviorSubject<InfoCenterItem[]>;
+
+  constructor(private storeService: StoreService) {
+    this.eventState = new BehaviorSubject<InfoCenterItem[]>([]);
+
+    this.storeService.getStoreObservable().subscribe((change: StateUpdate) => {
+      // don't create an event for the intial state creation
+      // all actions expect none have instances
+      if (change.change.type !== Actions.NONE && change.change.elements) {
+        const newNotifElements = change.change.elements.map((instance: Instance) => {
+          const prevInstance = change.prevState.instances[instance.id];
+          return this.transformEventToNotificaton(instance, prevInstance, change.change.type);
+        });
+        this.eventState.next([...newNotifElements, ...this.eventState.value]);
+      }
+    });
+  }
+
+  public getEventObservable() {
+    return this.eventState.asObservable();
+  }
+
+  private transformEventToNotificaton(instance: Instance, prevInstance: Instance, action: Actions): InfoCenterItem {
+
+    const details = this.getChange(instance, prevInstance, action);
+
+    const datePipe = new DatePipe('en-US');
+    const actualDate = datePipe.transform(Date.now(), 'dd/MM/yyyy hh:mm:ss:SSS');
+    return {instanceId: instance.id, type: ACTION_NOTIF_MAP[action].type,
+      notifName: ACTION_NOTIF_MAP[action].description, dateTime: actualDate, details: details};
+  }
+
+  private getChange(instance: Instance, prevInstance: Instance, action: Actions): string {
+    if (prevInstance && action === Actions.CHANGE) {
+      if (instance.instanceState !== prevInstance.instanceState) {
+        return 'Instance state changed from ' + prevInstance.instanceState + ' to ' + instance.instanceState;
+      }
+    }
+    return instance.name;
+  }
+}

client/src/app/model/model.service.ts

@@ -102,15 +102,7 @@ export class ModelService {
    * instance stored in the state.
    */
   public getObservableForInstances() {
-    return new Observable<InstanceChange>((observer) => {
-      this.instanceSubject.subscribe(observer);
-      observer.next(this.instanceSubject.value);
-
-      return () => {
-        // TODO: see console log
-        console.log('observer completed, implement unsubscribe logic !');
-      };
-    });
+    return this.instanceSubject.asObservable();
   }
 
   /**