From ec11d4174be414d7c4e0d3f6a1c1b58eaa93fcde Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 15 Mar 2023 17:26:50 +0200
Subject: [PATCH] UI: Improvement rule notification alarm

---
 .../rule-table/escalations.component.html     |  2 +-
 .../rule-notification-dialog.component.html   | 35 +++++++++++--------
 .../rule-notification-dialog.component.scss   | 15 +++++---
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html
index aff3d5f730..77db15257c 100644
--- a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/escalations.component.html
@@ -38,7 +38,7 @@
       <span translate fxLayoutAlign="center center"
             class="tb-prompt">notification.no-rule</span>
   </div>
-  <div *ngIf="!disabled" style="padding-top: 16px;">
+  <div *ngIf="!disabled" style="padding: 16px 0;">
     <button mat-raised-button color="primary"
             type="button"
             (click)="addEscalation()">
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html
index ff45dba894..ddbc21e294 100644
--- a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.html
@@ -77,10 +77,30 @@
         <ng-template #alarmTargesConfig>
           <fieldset class="fields-group tb-hierarchy" formGroupName="recipientsConfig">
             <legend translate>notification.notification-chain</legend>
+            <div class="mat-body-2" translate>notification.targets</div>
             <tb-escalations-component formControlName="escalationTable"></tb-escalations-component>
+            <ng-container *ngTemplateOutlet="clearRules"></ng-container>
           </fieldset>
         </ng-template>
       </form>
+      <ng-template #clearRules>
+        <form [formGroup]="alarmTemplateForm">
+          <section formGroupName="triggerConfig">
+            <section formGroupName="clearRule">
+              <div class="mat-body-2" translate>notification.clear-rule</div>
+              <mat-form-field fxFlex class="mat-block" floatLabel="always" style="margin-right: 48px">
+                <mat-label translate>alarm.alarm-status-list</mat-label>
+                <mat-select formControlName="alarmStatuses" multiple
+                            placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
+                  <mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
+                    {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </section>
+          </section>
+        </form>
+      </ng-template>
     </mat-step>
     <mat-step [stepControl]="alarmTemplateForm"
               *ngIf="ruleNotificationForm.get('triggerType').value === triggerType.ALARM">
@@ -97,7 +117,7 @@
               formControlName="alarmTypes">
             </tb-string-items-list>
 
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
+            <mat-form-field fxFlex class="mat-block clear-button-space" floatLabel="always">
               <mat-label translate>alarm.alarm-severity-list</mat-label>
               <mat-select formControlName="alarmSeverities" multiple
                           placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
@@ -107,19 +127,6 @@
               </mat-select>
             </mat-form-field>
           </fieldset>
-
-          <fieldset class="fields-group tb-margin-2" formGroupName="clearRule" *ngIf="countRecipientsChainConfig() > 1">
-            <legend translate>notification.clear-rule</legend>
-            <mat-form-field fxFlex class="mat-block" floatLabel="always">
-              <mat-label translate>alarm.alarm-status-list</mat-label>
-              <mat-select formControlName="alarmStatuses" multiple
-                          placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
-                <mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
-                  {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </fieldset>
         </section>
       </form>
       <form [formGroup]="ruleNotificationForm">
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss
index 51c6fae51e..f9d0d4b63d 100644
--- a/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification-center/rule-table/rule-notification-dialog.component.scss
@@ -38,10 +38,6 @@
       margin-bottom: 12px;
     }
 
-    &.tb-margin-2 {
-      margin-bottom: 24px;
-    }
-
     &.tb-hierarchy {
       padding: 0 0 8px 16px;
     }
@@ -51,6 +47,15 @@
       color: rgba(0, 0, 0, .7);
       width: fit-content;
     }
+
+    .mat-body-2 {
+      margin-bottom: 8px;
+      color: rgba(0,0,0,.76);
+    }
+
+    .clear-button-space {
+      margin-right: 48px;
+    }
   }
 
   ::ng-deep {
@@ -71,7 +76,7 @@
         }
 
         .mat-horizontal-content-container {
-          height: 550px;
+          height: 700px;
           max-height: 100%;
           width: 100%;;
           overflow-y: auto;