@ -19,12 +19,6 @@
< mat-toolbar color = "primary" > < mat-toolbar color = "primary" >
< h2 > {{ (readonly ? 'alarm-rule.alarm-rule-condition' : 'alarm-rule.edit-alarm-rule-condition') | translate }}< / h2 > < h2 > {{ (readonly ? 'alarm-rule.alarm-rule-condition' : 'alarm-rule.edit-alarm-rule-condition') | translate }}< / h2 >
< span class = "flex-1" > < / span > < span class = "flex-1" > < / span >
< div formGroupName = "expression" class = "flex flex-row items-center justify-start gt-xs:gap-4" style = "min-width: fit-content;" >
< tb-toggle-select formControlName = "type" appearance = "fill-invert" selectMediaBreakpoint = "xs" >
< tb-toggle-option [ value ] = " AlarmRuleExpressionType . SIMPLE " > {{ 'alarm-rule.expression-type.simple' | translate }}< / tb-toggle-option >
< tb-toggle-option [ value ] = " AlarmRuleExpressionType . TBEL " > {{ 'alarm-rule.expression-type.script' | translate }}< / tb-toggle-option >
< / tb-toggle-select >
< / div >
< button mat-icon-button < button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -33,105 +27,116 @@
< / mat-toolbar > < / mat-toolbar >
< div mat-dialog-content > < div mat-dialog-content >
< div class = "tb-form-panel no-padding no-border" > < div class = "tb-form-panel no-padding no-border" >
< div class = "flex flex-1 flex-col" formGroupName = "expression" > < div class = "tb-form-panel stroked" >
@if (conditionFormGroup.get('expression.type').value === AlarmRuleExpressionType.SIMPLE) { < div class = "flex flex-row items-center justify-between" formGroupName = "expression" >
< div class = "tb-form-panel" > < div class = "tb-form-panel-title" > {{ 'alarm-rule.mode' | translate }}< / div >
< div class = "flex flex-row items-center justify-between" > < tb-toggle-select formControlName = "type" selectMediaBreakpoint = "xs" >
< div class = "tb-form-panel-title" > {{ 'alarm-rule.argument-filters' | translate }}< / div > < tb-toggle-option [ value ] = " AlarmRuleExpressionType . SIMPLE " > {{ 'alarm-rule.expression-type.simple' | translate }}< / tb-toggle-option >
< tb-toggle-select formControlName = "operation" < tb-toggle-option [ value ] = " AlarmRuleExpressionType . TBEL " > {{ 'alarm-rule.expression-type.script' | translate }}< / tb-toggle-option >
selectMediaBreakpoint="xs"> < / tb-toggle-select >
< tb-toggle-option [ value ] = " ComplexOperation . AND " > {{ complexOperationTranslationMap.get(ComplexOperation.AND) | translate }}< / tb-toggle-option > < / div >
< tb-toggle-option [ value ] = " ComplexOperation . OR " > {{ complexOperationTranslationMap.get(ComplexOperation.OR) | translate }}< / tb-toggle-option > < div class = "tb-form-panel no-padding no-border" >
< / tb-toggle-select > < div class = "flex flex-1 flex-col" formGroupName = "expression" >
< / div > @if (conditionFormGroup.get('expression.type').value === AlarmRuleExpressionType.SIMPLE) {
< tb-alarm-rule-filter-list < div class = "tb-form-panel stroked" >
[operation]="conditionFormGroup.get('expression.operation').value" < div class = "flex flex-row items-center justify-between" >
[arguments]="arguments" < div class = "tb-form-panel-title" > {{ 'alarm-rule.argument-filters' | translate }}< / div >
formControlName="filters"> < tb-toggle-select formControlName = "operation"
< / tb-alarm-rule-filter-list > selectMediaBreakpoint="xs">
< / div > < tb-toggle-option [ value ] = " ComplexOperation . AND " > {{ complexOperationTranslationMap.get(ComplexOperation.AND) | translate }}< / tb-toggle-option >
} @else { < tb-toggle-option [ value ] = " ComplexOperation . OR " > {{ complexOperationTranslationMap.get(ComplexOperation.OR) | translate }}< / tb-toggle-option >
< div class = "tb-form-panel no-gap" > < / tb-toggle-select >
< div class = "tb-form-panel-title tb-required" > < / div >
{{ 'alarm-rule.script' | translate }} < tb-alarm-rule-filter-list
< / div > [operation]="conditionFormGroup.get('expression.operation').value"
< tb-js-func formControlName = "expression" [arguments]="arguments"
functionName="expression" formControlName="filters">
class="tb-alarm-rule-script" < / tb-alarm-rule-filter-list >
[disableUndefinedCheck]="true"
[scriptLanguage]="scriptLanguage.TBEL"
[functionArgs]="functionArgs"
[highlightRules]="argumentsHighlightRules"
[editorCompleter]="argumentsEditorCompleter"
noValidate="true"
[helpPopupStyle]="{ width: '1200px' }"
helpId="alarm-rule/expression_fn">
< div toolbarPrefixButton
class="tb-primary-background tbel-script-lang-chip">{{ 'alarm-rule.tbel' | translate }}
< / div > < / div >
< button toolbarSuffixButton } @else {
mat-icon-button < div class = "tb-form-panel no-gap stroked" >
matTooltip="{{ 'calculated-fields.test-script-function' | translate }}" < div class = "tb-form-panel-title tb-required" >
matTooltipPosition="above" {{ 'alarm-rule.script' | translate }}
class="tb-mat-32" < / div >
[disabled]="!argumentsList.length" < tb-js-func formControlName = "expression"
(click)="onTestScript($event)"> functionName="expression"
< mat-icon class = "material-icons" color = "primary" > bug_report< / mat-icon > class="tb-alarm-rule-script"
< / button > [disableUndefinedCheck]="true"
< / tb-js-func > [scriptLanguage]="scriptLanguage.TBEL"
< div > [functionArgs]="functionArgs"
< button mat-button mat-raised-button color = "primary" [highlightRules]="argumentsHighlightRules"
type="button" [editorCompleter]="argumentsEditorCompleter"
(click)="onTestScript($event)" noValidate="true"
[disabled]="!argumentsList.length"> [helpPopupStyle]="{ width: '1200px' }"
{{ 'calculated-fields.test-script-function' | translate }} helpId="alarm-rule/expression_fn">
< / button > < div toolbarPrefixButton
< / div > class="tb-primary-background tbel-script-lang-chip">{{ 'alarm-rule.tbel' | translate }}
< / div >
< button toolbarSuffixButton
mat-icon-button
matTooltip="{{ 'calculated-fields.test-script-function' | translate }}"
matTooltipPosition="above"
class="tb-mat-32"
[disabled]="!argumentsList.length"
(click)="onTestScript($event)">
< mat-icon class = "material-icons" color = "primary" > bug_report< / mat-icon >
< / button >
< / tb-js-func >
< div >
< button mat-button mat-raised-button color = "primary"
type="button"
(click)="onTestScript($event)"
[disabled]="!argumentsList.length">
{{ 'calculated-fields.test-script-function' | translate }}
< / button >
< / div >
< / div >
}
< / div > < / div >
}
< / div >
@if (conditionFormGroup.get('expression.type').value === AlarmRuleExpressionType.SIMPLE) { @if (conditionFormGroup.get('expression.type').value === AlarmRuleExpressionType.SIMPLE) {
< div class = "tb-form-panel no-gap" > < div class = "tb-form-panel no-gap stroked" >
< mat-expansion-panel class = "tb-settings" [ expanded ] = " true " > < mat-expansion-panel class = "tb-settings" [ expanded ] = " true " >
< mat-expansion-panel-header > < mat-expansion-panel-header >
{{ 'alarm-rule.filter-preview' | translate }} {{ 'alarm-rule.filter-preview' | translate }}
< / mat-expansion-panel-header > < / mat-expansion-panel-header >
< ng-template matExpansionPanelContent > < ng-template matExpansionPanelContent >
< div > < div >
@if (specText) { @if (specText) {
< span class = "spec-text" > {{ specText }}< / span > < span class = "spec-text" > {{ specText }}< / span >
} }
@if (conditionFormGroup.get('expression.filters').value?.length) { @if (conditionFormGroup.get('expression.filters').value?.length) {
< tb-alarm-rule-filter-text [ alarmRuleExpression ] = " conditionFormGroup . get ( ' expression ' ) . value " < tb-alarm-rule-filter-text [ alarmRuleExpression ] = " conditionFormGroup . get ( ' expression ' ) . value "
[arguments]="arguments" [arguments]="arguments"
class="flex-1" class="flex-1"
[nowrap]="false" [nowrap]="false"
required> required>
< / tb-alarm-rule-filter-text > < / tb-alarm-rule-filter-text >
} @else { } @else {
< span class = "tb-prompt justify-center" > {{ 'alarm-rule.no-filter-preview' | translate }}< / span > < span class = "tb-prompt text-base justify-center" > {{ 'alarm-rule.no-filter-preview' | translate }}< / span >
} }
< / div > < / div >
< / ng-template > < / ng-template >
< / mat-expansion-panel > < / mat-expansion-panel >
< / div > < / div >
} }
< / div >
< / div >
< section class = "tb-form-panel" > < section class = "tb-form-panel stroked" >
< div class = "tb-form-panel-title" > {{ 'alarm-rule.condition-settings' | translate }}< / div > < div class = "flex flex-row items-center justify-between" >
< mat-form-field class = "mat-block" hideRequiredMarker appearance = "outline" subscriptSizing = "dynamic" > < div class = "tb-form-panel-title" > {{ 'alarm-rule.type' | translate }}< / div >
< mat-label translate > alarm-rule.condition-type< / mat-label > < tb-toggle-select formControlName = "type" selectMediaBreakpoint = "xs" [ disabled ] = " isNoData " >
< mat-select formControlName = "type" required > < tb-toggle-option * ngFor = "let alarmConditionType of alarmConditionTypes" [ value ] = " alarmConditionType " >
< mat-option * ngFor = "let alarmConditionType of alarmConditionTypes" [ value ] = " alarmConditionType "
[disabled]="isNoData ? alarmConditionType === AlarmConditionType.REPEATING || alarmConditionType === AlarmConditionType.DURATION : false">
{{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }} {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }}
< / mat-option > < / tb-toggle-option >
< / mat-select > < / tb-toggle-select >
@if (isNoData) { < / div >
< mat-hint translate > alarm-rule.condition-type-hint< / mat-hint > @if (isNoData) {
} < div class = "tb-form-hint tb-primary-fill max-args-warning flex items-center gap-2" >
< / mat-form-field > < span > {{ 'alarm-rule.condition-type-hint' | translate }}< / span >
< / div >
}
@if (conditionFormGroup.get('type').value == AlarmConditionType.DURATION) { @if (conditionFormGroup.get('type').value == AlarmConditionType.DURATION) {
< div class = "tb-form-panel stroked no-padding-bottom" > < div class = "tb-form-panel stroked no-padding-bottom" >
< div class = "flex flex-row items-center justify-between" > < div class = "flex flex-row items-center justify-between" >
ArtemDzhereleiko
10 months ago