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

UI: timewindow panel history mode redesign

pull/11633/head
Chantsova Ekaterina 2 years ago
parent
9b7c8595ee
commit
3d7f6adbdd
7 changed files with 172 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/shared/components/time/quick-time-interval.component.html
  2. 5
      ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts
  3. 8
      ui-ngx/src/app/shared/components/time/timeinterval.component.html
  4. 270
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.html
  5. 7
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
  6. 28
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
  7. 4
      ui-ngx/src/assets/locale/locale.constant-en_US.json

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

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

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

@ -18,6 +18,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { QuickTimeInterval, QuickTimeIntervalTranslationMap } from '@shared/models/time/time.models';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-quick-time-interval',
@ -40,6 +41,10 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor
rendered = false;
@Input()
@coerceBoolean()
displayLabel = true;
@Input() disabled: boolean;
@Input() onlyCurrentInterval = false;

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

@ -22,19 +22,19 @@
</section>
<section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
<section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
<mat-form-field class="number-input" [appearance]="appearance">
<mat-form-field class="number-input" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timeinterval.days</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/>
</mat-form-field>
<mat-form-field class="number-input" [appearance]="appearance">
<mat-form-field class="number-input" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timeinterval.hours</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="hours" (ngModelChange)="onTimeInputChange('hours')"/>
</mat-form-field>
<mat-form-field class="number-input" [appearance]="appearance">
<mat-form-field class="number-input" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timeinterval.minutes</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="mins" (ngModelChange)="onTimeInputChange('mins')"/>
</mat-form-field>
<mat-form-field class="number-input" [appearance]="appearance">
<mat-form-field class="number-input" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timeinterval.seconds</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" [(ngModel)]="secs" (ngModelChange)="onTimeInputChange('secs')"/>
</mat-form-field>

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

@ -16,7 +16,7 @@
-->
<form [formGroup]="timewindowForm" class="mat-content">
<mat-tab-group [ngClass]="{'tb-headless': historyOnly}"
<mat-tab-group [class.tb-headless]="historyOnly"
(selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
<mat-tab label="{{ 'timewindow.realtime' | translate }}">
<div class="tb-flex column">
@ -24,24 +24,18 @@
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<div class="tb-flex align-center space-between">
<ng-container formGroupName="realtime">
<tb-toggle-select *ngIf="!quickIntervalOnly"
[fxShow]="isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
<tb-toggle-select *ngIf="!quickIntervalOnly || isEdit || (!timewindow.hideLastInterval && !timewindow.hideQuickInterval)"
appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"
style="max-width: 100%">
</tb-toggle-select>
</ng-container>
<tb-timezone-select fxFlex [fxShow]="!timewindow.hideTimezone"
localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone"
subscriptSizing="dynamic"
appearance="outline">
</tb-timezone-select>
<ng-container *ngTemplateOutlet="timezoneSelection">
</ng-container>
</div>
<ng-container formGroupName="realtime">
<ng-container *ngIf="isEdit || !timewindow.hideLastInterval &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL">
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
@ -51,9 +45,9 @@
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="!timewindow.hideQuickInterval &&
timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<ng-container *ngIf="timewindowForm.get('realtime.realtimeType').value === realtimeTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
onlyCurrentInterval="true"
subscriptSizing="dynamic"
@ -69,148 +63,136 @@
</div>
</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 *ngIf="forAllTimeEnabled" [value]="historyTypes.FOR_ALL_TIME" color="primary">
<section fxLayout="column">
<span translate>timewindow.for-all-time</span>
</section>
</mat-radio-button>
<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"
subscriptSizing="dynamic"
appearance="outline"
[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"
subscriptSizing="dynamic"
appearance="outline"
[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 class="tb-flex column">
<section class="tb-form-panel stroked" [fxShow]="isEdit || !timewindow.hideInterval">
<div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
<div class="tb-flex align-center space-between">
<ng-container formGroupName="history">
<tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType"
style="max-width: 100%">
</tb-toggle-select>
</ng-container>
<ng-container *ngTemplateOutlet="timezoneSelection">
</ng-container>
</div>
<ng-container formGroupName="history" *ngIf="isEdit || !timewindow.hideInterval &&
timewindowForm.get('history.historyType').value !== historyTypes.FOR_ALL_TIME">
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
<tb-timeinterval
formControlName="timewindowMs"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">
</tb-timeinterval>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.FIXED">
<tb-datetime-period
formControlName="fixedTimewindow"
class="history-time-input"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.FIXED">
</tb-datetime-period>
</ng-container>
<ng-container *ngIf="timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
<tb-quick-time-interval
displayLabel="false"
formControlName="quickInterval"
subscriptSizing="dynamic"
appearance="outline"
[required]="timewindow.selectedTab === timewindowTypes.HISTORY &&
timewindowForm.get('history.historyType').value === historyTypes.INTERVAL">
</tb-quick-time-interval>
</ng-container>
</ng-container>
</section>
</section>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
<ng-container *ngTemplateOutlet="aggregationConfig">
</ng-container>
</div>
</mat-tab>
</mat-tab-group>
<ng-template #aggregationConfig>
<div *ngIf="aggregation" formGroupName="aggregation" class="tb-flex column">
<section class="tb-form-panel stroked" [fxShow]="isEdit || !timewindow.hideAggregation">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<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>
<div *ngIf="aggregation" class="tb-flex column">
<ng-container formGroupName="aggregation">
<section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideAggregation">
<div class="tb-form-panel-title">{{ 'aggregation.aggregation' | translate }}</div>
<mat-form-field subscriptSizing="dynamic" appearance="outline">
<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 class="tb-form-panel stroked"
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
fxLayout.xs="column" fxLayoutAlign.xs="stretch">
<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" subscriptSizing="dynamic" appearance="outline">
<input matInput formControlName="limit" type="number" step="1"
[value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/>
</mat-form-field>
<section class="tb-form-panel stroked"
*ngIf="timewindowForm.get('aggregation.type').value === aggregationTypes.NONE && (isEdit || !timewindow.hideAggInterval)">
<div class="tb-form-panel-title">{{ 'aggregation.limit' | translate }}</div>
<div class="limit-slider-container" fxLayout="row" fxLayoutAlign="start center"
fxLayout.xs="column" fxLayoutAlign.xs="stretch">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<mat-slider fxFlex
discrete
showTickMarks
step="{{datapointsLimitSliderStep()}}"
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}">
<input matSliderThumb formControlName="limit"/>
</mat-slider>
<mat-form-field class="limit-slider-value" subscriptSizing="dynamic" appearance="outline">
<input matInput formControlName="limit" type="number" step="1"
[value]="timewindowForm.get('aggregation.limit').value"
min="{{minDatapointsLimit()}}"
max="{{maxDatapointsLimit()}}"/>
</mat-form-field>
</div>
</div>
</div>
</section>
</div>
<div formGroupName="realtime"
*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()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline"
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()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline"
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>
</ng-container>
<section class="tb-form-panel stroked" [fxShow]="(isEdit || !timewindow.hideAggInterval)
&& timewindowForm.get('aggregation.type').value !== aggregationTypes.NONE">
<div class="tb-form-panel-title">{{ 'aggregation.group-interval' | translate }}</div>
<ng-container formGroupName="realtime" *ngIf="timewindow.selectedTab === timewindowTypes.REALTIME">
<tb-timeinterval
formControlName="interval"
[isEdit]="isEdit"
[(hideFlag)]="timewindow.hideAggInterval"
[min]="minRealtimeAggInterval()" [max]="maxRealtimeAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
</tb-timeinterval>
</ng-container>
<ng-container formGroupName="history" *ngIf="timewindow.selectedTab === timewindowTypes.HISTORY">
<tb-timeinterval
formControlName="interval"
[isEdit]="isEdit"
[(hideFlag)]="timewindow.hideAggInterval"
[min]="minHistoryAggInterval()" [max]="maxHistoryAggInterval()"
useCalendarIntervals
subscriptSizing="dynamic"
appearance="outline">
</tb-timeinterval>
</ng-container>
</section>
<!-- <tb-timezone-select fxFlex [fxShow]="isEdit || !timewindow.hideTimezone"-->
<!-- localBrowserTimezonePlaceholderOnEmpty="true"-->
<!-- formControlName="timezone"-->
<!-- appearance="outline">-->
<!-- </tb-timezone-select>-->
</div>
</ng-template>
<ng-template #timezoneSelection>
<ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)">
<tb-timezone-select localBrowserTimezonePlaceholderOnEmpty="true"
formControlName="timezone"
subscriptSizing="dynamic"
appearance="outline">
</tb-timezone-select>
</ng-container>
</ng-template>
</form>
<mat-divider></mat-divider>
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
<button type="button"
mat-button

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

@ -22,6 +22,11 @@
max-width: 100%;
background-color: #fff;
.tb-form-panel {
padding: 12px;
gap: 12px;
}
.tb-flex {
gap: 16px;
}
@ -84,6 +89,6 @@
}
.mat-mdc-tab-body-content {
padding: 16px;
padding: 12px 16px;
}
}

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

