11import { DataSource } from '@angular/cdk/collections' ;
22import { MatPaginator , MatSort } from '@angular/material' ;
3- import { map } from 'rxjs/operators' ;
4- import { Observable , of as observableOf , merge } from 'rxjs' ;
3+ import { Observable , BehaviorSubject , Subscription } from 'rxjs' ;
4+ import { SocketService } from 'src/app/api/api/socket.service' ;
5+ import { Instance } from 'src/app/model/models/instance' ;
6+ import { DatePipe } from '@angular/common' ;
7+ import { EventTypeEnum } from 'src/app/model/models/socketMessage' ;
8+ import { StoreService } from 'src/app/model/store.service' ;
59
610export interface InfoCenterItem {
711 instanceId : number ;
@@ -11,18 +15,71 @@ export interface InfoCenterItem {
1115 details : string ;
1216}
1317
14- const DATA : InfoCenterItem [ ] = [ ] ;
15-
1618/**
1719 * Data source for the InfoCenter view. This class should
1820 * encapsulate all logic for fetching and manipulating the displayed data
1921 * (including sorting, pagination, and filtering).
2022 */
2123export class InfoCenterDataSource extends DataSource < InfoCenterItem > {
22- data : InfoCenterItem [ ] = DATA ;
24+ private infoCenterSubject : BehaviorSubject < InfoCenterItem [ ] > ;
25+
26+ private instanceAddedSubscription : Subscription ;
27+ private instanceChangedSubscription : Subscription ;
28+ private instanceRemovedSubscription : Subscription ;
29+ private data : InfoCenterItem [ ] ;
30+ public numberEvents = 0 ;
31+ private instance : Instance ;
2332
24- constructor ( private paginator : MatPaginator , private sort : MatSort ) {
33+ constructor ( private storeService : StoreService , private socketService : SocketService ,
34+ private paginator : MatPaginator , private sort : MatSort , private compType : string , private instanceId : string ) {
2535 super ( ) ;
36+ this . data = [ ] ;
37+ if ( this . instanceId ) {
38+ this . instance = this . storeService . getState ( ) . instances [ this . instanceId ] ;
39+ if ( ! this . instance ) {
40+ this . instanceId = null ;
41+ }
42+ }
43+ this . infoCenterSubject = new BehaviorSubject < InfoCenterItem [ ] > ( [ ] ) ;
44+
45+ this . paginator . page . subscribe ( ( ) => { this . infoCenterSubject . next ( this . getPagedData ( ) ) ; } ) ;
46+ this . sort . sortChange . subscribe ( ( ) => { this . data = this . getSortedData ( this . data ) ; this . infoCenterSubject . next ( this . getPagedData ( ) ) ; } ) ;
47+
48+ this . instanceAddedSubscription = this . socketService . subscribeForEvent < Instance > ( EventTypeEnum . InstanceAddedEvent ) .
49+ subscribe ( ( newInstance : Instance ) => {
50+ if ( this . applyFilter ( newInstance ) ) {
51+ const newEntry = this . transformEventToNotificaton ( newInstance , 'new Instance added' , 'add_circle' ) ;
52+ this . applyUpdate ( newEntry ) ;
53+ }
54+ } ) ;
55+
56+ this . instanceRemovedSubscription = this . socketService . subscribeForEvent < Instance > ( EventTypeEnum . InstanceRemovedEvent ) .
57+ subscribe ( ( removeInstance : Instance ) => {
58+ if ( this . applyFilter ( removeInstance ) ) {
59+ const newEntry = this . transformEventToNotificaton ( removeInstance , 'Instance removed' , 'delete_sweep' ) ;
60+ this . applyUpdate ( newEntry ) ;
61+ }
62+ } ) ;
63+
64+ this . instanceChangedSubscription = this . socketService . subscribeForEvent < Instance > ( EventTypeEnum . StateChangedEvent ) .
65+ subscribe ( ( changeInstance : Instance ) => {
66+ if ( this . applyFilter ( changeInstance ) ) {
67+ const newEntry = this . transformEventToNotificaton ( changeInstance , 'Instance changed' , 'link' ) ;
68+ this . applyUpdate ( newEntry ) ;
69+ }
70+ } ) ;
71+ }
72+
73+ applyFilter ( instance : Instance ) : boolean {
74+ if ( ! this . instanceId && ! this . compType ) {
75+ return true ;
76+ } else {
77+ if ( this . instanceId ) {
78+ return instance . id === this . instance . id ;
79+ } else {
80+ return instance . componentType === this . compType ;
81+ }
82+ }
2683 }
2784
2885 /**
@@ -31,34 +88,33 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
3188 * @returns A stream of the items to be rendered.
3289 */
3390 connect ( ) : Observable < InfoCenterItem [ ] > {
34- // Combine everything that affects the rendered data into one update
35- // stream for the data-table to consume.
36- const dataMutations = [
37- observableOf ( this . data ) ,
38- this . paginator . page ,
39- ] ;
40-
41- // Set the paginator's length
42- this . paginator . length = this . data . length ;
43-
44- return merge ( ...dataMutations ) . pipe ( map ( ( ) => {
45- return this . getPagedData ( this . getSortedData ( [ ...this . data ] ) ) ;
46- } ) ) ;
91+ return this . infoCenterSubject . asObservable ( ) ;
92+ }
93+
94+ private applyUpdate ( newEntry : InfoCenterItem ) {
95+ this . data = this . getSortedData ( [ newEntry , ...this . data ] ) ;
96+ this . numberEvents = this . data . length ;
97+ this . infoCenterSubject . next ( this . getPagedData ( ) ) ;
4798 }
4899
49100 /**
50101 * Called when the table is being destroyed. Use this function, to clean up
51102 * any open connections or free any held resources that were set up during connect.
52103 */
53- disconnect ( ) { }
104+ disconnect ( ) {
105+ this . instanceAddedSubscription . unsubscribe ( ) ;
106+ this . instanceChangedSubscription . unsubscribe ( ) ;
107+ this . instanceRemovedSubscription . unsubscribe ( ) ;
108+ this . infoCenterSubject . complete ( ) ;
109+ }
54110
55111 /**
56112 * Paginate the data (client-side). If you're using server-side pagination,
57113 * this would be replaced by requesting the appropriate data from the server.
58114 */
59- private getPagedData ( data : InfoCenterItem [ ] ) {
115+ private getPagedData ( ) {
60116 const startIndex = this . paginator . pageIndex * this . paginator . pageSize ;
61- return data . splice ( startIndex , this . paginator . pageSize ) ;
117+ return [ ... this . data ] . splice ( startIndex , this . paginator . pageSize ) ;
62118 }
63119
64120 /**
@@ -73,15 +129,21 @@ export class InfoCenterDataSource extends DataSource<InfoCenterItem> {
73129 return data . sort ( ( a , b ) => {
74130 const isAsc = this . sort . direction === 'asc' ;
75131 switch ( this . sort . active ) {
76- case 'name' : return compare ( a . notifName , b . notifName , isAsc ) ;
77- case 'id' : return compare ( + a . dateTime , + b . dateTime , isAsc ) ;
132+ case 'notifName' : return compare ( a . notifName , b . notifName , isAsc ) ;
133+ case 'dateTime' : return compare ( + a . dateTime , + b . dateTime , isAsc ) ;
134+ case 'details' : return compare ( a . details , b . details , isAsc ) ;
78135 default : return 0 ;
79136 }
80137 } ) ;
81138 }
82- public add ( element : InfoCenterItem ) {
83- this . data . push ( element ) ;
139+
140+ private transformEventToNotificaton ( instance : Instance , notifName : string , type : string ) : InfoCenterItem {
141+ const datePipe = new DatePipe ( 'en-US' ) ;
142+ const actualDate = datePipe . transform ( Date . now ( ) , 'dd/MM/yyyy hh:mm:ss:SSS' ) ;
143+ return { instanceId : instance . id , type : type ,
144+ notifName : notifName , dateTime : actualDate , details : instance . name } ;
84145 }
146+
85147}
86148
87149/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
0 commit comments