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

Dashboard performance improvements by changing change detection strategy to OnPush

Browse Source
This commit is contained in:
Igor Kulikov 2021-05-14 18:21:46 +03:00
parent 634df64692
commit c768fcbac1
7 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
View File

@ -15,6 +15,7 @@
///
import {
ChangeDetectorRef,
Component,
Injector,
Input,
@ -73,6 +74,7 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
constructor(private translate: TranslateService,
private overlay: Overlay,
private cd: ChangeDetectorRef,
private breakpointObserver: BreakpointObserver,
private viewContainerRef: ViewContainerRef) {
}
@ -179,6 +181,7 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
displayValue = this.translate.instant('entity.entities');
}
this.displayValue = displayValue;
this.cd.detectChanges();
}
private updateEntityAliasesInfo() {

2
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
View File

@ -226,8 +226,6 @@
<mat-drawer class="tb-details-drawer"
[opened]="isEditingWidget || isAddingWidget"
(openedStart)="detailsDrawerOpenedStart()"
(opened)="detailsDrawerOpened()"
(closedStart)="detailsDrawerClosedStart()"
(closed)="detailsDrawerClosed()"
mode="over"
position="end">

24
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
View File

@ -15,6 +15,7 @@
///
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, ElementRef,
Inject,
@ -134,7 +135,7 @@ import {
templateUrl: './dashboard-page.component.html',
styleUrls: ['./dashboard-page.component.scss'],
encapsulation: ViewEncapsulation.None,
// changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, OnDestroy {
@ -425,9 +426,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
}
public runChangeDetection() {
/*setTimeout(() => {
this.ngZone.run(() => {
this.cd.detectChanges();
});*/
});
}
public openToolbar() {
@ -731,6 +732,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
const widget = importData.widget;
const layoutId = importData.layoutId;
this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id);
this.runChangeDetection();
}
}
);
@ -885,28 +887,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
} else if (this.isAddingWidget) {
this.isAddingWidgetClosed = false;
}
setTimeout(() => {
this.cd.detach();
}, 0);
}
detailsDrawerOpened() {
this.cd.reattach();
}
detailsDrawerClosedStart() {
this.cd.detach();
}
detailsDrawerClosed() {
this.isEditingWidgetClosed = true;
this.isAddingWidgetClosed = true;
this.cd.reattach();
}
private addWidgetToLayout(widget: Widget, layoutId: DashboardLayoutId) {
this.dashboardUtils.addWidgetToLayout(this.dashboard, this.dashboardCtx.state, layoutId, widget);
this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id);
this.runChangeDetection();
}
private selectTargetLayout(): Observable<DashboardLayoutId> {
@ -1060,6 +1051,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
pos, this.entityAliasesUpdated.bind(this), this.filtersUpdated.bind(this)).subscribe(
(widget) => {
layoutCtx.widgets.addWidgetId(widget.id);
this.runChangeDetection();
});
}
@ -1068,6 +1060,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
pos).subscribe(
(widget) => {
layoutCtx.widgets.addWidgetId(widget.id);
this.runChangeDetection();
});
}
@ -1086,6 +1079,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
if (res) {
if (layoutCtx.widgets.removeWidgetId(widget.id)) {
this.dashboardUtils.removeWidgetFromLayout(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget.id);
this.runChangeDetection();
}
}
});

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

