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

UI: timewindow panel realtime mode redesign

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-06-14 19:01:39 +03:00
parent 83cc70e3af
commit 9b7c8595ee
10 changed files with 141 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
View File

@ -16,7 +16,7 @@
--> -->
<section class="interval-section" fxLayout="row" fxFlex> <section class="interval-section" fxLayout="row" fxFlex>
<mat-form-field fxFlex> <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timewindow.interval</mat-label> <mat-label translate>timewindow.interval</mat-label>
<mat-select [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onIntervalChange()"> <mat-select [disabled]="disabled" [(ngModel)]="modelValue" (ngModelChange)="onIntervalChange()">
<mat-option *ngFor="let interval of intervals" [value]="interval"> <mat-option *ngFor="let interval of intervals" [value]="interval">

7
ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
View File

@ -17,6 +17,7 @@
import { Component, forwardRef, Input, OnInit } from '@angular/core'; import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/models/time/time.models'; import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/models/time/time.models';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
@Component({ @Component({
selector: 'tb-quick-time-interval', selector: 'tb-quick-time-interval',
@ -43,6 +44,12 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor
@Input() onlyCurrentInterval = false; @Input() onlyCurrentInterval = false;
@Input()
subscriptSizing: SubscriptSizing = 'fixed';
@Input()
appearance: MatFormFieldAppearance = 'fill';
private propagateChange = (_: any) => {}; private propagateChange = (_: any) => {};
constructor() { constructor() {

10
ui-ngx/src/app/shared/components/time/timeinterval.component.html
View File

@ -22,26 +22,26 @@
</section> </section>
<section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)"> <section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
<section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px"> <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
<mat-form-field class="number-input"> <mat-form-field class="number-input" [appearance]="appearance">
<mat-label translate>timeinterval.days</mat-label> <mat-label translate>timeinterval.days</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/> <input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="number-input"> <mat-form-field class="number-input" [appearance]="appearance">
<mat-label translate>timeinterval.hours</mat-label> <mat-label translate>timeinterval.hours</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="hours" (ngModelChange)="onTimeInputChange('hours')"/> <input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="hours" (ngModelChange)="onTimeInputChange('hours')"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="number-input"> <mat-form-field class="number-input" [appearance]="appearance">
<mat-label translate>timeinterval.minutes</mat-label> <mat-label translate>timeinterval.minutes</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="mins" (ngModelChange)="onTimeInputChange('mins')"/> <input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="mins" (ngModelChange)="onTimeInputChange('mins')"/>
</mat-form-field> </mat-form-field>
<mat-form-field class="number-input"> <mat-form-field class="number-input" [appearance]="appearance">
<mat-label translate>timeinterval.seconds</mat-label> <mat-label translate>timeinterval.seconds</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="secs" (ngModelChange)="onTimeInputChange('secs')"/> <input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="secs" (ngModelChange)="onTimeInputChange('secs')"/>
</mat-form-field> </mat-form-field>
</section> </section>
</section> </section>
<section fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)"> <section fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
<mat-form-field fxFlex [subscriptSizing]="subscriptSizing"> <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label> <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
<mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;"> <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
<mat-option *ngFor="let interval of intervals" [value]="interval.value"> <mat-option *ngFor="let interval of intervals" [value]="interval.value">

5
ui-ngx/src/app/shared/components/time/timeinterval.component.ts
View File

@ -18,7 +18,7 @@ import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@ang
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { coerceNumberProperty } from '@angular/cdk/coercion'; import { coerceNumberProperty } from '@angular/cdk/coercion';
import { SubscriptSizing } from '@angular/material/form-field'; import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { coerceBoolean } from '@shared/decorators/coercion'; import { coerceBoolean } from '@shared/decorators/coercion';
import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models'; import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models';
import { isDefined } from '@core/utils'; import { isDefined } from '@core/utils';
@ -85,6 +85,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
@Input() @Input()
subscriptSizing: SubscriptSizing = 'fixed'; subscriptSizing: SubscriptSizing = 'fixed';
@Input()
appearance: MatFormFieldAppearance = 'fill';
days = 0; days = 0;
hours = 0; hours = 0;
mins = 1; mins = 1;

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

@ -19,73 +19,54 @@
<mat-tab-group [ngClass]="{'tb-headless': historyOnly}" <mat-tab-group [ngClass]="{'tb-headless': historyOnly}"
(selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab"> (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab label="{{ 'timewindow.realtime' | translate }}"> <mat-tab label="{{ 'timewindow.realtime' | translate }}">
<section fxLayout="row"> <div class="tb-flex column">
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" <section class="tb-form-panel stroked" [fxShow]="isEdit || !timewindow.hideInterval">
style="padding-top: 8px; padding-left: 16px;"> <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<label class="tb-small hide-label" translate>timewindow.hide</label> <div class="tb-flex align-center space-between">
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideInterval" <ng-container formGroupName="realtime">
(ngModelChange)="onHideIntervalChanged()"></mat-checkbox> <tb-toggle-select *ngIf="!quickIntervalOnly"
</section> [fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideInterval"> appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"
<div formGroupName="realtime" class="mat-content mat-padding" style="padding-top: 8px;"> style="max-width: 100%">
<mat-radio-group *ngIf="!quickIntervalOnly" </tb-toggle-select>
[fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)" </ng-container>
formControlName="realtimeType">
<mat-radio-button [value]="realtimeTypes.LAST_INTERVAL" color="primary"> <tb-timezone-select fxFlex [fxShow]="!timewindow.hideTimezone"
<section fxLayout="row"> localBrowserTimezonePlaceholderOnEmpty="true"
<section *ngIf="isEdit" fxLayout="column" fxLayoutAlign="start center" style="padding-right: 8px;"> formControlName="timezone"
<label class="tb-small hide-label" translate>timewindow.hide</label> subscriptSizing="dynamic"
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideLastInterval" appearance="outline">
(ngModelChange)="onHideLastIntervalChanged()"></mat-checkbox> </tb-timezone-select>
</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> </div>
</section>
</section> <ng-container formGroupName="realtime">
<ng-container *ngTemplateOutlet="additionalData"> <ng-container *ngIf="isEdit || !timewindow.hideLastInterval &&
</ng-container> timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="!timewindow.hideQuickInterval &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<tb-quick-time-interval
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.REALTIME &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</ng-container>
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
</div>
</mat-tab> </mat-tab>
<mat-tab label="{{ 'timewindow.history' | translate }}"> <mat-tab label="{{ 'timewindow.history' | translate }}">
<section fxLayout="row"> <section fxLayout="row">
@ -110,6 +91,8 @@
formControlName="timewindowMs" formControlName="timewindowMs"
predefinedName="timewindow.last" predefinedName="timewindow.last"
class="history-time-input" class="history-time-input"
subscriptSizing="dynamic"
appearance="outline"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL" [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL" timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL"
@ -134,6 +117,8 @@
<tb-quick-time-interval <tb-quick-time-interval
formControlName="quickInterval" formControlName="quickInterval"
class="history-time-input" class="history-time-input"
subscriptSizing="dynamic"
appearance="outline"
[fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" [fxShow]="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY && [required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL" timewindowForm.get('history.historyType').value === historyTypes.INTERVAL"
@ -144,54 +129,42 @@
</div> </div>
</section> </section>
</section> </section>
<ng-container *ngTemplateOutlet="additionalData"> <ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container> </ng-container>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<ng-template #additionalData> <ng-template #aggregationConfig>
<div *ngIf="aggregation" formGroupName="aggregation" class="mat-content mat-padding" fxLayout="column"> <div *ngIf="aggregation" formGroupName="aggregation" class="tb-flex column">
<section fxLayout="row"> <section class="tb-form-panel stroked" [fxShow]="isEdit || !timewindow.hideAggregation">
<section fxLayout="column" fxLayoutAlign="start center" [fxShow]="isEdit"> <div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<label class="tb-small hide-label" translate>timewindow.hide</label> <mat-form-field subscriptSizing="dynamic" appearance="outline">
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggregation" <mat-select formControlName="type" style="min-width: 150px;">
(ngModelChange)="onHideAggregationChanged()"></mat-checkbox> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
</section> {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
<section fxFlex fxLayout="column" [fxShow]="isEdit || !timewindow.hideAggregation"> </mat-option>
<mat-form-field> </mat-select>
<mat-label translate>aggregation.function</mat-label> </mat-form-field>
<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" fxLayoutAlign="start center" [fxShow]="isEdit"> <section class="tb-form-panel stroked"
<label class="tb-small hide-label" translate>timewindow.hide</label> *ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideAggInterval" <div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
(ngModelChange)="onHideAggIntervalChanged()"></mat-checkbox> <div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
</section> fxLayout.xs="column" fxLayoutAlign.xs="stretch">
<section fxLayout="column" fxFlex [fxShow]="isEdit || !timewindow.hideAggInterval"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center" <mat-slider fxFlex
fxLayout.xs="column" fxLayoutAlign.xs="stretch"> discrete
<label translate>aggregation.limit</label> min="{{minDatapointsLimit()}}"
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit"/>
<mat-slider fxFlex </mat-slider>
discrete <mat-form-field class="limit-slider-value" subscriptSizing="dynamic" appearance="outline">
min="{{minDatapointsLimit()}}" <input matInput formControlName="limit" type="number" step="1"
max="{{maxDatapointsLimit()}}"><input matSliderThumb formControlName="limit"/> [value]="timewindowForm.get('aggregation.limit').value"
</mat-slider> min="{{minDatapointsLimit()}}"
<mat-form-field class="limit-slider-value"> max="{{maxDatapointsLimit()}}"/>
<input matInput formControlName="limit" type="number" step="1" </mat-form-field>
[value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/>
</mat-form-field>
</div>
</div> </div>
</section> </div>
</section> </section>
</div> </div>
<div formGroupName="realtime" <div formGroupName="realtime"
@ -204,6 +177,8 @@
(hideFlagChange)="onHideAggIntervalChanged()" (hideFlagChange)="onHideAggIntervalChanged()"
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()" [min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
useCalendarIntervals useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline"
predefinedName="aggregation.group-interval"> predefinedName="aggregation.group-interval">
</tb-timeinterval> </tb-timeinterval>
</div> </div>
@ -217,6 +192,8 @@
(hideFlagChange)="onHideAggIntervalChanged()" (hideFlagChange)="onHideAggIntervalChanged()"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()" [min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline"
predefinedName="aggregation.group-interval"> predefinedName="aggregation.group-interval">
</tb-timeinterval> </tb-timeinterval>
</div> </div>
@ -226,10 +203,11 @@
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone" <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="timewindow.hideTimezone"
(ngModelChange)="onHideTimezoneChanged()"></mat-checkbox> (ngModelChange)="onHideTimezoneChanged()"></mat-checkbox>
</section> </section>
<tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone" <!-- <tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"-->
localBrowserTimezonePlaceholderOnEmpty="true" <!-- localBrowserTimezonePlaceholderOnEmpty="true"-->
formControlName="timezone"> <!-- formControlName="timezone"-->
</tb-timezone-select> <!-- appearance="outline">-->
<!-- </tb-timezone-select>-->
</div> </div>
</ng-template> </ng-template>
</form> </form>

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

@ -22,6 +22,10 @@
max-width: 100%; max-width: 100%;
background-color: #fff; background-color: #fff;
.tb-flex {
gap: 16px;
}
.mat-content { .mat-content {
overflow: hidden; overflow: hidden;
} }
@ -35,7 +39,7 @@
margin-right: 5px; margin-right: 5px;
} }
tb-timeinterval[ng-reflect-fx-show="true"] { tb-timeinterval[ng-reflect-fxe-show="true"] {
margin-bottom: -16px; margin-bottom: -16px;
} }
@ -78,4 +82,8 @@
.mat-mdc-tab-group:not(.tb-headless) { .mat-mdc-tab-group:not(.tb-headless) {
height: 100%; height: 100%;
} }
.mat-mdc-tab-body-content {
padding: 16px;
}
} }

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

@ -32,6 +32,9 @@ 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'; import { isDefined } from '@core/utils';
import { OverlayRef } from '@angular/cdk/overlay'; import { OverlayRef } from '@angular/cdk/overlay';
import { WidgetConfigMode } from '@shared/models/widget.models';
import { ToggleHeaderOption } from '@shared/components/toggle-header.component';
import { TranslateService } from '@ngx-translate/core';
export interface TimewindowPanelData { export interface TimewindowPanelData {
historyOnly: boolean; historyOnly: boolean;
@ -82,11 +85,23 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
result: Timewindow; result: Timewindow;
realtimeTimewindowOptions: ToggleHeaderOption[] = [
{
name: this.translate.instant('timewindow.last'),
value: this.realtimeTypes.LAST_INTERVAL
},
{
name: this.translate.instant('timewindow.interval'),
value: this.realtimeTypes.INTERVAL
}
];
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>,
public fb: UntypedFormBuilder, public fb: UntypedFormBuilder,
private timeService: TimeService, private timeService: TimeService,
private translate: TranslateService,
public viewContainerRef: ViewContainerRef) { public viewContainerRef: ViewContainerRef) {
super(store); super(store);
this.historyOnly = data.historyOnly; this.historyOnly = data.historyOnly;
@ -380,4 +395,5 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindowForm.markAsDirty(); this.timewindowForm.markAsDirty();
} }
protected readonly WidgetConfigMode = WidgetConfigMode;
} }

3
ui-ngx/src/app/shared/components/time/timezone-select.component.html
View File

@ -15,7 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block" [appearance]="appearance"> <mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block"
[subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timezone.timezone</mat-label> <mat-label translate>timezone.timezone</mat-label>
<input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}" <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
#timezoneInput #timezoneInput

5
ui-ngx/src/app/shared/components/time/timezone-select.component.ts
View File

@ -16,7 +16,7 @@
import { AfterViewInit, Component, forwardRef, Input, NgZone, OnInit, ViewChild } from '@angular/core'; import { AfterViewInit, Component, forwardRef, Input, NgZone, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatFormFieldAppearance } from '@angular/material/form-field'; import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { Observable, of } from 'rxjs'; import { Observable, of } from 'rxjs';
import { map, mergeMap, share, tap } from 'rxjs/operators'; import { map, mergeMap, share, tap } from 'rxjs/operators';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@ -45,6 +45,9 @@ export class TimezoneSelectComponent implements ControlValueAccessor, OnInit, Af
defaultTimezoneId: string = null; defaultTimezoneId: string = null;
@Input()
subscriptSizing: SubscriptSizing = 'fixed';
@Input() @Input()
appearance: MatFormFieldAppearance = 'fill'; appearance: MatFormFieldAppearance = 'fill';

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -4694,7 +4694,8 @@
"font": "Font", "font": "Font",
"color": "Color", "color": "Color",
"displayTypePrefix": "Display Realtime/History prefix", "displayTypePrefix": "Display Realtime/History prefix",
"preview": "Preview" "preview": "Preview",
"time-range": "Time range"
}, },
"tooltip": { "tooltip": {
"trigger": "Trigger", "trigger": "Trigger",