@ -91,11 +91,26 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
value: this.realtimeTypes.LAST_INTERVAL
},
{
name: this.translate.instant('timewindow.interval'),
name: this.translate.instant('timewindow.relative'),
value: this.realtimeTypes.INTERVAL
}
];
historyTimewindowOptions: ToggleHeaderOption[] = [
{
name: this.translate.instant('timewindow.last'),
value: this.historyTypes.LAST_INTERVAL
},
{
name: this.translate.instant('timewindow.fixed'),
value: this.historyTypes.FIXED
},
{
name: this.translate.instant('timewindow.relative'),
value: this.historyTypes.INTERVAL
}
];
constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef,
protected store: Store<AppState>,
@ -106,6 +121,12 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
super(store);
this.historyOnly = data.historyOnly;
this.forAllTimeEnabled = data.forAllTimeEnabled;
if (this.forAllTimeEnabled) {
this.historyTimewindowOptions.unshift({
name: this.translate.instant('timewindow.for-all-time'),
value: this.historyTypes.FOR_ALL_TIME
});
}
this.quickIntervalOnly = data.quickIntervalOnly;
this.timewindow = data.timewindow;
this.aggregation = data.aggregation;
@ -273,6 +294,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
return this.timeService.getMaxDatapointsLimit();
}
// TODO: find more accurate step size for slider
datapointsLimitSliderStep() {
return Math.round(this.maxDatapointsLimit() / 10);
}
minRealtimeAggInterval() {
return this.timeService.minIntervalLimit(this.currentRealtimeTimewindow());
}

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

@ -4695,7 +4695,9 @@
"color": "Color",
"displayTypePrefix": "Display Realtime/History prefix",
"preview": "Preview",
"time-range": "Time range"
"time-range": "Time range",
"relative": "Relative",
"fixed": "Fixed"
},
"tooltip": {
"trigger": "Trigger",

Write Preview
Loading…
Cancel
Save