Timewindow: added ability to enable/disable all interval options at once

ui-ngx/src/app/shared/components/time/aggregation/aggregation-options-config-panel.component.html

@@ -24,7 +24,7 @@
     </div>
     <div class="tb-form-table-body">
       <mat-selection-list formControlName="allowedAggregationTypes">
-        <mat-list-option *ngFor="let type of allAggregationTypes" [value]="type" togglePosition="before">
+        <mat-list-option *ngFor="let type of allAggregationTypes" [value]="type" togglePosition="before" color="primary">
           {{ aggregationTypesTranslations.get(aggregationTypes[type]) | translate }}
         </mat-list-option>
       </mat-selection-list>

ui-ngx/src/app/shared/components/time/aggregation/grouping-interval-options.component.html

@@ -20,6 +20,9 @@
                   [subscriptSizing]="subscriptSizing" [appearance]="appearance">
     <mat-select formControlName="aggIntervals" multiple
                 placeholder="{{ 'timewindow.all' | translate }}">
+      <mat-select-trigger *ngIf="timeintervalFormGroup.get('aggIntervals').value?.length === allIntervals.length">
+        {{ 'timewindow.all' | translate }}
+      </mat-select-trigger>
       <mat-option *ngFor="let interval of allIntervals" [value]="interval.value">
         {{ interval.name | translate:interval.translateParams }}
       </mat-option>

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.html

@@ -23,7 +23,15 @@
   </div>
   <div class="tb-form-table">
     <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell tb-interval">{{"timewindow.interval" | translate }}</div>
+      <div class="tb-form-table-header-cell tb-interval">
+        <mat-checkbox color="warn"
+                      (click)="$event.stopPropagation()"
+                      [indeterminate]="getIndeterminate()"
+                      (change)="enableDisableIntervals($event.checked)"
+                      [checked]="getChecked()">
+        </mat-checkbox>
+        {{ "timewindow.interval" | translate }}
+      </div>
       <ng-container *ngIf="aggregation">
         <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.allowed-agg-intervals" | translate }}</div>
         <div class="tb-form-table-header-cell tb-agg-interval-header">{{"timewindow.default-agg-interval" | translate }}</div>
@@ -33,7 +41,7 @@
       <ng-container *ngFor="let interval of intervalsFormArray.controls; let i = index; trackBy: trackByElement">
         <div [formGroupName]="i" class="tb-form-table-row">
           <div class="tb-form-table-row-cell tb-interval">
-            <mat-checkbox formControlName="enabled">
+            <mat-checkbox formControlName="enabled" color="primary">
               <mat-label>{{ interval.get('name').value }}</mat-label>
             </mat-checkbox>
           </div>

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.scss

@@ -28,14 +28,17 @@
     .tb-form-table-header-cell, .tb-form-table-row-cell {
       &.tb-interval {
         flex: 1 1 30%;
+        width: 30%;
       }
       &.tb-agg-interval {
         flex: 1 1 70%;
+        width: 70%;
       }
     }
 
     .tb-form-table-header-cell.tb-agg-interval-header {
       flex: 1 1 35%;
+      width: 35%;
     }
 
     .tb-form-hint {

ui-ngx/src/app/shared/components/time/interval-options-config-panel.component.ts

@@ -208,4 +208,24 @@ export class IntervalOptionsConfigPanelComponent implements OnInit {
     return allQuickIntervals;
   }
 
+  getIndeterminate(): boolean {
+    const enabledIntervals = this.intervalsFormArray.value.filter(interval => interval.enabled);
+    return enabledIntervals.length !== 0 && enabledIntervals.length !== this.allIntervals.length;
+  }
+
+  enableDisableIntervals(allEnabled: boolean) {
+    const intervalControls = this.intervalsFormArray.controls;
+    for (const interval of intervalControls) {
+      interval.patchValue({
+        enabled: allEnabled
+      });
+    }
+    this.intervalOptionsConfigForm.markAsDirty();
+  }
+
+  getChecked(): boolean {
+    const intervals = this.intervalsFormArray.value;
+    return intervals.every(interval => interval.enabled);
+  }
+
 }

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

@@ -4710,7 +4710,7 @@
         "edit-aggregation-functions-list-hint": "List of available options can be specified.",
         "allowed-aggregation-functions": "Allowed aggregation functions",
         "edit-intervals-list": "Edit intervals list",
-        "allowed-agg-intervals": "Allowed grouping intervals",
+        "allowed-agg-intervals": "Grouping intervals",
         "default-agg-interval": "Default grouping interval",
         "edit-intervals-list-hint": "List of available interval options can be specified.",
         "edit-grouping-intervals-list-hint": "It is possible to configure the grouping intervals list and default grouping interval.",