From a302451a5bd77f3edecffc575525e2648c2de496 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 26 Feb 2025 16:28:28 +0200
Subject: [PATCH] UI: Trigger settings to persent

---
 .../rule-notification-dialog.component.html   | 32 +++++++++----------
 .../rule-notification-dialog.component.scss   |  2 +-
 .../rule-notification-dialog.component.ts     | 27 ++++++++++++----
 .../app/shared/models/notification.models.ts  |  8 ++++-
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index 028796f470..0951acfea8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
index 5e495655f1..9f1221cad5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
+++ b/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%;
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.ts
index 1ea55ed106..e0ddefcbe8 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.ts
+++ b/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)]],
-        ramThreshold: [.8, [Validators.min(0), Validators.max(1)]],
-        storageThreshold: [.8, [Validators.min(0), Validators.max(1)]]
+        cpuThreshold: [80, [Validators.min(0), Validators.max(100)]],
+        ramThreshold: [80, [Validators.min(0), Validators.max(100)]],
+        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 `${formatValue}%`;
+    return `${value}%`;
   }
 
   private isSysAdmin(): boolean {
diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts
index 369bc08c15..63d7edd2a2 100644
--- a/ui-ngx/src/app/shared/models/notification.models.ts
+++ b/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[];