diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html
index 35016c6a28..ce7494b856 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.html
@@ -15,10 +15,33 @@
limitations under the License.
-->
-
-
-
- {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
-
-
-
+
diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss
index b9dc294716..903097ba6b 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.scss
@@ -13,5 +13,32 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+:host {
+ .tb-aggregation-options-form {
+ height: 100%;
+ max-width: 350px;
+ .tb-form-table {
+ overflow: hidden;
+ }
+
+ .tb-form-table-body {
+ overflow-y: auto;
+ }
+
+ .tb-form-hint {
+ flex-shrink: 0;
+ }
+
+ .mdc-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line {
+ height: 40px;
+ }
+ }
+ }
+}
diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts
index 1b789a747c..bddbe3fba3 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-options-config-panel.component.ts
@@ -19,10 +19,6 @@ import { aggregationTranslations, AggregationType } from '@shared/models/time/ti
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',
@@ -34,7 +30,7 @@ export class AggregationOptionsConfigPanelComponent implements OnInit {
allowedAggregationTypes: Array;
@Input()
- onClose: (result: AggregationOptionsSelectionResult | null) => void;
+ onClose: (result: Array | null) => void;
@Input()
popoverComponent: TbPopoverComponent;
@@ -43,7 +39,7 @@ export class AggregationOptionsConfigPanelComponent implements OnInit {
aggregationTypes = AggregationType;
- aggregations = Object.keys(AggregationType);
+ allAggregationTypes: Array = Object.values(AggregationType);
aggregationTypesTranslations = aggregationTranslations;
@@ -57,9 +53,9 @@ export class AggregationOptionsConfigPanelComponent implements OnInit {
update() {
if (this.onClose) {
- this.onClose({
- allowedAggregationTypes: this.aggregationOptionsConfigForm.get('allowedAggregationTypes').value
- });
+ const allowedAggregationTypes = this.aggregationOptionsConfigForm.get('allowedAggregationTypes').value;
+ // if full list selected returns empty for optimization
+ this.onClose(allowedAggregationTypes?.length < this.allAggregationTypes.length ? allowedAggregationTypes : []);
}
}
diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
index b9a9cdd93e..5e80fc3237 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.html
@@ -15,7 +15,9 @@
limitations under the License.
-->
-
+
{{ label }}
diff --git a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
index 25ca4f34b4..7986a28f82 100644
--- a/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
+++ b/ui-ngx/src/app/shared/components/aggregation/aggregation-type-select.component.ts
@@ -112,7 +112,7 @@ export class AggregationTypeSelectComponent implements ControlValueAccessor, OnI
this.aggregationTypes = this.allowedAggregationTypes?.length ? this.allowedAggregationTypes : this.allAggregationTypes;
const currentAggregationType: AggregationType = this.aggregationTypeFormGroup.get('aggregationType').value;
if (currentAggregationType && !this.aggregationTypes.includes(currentAggregationType)) {
- this.aggregationTypeFormGroup.get('aggregationType').patchValue(null, {emitEvent: true});
+ this.aggregationTypeFormGroup.get('aggregationType').patchValue(this.aggregationTypes[0], {emitEvent: true});
}
}
}
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
index de583225fb..f3cd8fdfeb 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
@@ -16,7 +16,7 @@
@import '../../../../scss/constants';
:host {
- min-width: 355px;
+ min-width: 300px;
display: block;
@media #{$mat-xs} {
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
index dbfb9e37ea..db6c207f8d 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow-config-dialog.component.html
@@ -51,7 +51,7 @@
{{ 'timewindow.disable-custom-interval' | translate }}
-