diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html index 0e40d8e6a5..edbff9ce7e 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html @@ -18,13 +18,13 @@
notification.notification
- +
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts index 32fcf2dc4a..ad601bd33a 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts @@ -14,24 +14,25 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, NgZone, OnDestroy } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { TbPopoverComponent } from '@shared/components/popover.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Notification, NotificationRequest } from '@shared/models/notification.models'; import { NotificationWebsocketService } from '@core/ws/notification-websocket.service'; -import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs'; -import { map, share, skip, tap } from 'rxjs/operators'; +import { BehaviorSubject, Observable, shareReplay } from 'rxjs'; +import { filter, skip, tap } from 'rxjs/operators'; import { Router } from '@angular/router'; import { NotificationSubscriber } from '@shared/models/telemetry/telemetry.models'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'tb-show-notification-popover', templateUrl: './show-notification-popover.component.html', styleUrls: ['show-notification-popover.component.scss'] }) -export class ShowNotificationPopoverComponent extends PageComponent implements OnDestroy, OnInit { +export class ShowNotificationPopoverComponent extends PageComponent implements OnDestroy { @Input() onClose: () => void; @@ -42,11 +43,13 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O @Input() popoverComponent: TbPopoverComponent; - private notificationSubscriber: NotificationSubscriber; - private notificationCountSubscriber: Subscription; + private notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6); - notifications$: Observable; - loadNotification = false; + notifications$: Observable = this.notificationSubscriber.notifications$.pipe( + filter(value => Array.isArray(value)), + shareReplay(1), + tap(() => setTimeout(() => this.cd.markForCheck())) + ); constructor(protected store: Store, private notificationWsService: NotificationWebsocketService, @@ -54,32 +57,15 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O private cd: ChangeDetectorRef, private router: Router) { super(store); - } - - ngOnInit() { - this.notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6); - this.notifications$ = this.notificationSubscriber.notifications$.pipe( - map(value => { - if (Array.isArray(value)) { - this.loadNotification = true; - return value; - } - return []; - }), - share({ - connector: () => new ReplaySubject(1) - }), - tap(() => setTimeout(() => this.cd.markForCheck())) - ); - this.notificationCountSubscriber = this.notificationSubscriber.notificationCount$.pipe( + this.notificationSubscriber.notificationCount$.pipe( skip(1), + takeUntilDestroyed() ).subscribe(value => this.counter.next(value)); this.notificationSubscriber.subscribe(); } ngOnDestroy() { super.ngOnDestroy(); - this.notificationCountSubscriber.unsubscribe(); this.notificationSubscriber.unsubscribe(); this.onClose(); }