From fa8decd29313bc9100bb7fe3a2f3f4279f7229fc Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 25 May 2023 17:38:26 +0300 Subject: [PATCH 1/3] UI: Fixed timewindows writeValue is being called twice, first time with a phantom null value --- .../dashboard-page.component.html | 1 + .../entity/entities-table.component.html | 8 +- .../entity/entities-table.component.ts | 18 +-- .../components/event/event-table.component.ts | 13 +- .../widget/widget-container.component.html | 1 + .../components/time/timewindow.component.html | 2 +- .../components/time/timewindow.component.ts | 116 ++++++------------ 7 files changed, 65 insertions(+), 94 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 6a9ce1f657..fd827c7f55 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -107,6 +107,7 @@ tooltipPosition="below" aggregation="true" timezone="true" + isNgModel [(ngModel)]="dashboardCtx.dashboardTimewindow"> {{ entitiesTableConfig.tableTitle }} - + +
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index b868fd1e47..43bc451c49 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -24,6 +24,7 @@ import { EventEmitter, Input, OnChanges, + OnDestroy, OnInit, SimpleChanges, ViewChild @@ -72,7 +73,7 @@ import { EntityDetailsPanelComponent } from '@home/components/entity/entity-deta styleUrls: ['./entities-table.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges { +export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges, OnDestroy { @Input() entitiesTableConfig: EntityTableConfig>; @@ -162,6 +163,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } ngOnDestroy() { + super.ngOnDestroy(); if (this.widgetResize$) { this.widgetResize$.disconnect(); } @@ -366,12 +368,10 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa ); if (this.displayPagination) { paginatorSubscription$ = this.paginator.page.asObservable().pipe( - map((data) => { - return { - page: data.pageIndex === 0 ? null : data.pageIndex, - pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize - }; - }) + map((data) => ({ + page: data.pageIndex === 0 ? null : data.pageIndex, + pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize + })) ); } this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$) @@ -421,8 +421,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } } - private getTimePageLinkInterval(): {startTime?: number, endTime?: number} { - const interval: {startTime?: number, endTime?: number} = {}; + private getTimePageLinkInterval(): {startTime?: number; endTime?: number} { + const interval: {startTime?: number; endTime?: number} = {}; switch (this.timewindow.history.historyType) { case HistoryWindowType.LAST_INTERVAL: const currentTime = Date.now(); diff --git a/ui-ngx/src/app/modules/home/components/event/event-table.component.ts b/ui-ngx/src/app/modules/home/components/event/event-table.component.ts index bce66fc3c1..fbdd0a07da 100644 --- a/ui-ngx/src/app/modules/home/components/event/event-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/event/event-table.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectorRef, + Component, + Input, + OnDestroy, + OnInit, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { DatePipe } from '@angular/common'; import { MatDialog } from '@angular/material/dialog'; @@ -32,7 +41,7 @@ import { Subscription } from 'rxjs'; templateUrl: './event-table.component.html', styleUrls: ['./event-table.component.scss'] }) -export class EventTableComponent implements OnInit, AfterViewInit { +export class EventTableComponent implements OnInit, AfterViewInit, OnDestroy { @Input() tenantId: string; diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html index 23082a121b..f173b103eb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html @@ -50,6 +50,7 @@ historyOnly="{{widget.onlyHistoryTimewindow}}" alwaysDisplayTypePrefix timezone="true" + isNgModel [isEdit]="isEdit" [(ngModel)]="widgetComponent.widget.config.timewindow" (ngModelChange)="widgetComponent.onTimewindowChanged($event)"> diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html index a9d5ce0eaa..fee59f289f 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html @@ -46,7 +46,7 @@ (click)="toggleTimewindow($event)" matTooltip="{{ 'timewindow.edit' | translate }}" [matTooltipPosition]="tooltipPosition"> - {{innerValue?.displayValue}} | {{innerValue.displayTimezoneAbbr}} + {{innerValue?.displayValue}} | {{innerValue?.displayTimezoneAbbr}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html index f173b103eb..23082a121b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html @@ -50,7 +50,6 @@ historyOnly="{{widget.onlyHistoryTimewindow}}" alwaysDisplayTypePrefix timezone="true" - isNgModel [isEdit]="isEdit" [(ngModel)]="widgetComponent.widget.config.timewindow" (ngModelChange)="widgetComponent.onTimewindowChanged($event)"> diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 933cafe0ca..777c286c1d 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -117,10 +117,6 @@ export class TimewindowComponent implements ControlValueAccessor { @coerceBoolean() strokedButton = false; - @Input() - @coerceBoolean() - isNgModel = false; - isEditValue = false; @Input() @@ -149,8 +145,6 @@ export class TimewindowComponent implements ControlValueAccessor { private propagateChange = (_: any) => {}; - private _isControlInitialized = false; - constructor(private overlay: Overlay, private translate: TranslateService, private timeService: TimeService, @@ -229,7 +223,6 @@ export class TimewindowComponent implements ControlValueAccessor { registerOnChange(fn: any): void { this.propagateChange = fn; - this._isControlInitialized = true; } registerOnTouched(fn: any): void { @@ -241,16 +234,14 @@ export class TimewindowComponent implements ControlValueAccessor { } writeValue(obj: Timewindow): void { - if (this._isControlInitialized || !this.isNgModel) { - this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.timeService); - this.timewindowDisabled = this.isTimewindowDisabled(); - if (this.onHistoryOnlyChanged()) { - setTimeout(() => { - this.notifyChanged(); - }); - } else { - this.updateDisplayValue(); - } + this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.timeService, this.historyOnly); + this.timewindowDisabled = this.isTimewindowDisabled(); + if (this.onHistoryOnlyChanged()) { + setTimeout(() => { + this.notifyChanged(); + }); + } else { + this.updateDisplayValue(); } } diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index 3e87150f87..68c7a12436 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -245,7 +245,8 @@ const getTimewindowType = (timewindow: Timewindow): TimewindowType => { } }; -export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalOnly: boolean, timeService: TimeService): Timewindow => { +export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalOnly: boolean, + timeService: TimeService, historyOnly: boolean): Timewindow => { const model = defaultTimewindow(timeService); if (value) { model.hideInterval = value.hideInterval; @@ -316,6 +317,9 @@ export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalO if (quickIntervalOnly) { model.realtime.realtimeType = RealtimeWindowType.INTERVAL; } + if (historyOnly) { + model.selectedTab = TimewindowType.HISTORY; + } return model; }; From fdd6ebcb2c2bd54ee6e0869aacf476bf9a1a78d2 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 26 May 2023 16:57:50 +0300 Subject: [PATCH 3/3] UI: Revert unnessery changes and change function order --- .../core/services/dashboard-utils.service.ts | 6 +++--- .../entity/entities-table.component.html | 8 +++----- .../entity/entities-table.component.ts | 18 +++++++++--------- .../components/time/timewindow.component.ts | 2 +- .../src/app/shared/models/time/time.models.ts | 2 +- 5 files changed, 17 insertions(+), 19 deletions(-) diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index 66c376bc2a..5a112f8336 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -235,7 +235,7 @@ export class DashboardUtilsService { }); if (type === widgetType.latest) { const onlyHistoryTimewindow = datasourcesHasOnlyComparisonAggregation(widgetConfig.datasources); - widgetConfig.timewindow = initModelFromDefaultTimewindow(widgetConfig.timewindow, true, this.timeService, onlyHistoryTimewindow); + widgetConfig.timewindow = initModelFromDefaultTimewindow(widgetConfig.timewindow, true, onlyHistoryTimewindow, this.timeService); } if (type === widgetType.alarm) { if (!widgetConfig.alarmFilterConfig) { @@ -429,7 +429,7 @@ export class DashboardUtilsService { targetLayout: DashboardLayoutId, widget: Widget, originalColumns?: number, - originalSize?: {sizeX: number; sizeY: number}, + originalSize?: {sizeX: number, sizeY: number}, row?: number, column?: number): void { const dashboardConfiguration = dashboard.configuration; @@ -502,7 +502,7 @@ export class DashboardUtilsService { this.removeUnusedWidgets(dashboard); } - public isSingleLayoutDashboard(dashboard: Dashboard): {state: string; layout: DashboardLayoutId} { + public isSingleLayoutDashboard(dashboard: Dashboard): {state: string, layout: DashboardLayoutId} { const dashboardConfiguration = dashboard.configuration; const states = dashboardConfiguration.states; const stateKeys = Object.keys(states); diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html index a69c949327..f07010854c 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html @@ -40,11 +40,9 @@
{{ entitiesTableConfig.tableTitle }} - - +
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index 43bc451c49..b868fd1e47 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -24,7 +24,6 @@ import { EventEmitter, Input, OnChanges, - OnDestroy, OnInit, SimpleChanges, ViewChild @@ -73,7 +72,7 @@ import { EntityDetailsPanelComponent } from '@home/components/entity/entity-deta styleUrls: ['./entities-table.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges, OnDestroy { +export class EntitiesTableComponent extends PageComponent implements IEntitiesTableComponent, AfterViewInit, OnInit, OnChanges { @Input() entitiesTableConfig: EntityTableConfig>; @@ -163,7 +162,6 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } ngOnDestroy() { - super.ngOnDestroy(); if (this.widgetResize$) { this.widgetResize$.disconnect(); } @@ -368,10 +366,12 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa ); if (this.displayPagination) { paginatorSubscription$ = this.paginator.page.asObservable().pipe( - map((data) => ({ - page: data.pageIndex === 0 ? null : data.pageIndex, - pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize - })) + map((data) => { + return { + page: data.pageIndex === 0 ? null : data.pageIndex, + pageSize: data.pageSize === this.defaultPageSize ? null : data.pageSize + }; + }) ); } this.updateDataSubscription = ((this.displayPagination ? merge(sortSubscription$, paginatorSubscription$) @@ -421,8 +421,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } } - private getTimePageLinkInterval(): {startTime?: number; endTime?: number} { - const interval: {startTime?: number; endTime?: number} = {}; + private getTimePageLinkInterval(): {startTime?: number, endTime?: number} { + const interval: {startTime?: number, endTime?: number} = {}; switch (this.timewindow.history.historyType) { case HistoryWindowType.LAST_INTERVAL: const currentTime = Date.now(); diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 777c286c1d..9f193ab103 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -234,7 +234,7 @@ export class TimewindowComponent implements ControlValueAccessor { } writeValue(obj: Timewindow): void { - this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.timeService, this.historyOnly); + this.innerValue = initModelFromDefaultTimewindow(obj, this.quickIntervalOnly, this.historyOnly, this.timeService); this.timewindowDisabled = this.isTimewindowDisabled(); if (this.onHistoryOnlyChanged()) { setTimeout(() => { diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index 68c7a12436..fd2b4f52fa 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -246,7 +246,7 @@ const getTimewindowType = (timewindow: Timewindow): TimewindowType => { }; export const initModelFromDefaultTimewindow = (value: Timewindow, quickIntervalOnly: boolean, - timeService: TimeService, historyOnly: boolean): Timewindow => { + historyOnly: boolean, timeService: TimeService): Timewindow => { const model = defaultTimewindow(timeService); if (value) { model.hideInterval = value.hideInterval;