Timewindow: aggregation options list restriction (draft)

ui-ngx/src/app/modules/common/modules-map.ts

@@ -337,6 +337,7 @@ 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 { IModulesMap } from '@modules/common/modules-map.models';
 
@@ -470,8 +471,9 @@ class ModulesMap implements IModulesMap {
     '@shared/components/time/timezone-select.component': TimezoneSelectComponent,
     '@shared/components/time/timezone.component': TimezoneComponent,
     '@shared/components/time/timezone-panel.component': TimezonePanelComponent,
-    '@shared/components/time/datapoints-limit': DatapointsLimitComponent,
+    '@shared/components/time/datapoints-limit.component': DatapointsLimitComponent,
-    '@shared/components/aggregation/aggregation-type-select': AggregationTypeSelectComponent,
+    '@shared/components/aggregation/aggregation-type-select.component': AggregationTypeSelectComponent,
+    '@shared/components/aggregation/aggregation-options-config-panel.component': AggregationOptionsConfigComponent,
     '@shared/components/value-input.component': ValueInputComponent,
     '@shared/components/dashboard-autocomplete.component': DashboardAutocompleteComponent,
     '@shared/components/entity/entity-subtype-autocomplete.component': EntitySubTypeAutocompleteComponent,

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

@@ -0,0 +1,24 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div [formGroup]="aggregationOptionsConfigForm">
+  <mat-selection-list formControlName="allowedAggregationTypes">
+    <mat-list-option *ngFor="let aggregation of aggregations" [value]="aggregation">
+      {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
+    </mat-list-option>
+  </mat-selection-list>
+</div>

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+

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

@@ -0,0 +1,72 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Input, OnInit } from '@angular/core';
+import { aggregationTranslations, AggregationType } from '@shared/models/time/time.models';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { TbPopoverComponent } from '@shared/components/popover.component';
+
+export interface AggregationOptionsSelectionResult {
+  allowedAggregationTypes: AggregationType[] | null;
+}
+
+@Component({
+  selector: 'tb-aggregation-options-config-panel',
+  templateUrl: './aggregation-options-config-panel.component.html',
+  styleUrls: ['./aggregation-options-config-panel.component.scss']
+})
+export class AggregationOptionsConfigPanelComponent implements OnInit {
+
+  @Input()
+  allowedAggregationTypes: Array<AggregationType>;
+
+  @Input()
+  onClose: (result: AggregationOptionsSelectionResult | null) => void;
+
+  @Input()
+  popoverComponent: TbPopoverComponent;
+
+  aggregationOptionsConfigForm: FormGroup;
+
+  aggregationTypes = AggregationType;
+
+  aggregations = Object.keys(AggregationType);
+
+  aggregationTypesTranslations = aggregationTranslations;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.aggregationOptionsConfigForm = this.fb.group({
+      allowedAggregationTypes: [this.allowedAggregationTypes]
+    });
+  }
+
+  update() {
+    if (this.onClose) {
+      this.onClose({
+        allowedAggregationTypes: this.aggregationOptionsConfigForm.get('allowedAggregationTypes').value
+      });
+    }
+  }
+
+  cancel() {
+    if (this.onClose) {
+      this.onClose(null);
+    }
+  }
+
+}

ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html

@@ -22,4 +22,7 @@
       {{ displayAggregationTypeFn(type) }}
     </mat-option>
   </mat-select>
+  <ng-container matSuffix>
+    <ng-content select="[matSuffix]"></ng-content>
+  </ng-container>
 </mat-form-field>

ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.scss

@@ -26,4 +26,10 @@
   .mat-mdc-select-value {
     min-width: 100px;
   }
+  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
+    padding-right: 12px;
+  }
+  .mat-mdc-form-field-icon-suffix:empty {
+    padding: 0;
+  }
 }

ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html

@@ -169,6 +169,10 @@
           <ng-container formGroupName="aggregation">
             <tb-aggregation-type-select class="flex" subscriptSizing="dynamic" appearance="outline" displayLabel="false"
                                         formControlName="type">
+              <button matSuffix mat-icon-button type="button" class="tb-mat-24"
+                      (click)="openAggregationOptionsConfig($event)">
+                <mat-icon>edit</mat-icon>
+              </button>
             </tb-aggregation-type-select>
           </ng-container>
         </div>

ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.ts

@@ -14,9 +14,8 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
 import {
-  aggregationTranslations,
   AggregationType,
   DAY,
   HistoryWindowType,
@@ -38,6 +37,11 @@ import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TimezoneSelectionResult } from '@shared/components/time/timezone-panel.component';
+import { TbPopoverService } from '@shared/components/popover.service';
+import {
+  AggregationOptionsConfigPanelComponent
+} from '@shared/components/aggregation/aggregation-options-config-panel.component';
 
 export interface TimewindowConfigDialogData {
   quickIntervalOnly: boolean;
@@ -112,7 +116,11 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
               protected store: Store<AppState>,
               public fb: FormBuilder,
               private timeService: TimeService,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private popoverService: TbPopoverService,
+              private renderer: Renderer2,
+              private cd: ChangeDetectorRef,
+              public viewContainerRef: ViewContainerRef) {
     super(store);
     this.quickIntervalOnly = data.quickIntervalOnly;
     this.aggregation = data.aggregation;
@@ -388,4 +396,30 @@ export class TimewindowConfigDialogComponent extends PageComponent implements On
     }
   }
 
+  openAggregationOptionsConfig($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
+    if (this.popoverService.hasPopover(trigger)) {
+      this.popoverService.hidePopover(trigger);
+    } else {
+      const aggregationConfigPopover = this.popoverService.displayPopover(trigger, this.renderer,
+        this.viewContainerRef, AggregationOptionsConfigPanelComponent, ['bottomRight', 'leftBottom'], true, null,
+        {
+          allowedAggregationTypes: null,
+          onClose: (result: TimezoneSelectionResult | null) => {
+            aggregationConfigPopover.hide();
+            if (result) {
+              console.log(result);
+            }
+          }
+        },
+        {},
+        {}, {}, false);
+      aggregationConfigPopover.tbComponentRef.instance.popoverComponent = aggregationConfigPopover;
+    }
+    this.cd.detectChanges();
+  }
+
 }

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

@@ -16,7 +16,6 @@
 
 import { Component, Inject, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import {
-  aggregationTranslations,
   AggregationType,
   DAY,
   HistoryWindowType,

ui-ngx/src/app/shared/shared.module.ts

@@ -231,6 +231,7 @@ 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';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -322,6 +323,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     QuickTimeIntervalComponent,
     DatapointsLimitComponent,
     AggregationTypeSelectComponent,
+    AggregationOptionsConfigPanelComponent,
     DashboardSelectComponent,
     DashboardSelectPanelComponent,
     DatetimePeriodComponent,
@@ -539,6 +541,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     QuickTimeIntervalComponent,
     DatapointsLimitComponent,
     AggregationTypeSelectComponent,
+    AggregationOptionsConfigPanelComponent,
     DashboardSelectComponent,
     DatetimePeriodComponent,
     DatetimeComponent,