tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #8062 from ArtemDzhereleiko/AD/refactoring/timewindow 

Refactoring time window component
pull/8260/head
Igor Kulikov 4 years ago
committed by GitHub
parent
b21c7ad1d2 0c5c9f3217
commit
5d54716ec6
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 340 additions and 392 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 431
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
  2. 16
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
  3. 134
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
  4. 18
      ui-ngx/src/app/shared/components/time/timewindow.component.html
  5. 133
      ui-ngx/src/app/shared/components/time/timewindow.component.ts

431
ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
View File

@ -15,222 +15,229 @@
limitations under the License. limitations under the License.
--> -->
<form [formGroup]="timewindowForm" (ngSubmit)="update()"> <form [formGroup]="timewindowForm" class="mat-content">
<fieldset [disabled]="(isLoading$ | async)"> <mat-tab-group [ngClass]="{'tb-headless': historyOnly}"
<div class="mat-content" fxLayout="column"> (selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab-group dynamicHeight [ngClass]="{'tb-headless': historyOnly}" <mat-tab label="{{ 'timewindow.realtime' | translate }}">
(selectedIndexChange)="timewindowForm.markAsDirty()" [(selectedIndex)]="timewindow.selectedTab"> <section fxLayout="row">
<mat-tab label="{{ 'timewindow.realtime' | translate }}"> <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
<section fxLayout="row"> style="padding-top: 8px; padding-left: 16px;">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;"> <label class="tb-small hide-label" translate>timewindow.hide</label>
<label class="tb-small hide-label" translate>timewindow.hide</label> <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval" (ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
(ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
<div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
<mat-radio-group *ngIf="!quickIntervalOnly" [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
formControlName="realtimeType">
<mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
<section fxLayout="row">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
(ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column">
<span translate>timewindow.last</span>
<tb-timeinterval
formControlName="timewindowMs"
predefinedName="timewindow.last"
[fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
style="padding-top: 8px;"></tb-timeinterval>
</section>
</section>
</mat-radio-button>
<mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
<section fxLayout="row">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
(ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column">
<span translate>timewindow.interval</span>
<tb-quick-time-interval
formControlName="quickInterval"
onlyCurrentInterval="true"
[fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
style="padding-top: 8px"></tb-quick-time-interval>
</section>
</section>
</mat-radio-button>
</mat-radio-group>
<tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
formControlName="timewindowMs"
predefinedName="timewindow.last"
required
style="padding-top: 8px;"></tb-timeinterval>
<tb-quick-time-interval *ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
formControlName="quickInterval"
onlyCurrentInterval="true"
required
style="padding-top: 8px"></tb-quick-time-interval>
</div>
</section>
</section>
</mat-tab>
<mat-tab label="{{ 'timewindow.history' | translate }}">
<section fxLayout="row">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-top: 8px; padding-left: 16px;">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
(ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
<div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
<mat-radio-group formControlName="historyType">
<mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
<section fxLayout="column">
<span translate>timewindow.last</span>
<tb-timeinterval
formControlName="timewindowMs"
predefinedName="timewindow.last"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
style="padding-top: 8px;"></tb-timeinterval>
</section>
</mat-radio-button>
<mat-radio-button [value]="historyTypes.FIXED" color="primary">
<section fxLayout="column">
<span translate>timewindow.time-period</span>
<tb-datetime-period
formControlName="fixedTimewindow"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED"
style="padding-top: 8px;"></tb-datetime-period>
</section>
</mat-radio-button>
<mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
<section fxLayout="column">
<span translate>timewindow.interval</span>
<tb-quick-time-interval
formControlName="quickInterval"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
style="padding-top: 8px"></tb-quick-time-interval>
</section>
</mat-radio-button>
</mat-radio-group>
</div>
</section>
</section>
</mat-tab>
</mat-tab-group>
<div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
<section fxLayout="row">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
(ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
</section>
<section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
<mat-form-field>
<mat-label translate>aggregation.function</mat-label>
<mat-select formControlName="type" style="min-width: 150px;">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
</section> </section>
<section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE"> <section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit"> <div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;">
<label class="tb-small hide-label" translate>timewindow.hide</label> <mat-radio-group *ngIf="!quickIntervalOnly"
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval" [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
(ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox> formControlName="realtimeType">
</section> <mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary">
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval"> <section fxLayout="row">
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" <section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
fxLayout.xs="column" fxLayoutAlign.xs="stretch"> <label class="tb-small hide-label" translate>timewindow.hide</label>
<label translate>aggregation.limit</label> <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval"
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> (ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox>
<mat-slider fxFlex </section>
discrete <section fxLayout="column">
min="{{minDatapointsLimit()}}" <span translate>timewindow.last</span>
max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit" /> <tb-timeinterval
</mat-slider> formControlName="timewindowMs"
<mat-form-field class="limit-slider-value"> predefinedName="timewindow.last"
<input matInput formControlName="limit" type="number" step="1" [fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
[value]="timewindowForm.get('aggregation.limit').value" [required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
min="{{minDatapointsLimit()}}" timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"
max="{{maxDatapointsLimit()}}"/> style="padding-top: 8px;"></tb-timeinterval>
</mat-form-field> </section>
</div> </section>
</div> </mat-radio-button>
</section> <mat-radio-button [value]="realtimeTypes.INTERVAL" color="primary">
<section fxLayout="row">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideQuickInterval"
(ngModelChange)="onHideQuickIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column">
<span translate>timewindow.interval</span>
<tb-quick-time-interval
formControlName="quickInterval"
onlyCurrentInterval="true"
[fxShow]="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL"
style="padding-top: 8px"></tb-quick-time-interval>
</section>
</section>
</mat-radio-button>
</mat-radio-group>
<tb-timeinterval *ngIf="!isEdit && !timewindow.hideLastInterval && timewindow.hideQuickInterval"
formControlName="timewindowMs"
predefinedName="timewindow.last"
required
style="padding-top: 8px;"></tb-timeinterval>
<tb-quick-time-interval
*ngIf="quickIntervalOnly || !isEdit && timewindow.hideLastInterval && !timewindow.hideQuickInterval"
formControlName="quickInterval"
onlyCurrentInterval="true"
required
style="padding-top: 8px"></tb-quick-time-interval>
</div>
</section>
</section>
<ng-container *ngTemplateOutlet="additionalData">
</ng-container>
</mat-tab>
<mat-tab label="{{ 'timewindow.history' | translate }}">
<section fxLayout="row">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center"
style="padding-top: 8px; padding-left: 16px;">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval"
(ngModelChange)="onHideIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval">
<div formGroupName="history" class="mat-content mat-padding" style="padding-top: 8px;">
<mat-radio-group formControlName="historyType">
<mat-radio-button [value]="historyTypes.LAST_INTERVAL" color="primary">
<section fxLayout="column">
<span translate>timewindow.last</span>
<tb-timeinterval
formControlName="timewindowMs"
predefinedName="timewindow.last"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
style="padding-top: 8px;"></tb-timeinterval>
</section>
</mat-radio-button>
<mat-radio-button [value]="historyTypes.FIXED" color="primary">
<section fxLayout="column">
<span translate>timewindow.time-period</span>
<tb-datetime-period
formControlName="fixedTimewindow"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.FIXED"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED"
style="padding-top: 8px;"></tb-datetime-period>
</section>
</mat-radio-button>
<mat-radio-button [value]="historyTypes.INTERVAL" color="primary">
<section fxLayout="column">
<span translate>timewindow.interval</span>
<tb-quick-time-interval
formControlName="quickInterval"
class="history-time-input"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
style="padding-top: 8px"></tb-quick-time-interval>
</section>
</mat-radio-button>
</mat-radio-group>
</div>
</section>
</section>
<ng-container *ngTemplateOutlet="additionalData">
</ng-container>
</mat-tab>
</mat-tab-group>
<ng-template #additionalData>
<div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column">
<section fxLayout="row">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation"
(ngModelChange)="onHideAggregationChanged()"></mat-checkbox>
</section>
<section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation">
<mat-form-field>
<mat-label translate>aggregation.function</mat-label>
<mat-select formControlName="type" style="min-width: 150px;">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</section> </section>
</div> </section>
<div formGroupName="realtime" <section fxLayout="row" *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE">
*ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
<tb-timeinterval
formControlName="interval"
[isEdit]="isEdit"
[(hideFlag)]="timewindow.hideAggInterval"
(hideFlagChange)="onHideAggIntervalChanged()"
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
predefinedName="aggregation.group-interval">
</tb-timeinterval>
</div>
<div formGroupName="history"
*ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
<tb-timeinterval
formControlName="interval"
[isEdit]="isEdit"
[(hideFlag)]="timewindow.hideAggInterval"
(hideFlagChange)="onHideAggIntervalChanged()"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
predefinedName="aggregation.group-interval">
</tb-timeinterval>
</div>
<div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit"> <section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
<label class="tb-small hide-label" translate>timewindow.hide</label> <label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone" <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval"
(ngModelChange)="onHideTimezoneChanged()"></mat-checkbox> (ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox>
</section>
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval">
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
fxLayout.xs="column" fxLayoutAlign.xs="stretch">
<label translate>aggregation.limit</label>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<mat-slider fxFlex
discrete
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit"/>
</mat-slider>
<mat-form-field class="limit-slider-value">
<input matInput formControlName="limit" type="number" step="1"
[value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/>
</mat-form-field>
</div>
</div>
</section> </section>
<tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone" </section>
localBrowserTimezonePlaceholderOnEmpty="true" </div>
formControlName="timezone"> <div formGroupName="realtime"
</tb-timezone-select> *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
</div> timewindow.selectedTab === timewindowTypes.REALTIME" class="mat-content mat-padding" fxLayout="column">
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center"> <tb-timeinterval
<button type="button" formControlName="interval"
mat-button [isEdit]="isEdit"
[disabled]="(isLoading$ | async)" [(hideFlag)]="timewindow.hideAggInterval"
(click)="cancel()"> (hideFlagChange)="onHideAggIntervalChanged()"
{{ 'action.cancel' | translate }} [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
</button> predefinedName="aggregation.group-interval">
<button type="submit" </tb-timeinterval>
mat-raised-button </div>
color="primary" <div formGroupName="history"
[disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty"> *ngIf="aggregation && timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE &&
{{ 'action.update' | translate }} timewindow.selectedTab === timewindowTypes.HISTORY" class="mat-content mat-padding" fxLayout="column">
</button> <tb-timeinterval
</div> formControlName="interval"
[isEdit]="isEdit"
[(hideFlag)]="timewindow.hideAggInterval"
(hideFlagChange)="onHideAggIntervalChanged()"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
predefinedName="aggregation.group-interval">
</tb-timeinterval>
</div>
<div *ngIf="timezone" class="mat-content mat-padding" fxLayout="row">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit">
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
(ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>
</section>
<tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"
localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone">
</tb-timezone-select>
</div> </div>
</fieldset> </ng-template>
</form> </form>
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
<button type="button"
mat-button
[disabled]="(isLoading$ | async)"
(click)="cancel()">
{{ 'action.cancel' | translate }}
</button>
<button type="button"
mat-raised-button
color="primary"
(click)="update()"
[disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
{{ 'action.update' | translate }}
</button>
</div>

16
ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
View File

@ -16,16 +16,14 @@
@import "../../../../scss/constants"; @import "../../../../scss/constants";
:host { :host {
width: 100%; display: flex;
height: 100%; flex-direction: column;
form, max-height: 100%;
fieldset { max-width: 100%;
height: 100%; background-color: #fff;
}
.mat-content { .mat-content {
overflow: hidden; overflow: hidden;
background-color: #fff;
} }
.mat-padding { .mat-padding {
@ -70,7 +68,6 @@
:host ::ng-deep { :host ::ng-deep {
.mat-mdc-radio-button { .mat-mdc-radio-button {
display: block; display: block;
margin-bottom: 16px;
.mdc-form-field { .mdc-form-field {
align-items: start; align-items: start;
> label { > label {
@ -78,4 +75,7 @@
} }
} }
} }
.mat-mdc-tab-group:not(.tb-headless) {
height: 100%;
}
} }

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

@ -25,14 +25,13 @@ import {
Timewindow, Timewindow,
TimewindowType TimewindowType
} from '@shared/models/time/time.models'; } from '@shared/models/time/time.models';
import { OverlayRef } from '@angular/cdk/overlay';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { isDefined } from '@core/utils';
export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelData'); import { OverlayRef } from '@angular/cdk/overlay';
export interface TimewindowPanelData { export interface TimewindowPanelData {
historyOnly: boolean; historyOnly: boolean;
@ -43,6 +42,8 @@ export interface TimewindowPanelData {
isEdit: boolean; isEdit: boolean;
} }
export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelData');
@Component({ @Component({
selector: 'tb-timewindow-panel', selector: 'tb-timewindow-panel',
templateUrl: './timewindow-panel.component.html', templateUrl: './timewindow-panel.component.html',
@ -62,8 +63,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
timewindow: Timewindow; timewindow: Timewindow;
result: Timewindow;
timewindowForm: UntypedFormGroup; timewindowForm: UntypedFormGroup;
historyTypes = HistoryWindowType; historyTypes = HistoryWindowType;
@ -78,6 +77,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
aggregationTypesTranslations = aggregationTranslations; aggregationTypesTranslations = aggregationTranslations;
result: Timewindow;
constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData, constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef, public overlayRef: OverlayRef,
protected store: Store<AppState>, protected store: Store<AppState>,
@ -101,77 +102,60 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
const hideAggInterval = this.timewindow.hideAggInterval || false; const hideAggInterval = this.timewindow.hideAggInterval || false;
const hideTimezone = this.timewindow.hideTimezone || false; const hideTimezone = this.timewindow.hideTimezone || false;
const realtime = this.timewindow.realtime;
const history = this.timewindow.history;
const aggregation = this.timewindow.aggregation;
this.timewindowForm = this.fb.group({ this.timewindowForm = this.fb.group({
realtime: this.fb.group( realtime: this.fb.group({
{ realtimeType: [{
realtimeType: this.fb.control({ value: isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
value: this.timewindow.realtime && typeof this.timewindow.realtime.realtimeType !== 'undefined' disabled: hideInterval
? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL, }],
disabled: hideInterval timewindowMs: [{
}), value: isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null,
timewindowMs: this.fb.control({ disabled: hideInterval || hideLastInterval
value: this.timewindow.realtime && typeof this.timewindow.realtime.timewindowMs !== 'undefined' }],
? this.timewindow.realtime.timewindowMs : null, interval: [isDefined(realtime?.interval) ? this.timewindow.realtime.interval : null],
disabled: hideInterval || hideLastInterval quickInterval: [{
}), value: isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null,
interval: [ disabled: hideInterval || hideQuickInterval
this.timewindow.realtime && typeof this.timewindow.realtime.interval !== 'undefined' }]
? this.timewindow.realtime.interval : null }),
], history: this.fb.group({
quickInterval: this.fb.control({ historyType: [{
value: this.timewindow.realtime && typeof this.timewindow.realtime.quickInterval !== 'undefined' value: isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
? this.timewindow.realtime.quickInterval : null, disabled: hideInterval
disabled: hideInterval || hideQuickInterval }],
}) timewindowMs: [{
} value: isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null,
), disabled: hideInterval
history: this.fb.group( }],
{ interval: [ isDefined(history?.interval) ? this.timewindow.history.interval : null
historyType: this.fb.control({ ],
value: this.timewindow.history && typeof this.timewindow.history.historyType !== 'undefined' fixedTimewindow: [{
? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL, value: isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null,
disabled: hideInterval disabled: hideInterval
}), }],
timewindowMs: this.fb.control({ quickInterval: [{
value: this.timewindow.history && typeof this.timewindow.history.timewindowMs !== 'undefined' value: isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null,
? this.timewindow.history.timewindowMs : null, disabled: hideInterval
disabled: hideInterval }]
}), }),
interval: [ aggregation: this.fb.group({
this.timewindow.history && typeof this.timewindow.history.interval !== 'undefined' type: [{
? this.timewindow.history.interval : null value: isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null,
], disabled: hideAggregation
fixedTimewindow: this.fb.control({ }],
value: this.timewindow.history && typeof this.timewindow.history.fixedTimewindow !== 'undefined' limit: [{
? this.timewindow.history.fixedTimewindow : null, value: isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null,
disabled: hideInterval disabled: hideAggInterval
}), }, []]
quickInterval: this.fb.control({ }),
value: this.timewindow.history && typeof this.timewindow.history.quickInterval !== 'undefined' timezone: [{
? this.timewindow.history.quickInterval : null, value: isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null,
disabled: hideInterval disabled: hideTimezone
}) }]
}
),
aggregation: this.fb.group(
{
type: this.fb.control({
value: this.timewindow.aggregation && typeof this.timewindow.aggregation.type !== 'undefined'
? this.timewindow.aggregation.type : null,
disabled: hideAggregation
}),
limit: this.fb.control({
value: this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined'
? this.checkLimit(this.timewindow.aggregation.limit) : null,
disabled: hideAggInterval
}, [])
}
),
timezone: this.fb.control({
value: this.timewindow.timezone !== 'undefined'
? this.timewindow.timezone : null,
disabled: hideTimezone
})
}); });
this.updateValidators(); this.updateValidators();
this.timewindowForm.get('aggregation.type').valueChanges.subscribe(() => { this.timewindowForm.get('aggregation.type').valueChanges.subscribe(() => {

18
ui-ngx/src/app/shared/components/time/timewindow.component.html
View File

@ -15,30 +15,34 @@
limitations under the License. limitations under the License.
--> -->
<button *ngIf="asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin" [disabled]="timewindowDisabled" <button *ngIf="asButton"
[disabled]="timewindowDisabled"
type="button" type="button"
mat-raised-button color="primary" (click)="openEditMode()"> mat-raised-button color="primary"
(click)="toggleTimewindow($event)">
<mat-icon class="material-icons">query_builder</mat-icon> <mat-icon class="material-icons">query_builder</mat-icon>
<span>{{innerValue?.displayValue}}</span> <span>{{innerValue?.displayValue}}</span>
</button> </button>
<section *ngIf="!asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin" <section *ngIf="!asButton"
class="tb-timewindow" fxLayout="row" fxLayoutAlign="start center"> class="tb-timewindow"
fxLayout="row"
fxLayoutAlign="start center">
<button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32" <button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
type="button" type="button"
(click)="openEditMode()" (click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}" matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition"> [matTooltipPosition]="tooltipPosition">
<mat-icon class="material-icons">query_builder</mat-icon> <mat-icon class="material-icons">query_builder</mat-icon>
</button> </button>
<span [fxHide]="hideLabel()" <span [fxHide]="hideLabel()"
(click)="openEditMode()" (click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}" matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition"> [matTooltipPosition]="tooltipPosition">
{{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span> {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span>
</span> </span>
<button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32" <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
type="button" type="button"
(click)="openEditMode()" (click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}" matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition"> [matTooltipPosition]="tooltipPosition">
<mat-icon class="material-icons">query_builder</mat-icon> <mat-icon class="material-icons">query_builder</mat-icon>

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

@ -17,14 +17,13 @@
import { import {
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
ElementRef,
forwardRef, forwardRef,
Inject,
Injector, Injector,
Input, Input,
OnDestroy, OnDestroy,
OnInit, OnInit,
StaticProvider, StaticProvider,
ViewChild,
ViewContainerRef ViewContainerRef
} from '@angular/core'; } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@ -40,21 +39,16 @@ import {
Timewindow, Timewindow,
TimewindowType TimewindowType
} from '@shared/models/time/time.models'; } from '@shared/models/time/time.models';
import { DatePipe, DOCUMENT } from '@angular/common'; import { DatePipe } from '@angular/common';
import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { TIMEWINDOW_PANEL_DATA, TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component';
import {
TIMEWINDOW_PANEL_DATA,
TimewindowPanelComponent,
TimewindowPanelData
} from '@shared/components/time/timewindow-panel.component';
import { ComponentPortal } from '@angular/cdk/portal';
import { MediaBreakpoints } from '@shared/models/constants'; import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
import { WINDOW } from '@core/services/window.service';
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { TooltipPosition } from '@angular/material/tooltip'; import { TooltipPosition } from '@angular/material/tooltip';
import { deepClone, isDefinedAndNotNull } from '@core/utils'; import { deepClone, isDefinedAndNotNull } from '@core/utils';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
// @dynamic // @dynamic
@Component({ @Component({
@ -174,24 +168,21 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
@Input() disabled: boolean; @Input() disabled: boolean;
@ViewChild('timewindowPanelOrigin') timewindowPanelOrigin: CdkOverlayOrigin;
innerValue: Timewindow; innerValue: Timewindow;
timewindowDisabled: boolean; timewindowDisabled: boolean;
private propagateChange = (_: any) => {}; private propagateChange = (_: any) => {};
constructor(private translate: TranslateService, constructor(private overlay: Overlay,
private translate: TranslateService,
private timeService: TimeService, private timeService: TimeService,
private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe, private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
private datePipe: DatePipe, private datePipe: DatePipe,
private overlay: Overlay,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
private nativeElement: ElementRef,
public viewContainerRef: ViewContainerRef, public viewContainerRef: ViewContainerRef,
public breakpointObserver: BreakpointObserver, public breakpointObserver: BreakpointObserver) {
@Inject(DOCUMENT) private document: Document,
@Inject(WINDOW) private window: Window) {
} }
ngOnInit(): void { ngOnInit(): void {
@ -200,82 +191,51 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
ngOnDestroy(): void { ngOnDestroy(): void {
} }
openEditMode() { toggleTimewindow($event: Event) {
if (this.timewindowDisabled) { if ($event) {
return; $event.stopPropagation();
} }
const isGtXs = this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
const position = this.overlay.position();
const config = new OverlayConfig({ const config = new OverlayConfig({
panelClass: 'tb-timewindow-panel', panelClass: 'tb-timewindow-panel',
backdropClass: 'cdk-overlay-transparent-backdrop', backdropClass: 'cdk-overlay-transparent-backdrop',
hasBackdrop: isGtXs, hasBackdrop: true,
maxHeight: '80vh',
height: 'min-content'
}); });
if (isGtXs) { config.hasBackdrop = true;
config.minWidth = '417px'; const connectedPosition: ConnectedPosition = {
config.maxHeight = '550px'; originX: 'start',
const panelHeight = 375; originY: 'bottom',
const panelWidth = 417; overlayX: 'start',
const el = this.timewindowPanelOrigin.elementRef.nativeElement; overlayY: 'top'
const offset = el.getBoundingClientRect(); };
const scrollTop = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0; config.positionStrategy = this.overlay.position().flexibleConnectedTo(this.nativeElement)
const scrollLeft = this.window.pageXOffset || this.document.documentElement.scrollLeft || this.document.body.scrollLeft || 0; .withPositions([connectedPosition]);
const bottomY = offset.bottom - scrollTop;
const leftX = offset.left - scrollLeft;
let originX;
let originY;
let overlayX;
let overlayY;
const wHeight = this.document.documentElement.clientHeight;
const wWidth = this.document.documentElement.clientWidth;
if (bottomY + panelHeight > wHeight) {
originY = 'top';
overlayY = 'bottom';
} else {
originY = 'bottom';
overlayY = 'top';
}
if (leftX + panelWidth > wWidth) {
originX = 'end';
overlayX = 'end';
} else {
originX = 'start';
overlayX = 'start';
}
const connectedPosition: ConnectedPosition = {
originX,
originY,
overlayX,
overlayY
};
config.positionStrategy = position.flexibleConnectedTo(this.timewindowPanelOrigin.elementRef)
.withPositions([connectedPosition]);
} else {
config.minWidth = '100%';
config.minHeight = '100%';
config.positionStrategy = position.global().top('0%').left('0%')
.right('0%').bottom('0%');
}
const overlayRef = this.overlay.create(config); const overlayRef = this.overlay.create(config);
overlayRef.backdropClick().subscribe(() => { overlayRef.backdropClick().subscribe(() => {
overlayRef.dispose(); overlayRef.dispose();
}); });
const providers: StaticProvider[] = [
const injector = this._createTimewindowPanelInjector( {
overlayRef, provide: TIMEWINDOW_PANEL_DATA,
useValue: {
timewindow: deepClone(this.innerValue),
historyOnly: this.historyOnly,
quickIntervalOnly: this.quickIntervalOnly,
aggregation: this.aggregation,
timezone: this.timezone,
isEdit: this.isEdit
}
},
{ {
timewindow: deepClone(this.innerValue), provide: OverlayRef,
historyOnly: this.historyOnly, useValue: overlayRef
quickIntervalOnly: this.quickIntervalOnly,
aggregation: this.aggregation,
timezone: this.timezone,
isEdit: this.isEdit
} }
); ];
const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
const componentRef = overlayRef.attach(new ComponentPortal(TimewindowPanelComponent, this.viewContainerRef, injector)); const componentRef = overlayRef.attach(new ComponentPortal(TimewindowPanelComponent,
this.viewContainerRef, injector));
componentRef.onDestroy(() => { componentRef.onDestroy(() => {
if (componentRef.instance.result) { if (componentRef.instance.result) {
this.innerValue = componentRef.instance.result; this.innerValue = componentRef.instance.result;
@ -284,14 +244,7 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
this.notifyChanged(); this.notifyChanged();
} }
}); });
} this.cd.detectChanges();
private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector {
const providers: StaticProvider[] = [
{provide: TIMEWINDOW_PANEL_DATA, useValue: data},
{provide: OverlayRef, useValue: overlayRef}
];
return Injector.create({parent: this.viewContainerRef.injector, providers});
} }
private onHistoryOnlyChanged(): boolean { private onHistoryOnlyChanged(): boolean {

Write Preview
Loading…
Cancel
Save