diff --git a/ui-ngx/src/app/core/services/time.service.ts b/ui-ngx/src/app/core/services/time.service.ts index d1e92c7e86..c60ee89222 100644 --- a/ui-ngx/src/app/core/services/time.service.ts +++ b/ui-ngx/src/app/core/services/time.service.ts @@ -72,10 +72,6 @@ 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/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts index f93a7172af..4101254688 100644 --- a/ui-ngx/src/app/modules/common/modules-map.ts +++ b/ui-ngx/src/app/modules/common/modules-map.ts @@ -335,8 +335,8 @@ import * as RuleChainSelectComponent from '@shared/components/rule-chain/rule-ch import * as TimezoneComponent from '@shared/components/time/timezone.component'; import * as TimezonePanelComponent from '@shared/components/time/timezone-panel.component'; import * as DatapointsLimitComponent from '@shared/components/time/datapoints-limit.component'; -import * as AggregationTypeSelectComponent from '@shared/components/aggregation/aggregation-type-select.component'; -import * as AggregationOptionsConfigComponent from '@shared/components/aggregation/aggregation-options-config-panel.component'; +import * as AggregationTypeSelectComponent from '@shared/components/time/aggregation/aggregation-type-select.component'; +import * as AggregationOptionsConfigComponent from '@shared/components/time/aggregation/aggregation-options-config-panel.component'; import * as IntervalOptionsConfigPanelComponent from '@shared/components/time/interval-options-config-panel.component'; import { IModulesMap } from '@modules/common/modules-map.models'; @@ -475,8 +475,8 @@ class ModulesMap implements IModulesMap { '@shared/components/time/timezone.component': TimezoneComponent, '@shared/components/time/timezone-panel.component': TimezonePanelComponent, '@shared/components/time/datapoints-limit.component': DatapointsLimitComponent, - '@shared/components/aggregation/aggregation-type-select.component': AggregationTypeSelectComponent, - '@shared/components/aggregation/aggregation-options-config-panel.component': AggregationOptionsConfigComponent, + '@shared/components/time/aggregation/aggregation-type-select.component': AggregationTypeSelectComponent, + '@shared/components/time/aggregation/aggregation-options-config-panel.component': AggregationOptionsConfigComponent, '@shared/components/time/interval-options-config-panel.component': IntervalOptionsConfigPanelComponent, '@shared/components/value-input.component': ValueInputComponent, '@shared/components/dashboard-autocomplete.component': DashboardAutocompleteComponent, diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.scss similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.scss diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.ts similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.ts diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.html diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.scss b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.scss rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.ts similarity index 100% rename from ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts rename to ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.ts 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 0a54b30755..2446923f3e 100644 --- a/ui-ngx/src/app/shared/components/time/timeinterval.component.ts +++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.ts @@ -14,13 +14,22 @@ /// limitations under the License. /// -import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; +import { + booleanAttribute, + 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 { Interval, IntervalMath, intervalValuesToTimeIntervals, TimeInterval } from '@shared/models/time/time.models'; import { isDefined, isEqual } from '@core/utils'; import { IntervalType } from '@shared/models/telemetry/telemetry.models'; import { takeUntil } from 'rxjs/operators'; @@ -43,9 +52,6 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh minValue: number; maxValue: number; - disabledAdvancedState = false; - allowedIntervalsList: Array; - @Input() set min(min: number) { const minValueData = coerceNumberProperty(min); @@ -72,23 +78,11 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh @coerceBoolean() isEdit = false; - @Input() - @coerceBoolean() - set disabledAdvanced(disabledAdvanced: boolean) { - if (this.disabledAdvancedState !== disabledAdvanced) { - this.disabledAdvancedState = disabledAdvanced; - this.updateIntervalValue(true); - } - } + @Input({transform : booleanAttribute}) + disabledAdvanced = false; @Input() - set allowedIntervals(allowedIntervals: Array) { - console.log('set', allowedIntervals); - if (!this.allowedIntervalsList || !isEqual(allowedIntervals, this.allowedIntervalsList)) { - this.allowedIntervalsList = allowedIntervals; - this.updateIntervalValue(true); - } - } + allowedIntervals: Array; @Input() @coerceBoolean() @@ -165,8 +159,11 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh this.boundInterval(); } - ngOnChanges({allowedIntervals}: SimpleChanges): void { - console.log('changes', allowedIntervals); + ngOnChanges({disabledAdvanced, allowedIntervals}: SimpleChanges): void { + if ((disabledAdvanced && !disabledAdvanced.firstChange && disabledAdvanced.currentValue !== disabledAdvanced.previousValue) || + (allowedIntervals && !allowedIntervals.firstChange && !isEqual(allowedIntervals.currentValue, allowedIntervals.previousValue))) { + this.updateIntervalValue(true); + } } registerOnChange(fn: any): void { @@ -198,13 +195,13 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh if (typeof this.modelValue !== 'undefined') { const min = this.timeService.boundMinInterval(this.minValue); const max = this.timeService.boundMaxInterval(this.maxValue); - if (this.allowedIntervalsList?.length || + if (this.allowedIntervals?.length || IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) { - const advanced = this.allowedIntervalsList?.length - ? !this.allowedIntervalsList.includes(this.modelValue) + const advanced = this.allowedIntervals?.length + ? !this.allowedIntervals.includes(this.modelValue) : !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, this.useCalendarIntervals); - if (advanced && this.disabledAdvancedState) { + if (advanced && this.disabledAdvanced) { this.advanced = false; this.boundInterval(); } else { @@ -242,17 +239,17 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh private boundInterval(updateToPreferred = false) { const min = this.timeService.boundMinInterval(this.minValue); const max = this.timeService.boundMaxInterval(this.maxValue); - this.intervals = this.allowedIntervalsList?.length - ? this.timeService.intervalValuesToTimeIntervals(this.allowedIntervalsList) + this.intervals = this.allowedIntervals?.length + ? intervalValuesToTimeIntervals(this.allowedIntervals) : this.timeService.getIntervals(this.minValue, this.maxValue, this.useCalendarIntervals); - if (!this.disabledAdvancedState) { + if (!this.disabledAdvanced) { this.intervals.push(this.customTimeInterval); } if (this.rendered) { let newInterval = this.modelValue; - if (this.allowedIntervalsList?.length) { - if (!this.allowedIntervalsList.includes(newInterval) && !this.advanced) { - newInterval = this.allowedIntervalsList[0]; + if (this.allowedIntervals?.length) { + if (!this.allowedIntervals.includes(newInterval) && !this.advanced) { + newInterval = this.allowedIntervals[0]; } } else { const newIntervalMs = IntervalMath.numberValue(newInterval); diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts index 9ed034595f..7c6293d5dc 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts @@ -42,7 +42,7 @@ import { takeUntil } from 'rxjs/operators'; import { TbPopoverService } from '@shared/components/popover.service'; import { AggregationOptionsConfigPanelComponent -} from '@shared/components/aggregation/aggregation-options-config-panel.component'; +} from '@shared/components/time/aggregation/aggregation-options-config-panel.component'; import { IntervalOptionsConfigPanelComponent } from '@shared/components/time/interval-options-config-panel.component'; export interface TimewindowConfigDialogData { diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index 7290abbc03..c8d8108a52 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -1054,6 +1054,10 @@ export const defaultTimeIntervals = new Array( } ); +export const intervalValuesToTimeIntervals = (intervalValues: Array): Array => { + return defaultTimeIntervals.filter(interval => intervalValues.includes(interval.value)); +} + export enum TimeUnit { SECONDS = 'SECONDS', MINUTES = 'MINUTES', diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 3200fad4cd..be4e32c3a0 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -218,8 +218,8 @@ import { CountryAutocompleteComponent } from '@shared/components/country-autocom import { CountryData } from '@shared/models/country.models'; import { SvgXmlComponent } from '@shared/components/svg-xml.component'; import { DatapointsLimitComponent } from '@shared/components/time/datapoints-limit.component'; -import { AggregationTypeSelectComponent } from '@shared/components/aggregation/aggregation-type-select.component'; -import { AggregationOptionsConfigPanelComponent } from '@shared/components/aggregation/aggregation-options-config-panel.component'; +import { AggregationTypeSelectComponent } from '@shared/components/time/aggregation/aggregation-type-select.component'; +import { AggregationOptionsConfigPanelComponent } from '@shared/components/time/aggregation/aggregation-options-config-panel.component'; import { IntervalOptionsConfigPanelComponent } from '@shared/components/time/interval-options-config-panel.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {