From ebffe261084e1f5e14083a3b81fad3439ce705ee Mon Sep 17 00:00:00 2001 From: ArtemDzhereleiko Date: Mon, 1 Dec 2025 19:24:41 +0200 Subject: [PATCH] UI: Bug-fixes and add validation for alarm rules --- ui-ngx/src/app/core/services/menu.models.ts | 2 +- .../alarm-rule-details-dialog.component.html | 4 +- .../alarm-rule-dialog.component.html | 48 +++---- .../alarm-rule-filter-config.component.html | 4 +- .../alarm-rules/alarm-rules-table-config.ts | 6 +- ...alarm-rule-condition-dialog.component.html | 47 ++++++- ...f-alarm-rule-condition-dialog.component.ts | 129 ++++++++++++++++-- .../cf-alarm-rule-condition.component.html | 11 +- .../cf-alarm-rule-condition.component.ts | 74 +++++++++- .../alarm-rules/cf-alarm-rule.component.html | 6 +- .../cf-alarm-rules-dialog.component.scss | 5 + .../cf-alarm-schedule.component.ts | 2 +- ...lex-filter-predicate-dialog.component.html | 33 +++-- ...mplex-filter-predicate-dialog.component.ts | 13 +- .../alarm-rule-filter-dialog.component.html | 4 +- .../alarm-rule-filter-dialog.component.ts | 51 +++++-- .../alarm-rule-filter-list.component.html | 32 +++-- .../alarm-rule-filter-list.component.scss | 13 +- .../alarm-rule-filter-list.component.ts | 30 ++++ ...-rule-filter-predicate-list.component.html | 16 ++- ...-rule-filter-predicate-list.component.scss | 3 +- ...ilter-predicate-no-data-value.component.ts | 9 +- ...m-rule-filter-predicate-value.component.ts | 9 +- ...alarm-rule-filter-predicate.component.html | 2 +- .../alarm-rule-filter-predicate.component.ts | 36 +++++ .../alarm-rule-filter-text.component.html | 1 + .../alarm-rule-filter-text.component.scss | 3 + .../alarm-rule-filter-text.component.ts | 2 +- ...y-aggregation-arguments-table.component.ts | 1 + .../propagate-arguments-table.component.ts | 2 +- ...d-aggregation-arguments-table.component.ts | 3 +- .../propagation-configuration.component.html | 2 +- .../simple-configuration.component.ts | 2 +- ...entity-types-version-create.component.html | 4 +- .../vc/entity-types-version.component.scss | 11 ++ .../home/pages/alarm/alarm-routing.module.ts | 2 +- .../app/shared/models/alarm-rule.models.ts | 7 + ui-ngx/src/app/shared/models/vc.models.ts | 2 +- .../assets/locale/locale.constant-en_US.json | 50 ++++--- 39 files changed, 535 insertions(+), 146 deletions(-) diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts index 8909663771..555717ffc0 100644 --- a/ui-ngx/src/app/core/services/menu.models.ts +++ b/ui-ngx/src/app/core/services/menu.models.ts @@ -510,7 +510,7 @@ export const menuSectionMap = new Map([ MenuId.alarms, { id: MenuId.alarms, - name: 'alarm.alarms', + name: 'alarm.alarm-list', type: 'link', path: '/alarms/alarms', icon: 'mdi:alert-outline' diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html index 9e5036f6ff..97bd25836a 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-details-dialog.component.html @@ -27,8 +27,10 @@ - +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html index b734757144..20bd3e1bde 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-dialog.component.html @@ -130,30 +130,32 @@ {{ 'alarm-rule.advanced-settings' | translate }} -
- - {{ 'alarm-rule.propagate-alarm' | translate }} - +
+
+ + {{ 'alarm-rule.propagate-alarm' | translate }} + +
+ @if (configFormGroup.get('propagate').value) { + + alarm-rule.alarm-rule-relation-types-list + + + {{key}} + close + + + + + + }
- @if (configFormGroup.get('propagate').value) { - - alarm-rule.alarm-rule-relation-types-list - - - {{key}} - close - - - - - - }
{{ 'alarm-rule.propagate-alarm-to-owner' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html index a71874c13c..5deddffd87 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/alarm-rule-filter-config.component.html @@ -66,7 +66,7 @@
-
alarm-rule.entity-type
+
alarm-rule.target-entity-type
{{ 'alarm-rule.any-type' | translate }} @@ -78,7 +78,7 @@
@if (alarmRuleFilterConfigForm.get('entityType').value) {
-
alarm-rule.alarm-rule-entity-list
+
alarm-rule.target-entities
{ this.columns.push(new EntityTableColumn('name', 'alarm-rule.alarm-type', this.pageMode ? '30%' :'33%', entity => this.utilsService.customTranslation(entity.name, entity.name))); if (this.pageMode) { - this.columns.push(new EntityTableColumn('entityType', 'alarm-rule.entity-type', '15%', + this.columns.push(new EntityTableColumn('entityType', 'alarm-rule.target-entity-type', '15%', entity => this.translate.instant(entityTypeTranslations.get(entity.entityId.entityType).type))); - this.columns.push(new EntityLinkTableColumn('entityName', 'alarm-rule.entity-name', '30%', + this.columns.push(new EntityLinkTableColumn('entityName', 'alarm-rule.target-entity', '30%', entity => this.utilsService.customTranslation(entity['entityName'], entity['entityName']), entity => getEntityDetailsPageURL(entity.entityId?.id, entity.entityId?.entityType as EntityType), false)); } this.columns.push(new EntityTableColumn('createRule', 'alarm-rule.severities', this.pageMode ? '15%' :'67%', entity => Object.keys(entity.configuration.createRules).map((severity) => this.translate.instant(alarmSeverityTranslations.get(severity as AlarmSeverity))).join(', '), () => ({}), false)); - this.columns.push(new EntityTableColumn('clearRule', 'alarm-rule.cleared', '70px', + this.columns.push(new EntityTableColumn('clearRule', 'alarm-rule.cleared', '90px', entity => checkBoxCell(!!entity.configuration.clearRule), ()=> { return {padding: 0, textAlign: 'center'}}, false)); this.cellActionDescriptors.push( diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html index 8116431757..d67cd51a9a 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.html @@ -90,6 +90,34 @@
}
+ + @if (conditionFormGroup.get('expression.type').value === AlarmRuleExpressionType.SIMPLE) { +
+ + + {{ 'alarm-rule.filter-preview' | translate }} + + +
+ @if (specText) { + {{ specText }} + } + @if (conditionFormGroup.get('expression.filters').value?.length) { + + + } @else { + {{ 'alarm-rule.no-filter-preview' | translate }} + } +
+ + +
+ } +
{{ 'alarm-rule.condition-settings' | translate }}
@@ -150,7 +178,7 @@
- +
@@ -166,9 +194,8 @@ @if (!readonly) { } @@ -190,6 +217,9 @@ } @else if (conditionFormGroup.get(groupName).get('staticValue').hasError('pattern')) { {{ defaultValuePatternError | translate }} } + @if (type === AlarmConditionType.REPEATING) { + alarm-rule.condition-repeating-value-hint + } @@ -202,9 +232,14 @@ {{ argument }} } - - {{ 'calculated-fields.hint.argument-name-required' | translate }} - + @if (conditionFormGroup.get(groupName).get('dynamicValueArgument').hasError('required')) { + + {{ 'calculated-fields.hint.argument-name-required' | translate }} + + } + @if (type === AlarmConditionType.REPEATING) { + alarm-rule.condition-repeating-value-hint + } diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.ts index 3454903b55..f565a66168 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition-dialog.component.ts @@ -24,14 +24,6 @@ import { DialogComponent } from '@app/shared/components/dialog.component'; import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ScriptLanguage } from "@shared/models/rule-node.models"; -import { - AlarmRuleCondition, - AlarmRuleConditionType, - AlarmRuleConditionTypeTranslationMap, - alarmRuleDefaultScript, - AlarmRuleExpressionType, - AlarmRuleFilter -} from "@shared/models/alarm-rule.models"; import { CalculatedFieldArgument, getCalculatedFieldArgumentsEditorCompleter, @@ -39,8 +31,18 @@ import { } from "@shared/models/calculated-field.models"; import { TbEditorCompleter } from "@shared/models/ace/completion.models"; import { AceHighlightRules } from "@shared/models/ace/ace.models"; -import { ComplexOperation, complexOperationTranslationMap } from "@shared/models/query/query.models"; +import { ComplexOperation } from "@shared/models/query/query.models"; import { Observable } from "rxjs"; +import { TranslateService } from "@ngx-translate/core"; +import { + AlarmRuleCondition, + AlarmRuleConditionType, + AlarmRuleConditionTypeTranslationMap, + alarmRuleDefaultScript, + AlarmRuleExpressionType, + AlarmRuleFilter, + filterOperationTranslationMap +} from "@shared/models/alarm-rule.models"; export interface CfAlarmRuleConditionDialogData { readonly: boolean; @@ -97,7 +99,11 @@ export class CfAlarmRuleConditionDialogComponent extends DialogComponent(false); ComplexOperation = ComplexOperation; - complexOperationTranslationMap = complexOperationTranslationMap; + complexOperationTranslationMap = filterOperationTranslationMap; + + specText = ''; + + filtersValid: boolean = false; functionArgs: Array; argumentsEditorCompleter: TbEditorCompleter; @@ -112,7 +118,8 @@ export class CfAlarmRuleConditionDialogComponent extends DialogComponent, - private fb: FormBuilder) { + private fb: FormBuilder, + private translate: TranslateService) { super(store, router, dialogRef); this.functionArgs = ['ctx', ...Object.keys(this.data.arguments)]; @@ -131,28 +138,37 @@ export class CfAlarmRuleConditionDialogComponent extends DialogComponent { - this.updateValidators(type, true); + this.updateValidators(type); }); + this.conditionFormGroup.valueChanges.pipe( + takeUntilDestroyed() + ).subscribe((value) => { + this.updateSpecText(value.type); + }) + this.conditionFormGroup.get('expression.filters').valueChanges.pipe( takeUntilDestroyed() ).subscribe((filters) => { + this.filtersValid = this.areFilterAndPredicateArgumentsValid(filters, this.argumentsList); this.checkIsNoData(filters); }); @@ -175,6 +191,7 @@ export class CfAlarmRuleConditionDialogComponent extends DialogComponent 0) { + this.specText = this.specText + ':'; + } + } + cancel(): void { this.dialogRef.close(null); } diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.html index 0b722b4ec1..638075849f 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.html @@ -21,7 +21,7 @@
{{ 'alarm-rule.schedule-title' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.ts b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.ts index 543b0a86dc..6f17aa8b59 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.ts @@ -14,8 +14,9 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, forwardRef, Input } from '@angular/core'; +import { ChangeDetectorRef, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'; import { + AbstractControl, ControlValueAccessor, FormBuilder, NG_VALIDATORS, @@ -68,7 +69,7 @@ import { Observable } from "rxjs"; } ] }) -export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Validator { +export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Validator, OnChanges { @Input() @coerceBoolean() @@ -96,11 +97,15 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali specText = ''; + filtersArgumentsValid: boolean = true; + schedulerArgumentsValid: boolean = true; + scheduleText = ''; private modelValue: AlarmRuleCondition; private propagateChange = (v: any) => { }; + private onValidatorChange = () => { }; constructor(private dialog: MatDialog, private fb: FormBuilder, @@ -115,6 +120,10 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali registerOnTouched(fn: any): void { } + registerOnValidatorChange(fn: () => void): void { + this.onValidatorChange = fn; + } + setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; if (this.disabled) { @@ -127,14 +136,68 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali writeValue(value: AlarmRuleCondition): void { this.modelValue = value; this.updateConditionInfo(); + if (value) { + this.onValidatorChange(); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (changes.arguments) { + if (changes.arguments && !changes.arguments.firstChange && this.modelValue) { + this.onValidatorChange(); + } + } + } + + private isScheduleArgumentValid(obj: any, validArguments: string[]): boolean { + const arg = obj?.schedule?.dynamicValueArgument; + return !arg || validArguments.includes(arg); + } + + private areFilterAndPredicateArgumentsValid(obj: any, validArguments: string[]): boolean { + const validSet = new Set(validArguments); + const filters = obj?.expression?.filters || obj?.filters || []; + for (const filter of filters) { + if (filter.argument && !validSet.has(filter.argument)) { + return false; + } + } + function checkPredicates(predicates: any[]): boolean { + for (const p of predicates) { + if (p.value?.dynamicValueArgument) { + if (!validSet.has(p.value.dynamicValueArgument)) { + return false; + } + } + if (p.type === 'COMPLEX' && Array.isArray(p.predicates)) { + if (!checkPredicates(p.predicates)) { + return false; + } + } + } + return true; + } + for (const filter of filters) { + if (Array.isArray(filter.predicates)) { + if (!checkPredicates(filter.predicates)) { + return false; + } + } + } + return true; } public conditionSet() { return this.modelValue && (this.modelValue.expression?.expression || this.modelValue.expression?.filters); } - public validate(): ValidationErrors | null { - return this.conditionSet() ? null : { + public validate(control: AbstractControl): ValidationErrors | null { + this.filtersArgumentsValid = this.areFilterAndPredicateArgumentsValid(this.modelValue, Object.keys(this.arguments)); + this.schedulerArgumentsValid = this.isScheduleArgumentValid(this.modelValue, Object.keys(this.arguments)); + this.onValidatorChange = () => { + control.updateValueAndValidity({ emitEvent: true }); + }; + return this.conditionSet() && this.filtersArgumentsValid && this.schedulerArgumentsValid ? null : { alarmRuleCondition: { valid: false, } @@ -226,6 +289,9 @@ export class CfAlarmRuleConditionComponent implements ControlValueAccessor, Vali private updateModel() { this.updateConditionInfo(); this.propagateChange(this.modelValue); + if (this.modelValue) { + this.onValidatorChange(); + } } public openScheduleDialog($event: Event) { diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html index 38e0bd8023..a9f4ad61a5 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule.component.html @@ -20,11 +20,11 @@ @if (!disabled || alarmRuleFormGroup.get('alarmDetails').value) {
-
+
alarm-rule.alarm-rule-additional-info
- +
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rules-dialog.component.scss b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rules-dialog.component.scss index b66573f417..6253aa9a4b 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rules-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rules-dialog.component.scss @@ -20,6 +20,11 @@ display: grid; grid-template-rows: min-content minmax(auto, 1fr) min-content; } + + .spec-text { + font-size: 14px; + color: rgba(0, 0, 0, 0.54); + } } .tbel-script-lang-chip { line-height: 20px; diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.ts b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.ts index b1c7a4da7f..a4572629e0 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-schedule.component.ts @@ -171,7 +171,7 @@ export class CfAlarmScheduleComponent implements ControlValueAccessor, Validator if (value) { this.modelValue = value; if (this.modelValue.dynamicValueArgument) { - this.alarmScheduleForm.get('dynamicValueArgument').patchValue(this.modelValue.dynamicValueArgument, {emitEvent: false}); + this.alarmScheduleForm.get('dynamicValueArgument').patchValue(Object.keys(this.arguments).includes(this.modelValue.dynamicValueArgument) ? this.modelValue.dynamicValueArgument : null, {emitEvent: false}); } else { switch (this.modelValue.staticValue.type) { case AlarmRuleScheduleType.SPECIFIC_TIME: diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html index 75bce37a80..c0c5a72d77 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-complex-filter-predicate-dialog.component.html @@ -25,20 +25,25 @@
- - filter.operation.operation - - - {{complexOperationTranslations.get(complexOperationEnum[operation]) | translate}} - - - - - +
+
+
+ {{ 'alarm-rule.filters' | translate }} +
+ + {{ complexOperationTranslations.get(complexOperationEnum.AND) | translate }} + {{ complexOperationTranslations.get(complexOperationEnum.OR) | translate }} + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.ts index 0858fd90ae..3f86bdbe04 100644 --- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-dialog.component.ts @@ -21,18 +21,18 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { DialogComponent } from '@app/shared/components/dialog.component'; - import { - ComplexOperation, - complexOperationTranslationMap, - EntityKeyValueType, - entityKeyValueTypesMap - } from '@shared/models/query/query.models'; + import { ComplexOperation, EntityKeyValueType, entityKeyValueTypesMap } from '@shared/models/query/query.models'; import { DialogService } from '@core/services/dialog.service'; import { TranslateService } from '@ngx-translate/core'; - import { AlarmRuleFilter, AlarmRuleFilterPredicate } from "@shared/models/alarm-rule.models"; + import { + AlarmRuleFilter, + AlarmRuleFilterPredicate, + filterOperationTranslationMap + } from "@shared/models/alarm-rule.models"; import { CalculatedFieldArgument } from "@shared/models/calculated-field.models"; import { FormControlsFrom } from "@shared/models/tenant.model"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; + import { isDefinedAndNotNull } from "@core/utils"; export interface AlarmRuleFilterDialogData { filter: AlarmRuleFilter; @@ -57,7 +57,9 @@ export class AlarmRuleFilterDialogComponent extends DialogComponent { + this.predicatesValid = this.isPredicateArgumentsValid(predicates); + }); + this.filterFormGroup.get('valueType').valueChanges.pipe( takeUntilDestroyed(this.destroyRef) ).subscribe((valueType: EntityKeyValueType) => { @@ -106,6 +116,31 @@ export class AlarmRuleFilterDialogComponent extends DialogComponent
-
{{ filterControl.value?.argument }}
-
{{ FilterPredicateTypeTranslationMap.get(filterControl.value?.valueType) | translate }}
-
+
{{ FilterPredicateTypeTranslationMap.get(filterControl.value?.valueType) | translate }}
+ @@ -62,14 +69,15 @@ }
} - - filter.no-key-filters - + @if (!filtersFormArray.length) { + + alarm-rule.no-filter + + + }
- -