Merge pull request #125 from delphi-hub/feature/informationCenter

Feature/information center

Author: janniclas

client/package-lock.json

@@ -27,7 +27,7 @@
     "bootstrap": "^4.3.1",
     "core-js": "^2.6.5",
     "cytoscape": "^3.5.0",
-    "cytoscape-edgehandles": "^3.5.0",
+    "cytoscape-edgehandles": "^3.5.1",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.3.1",
@@ -39,13 +39,14 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.12.4",
     "@angular/cli": "^7.3.5",
-    "@angular/compiler-cli": "^7.2.8",
+    "@angular/compiler-cli": "^7.2.9",
     "@angular/language-service": "^7.2.8",
     "@types/cytoscape": "^3.3.0",
     "@types/jasmine": "^3.3.9",
     "@types/jasminewd2": "^2.0.6",
     "@types/node": "^10.12.30",
     "codelyzer": "^4.5.0",
+    "jasmine": "^2.99.0",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^3.1.4",

client/package.json

@@ -17,7 +17,7 @@
  */
 
 import {Injectable} from '@angular/core';
-import {Observable, Observer, Subject} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {
   DockerOperationError,
   EventType,
@@ -88,7 +88,6 @@ export class SocketService {
    * @param eventName
    */
   public subscribeForEvent<T extends ReturnType>(eventName: EventType): Observable<T> {
-    return new Observable<T>((observer: Observer<T>) => {
 
       /**
        * First step to subscribe for an event is to append the new observer to the set
@@ -113,19 +112,8 @@ export class SocketService {
 
         this.send({event: publishEventName});
       }
-      this.observers[eventName].subscribe(observer);
 
-      this.socket.addEventListener('message', (e: MessageEvent) => this.socketOnMessage(e));
-
-      /**
-       * If an observable stream ends the observer is removed from the
-       * observer list and the list is deleted if it is empty.
-       */
-      return () => {
-        // TODO: see console log
-        console.log('observer completed, implement unsubscribe logic !');
-      };
-    });
+      return (this.observers[eventName].asObservable() as Observable<T>);
   }
 
   /**
@@ -244,7 +232,10 @@ export class SocketService {
    */
   public initSocket(): Promise<void> {
     if (this.socket === null) {
+
       this.socket = new WebSocket(this.wsUri);
+      this.socket.addEventListener('message', (e: MessageEvent) => this.socketOnMessage(e));
+
       setInterval(() => {
         this.send({event: EventTypeEnum.Heartbeat});
       }, 5000);

client/src/app/api/api/socket.service.ts

@@ -40,12 +40,12 @@ <h2 class="alignHeading">System Overview</h2>
         <div class="col-md-4 col-sm-4">
             <div class="row">
                 <div class=" col-md-12 col-sm-2">
-                    <app-infor-center></app-infor-center>
+                    <app-info-center></app-info-center>
                 </div>
                 <div class=" col-md-8 col-sm-2 topSpace">
                     <app-statuscard></app-statuscard>
                 </div>
             </div>
         </div>
     </div>
-</div>
+</div>

client/src/app/dashboard/dashboard-overview/dashboard-overview.component.html

@@ -23,18 +23,20 @@ import { StatusCardComponent } from '../status-card/status-card.component';
 import { DashboardCardComponent } from '../dashboard-card/dashboard-card.component';
 import { RouterModule } from '@angular/router';
 import { MaterialModule } from '../../material-module/material.module';
-import { InforCenterComponent } from '../infor-center/infor-center.component';
+import { InfoCenterComponent} from '../info-center/info-center.component';
 import { GraphViewModule} from '../graph-view/graph-view.module';
 import { DashboardOverviewComponent } from './dashboard-overview.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
 
 describe('DashboardOverviewComponent', () => {
   let component: DashboardOverviewComponent;
   let fixture: ComponentFixture<DashboardOverviewComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardOverviewComponent, DashboardCardComponent, StatusCardComponent, InforCenterComponent],
-      imports: [RouterModule, HttpClientModule, RouterTestingModule, MaterialModule, GraphViewModule]
+      declarations: [ DashboardOverviewComponent, DashboardCardComponent, StatusCardComponent, InfoCenterComponent],
+      imports: [RouterModule, HttpClientModule, RouterTestingModule, MaterialModule, GraphViewModule, NoopAnimationsModule]
     })
     .compileComponents();
   }));
@@ -48,9 +50,8 @@ describe('DashboardOverviewComponent', () => {
         fixture.destroy();
     });
 
-
-
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
 });

client/src/app/dashboard/dashboard-overview/dashboard-overview.component.spec.ts

@@ -23,7 +23,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { HeaderComponent } from './header/header.component';
 import { DashboardComponent } from './dashboard.component';
 
-
 describe('component: DashboardComponent', () => {
 
   let location: Location, router: Router;
@@ -38,7 +37,6 @@ describe('component: DashboardComponent', () => {
       ])
     ],
       declarations: [ DashboardComponent, HeaderComponent],
-
     });
   });
 

client/src/app/dashboard/dashboard.component.spec.ts

@@ -39,12 +39,12 @@ import {ApiModule} from '../api/api.module';
 import {ModelModule} from '../model/model.module';
 import { MaterialModule } from '../material-module/material.module';
 import { GraphViewModule } from './graph-view/graph-view.module';
