UI: Trigger settings to persent

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html

@@ -481,16 +481,16 @@
                                [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
           </tb-entity-type-list>
           <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
-            <label translate>notification.threshold</label>
+            <span translate>notification.threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
-              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+              <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="threshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
-                <input matInput formControlName="threshold" type="number" step="0.01"
+                <input matInput formControlName="threshold" type="number" step="1"
                        [value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value"
                        min="0"
-                       max="1"/>
+                       max="100"/>
               </mat-form-field>
             </div>
           </div>
@@ -599,44 +599,44 @@
         <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
           <legend translate>notification.filter</legend>
           <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
-            <label translate>notification.cpu-threshold</label>
+            <span translate>notification.cpu-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
-              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+              <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="cpuThreshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
-                <input matInput formControlName="cpuThreshold" type="number" step="0.01"
+                <input matInput formControlName="cpuThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value"
                        min="0"
-                       max="1"/>
+                       max="100"/>
               </mat-form-field>
             </div>
           </div>
           <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
-            <label translate>notification.ram-threshold</label>
+            <span translate>notification.ram-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
-              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+              <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="ramThreshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
-                <input matInput formControlName="ramThreshold" type="number" step="0.01"
+                <input matInput formControlName="ramThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value"
                        min="0"
-                       max="1"/>
+                       max="100"/>
               </mat-form-field>
             </div>
           </div>
           <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
-            <label translate>notification.storage-threshold</label>
+            <span translate>notification.storage-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
-              <mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
+              <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="storageThreshold">
               </mat-slider>
               <mat-form-field class="limit-slider-value">
-                <input matInput formControlName="storageThreshold" type="number" step="0.01"
+                <input matInput formControlName="storageThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value"
                        min="0"
-                       max="1"/>
+                       max="100"/>
               </mat-form-field>
             </div>
           </div>

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss

@@ -81,7 +81,7 @@
       min-width: 364px;
     }
     .limit-slider-container {
-      > label {
+      > span {
         margin-right: 16px;
         width: min-content;
         max-width: 40%;

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.ts

@@ -316,7 +316,7 @@ export class RuleNotificationDialogComponent extends
     this.entitiesLimitTemplateForm = this.fb.group({
       triggerConfig: this.fb.group({
         entityTypes: [],
-        threshold: [.8, [Validators.min(0), Validators.max(1)]]
+        threshold: [80, [Validators.min(0), Validators.max(100)]]
       })
     });
 
@@ -347,9 +347,9 @@ export class RuleNotificationDialogComponent extends
 
     this.resourceUsageShortageTemplateForm = this.fb.group({
       triggerConfig: this.fb.group({
-        cpuThreshold: [.8, [Validators.min(0), Validators.max(1)]],
+        cpuThreshold: [80, [Validators.min(0), Validators.max(100)]],
-        ramThreshold: [.8, [Validators.min(0), Validators.max(1)]],
+        ramThreshold: [80, [Validators.min(0), Validators.max(100)]],
-        storageThreshold: [.8, [Validators.min(0), Validators.max(1)]]
+        storageThreshold: [80, [Validators.min(0), Validators.max(100)]]
       })
     });
 
@@ -390,6 +390,14 @@ export class RuleNotificationDialogComponent extends
         this.deviceInactivityTemplateForm.get('triggerConfig.filterByDevice')
           .patchValue(!!this.ruleNotification.triggerConfig.devices, {onlySelf: true});
       }
+      if (this.ruleNotification.triggerType === TriggerType.ENTITIES_LIMIT) {
+        this.entitiesLimitTemplateForm.get('triggerConfig.threshold').patchValue(this.ruleNotification.triggerConfig.threshold * 100, {emitEvent: false});
+      }
+      if (this.ruleNotification.triggerType === TriggerType.RESOURCES_SHORTAGE) {
+        this.resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').patchValue(this.ruleNotification.triggerConfig.cpuThreshold * 100, {emitEvent: false});
+        this.resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').patchValue(this.ruleNotification.triggerConfig.ramThreshold * 100, {emitEvent: false});
+        this.resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').patchValue(this.ruleNotification.triggerConfig.storageThreshold * 100, {emitEvent: false});
+      }
     }
   }
 
@@ -438,6 +446,14 @@ export class RuleNotificationDialogComponent extends
       if (triggerType === TriggerType.DEVICE_ACTIVITY) {
         delete formValue.triggerConfig.filterByDevice;
       }
+      if (triggerType === TriggerType.ENTITIES_LIMIT) {
+        formValue.triggerConfig.threshold = formValue.triggerConfig.threshold / 100;
+      }
+      if (triggerType === TriggerType.RESOURCES_SHORTAGE) {
+        formValue.triggerConfig.cpuThreshold = formValue.triggerConfig.cpuThreshold / 100;
+        formValue.triggerConfig.ramThreshold = formValue.triggerConfig.ramThreshold / 100;
+        formValue.triggerConfig.storageThreshold = formValue.triggerConfig.storageThreshold / 100;
+      }
       formValue.recipientsConfig.triggerType = triggerType;
       formValue.triggerConfig.triggerType = triggerType;
       if (this.ruleNotification && !this.data.isCopy) {
@@ -493,8 +509,7 @@ export class RuleNotificationDialogComponent extends
   }
 
   formatLabel(value: number): string {
-    const formatValue = (value * 100).toFixed();
+    return `${value}%`;
-    return `${formatValue}%`;
   }
 
   private isSysAdmin(): boolean {

ui-ngx/src/app/shared/models/notification.models.ts

@@ -129,7 +129,7 @@ export interface NotificationRule extends Omit<BaseData<NotificationRuleId>, 'la
 export type NotificationRuleTriggerConfig = Partial<AlarmNotificationRuleTriggerConfig & DeviceInactivityNotificationRuleTriggerConfig &
   EntityActionNotificationRuleTriggerConfig & AlarmCommentNotificationRuleTriggerConfig & AlarmAssignmentNotificationRuleTriggerConfig &
   RuleEngineLifecycleEventNotificationRuleTriggerConfig & EntitiesLimitNotificationRuleTriggerConfig &
-  ApiUsageLimitNotificationRuleTriggerConfig & RateLimitsNotificationRuleTriggerConfig>;
+  ApiUsageLimitNotificationRuleTriggerConfig & RateLimitsNotificationRuleTriggerConfig & ResourceUsageShortageNotificationRuleTriggerConfig>;
 
 export interface AlarmNotificationRuleTriggerConfig {
   alarmTypes?: Array<string>;
@@ -183,6 +183,12 @@ export interface EntitiesLimitNotificationRuleTriggerConfig {
   threshold: number;
 }
 
+export interface ResourceUsageShortageNotificationRuleTriggerConfig {
+  cpuThreshold: number;
+  ramThreshold: number;
+  storageThreshold: number;
+}
+
 export interface ApiUsageLimitNotificationRuleTriggerConfig {
   apiFeatures: ApiFeature[];
   notifyOn: ApiUsageStateValue[];