Refactoring

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<Interval>): Array<TimeInterval> {
-    return defaultTimeIntervals.filter(interval => intervalValues.includes(interval.value));
-  }
-
   public boundMinInterval(min: number): number {
     if (isDefined(min)) {
       min = Math.ceil(min / 1000) * 1000;

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 AggregationTypeSelectComponent from '@shared/components/time/aggregation/aggregation-type-select.component';
-import * as AggregationOptionsConfigComponent from '@shared/components/aggregation/aggregation-options-config-panel.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/time/aggregation/aggregation-type-select.component': AggregationTypeSelectComponent,
-    '@shared/components/aggregation/aggregation-options-config-panel.component': AggregationOptionsConfigComponent,
+    '@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,

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<Interval>;
-
   @Input()
   set min(min: number) {
     const minValueData = coerceNumberProperty(min);
@@ -72,23 +78,11 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh
   @coerceBoolean()
   isEdit = false;
 
-  @Input()
+  @Input({transform : booleanAttribute})
-  @coerceBoolean()
+  disabledAdvanced = false;
-  set disabledAdvanced(disabledAdvanced: boolean) {
-    if (this.disabledAdvancedState !== disabledAdvanced) {
-      this.disabledAdvancedState = disabledAdvanced;
-      this.updateIntervalValue(true);
-    }
-  }
 
   @Input()
-  set allowedIntervals(allowedIntervals: Array<Interval>) {
+  allowedIntervals: Array<Interval>;
-    console.log('set', allowedIntervals);
-    if (!this.allowedIntervalsList || !isEqual(allowedIntervals, this.allowedIntervalsList)) {
-      this.allowedIntervalsList = allowedIntervals;
-      this.updateIntervalValue(true);
-    }
-  }
 
   @Input()
   @coerceBoolean()
@@ -165,8 +159,11 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor, OnCh
     this.boundInterval();
   }
 
-  ngOnChanges({allowedIntervals}: SimpleChanges): void {
+  ngOnChanges({disabledAdvanced, allowedIntervals}: SimpleChanges): void {
-    console.log('changes', allowedIntervals);
+    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
+        const advanced = this.allowedIntervals?.length
-          ? !this.allowedIntervalsList.includes(this.modelValue)
+          ? !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.intervals = this.allowedIntervals?.length
-      ? this.timeService.intervalValuesToTimeIntervals(this.allowedIntervalsList)
+      ? 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.allowedIntervals?.length) {
-        if (!this.allowedIntervalsList.includes(newInterval) && !this.advanced) {
+        if (!this.allowedIntervals.includes(newInterval) && !this.advanced) {
-          newInterval = this.allowedIntervalsList[0];
+          newInterval = this.allowedIntervals[0];
         }
       } else {
         const newIntervalMs = IntervalMath.numberValue(newInterval);

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 {

ui-ngx/src/app/shared/models/time/time.models.ts

@@ -1054,6 +1054,10 @@ export const defaultTimeIntervals = new Array<TimeInterval>(
   }
 );
 
+export const intervalValuesToTimeIntervals = (intervalValues: Array<Interval>): Array<TimeInterval> => {
+  return defaultTimeIntervals.filter(interval => intervalValues.includes(interval.value));
+}
+
 export enum TimeUnit {
   SECONDS = 'SECONDS',
   MINUTES = 'MINUTES',

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 { AggregationTypeSelectComponent } from '@shared/components/time/aggregation/aggregation-type-select.component';
-import { AggregationOptionsConfigPanelComponent } from '@shared/components/aggregation/aggregation-options-config-panel.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) {