dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12416 from maxunbearable/fix/2073-empty-notifications

Browse Source 
Fixed empty notifications on slow WS connection
This commit is contained in:
Igor Kulikov 2025-01-10 19:13:13 +02:00 committed by GitHub
commit bfc8b878a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
View File

@ -18,13 +18,13 @@
<section class="flex flex-row items-center justify-between" style="margin: 0 10px 4px; min-height: 36px">
<div style="font-weight: 500; letter-spacing: .25px" translate>notification.notification</div>
<button mat-button color="primary"
*ngIf="(notifications$ | async).length"
*ngIf="(notifications$ | async)?.length"
(click)="markAsAllRead($event)">
{{ 'notification.mark-all-as-read' | translate }}
</button>
</section>
<mat-divider></mat-divider>
<ng-container *ngIf="loadNotification; else loadingNotification">
<ng-container *ngIf="notifications$ | async; else loadingNotification">
<div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
<section style="min-height: 100px; overflow: auto; padding: 6px 0;">
<div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">

40
ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
View File

@ -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<Notification[]>;
loadNotification = false;
notifications$: Observable<Notification[]> = this.notificationSubscriber.notifications$.pipe(
filter(value => Array.isArray(value)),
shareReplay(1),
tap(() => setTimeout(() => this.cd.markForCheck()))
);
constructor(protected store: Store<AppState>,
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();
}