diff --git a/ui-ngx/src/app/core/services/time.service.ts b/ui-ngx/src/app/core/services/time.service.ts index c60ee89222..d1e92c7e86 100644 --- a/ui-ngx/src/app/core/services/time.service.ts +++ b/ui-ngx/src/app/core/services/time.service.ts @@ -72,6 +72,10 @@ export class TimeService { IntervalMath.numberValue(interval.value) >= min && IntervalMath.numberValue(interval.value) <= max); } + public intervalValuesToTimeIntervals(intervalValues: Array): Array { + return defaultTimeIntervals.filter(interval => intervalValues.includes(interval.value)); + } + public boundMinInterval(min: number): number { if (isDefined(min)) { min = Math.ceil(min / 1000) * 1000; diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts index cca444773f..a746132bc3 100644 --- a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts +++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts @@ -109,7 +109,7 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI } ngOnChanges({allowedAggregationTypes}: SimpleChanges): void { - if (!allowedAggregationTypes.firstChange && !isEqual(allowedAggregationTypes.currentValue, allowedAggregationTypes.previousValue)) { + if (allowedAggregationTypes && !allowedAggregationTypes.firstChange && !isEqual(allowedAggregationTypes.currentValue, allowedAggregationTypes.previousValue)) { this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes; const currentAggregationType: AggregationType = this.aggregationTypeFormGroup.get('aggregationType').value; if (currentAggregationType && !this.aggregationTypes.includes(currentAggregationType)) { @@ -128,13 +128,14 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI } writeValue(value: AggregationType | null): void { - if (value != null) { - this.modelValue = value; - this.aggregationTypeFormGroup.get('aggregationType').patchValue(value, {emitEvent: true}); + let aggregationType: AggregationType; + if (value && this.allowedAggregationTypes?.length && !this.allowedAggregationTypes.includes(value)) { + aggregationType = this.allowedAggregationTypes[0]; } else { - this.modelValue = null; - this.aggregationTypeFormGroup.get('aggregationType').patchValue(null, {emitEvent: true}); + aggregationType = value; } + this.modelValue = aggregationType; + this.aggregationTypeFormGroup.get('aggregationType').patchValue(aggregationType, {emitEvent: false}); } updateView(value: AggregationType | null) { diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts index 5723cd7800..4b322718ea 100644 --- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts +++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.ts @@ -91,7 +91,7 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor, } ngOnChanges({allowedIntervals}: SimpleChanges): void { - if (!allowedIntervals.firstChange && !isEqual(allowedIntervals.currentValue, allowedIntervals.previousValue)) { + if (allowedIntervals && !allowedIntervals.firstChange && !isEqual(allowedIntervals.currentValue, allowedIntervals.previousValue)) { this.intervals = this.allowedIntervals?.length ? this.allowedIntervals : this.allAvailableIntervals; const currentInterval: QuickTimeInterval = this.quickIntervalFormGroup.get('interval').value; if (currentInterval && !this.intervals.includes(currentInterval)) { @@ -116,14 +116,15 @@ export class QuickTimeIntervalComponent implements OnInit, ControlValueAccessor, } } - writeValue(interval: QuickTimeInterval): void { - if (interval != null) { - this.modelValue = interval; - this.quickIntervalFormGroup.get('interval').patchValue(interval, {emitEvent: true}); + writeValue(value: QuickTimeInterval): void { + let interval: QuickTimeInterval; + if (value && this.allowedIntervals?.length && !this.allowedIntervals.includes(value)) { + interval = this.allowedIntervals[0]; } else { - this.modelValue = null; - this.quickIntervalFormGroup.get('interval').patchValue(null, {emitEvent: true}); + interval = value; } + this.modelValue = interval; + this.quickIntervalFormGroup.get('interval').patchValue(interval, {emitEvent: false}); } updateView(value: QuickTimeInterval | null) { diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts index 96841290d5..0a54b30755 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts @@ -14,14 +14,14 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; import { TimeService } from '@core/services/time.service'; import { coerceNumberProperty } from '@angular/cdk/coercion'; import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; import { coerceBoolean } from '@shared/decorators/coercion'; import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models'; -import { isDefined } from '@core/utils'; +import { isDefined, isEqual } from '@core/utils'; import { IntervalType } from '@shared/models/telemetry/telemetry.models'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -38,12 +38,13 @@ import { Subject } from 'rxjs'; } ] }) -export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDestroy { +export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy { minValue: number; maxValue: number; disabledAdvancedState = false; + allowedIntervalsList: Array; @Input() set min(min: number) { @@ -80,6 +81,15 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe } } + @Input() + set allowedIntervals(allowedIntervals: Array) { + console.log('set', allowedIntervals); + if (!this.allowedIntervalsList || !isEqual(allowedIntervals, this.allowedIntervalsList)) { + this.allowedIntervalsList = allowedIntervals; + this.updateIntervalValue(true); + } + } + @Input() @coerceBoolean() useCalendarIntervals = false; @@ -155,6 +165,10 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe this.boundInterval(); } + ngOnChanges({allowedIntervals}: SimpleChanges): void { + console.log('changes', allowedIntervals); + } + registerOnChange(fn: any): void { this.propagateChange = fn; if (isDefined(this.propagateChangeValue)) { @@ -184,8 +198,11 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe if (typeof this.modelValue !== 'undefined') { const min = this.timeService.boundMinInterval(this.minValue); const max = this.timeService.boundMaxInterval(this.maxValue); - if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) { - const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, + if (this.allowedIntervalsList?.length || + IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) { + const advanced = this.allowedIntervalsList?.length + ? !this.allowedIntervalsList.includes(this.modelValue) + : !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, this.useCalendarIntervals); if (advanced && this.disabledAdvancedState) { this.advanced = false; @@ -225,20 +242,28 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnDe private boundInterval(updateToPreferred = false) { const min = this.timeService.boundMinInterval(this.minValue); const max = this.timeService.boundMaxInterval(this.maxValue); - this.intervals = this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals); + this.intervals = this.allowedIntervalsList?.length + ? this.timeService.intervalValuesToTimeIntervals(this.allowedIntervalsList) + : this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals); if (!this.disabledAdvancedState) { this.intervals.push(this.customTimeInterval); } if (this.rendered) { let newInterval = this.modelValue; - const newIntervalMs = IntervalMath.numberValue(newInterval); - if (newIntervalMs < min) { - newInterval = min; - } else if (newIntervalMs >= max && updateToPreferred) { - newInterval = this.timeService.boundMaxInterval(max / 7); - } - if (!this.advanced) { - newInterval = this.timeService.boundToPredefinedInterval(min, max, newInterval, this.useCalendarIntervals); + if (this.allowedIntervalsList?.length) { + if (!this.allowedIntervalsList.includes(newInterval) && !this.advanced) { + newInterval = this.allowedIntervalsList[0]; + } + } else { + const newIntervalMs = IntervalMath.numberValue(newInterval); + if (newIntervalMs < min) { + newInterval = min; + } else if (newIntervalMs >= max && updateToPreferred) { + newInterval = this.timeService.boundMaxInterval(max / 7); + } + if (!this.advanced) { + newInterval = this.timeService.boundToPredefinedInterval(min, max, newInterval, this.useCalendarIntervals); + } } if (newInterval !== this.modelValue) { this.setInterval(newInterval); diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html index 5d214fb435..c969f65781 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html @@ -62,6 +62,7 @@ formControlName="timewindowMs" subscriptSizing="dynamic" appearance="outline" + [allowedIntervals]="timewindowForm.get('realtime.allowedLastIntervals').value" [disabledAdvanced]="timewindowForm.get('realtime.disableCustomInterval').value" [required]="timewindowForm.get('selectedTab').value === timewindowTypes.REALTIME && timewindowForm.get('realtime.realtimeType').value === realtimeTypes.LAST_INTERVAL"> @@ -130,6 +131,7 @@ formControlName="timewindowMs" subscriptSizing="dynamic" appearance="outline" + [allowedIntervals]="timewindowForm.get('history.allowedLastIntervals').value" [disabledAdvanced]="timewindowForm.get('history.disableCustomInterval').value" [required]="timewindowForm.get('selectedTab').value === timewindowTypes.HISTORY && timewindowForm.get('history.historyType').value === historyTypes.LAST_INTERVAL">