UI: Refactoring

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

@@ -480,17 +480,18 @@
                                ignoreAuthorityFilter
                                [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
           </tb-entity-type-list>
-          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
+          <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <span translate>notification.threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
               <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">
+              <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="threshold" type="number" step="1"
                        [value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value"
                        min="0"
                        max="100"/>
+                <span class="mr-2" matSuffix>%</span>
               </mat-form-field>
             </div>
           </div>
@@ -598,45 +599,48 @@
       <form [formGroup]="resourceUsageShortageTemplateForm">
         <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">
+          <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <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="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="cpuThreshold">
               </mat-slider>
-              <mat-form-field class="limit-slider-value">
+              <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="cpuThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value"
                        min="0"
                        max="100"/>
+                <span class="mr-2" matSuffix>%</span>
               </mat-form-field>
             </div>
           </div>
-          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
+          <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <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="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="ramThreshold">
               </mat-slider>
-              <mat-form-field class="limit-slider-value">
+              <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="ramThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value"
                        min="0"
                        max="100"/>
+                <span class="mr-2" matSuffix>%</span>
               </mat-form-field>
             </div>
           </div>
-          <div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
+          <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
             <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="100" step="1" discrete [displayWith]="formatLabel">
                 <input matSliderThumb formControlName="storageThreshold">
               </mat-slider>
-              <mat-form-field class="limit-slider-value">
+              <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="storageThreshold" type="number" step="1"
                        [value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value"
                        min="0"
                        max="100"/>
+                <span class="mr-2" matSuffix>%</span>
               </mat-form-field>
             </div>
           </div>