UI: start introducing custom interval option instead of advanced option

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

@@ -20,8 +20,18 @@
     <label class="tb-small hide-label" translate>timewindow.hide</label>
     <mat-checkbox [(ngModel)]="hideFlag" (ngModelChange)="onHideFlagChange()"></mat-checkbox>
   </section>
-  <section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
+  <section class="interval-section" fxLayout="column" fxFlex fxLayoutGap="16px">
-    <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
+    <section fxLayout="row" fxFlex [fxShow]="isEdit || !hideFlag">
+      <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
+        <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
+        <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
+          <mat-option *ngFor="let interval of intervals" [value]="interval.value">
+            {{ interval.name | translate:interval.translateParams }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </section>
+    <section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px" [fxShow]="advanced && (isEdit || !hideFlag)">
       <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')"/>
@@ -40,16 +50,6 @@
       </mat-form-field>
     </section>
   </section>
-  <section fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
-    <mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
-      <mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
-      <mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
-        <mat-option *ngFor="let interval of intervals" [value]="interval.value">
-          {{ interval.name | translate:interval.translateParams }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </section>
   <section fxLayout="column" fxLayoutAlign="center center" [fxShow]="(isEdit || !hideFlag) && !disabledAdvanced">
     <label class="tb-small advanced-label" translate>timeinterval.advanced</label>
     <mat-slide-toggle [disabled]="hideFlag || disabled" class="advanced-switch" [(ngModel)]="advanced" (ngModelChange)="onAdvancedChange()"></mat-slide-toggle>

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

@@ -22,6 +22,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models';
 import { isDefined } from '@core/utils';
+import { IntervalType } from '@shared/models/telemetry/telemetry.models';
 
 @Component({
   selector: 'tb-timeinterval',
@@ -98,6 +99,12 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
 
   advanced = false;
 
+  customTimeInterval: TimeInterval = {
+    name: 'timeinterval.custom',
+    translateParams: {},
+    value: IntervalType.CUSTOM
+  };
+
   private modelValue: Interval;
   private rendered = false;
   private propagateChangeValue: any;
@@ -134,8 +141,14 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
       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) {
-        this.advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, this.useCalendarIntervals);
+        const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue,
-        this.setInterval(this.modelValue);
+          this.useCalendarIntervals);
+        if (advanced && this.disabledAdvanced) {
+          this.boundInterval();
+        } else {
+          this.advanced = advanced;
+          this.setInterval(this.modelValue);
+        }
       } else {
         this.boundInterval();
       }
@@ -143,9 +156,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
   }
 
   private setInterval(interval: Interval) {
-    if (!this.advanced) {
+    // if (!this.advanced) {
       this.interval = interval;
-    }
+    // }
     const intervalSeconds = Math.floor(IntervalMath.numberValue(interval) / 1000);
     this.days = Math.floor(intervalSeconds / 86400);
     this.hours = Math.floor((intervalSeconds % 86400) / 3600);

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

@@ -186,7 +186,8 @@ export enum IntervalType {
   WEEK = 'WEEK',
   WEEK_ISO = 'WEEK_ISO',
   MONTH = 'MONTH',
-  QUARTER = 'QUARTER'
+  QUARTER = 'QUARTER',
+  CUSTOM = 'CUSTOM'
 }
 
 export class TimeseriesSubscriptionCmd extends SubscriptionCmd {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4609,6 +4609,7 @@
         "minutes": "Minutes",
         "seconds": "Seconds",
         "advanced": "Advanced",
+        "custom": "Custom",
         "predefined": {
           "yesterday": "Yesterday",
           "day-before-yesterday": "Day before yesterday",