@ -15,7 +15,7 @@
///
import {
AfterViewInit,
AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef,
Component,
DoCheck,
Input,
@ -59,7 +59,8 @@ import { UtilsService } from '@core/services/utils.service';
@Component({
selector: 'tb-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
styleUrls: ['./dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent extends PageComponent implements IDashboardComponent, DoCheck, OnInit, OnDestroy, AfterViewInit, OnChanges {
@ -178,6 +179,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
private breakpointObserver: BreakpointObserver,
private differs: IterableDiffers,
private kvDiffers: KeyValueDiffers,
private cd: ChangeDetectorRef,
private ngZone: NgZone) {
super(store);
this.authUser = getCurrentAuthUser(store);
@ -249,6 +251,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
let updateLayoutOpts = false;
let updateEditingOpts = false;
let updateWidgets = false;
let updateDashboardTimewindow = false;
for (const propName of Object.keys(changes)) {
const change = changes[propName];
if (!change.firstChange && change.currentValue !== change.previousValue) {
@ -261,13 +264,16 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
} else if (['widgets', 'widgetLayouts'].includes(propName)) {
updateWidgets = true;
} else if (propName === 'dashboardTimewindow') {
this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow);
updateDashboardTimewindow = true;
}
}
}
if (updateWidgets) {
this.updateWidgets();
} else if (updateDashboardTimewindow) {
this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow);
}
if (updateMobileOpts) {
this.updateMobileOpts();
}
@ -528,6 +534,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
this.updateWidgetLayouts();
}
public detectChanges() {
this.cd.detectChanges();
}
private detectRowSize(isMobile: boolean, autofillHeight: boolean, parentHeight?: number): number | null {
let rowHeight = null;
if (!autofillHeight) {

8
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View File

@ -468,10 +468,13 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
);
}
private detectChanges() {
private detectChanges(detectDashboardChanges = false) {
if (!this.destroyed) {
try {
this.cd.detectChanges();
if (detectDashboardChanges) {
this.widgetContext.dashboard.detectChanges();
}
} catch (e) {
// console.log(e);
}
@ -491,6 +494,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
}
if (!this.widgetContext.inited && this.isReady()) {
this.widgetContext.inited = true;
this.widgetContext.dashboard.detectChanges();
if (this.cafs.init) {
this.cafs.init();
this.cafs.init = null;
@ -878,7 +882,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
timeWindowUpdated: (subscription, timeWindowConfig) => {
this.ngZone.run(() => {
this.widget.config.timewindow = timeWindowConfig;
this.detectChanges();
this.detectChanges(true);
});
}
};

8
ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
View File

@ -79,6 +79,7 @@ export interface IDashboardComponent {
pauseChangeNotifications();
resumeChangeNotifications();
notifyLayoutUpdated();
detectChanges();
}
declare type DashboardWidgetUpdateOperation = 'add' | 'remove' | 'update';
@ -342,7 +343,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
widget.id = guid();
}
this.widgetId = widget.id;
this.updateWidgetParams();
this.updateWidgetParams(false);
}
gridsterItemComponent$(): Observable<GridsterItemComponentInterface> {
@ -353,7 +354,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
}
}
updateWidgetParams() {
updateWidgetParams(detectChanges = true) {
this.color = this.widget.config.color || 'rgba(0, 0, 0, 0.87)';
this.backgroundColor = this.widget.config.backgroundColor || '#fff';
this.padding = this.widget.config.padding || '8px';
@ -405,6 +406,9 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
this.customHeaderActions = this.widgetContext.customHeaderActions ? this.widgetContext.customHeaderActions : [];
this.widgetActions = this.widgetContext.widgetActions ? this.widgetContext.widgetActions : [];
if (detectChanges) {
this.dashboard.detectChanges();
}
}
@enumerable(true)

3
ui-ngx/src/app/shared/components/time/timewindow.component.ts
View File

@ -15,6 +15,7 @@
///
import {
ChangeDetectorRef,
Component,
forwardRef,
Inject,
@ -158,6 +159,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
private datePipe: DatePipe,
private overlay: Overlay,
private cd: ChangeDetectorRef,
public viewContainerRef: ViewContainerRef,
public breakpointObserver: BreakpointObserver,
@Inject(DOCUMENT) private document: Document,
@ -313,6 +315,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
} else {
this.innerValue.displayTimezoneAbbr = '';
}
this.cd.detectChanges();
}
hideLabel() {