-import { InforCenterComponent } from './infor-center/infor-center.component';
 import { InstanceDetailsComponent } from './instance-details/instance-details.component';
 import { TableOverviewComponent } from './table-overview/table-overview.component';
+import { InfoCenterComponent } from './info-center/info-center.component';
+import {MatTableModule, MatPaginatorModule, MatSortModule, MatIconModule} from '@angular/material';
 import { LabelDialogComponent } from './label-dialog/label-dialog.component';
 
-
 @NgModule({
   imports: [
     BrowserModule,
@@ -57,7 +57,11 @@ import { LabelDialogComponent } from './label-dialog/label-dialog.component';
     DashboardRoutingModule,
     ApiModule,
     ModelModule,
-    GraphViewModule
+    GraphViewModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatIconModule
   ],
   declarations: [
     DashboardCardComponent,
@@ -73,9 +77,9 @@ import { LabelDialogComponent } from './label-dialog/label-dialog.component';
     UserManagementComponent,
     DeleteDialogComponent,
     AddDialogComponent,
-    InforCenterComponent,
     InstanceDetailsComponent,
     TableOverviewComponent,
+    InfoCenterComponent,
     LabelDialogComponent
   ],
   entryComponents: [

client/src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,90 @@
+import { DataSource } from '@angular/cdk/collections';
+import { MatPaginator, MatSort } from '@angular/material';
+import { map } from 'rxjs/operators';
+import { Observable, of as observableOf, merge } from 'rxjs';
+
+export interface InfoCenterItem {
+  instanceId: number;
+  type: string;
+  notifName: string;
+  dateTime: string;
+  details: string;
+}
+
+const DATA: InfoCenterItem[] = [];
+
+/**
+ * Data source for the InfoCenter view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
+  data: InfoCenterItem[] = DATA;
+
+  constructor(private paginator: MatPaginator, private sort: MatSort) {
+    super();
+  }
+
+  /**
+   * Connect this data source to the table. The table will only update when
+   * the returned stream emits new items.
+   * @returns A stream of the items to be rendered.
+   */
+  connect(): Observable<InfoCenterItem[]> {
+    // Combine everything that affects the rendered data into one update
+    // stream for the data-table to consume.
+    const dataMutations = [
+      observableOf(this.data),
+      this.paginator.page,
+    ];
+
+    // Set the paginator's length
+    this.paginator.length = this.data.length;
+
+    return merge(...dataMutations).pipe(map(() => {
+      return this.getPagedData(this.getSortedData([...this.data]));
+    }));
+  }
+
+  /**
+   *  Called when the table is being destroyed. Use this function, to clean up
+   * any open connections or free any held resources that were set up during connect.
+   */
+  disconnect() {}
+
+  /**
+   * Paginate the data (client-side). If you're using server-side pagination,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getPagedData(data: InfoCenterItem[]) {
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.splice(startIndex, this.paginator.pageSize);
+  }
+
+  /**
+   * Sort the data (client-side). If you're using server-side sorting,
+   * this would be replaced by requesting the appropriate data from the server.
+   */
+  private getSortedData(data: InfoCenterItem[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'name': return compare(a.notifName, b.notifName, isAsc);
+        case 'id': return compare(+a.dateTime, +b.dateTime, isAsc);
+        default: return 0;
+      }
+    });
+  }
+  public add(element: InfoCenterItem) {
+    this.data.push(element);
+  }
+}
+
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a: string | number, b: string | number, isAsc: boolean) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

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

@@ -0,0 +1,7 @@
+.full-width-table {
+  width: 100%;
+}
+
+.infoCenter{
+  border: 1px solid black;
+}

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

@@ -0,0 +1,39 @@
+<h4>Information Center</h4>
+<div class="mat-elevation-z8" [ngClass]="'infoCenter'">
+  <mat-table #table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
+    <!-- type Column -->
+    <ng-container matColumnDef="type">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
+      <mat-cell *matCellDef="let row"><mat-icon>{{row.type}}</mat-icon></mat-cell>
+    </ng-container>
+
+    <!-- Name notif Column -->
+    <ng-container matColumnDef="notifName">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Notification</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{row.notifName}}</mat-cell>
+    </ng-container>
+
+    <!-- Date name Column -->
+    <ng-container matColumnDef="dateTime">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Date and Time</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{row.dateTime}}</mat-cell>
+    </ng-container>
+
+
+    <!-- Details Column -->
+    <ng-container matColumnDef="details">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Details</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{row.details}}</mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+
+  <mat-paginator #paginator
+                 [length]="dataSource.data.length"
+                 [pageIndex]="0"
+                 [pageSize]="5"
+                 [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+</div>

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

@@ -0,0 +1,34 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPaginatorModule, MatSortModule, MatTableModule, MatIconModule } from '@angular/material';
+
+import { InfoCenterComponent } from './info-center.component';
+import {SocketService} from '../../api/api/socket.service';
+
+describe('InfoCenterComponent', () => {
+  let component: InfoCenterComponent;
+  let fixture: ComponentFixture<InfoCenterComponent>;
+
+  beforeEach(async(() => {
+      TestBed.configureTestingModule({
+      declarations: [ InfoCenterComponent],
+      imports: [
+        NoopAnimationsModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatTableModule,
+        MatIconModule,
+      ]
+
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoCenterComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});