Vladyslav_Prykhodko
10 months ago
12 changed files with 909 additions and 19 deletions
@ -0,0 +1,168 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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 class="w-full max-w-xl" [formGroup]="metricForm"> |
|||
<div class="tb-form-panel no-border no-padding mb-2"> |
|||
<div class="tb-form-panel-title">{{ 'calculated-fields.metrics.metric-settings' | translate }}</div> |
|||
<div class="tb-form-panel no-border no-padding"> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.metrics.metric-name' | translate }}</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput autocomplete="new-name" name="value" formControlName="name" maxlength="255" placeholder="{{ 'action.set' | translate }}"/> |
|||
@if (metricForm.get('name').touched && metricForm.get('name').hasError('required')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.name-required' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (metricForm.get('name').touched && metricForm.get('name').hasError('duplicateName')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.name-duplicate' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (metricForm.get('name').touched && metricForm.get('name').hasError('pattern')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.name-pattern' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (metricForm.get('name').touched && metricForm.get('name').hasError('maxlength')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.name-max-length' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} @else if (metricForm.get('name').touched && metricForm.get('name').hasError('forbiddenName')) { |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'calculated-fields.hint.name-forbidden' | translate" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
} |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width">{{ 'calculated-fields.metrics.aggregation' | translate }}</div> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="function"> |
|||
@for (aggFunction of AggFunctions; track aggFunction) { |
|||
<mat-option [value]="aggFunction">{{ AggFunctionTranslations.get(aggFunction) | translate }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
|
|||
<div class="tb-form-panel stroked tb-slide-toggle"> |
|||
<mat-expansion-panel class="tb-settings" [(expanded)]="filterExpanded" |
|||
[disabled]="!metricForm.get('allowFilter').value"> |
|||
<mat-expansion-panel-header class="flex flex-row flex-wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="allowFilter" (click)="$event.stopPropagation()"> |
|||
<div tb-hint-tooltip-icon="{{ 'calculated-fields.metrics.filter-hint' | translate }}"> |
|||
{{ 'calculated-fields.metrics.filter' | translate }} |
|||
</div> |
|||
</mat-slide-toggle> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<tb-js-func required |
|||
formControlName="filter" |
|||
functionName="filter" |
|||
[functionArgs]="functionArgs" |
|||
[disableUndefinedCheck]="true" |
|||
[scriptLanguage]="ScriptLanguage.TBEL" |
|||
[highlightRules]="highlightRules" |
|||
[editorCompleter]="editorCompleter" |
|||
[helpPopupStyle]="{ width: '1200px' }" |
|||
helpId="calculated-field/expression_fn"> |
|||
<div toolbarPrefixButton |
|||
class="tb-primary-background tbel-script-lang-chip">{{ 'api-usage.tbel' | translate }} |
|||
</div> |
|||
</tb-js-func> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
<ng-container formGroupName="input"> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width">{{ 'calculated-fields.metrics.value-source' | translate }}</div> |
|||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="type"> |
|||
@for (inputType of AggInputTypes; track inputType) { |
|||
<mat-option [value]="inputType">{{ AggInputTypeTranslations.get(inputType) | translate }}</mat-option> |
|||
} |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
@if (this.metricForm.get('input.type').value === AggInputType.key) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width tb-required">{{ 'calculated-fields.argument-name' | translate }}</div> |
|||
<tb-string-autocomplete [fetchOptionsFn]="fetchOptions.bind(this)" |
|||
additionalClass="tb-suffix-show-on-hover" |
|||
class="flex-1" |
|||
appearance="outline" |
|||
panelWidth="" |
|||
required |
|||
[errorText]="'calculated-fields.hint.argument-name-required' | translate" |
|||
formControlName="key"> |
|||
</tb-string-autocomplete> |
|||
</div> |
|||
} @else { |
|||
<tb-js-func required |
|||
formControlName="function" |
|||
functionName="filter" |
|||
[functionArgs]="functionArgs" |
|||
[disableUndefinedCheck]="true" |
|||
[scriptLanguage]="ScriptLanguage.TBEL" |
|||
[highlightRules]="highlightRules" |
|||
[editorCompleter]="editorCompleter" |
|||
[helpPopupStyle]="{ width: '1200px' }" |
|||
helpId="calculated-field/expression_fn"> |
|||
<div toolbarPrefixButton |
|||
class="tb-primary-background tbel-script-lang-chip">{{ 'api-usage.tbel' | translate }} |
|||
</div> |
|||
</tb-js-func> |
|||
} |
|||
</ng-container> |
|||
</div> |
|||
</div> |
|||
<div class="flex justify-end gap-2"> |
|||
<button mat-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="saveZone()" |
|||
[disabled]="metricForm.invalid || !metricForm.dirty"> |
|||
{{ buttonTitle | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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 '../../../../../../../scss/constants'; |
|||
|
|||
$panel-width: 520px; |
|||
|
|||
:host { |
|||
display: flex; |
|||
width: $panel-width; |
|||
max-width: 100%; |
|||
max-height: 80vh; |
|||
|
|||
.fixed-title-width { |
|||
@media #{$mat-xs} { |
|||
min-width: 120px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,176 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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, output } from '@angular/core'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { FormBuilder, FormControl, ValidatorFn, Validators } from '@angular/forms'; |
|||
import { charsWithNumRegex } from '@shared/models/regex.constants'; |
|||
import { |
|||
AggFunction, |
|||
AggFunctionTranslations, |
|||
AggInputType, |
|||
AggInputTypeTranslations, |
|||
CalculatedFieldAggMetricValue |
|||
} from '@shared/models/calculated-field.models'; |
|||
import { delay, map } from 'rxjs/operators'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { EntityFilter } from '@shared/models/query/query.models'; |
|||
import { merge, Observable, of } from 'rxjs'; |
|||
import { ScriptLanguage } from '@shared/models/rule-node.models'; |
|||
import { TbEditorCompleter } from '@shared/models/ace/completion.models'; |
|||
import { AceHighlightRules } from '@shared/models/ace/ace.models'; |
|||
|
|||
interface CalculatedFieldAggMetricValuePanel extends CalculatedFieldAggMetricValue { |
|||
allowFilter: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-metrics-panel', |
|||
templateUrl: './calculated-field-metrics-panel.component.html', |
|||
styleUrls: ['./calculated-field-metrics-panel.component.scss'] |
|||
}) |
|||
export class CalculatedFieldMetricsPanelComponent implements OnInit { |
|||
|
|||
@Input() buttonTitle: string; |
|||
@Input() metric: CalculatedFieldAggMetricValue; |
|||
@Input() usedNames: string[]; |
|||
@Input() arguments: Array<string>; |
|||
@Input() editorCompleter: TbEditorCompleter; |
|||
@Input() highlightRules: AceHighlightRules; |
|||
|
|||
metricDataApplied = output<CalculatedFieldAggMetricValue>(); |
|||
filterExpanded = false; |
|||
functionArgs: Array<string> |
|||
|
|||
metricForm = this.fb.group({ |
|||
name: ['', [Validators.required, this.uniqNameRequired(), this.forbiddenNameValidator(), Validators.pattern(charsWithNumRegex), Validators.maxLength(255)]], |
|||
function: [AggFunction.AVG], |
|||
allowFilter: [false], |
|||
filter: ['', Validators.required], |
|||
input: this.fb.group({ |
|||
type: [AggInputType.key], |
|||
key: ['', Validators.required], |
|||
function: ['', Validators.required], |
|||
}) |
|||
}); |
|||
|
|||
entityFilter: EntityFilter; |
|||
|
|||
readonly AggFunctions = Object.values(AggFunction) as AggFunction[]; |
|||
readonly AggFunctionTranslations = AggFunctionTranslations; |
|||
readonly ScriptLanguage = ScriptLanguage; |
|||
readonly AggInputType = AggInputType; |
|||
readonly AggInputTypes = Object.values(AggInputType) as AggInputType[]; |
|||
readonly AggInputTypeTranslations = AggInputTypeTranslations; |
|||
|
|||
constructor( |
|||
private fb: FormBuilder, |
|||
private popover: TbPopoverComponent<CalculatedFieldMetricsPanelComponent> |
|||
) { |
|||
this.observeUpdatePosition(); |
|||
this.observeFilterAllowChange(); |
|||
this.observeInputTypeChange(); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
const data: CalculatedFieldAggMetricValuePanel = { |
|||
...this.metric, |
|||
allowFilter: !!this.metric.filter, |
|||
} |
|||
this.metricForm.patchValue(data, {emitEvent: false}); |
|||
|
|||
this.validateFilter(data.allowFilter); |
|||
this.validateInputTypeFilter(data.input?.type ?? AggInputType.key); |
|||
|
|||
this.functionArgs = ['ctx', ...this.arguments]; |
|||
} |
|||
|
|||
fetchOptions(searchText: string): Observable<Array<string>> { |
|||
const search = searchText ? searchText?.toLowerCase() : ''; |
|||
return of(this.arguments).pipe(map(name => name?.filter(option => option.toLowerCase().includes(search)))); |
|||
} |
|||
|
|||
private observeFilterAllowChange(): void { |
|||
this.metricForm.get('allowFilter').valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(value => this.validateFilter(value)); |
|||
} |
|||
|
|||
private observeInputTypeChange(): void { |
|||
this.metricForm.get('input.type').valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(value => this.validateInputTypeFilter(value)); |
|||
} |
|||
|
|||
private validateFilter(allowFilter = false): void { |
|||
if (allowFilter) { |
|||
this.metricForm.get('filter').enable({emitEvent: false}); |
|||
} else { |
|||
this.metricForm.get('filter').disable({emitEvent: false}); |
|||
} |
|||
this.filterExpanded = allowFilter; |
|||
} |
|||
|
|||
private validateInputTypeFilter(value: AggInputType): void { |
|||
const inputForm = this.metricForm.get('input'); |
|||
if (value === AggInputType.key) { |
|||
inputForm.get('key').enable({emitEvent: false}); |
|||
inputForm.get('function').disable({emitEvent: false}); |
|||
} else { |
|||
inputForm.get('key').disable({emitEvent: false}); |
|||
inputForm.get('function').enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
saveZone(): void { |
|||
const value = this.metricForm.value as CalculatedFieldAggMetricValuePanel; |
|||
if (!value.allowFilter) { |
|||
delete value.filter; |
|||
} |
|||
delete value.allowFilter; |
|||
this.metricDataApplied.emit(value); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.popover.hide(); |
|||
} |
|||
|
|||
private uniqNameRequired(): ValidatorFn { |
|||
return (control: FormControl) => { |
|||
const newName = control.value.trim().toLowerCase(); |
|||
const isDuplicate = this.usedNames?.some(name => name.toLowerCase() === newName); |
|||
|
|||
return isDuplicate ? { duplicateName: true } : null; |
|||
}; |
|||
} |
|||
|
|||
private forbiddenNameValidator(): ValidatorFn { |
|||
return (control: FormControl) => { |
|||
const trimmedValue = control.value.trim().toLowerCase(); |
|||
const forbiddenNames = ['ctx', 'e', 'pi']; |
|||
return forbiddenNames.includes(trimmedValue) ? { forbiddenName: true } : null; |
|||
}; |
|||
} |
|||
|
|||
private observeUpdatePosition(): void { |
|||
merge( |
|||
this.metricForm.get('allowFilter').valueChanges, |
|||
this.metricForm.get('input.type').valueChanges |
|||
) |
|||
.pipe(delay(50), takeUntilDestroyed()) |
|||
.subscribe(() => this.popover.updatePosition()); |
|||
} |
|||
} |
|||
@ -0,0 +1,111 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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 class="flex flex-col gap-3"> |
|||
<div class="tb-form-panel stroked no-padding no-gap arguments-table flex flex-col" [class.arguments-table-with-error]="errorText"> |
|||
<table mat-table [dataSource]="dataSource" class="overflow-hidden bg-transparent" matSort |
|||
[matSortActive]="sortOrder.property" [matSortDirection]="sortOrder.direction" matSortDisableClear> |
|||
<ng-container [matColumnDef]="'name'"> |
|||
<mat-header-cell mat-sort-header *matHeaderCellDef class="!w-1/3 xs:!w-1/2"> |
|||
<div tbTruncateWithTooltip>{{ 'calculated-fields.metrics.metric-name' | translate }}</div> |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let metric" class="argument-name-cell w-1/3 xs:w-1/2"> |
|||
<div class="flex items-center"> |
|||
<div tbTruncateWithTooltip class="flex-1">{{ metric.name }}</div> |
|||
<tb-copy-button class="copy-argument-name" |
|||
[copyText]="metric.name" |
|||
tooltipText="{{ 'calculated-fields.metrics.copy-metric-name' | translate }}" |
|||
tooltipPosition="above" |
|||
icon="content_copy"/> |
|||
</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container [matColumnDef]="'function'"> |
|||
<mat-header-cell mat-sort-header *matHeaderCellDef class="entity-type-header w-1/5 xs:hidden"> |
|||
{{ 'calculated-fields.metrics.aggregation' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let metric" class="w-1/5 xs:hidden"> |
|||
<div tbTruncateWithTooltip>{{ AggFunctionTranslations.get(metric.function) | translate }}</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container [matColumnDef]="'filter'"> |
|||
<mat-header-cell mat-sort-header *matHeaderCellDef class="entity-type-header w-1/5 xs:hidden"> |
|||
{{ 'calculated-fields.metrics.filtered' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let metric" class="w-1/5 xs:hidden"> |
|||
<mat-icon>{{ metric.filter ? 'check_box' : 'check_box_outline_blank' }}</mat-icon> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<ng-container [matColumnDef]="'valueSource'"> |
|||
<mat-header-cell *matHeaderCellDef class="w-1/4 xs:hidden"> |
|||
{{ 'calculated-fields.metrics.value-source' | translate }} |
|||
</mat-header-cell> |
|||
<mat-cell *matCellDef="let metric" class="w-1/4 xs:hidden"> |
|||
<div tbTruncateWithTooltip>{{ AggInputTypeTranslations.get(metric.input.type) | translate }}</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="actions" stickyEnd> |
|||
<mat-header-cell *matHeaderCellDef class="w-20 min-w-20"/> |
|||
<mat-cell *matCellDef="let metric;"> |
|||
<div class="tb-form-table-row-cell-buttons flex w-20 min-w-20"> |
|||
<button type="button" |
|||
mat-icon-button |
|||
#button |
|||
(click)="manageMetrics($event, button, metric)" |
|||
[matTooltip]="'action.edit' | translate" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>edit</mat-icon> |
|||
</button> |
|||
<button type="button" |
|||
mat-icon-button |
|||
(click)="onDelete($event, metric)" |
|||
[matTooltip]="'action.delete' | translate" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</mat-cell> |
|||
</ng-container> |
|||
<mat-header-row class="mat-row-select" *matHeaderRowDef=displayColumns></mat-header-row> |
|||
<mat-row *matRowDef="let argument; columns: displayColumns"></mat-row> |
|||
</table> |
|||
<div [class.!hidden]="(dataSource.isEmpty() | async) === false" |
|||
class="tb-prompt flex flex-1 items-end justify-center"> |
|||
{{ 'calculated-fields.metrics.no-metrics-configured' | translate }} |
|||
</div> |
|||
@if (errorText) { |
|||
<tb-error noMargin [error]="errorText | translate" class="flex h-9 items-center pl-3"/> |
|||
} |
|||
</div> |
|||
<div class="flex h-9 justify-between"> |
|||
<button type="button" |
|||
mat-stroked-button |
|||
color="primary" |
|||
#button |
|||
(click)="manageMetrics($event, button)" |
|||
[disabled]="maxArgumentsPerCF > 0 && metricsFormArray.length >= maxArgumentsPerCF"> |
|||
{{ 'calculated-fields.metrics.add-metric' | translate }} |
|||
</button> |
|||
@if (maxArgumentsPerCF && metricsFormArray.length >= maxArgumentsPerCF) { |
|||
<div class="tb-form-hint tb-primary-fill max-args-warning flex items-center gap-2"> |
|||
<mat-icon>warning</mat-icon> |
|||
<span>{{ 'calculated-fields.metrics.max-metrics' | translate }}</span> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,76 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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. |
|||
*/ |
|||
:host { |
|||
.arguments-table { |
|||
min-height: 108px; |
|||
|
|||
&-with-error { |
|||
min-height: 150px; |
|||
} |
|||
|
|||
.mat-mdc-table { |
|||
table-layout: fixed; |
|||
} |
|||
|
|||
.key-text { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.copy-argument-name { |
|||
visibility: hidden; |
|||
transition: visibility 0.1s; |
|||
} |
|||
|
|||
.argument-name-cell:hover { |
|||
.copy-argument-name { |
|||
visibility: visible; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.max-args-warning { |
|||
.mat-icon { |
|||
color: #FAA405; |
|||
} |
|||
} |
|||
|
|||
.tb-form-table-row-cell-buttons { |
|||
--mat-badge-legacy-small-size-container-size: 8px; |
|||
--mat-badge-small-size-container-overlap-offset: -5px; |
|||
--mat-badge-small-size-text-size: 0; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.arguments-table:not(.arguments-table-with-error) { |
|||
.mdc-data-table__row:last-child .mat-mdc-cell { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.arguments-table { |
|||
.mat-mdc-header-row.mat-row-select .mat-mdc-header-cell.entity-type-header { |
|||
padding: 0 28px 0 0; |
|||
} |
|||
} |
|||
|
|||
.copy-argument-name { |
|||
.mat-icon { |
|||
font-size: 16px; |
|||
padding: 4px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,242 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 { |
|||
AfterViewInit, |
|||
ChangeDetectorRef, |
|||
Component, |
|||
DestroyRef, |
|||
forwardRef, |
|||
Input, |
|||
Renderer2, |
|||
ViewChild, |
|||
ViewContainerRef, |
|||
} from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
} from '@angular/forms'; |
|||
import { |
|||
AggFunctionTranslations, |
|||
AggInputTypeTranslations, |
|||
CalculatedFieldAggMetric, |
|||
CalculatedFieldAggMetricValue, |
|||
} from '@shared/models/calculated-field.models'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { isDefinedAndNotNull, isEqual } from '@core/utils'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { TbTableDatasource } from '@shared/components/table/table-datasource.abstract'; |
|||
import { MatSort, SortDirection } from '@angular/material/sort'; |
|||
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { |
|||
CalculatedFieldMetricsPanelComponent |
|||
} from '@home/components/calculated-fields/components/related-entities-aggregation-configuration/calculated-field-metrics-panel.component'; |
|||
import { TbEditorCompleter } from '@shared/models/ace/completion.models'; |
|||
import { AceHighlightRules } from '@shared/models/ace/ace.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-metrics-table', |
|||
templateUrl: './calculated-field-metrics-table.component.html', |
|||
styleUrls: [`calculated-field-metrics-table.component.scss`], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => CalculatedFieldMetricsTableComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => CalculatedFieldMetricsTableComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
}) |
|||
export class CalculatedFieldMetricsTableComponent implements ControlValueAccessor, Validator, AfterViewInit { |
|||
|
|||
@Input() arguments: Array<string>; |
|||
@Input() editorCompleter: TbEditorCompleter; |
|||
@Input() highlightRules: AceHighlightRules; |
|||
|
|||
@ViewChild(MatSort, { static: true }) sort: MatSort; |
|||
|
|||
errorText = ''; |
|||
metricsFormArray = this.fb.array<CalculatedFieldAggMetricValue>([]); |
|||
sortOrder = { direction: 'asc' as SortDirection, property: '' }; |
|||
dataSource = new CalculatedFieldMetricsDatasource(); |
|||
|
|||
displayColumns = ['name', 'function', 'filter', 'valueSource', 'actions'] |
|||
|
|||
readonly AggFunctionTranslations = AggFunctionTranslations; |
|||
readonly AggInputTypeTranslations = AggInputTypeTranslations; |
|||
readonly maxArgumentsPerCF = getCurrentAuthState(this.store).maxArgumentsPerCF - 2; |
|||
|
|||
private popoverComponent: TbPopoverComponent<CalculatedFieldMetricsPanelComponent>; |
|||
private propagateChange: (zonesObj: Record<string, CalculatedFieldAggMetric>) => void = () => {}; |
|||
|
|||
constructor( |
|||
private fb: FormBuilder, |
|||
private popoverService: TbPopoverService, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private cd: ChangeDetectorRef, |
|||
private renderer: Renderer2, |
|||
private destroyRef: DestroyRef, |
|||
private store: Store<AppState> |
|||
) { |
|||
this.metricsFormArray.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => { |
|||
this.updateDataSource(value); |
|||
this.propagateChange(this.getMetricsObject(value)); |
|||
}); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
this.sort.sortChange.asObservable().pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.sortOrder.property = this.sort.active; |
|||
this.sortOrder.direction = this.sort.direction; |
|||
this.updateDataSource(this.metricsFormArray.value); |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: (zonesObj: Record<string, CalculatedFieldAggMetric>) => void): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void {} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
this.updateErrorText(); |
|||
return this.errorText ? { metricsFormArray: false } : null; |
|||
} |
|||
|
|||
onDelete($event: Event, metric: CalculatedFieldAggMetricValue): void { |
|||
$event.stopPropagation(); |
|||
const index = this.metricsFormArray.controls.findIndex(control => isEqual(control.value, metric)); |
|||
this.metricsFormArray.removeAt(index); |
|||
this.metricsFormArray.markAsDirty(); |
|||
} |
|||
|
|||
manageMetrics($event: Event, matButton: MatButton, metric = {} as CalculatedFieldAggMetricValue): void { |
|||
$event?.stopPropagation(); |
|||
if (this.popoverComponent && !this.popoverComponent.tbHidden) { |
|||
this.popoverComponent.hide(); |
|||
} |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const index = this.metricsFormArray.controls.findIndex(control => isEqual(control.value, metric)); |
|||
const isExists = index !== -1; |
|||
const ctx = { |
|||
index, |
|||
metric, |
|||
buttonTitle: isExists ? 'action.apply' : 'action.add', |
|||
usedNames: this.metricsFormArray.value.map(({ name }) => name).filter(name => name !== metric.name), |
|||
arguments: this.arguments, |
|||
editorCompleter: this.editorCompleter, |
|||
highlightRules: this.highlightRules |
|||
}; |
|||
this.popoverComponent = this.popoverService.displayPopover({ |
|||
trigger, |
|||
renderer: this.renderer, |
|||
componentType: CalculatedFieldMetricsPanelComponent, |
|||
hostView: this.viewContainerRef, |
|||
preferredPlacement: isExists ? ['leftOnly', 'leftTopOnly', 'leftBottomOnly'] : ['rightOnly', 'rightTopOnly', 'rightBottomOnly'], |
|||
context: ctx, |
|||
isModal: true |
|||
}); |
|||
this.popoverComponent.tbComponentRef.instance.metricDataApplied.subscribe((value) => { |
|||
this.popoverComponent.hide(); |
|||
if (isExists) { |
|||
this.metricsFormArray.at(index).setValue(value); |
|||
} else { |
|||
this.metricsFormArray.push(this.fb.control(value)); |
|||
} |
|||
this.cd.markForCheck(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private updateDataSource(value: CalculatedFieldAggMetricValue[]): void { |
|||
const sortedValue = this.sortData(value); |
|||
this.dataSource.loadData(sortedValue); |
|||
} |
|||
|
|||
private updateErrorText(): void { |
|||
if (!this.metricsFormArray.controls.length) { |
|||
this.errorText = 'calculated-fields.metrics.metrics-empty'; |
|||
} else { |
|||
this.errorText = ''; |
|||
} |
|||
} |
|||
|
|||
private getMetricsObject(value: CalculatedFieldAggMetricValue[]): Record<string, CalculatedFieldAggMetric> { |
|||
return value.reduce((acc, metricValue) => { |
|||
const { name, ...metric } = metricValue; |
|||
acc[name] = metric; |
|||
return acc; |
|||
}, {} as Record<string, CalculatedFieldAggMetric>); |
|||
} |
|||
|
|||
writeValue(metrics: Record<string, CalculatedFieldAggMetric>): void { |
|||
this.metricsFormArray.clear(); |
|||
this.populateZonesFormArray(metrics); |
|||
} |
|||
|
|||
private populateZonesFormArray(metrics: Record<string, CalculatedFieldAggMetric>): void { |
|||
Object.keys(metrics).forEach(key => { |
|||
const value: CalculatedFieldAggMetricValue = { |
|||
...metrics[key], |
|||
name: key |
|||
}; |
|||
this.metricsFormArray.push(this.fb.control(value), { emitEvent: false }); |
|||
}); |
|||
this.metricsFormArray.updateValueAndValidity(); |
|||
} |
|||
|
|||
private getSortValue(metric: CalculatedFieldAggMetricValue, column: string): string { |
|||
switch (column) { |
|||
case 'function': |
|||
return metric.function; |
|||
case 'filter': |
|||
return isDefinedAndNotNull(metric.filter).toString(); |
|||
default: |
|||
return metric.name; |
|||
} |
|||
} |
|||
|
|||
private sortData(data: CalculatedFieldAggMetricValue[]): CalculatedFieldAggMetricValue[] { |
|||
return data.sort((a, b) => { |
|||
const valA = this.getSortValue(a, this.sortOrder.property) ?? ''; |
|||
const valB = this.getSortValue(b, this.sortOrder.property) ?? ''; |
|||
return (this.sortOrder.direction === 'asc' ? 1 : -1) * valA.localeCompare(valB); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
class CalculatedFieldMetricsDatasource extends TbTableDatasource<CalculatedFieldAggMetricValue> { |
|||
constructor() { |
|||
super(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue