Merge pull request #5330 from ArtemDzhereleiko/bug-fix/table/pagination

[3.3.2] UI:Fixed tables pagination after updated

ui-ngx/src/app/core/api/widget-api.models.ts

@@ -282,6 +282,7 @@ export interface IWidgetSubscription {
   hiddenData?: Array<{data: DataSet}>;
   timeWindowConfig?: Timewindow;
   timeWindow?: WidgetTimewindow;
+  widgetTimewindowChanged$: Observable<WidgetTimewindow>;
   comparisonEnabled?: boolean;
   comparisonTimeWindow?: WidgetTimewindow;
 

ui-ngx/src/app/core/api/widget-subscription.ts

@@ -67,7 +67,7 @@ import {
   KeyFilter,
   updateDatasourceFromEntityInfo
 } from '@shared/models/query/query.models';
-import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
+import { distinct, filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import { AlarmDataListener } from '@core/api/alarm-data.service';
 import { RpcStatus } from '@shared/models/rpc.models';
 
@@ -139,6 +139,11 @@ export class WidgetSubscription implements IWidgetSubscription {
   executingSubjects: Array<Subject<any>>;
 
   subscribed = false;
+  widgetTimewindowChangedSubject: Subject<WidgetTimewindow> = new ReplaySubject<WidgetTimewindow>();
+
+  widgetTimewindowChanged$ = this.widgetTimewindowChangedSubject.asObservable().pipe(
+    distinct()
+  );
 
   constructor(subscriptionContext: WidgetSubscriptionContext, public options: WidgetSubscriptionOptions) {
     const subscriptionSubject = new ReplaySubject<IWidgetSubscription>();
@@ -805,6 +810,7 @@ export class WidgetSubscription implements IWidgetSubscription {
 
   update(isTimewindowTypeChanged = false) {
     if (this.type !== widgetType.rpc) {
+      this.widgetTimewindowChangedSubject.next(this.timeWindowConfig);
       if (this.type === widgetType.alarm) {
         this.updateAlarmDataSubscription();
       } else {
@@ -1118,6 +1124,7 @@ export class WidgetSubscription implements IWidgetSubscription {
 
   destroy(): void {
     this.unsubscribe();
+    this.widgetTimewindowChangedSubject.complete();
     for (const cafId of Object.keys(this.cafs)) {
       if (this.cafs[cafId]) {
         this.cafs[cafId]();

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -198,6 +198,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   attributeScopeChanged(attributeScope: TelemetryType) {
     this.attributeScope = attributeScope;
     this.mode = 'default';
+    this.paginator.pageIndex = 0;
     this.updateData(true);
   }
 
@@ -447,7 +448,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     if (this.mode === 'widget') {
       this.widgetsList = [];
       this.widgetsListCache = [];
-      this.widgetsCarouselIndex = 0;      
+      this.widgetsCarouselIndex = 0;
       if (widgetsBundle) {
         this.widgetsLoaded = false;
         const bundleAlias = widgetsBundle.alias;

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -242,6 +242,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     if (this.breakpointObserverSubscription) {
       this.breakpointObserverSubscription.unsubscribe();
     }
+    this.dashboardTimewindowChangedSubject.complete();
     this.gridster = null;
   }
 

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -432,6 +432,9 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   }
 
   onTimewindowChange() {
+    if (this.displayPagination) {
+      this.paginator.pageIndex = 0;
+    }
     this.updateData();
   }
 

ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts

@@ -124,6 +124,7 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   directionChanged(direction: EntitySearchDirection) {
     this.direction = direction;
     this.updateColumns();
+    this.paginator.pageIndex = 0;
     this.updateData(true);
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -48,7 +48,7 @@ import cssjs from '@core/css/css';
 import { sortItems } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { CollectionViewer, DataSource, SelectionModel } from '@angular/cdk/collections';
-import { BehaviorSubject, forkJoin, fromEvent, merge, Observable } from 'rxjs';
+import { BehaviorSubject, forkJoin, fromEvent, merge, Observable, Subscription } from 'rxjs';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import { entityTypeTranslations } from '@shared/models/entity-type.models';
 import { debounceTime, distinctUntilChanged, map, take, tap } from 'rxjs/operators';
@@ -193,6 +193,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
 
   private rowStylesInfo: RowStyleInfo;
 
+  private widgetTimewindowChanged$: Subscription;
+
   private searchAction: WidgetAction = {
     name: 'action.search',
     show: true,
@@ -248,6 +250,19 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.initializeConfig();
     this.updateAlarmSource();
     this.ctx.updateWidgetParams();
+
+    if (this.displayPagination) {
+      this.widgetTimewindowChanged$ = this.ctx.defaultSubscription.widgetTimewindowChanged$.subscribe(
+        () => this.pageLink.page = 0
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.widgetTimewindowChanged$) {
+      this.widgetTimewindowChanged$.unsubscribe();
+      this.widgetTimewindowChanged$ = null;
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -147,6 +147,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   private rowStylesInfo: RowStyleInfo;
 
   private subscriptions: Subscription[] = [];
+  private widgetTimewindowChanged$: Subscription;
 
   private searchAction: WidgetAction = {
     name: 'action.search',
@@ -176,6 +177,25 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.datasources = this.ctx.datasources;
     this.initialize();
     this.ctx.updateWidgetParams();
+
+    if (this.displayPagination) {
+      this.widgetTimewindowChanged$ = this.ctx.defaultSubscription.widgetTimewindowChanged$.subscribe(
+        () => {
+          this.sources.forEach((source) => {
+            if (this.displayPagination) {
+              source.pageLink.page = 0;
+            }
+          });
+        }
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.widgetTimewindowChanged$) {
+      this.widgetTimewindowChanged$.unsubscribe();
+      this.widgetTimewindowChanged$ = null;
+    }
   }
 
   ngAfterViewInit(): void {