UI: Improve dialog actions style

@@ -88,14 +88,20 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayout="row">
-    <div fxLayout="row" *ngIf="alarm$ | async; let alarm;">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="close()" cdkFocusInitial>
+      {{ 'action.close' | translate }}
+    </button>
+    <span fxFlex></span>
+    <div fxLayout="row" *ngIf="alarm$ | async; let alarm;" fxLayoutGap="8px">
       <button *ngIf="allowAcknowledgment && (alarm.status === alarmStatuses.ACTIVE_UNACK ||
                                              alarm.status === alarmStatuses.CLEARED_UNACK)"
               mat-raised-button
               color="primary"
               type="button"
               (click)="acknowledge()"
-              style="margin-right: 20px;"
               [disabled]="(isLoading$ | async)">
         {{ 'alarm.acknowledge' | translate }}
       </button>
@@ -109,12 +115,5 @@
         {{ 'alarm.clear' | translate }}
       </button>
     </div>
-    <span fxFlex></span>
-    <button mat-button color="primary"
-            type="button"
-            [disabled]="(isLoading$ | async)"
-            (click)="close()" cdkFocusInitial>
-      {{ 'action.close' | translate }}
-    </button>
   </div>
 </form>

@@ -59,16 +59,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || entityAliasFormGroup.invalid || !entityAliasFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || entityAliasFormGroup.invalid || !entityAliasFormGroup.dirty">
+      {{ (isAdd ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -95,11 +95,6 @@
       {{ 'alias.add' | translate }}
     </button>
     <span fxFlex></span>
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || entityAliasesFormGroup.invalid || !entityAliasesFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -107,5 +102,10 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || entityAliasesFormGroup.invalid || !entityAliasesFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -44,16 +44,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty">
-      {{ 'action.add' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -55,21 +55,22 @@
       </mat-radio-group>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions fxLayout="row">
     <mat-checkbox formControlName="openDashboard"
-                  style="margin-bottom: 0; padding-right: 20px;">
+                  style="margin-bottom: 0;">
       {{ 'dashboard.open-dashboard' | translate }}
     </mat-checkbox>
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || addWidgetFormGroup.invalid || !addWidgetFormGroup.dirty">
-      {{ 'action.add' | translate }}
-    </button>
+    <span fxFlex></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || addWidgetFormGroup.invalid || !addWidgetFormGroup.dirty">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -26,7 +26,6 @@
   <div fxLayout="row" class="tb-panel-actions">
     <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

@@ -40,11 +40,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || stateFormGroup.invalid">
-      {{ 'action.select' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -52,5 +47,10 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || stateFormGroup.invalid">
+      {{ 'action.select' | translate }}
+    </button>
   </div>
 </form>

@@ -31,7 +31,6 @@
 <div mat-dialog-actions fxLayout="row">
   <span fxFlex></span>
   <button mat-button color="primary"
-          style="margin-right: 20px;"
           type="button"
           [disabled]="(isLoading$ | async)"
           [mat-dialog-close]="false" cdkFocusInitial>

@@ -46,12 +46,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            *ngIf="!data.readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -59,5 +53,11 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            *ngIf="!data.readonly"
+            type="submit"
+            [disabled]="(isLoading$ | async) || complexFilterFormGroup.invalid || !complexFilterFormGroup.dirty">
+      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
+    </button>
   </div>
 </form>

@@ -55,16 +55,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || filterFormGroup.invalid || !filterFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || filterFormGroup.invalid || !filterFormGroup.dirty">
+      {{ (isAdd ? 'action.add' : 'action.update') | translate }}
+    </button>
   </div>
 </form>

@@ -46,12 +46,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            *ngIf="!data.readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || filterUserInfoFormGroup.invalid || !filterUserInfoFormGroup.dirty">
-      {{ 'action.update' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -59,5 +53,11 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            *ngIf="!data.readonly"
+            type="submit"
+            [disabled]="(isLoading$ | async) || filterUserInfoFormGroup.invalid || !filterUserInfoFormGroup.dirty">
+      {{ 'action.update' | translate }}
+    </button>
   </div>
 </form>

@@ -88,11 +88,6 @@
       {{ 'filter.add' | translate }}
     </button>
     <span fxFlex></span>
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || filtersFormGroup.invalid || !filtersFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -100,5 +95,10 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || filtersFormGroup.invalid || !filtersFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -79,12 +79,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            *ngIf="!data.readonly"
-            [disabled]="(isLoading$ | async) || keyFilterFormGroup.invalid || !keyFilterFormGroup.dirty">
-      {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -92,5 +86,11 @@
             cdkFocusInitial>
       {{ (data.readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            *ngIf="!data.readonly"
+            [disabled]="(isLoading$ | async) || keyFilterFormGroup.invalid || !keyFilterFormGroup.dirty">
+      {{ (data.isAdd ? 'action.add' : 'action.update') | translate }}
+    </button>
   </div>
 </form>

@@ -65,16 +65,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || userFilterFormGroup.invalid || !userFilterFormGroup.dirty">
-      {{ 'action.update' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || userFilterFormGroup.invalid || !userFilterFormGroup.dirty">
+      {{ 'action.update' | translate }}
+    </button>
   </div>
 </form>

@@ -43,16 +43,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || importFormGroup.invalid || !importFormGroup.dirty">
-      {{ 'action.import' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || importFormGroup.invalid || !importFormGroup.dirty">
+      {{ 'action.import' | translate }}
+    </button>
   </div>
 </form>

@@ -108,17 +108,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            *ngIf="!readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || conditionFormGroup.invalid || !conditionFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ (readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            *ngIf="!readonly"
+            type="submit"
+            [disabled]="(isLoading$ | async) || conditionFormGroup.invalid || !conditionFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -37,17 +37,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            *ngIf="!readonly"
-            type="submit"
-            [disabled]="(isLoading$ | async) || alarmScheduleFormGroup.invalid || !alarmScheduleFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ (readonly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            *ngIf="!readonly"
+            type="submit"
+            [disabled]="(isLoading$ | async) || alarmScheduleFormGroup.invalid || !alarmScheduleFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -47,9 +47,9 @@
       <mat-icon>remove_circle_outline</mat-icon>
     </button>
   </div>
-  <div *ngIf="!createAlarmRulesFormArray().controls.length">
+  <div *ngIf="!createAlarmRulesFormArray().controls.length && !disabled">
       <span translate fxLayoutAlign="center center" style="margin: 16px 0"
-            class="tb-prompt">device-profile.no-create-alarm-rules</span>
+            class="tb-prompt required">device-profile.add-create-alarm-rule-prompt</span>
   </div>
   <div fxLayout="row" *ngIf="!disabled">
     <button mat-stroked-button color="primary"

@@ -23,11 +23,11 @@ import {
   FormControl,
   FormGroup,
   NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
+  NG_VALUE_ACCESSOR, ValidationErrors,
   Validator,
   Validators
 } from '@angular/forms';
-import { AlarmRule } from '@shared/models/device.models';
+import { AlarmRule, alarmRuleValidator } from '@shared/models/device.models';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { AlarmSeverity, alarmSeverityTranslations } from '../../../../../shared/models/alarm.models';
@@ -141,10 +141,23 @@ export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit,
     };
     const createAlarmRulesArray = this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray;
     createAlarmRulesArray.push(this.fb.group({
-      severity: [null, Validators.required],
-      alarmRule: [createAlarmRule, Validators.required]
+      severity: [this.getFirstUnusedSeverity(), Validators.required],
+      alarmRule: [createAlarmRule, alarmRuleValidator]
     }));
     this.createAlarmRulesFormGroup.updateValueAndValidity();
+    if (!this.createAlarmRulesFormGroup.valid) {
+      this.updateModel();
+    }
+  }
+
+  private getFirstUnusedSeverity(): AlarmSeverity {
+    for (const severityKey of Object.keys(AlarmSeverity)) {
+      const severity = AlarmSeverity[severityKey];
+      if (this.usedSeverities.indexOf(severity) === -1) {
+        return severity;
+      }
+    }
+    return null;
   }
 
   public validate(c: FormControl) {

@@ -25,7 +25,7 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { AlarmRule, DeviceProfileAlarm } from '@shared/models/device.models';
+import { AlarmRule, DeviceProfileAlarm, deviceProfileAlarmValidator } from '@shared/models/device.models';
 import { MatDialog } from '@angular/material/dialog';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
@@ -92,7 +92,7 @@ export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit
       clearRule: [null],
       propagate: [null],
       propagateRelationTypes: [null]
-    });
+    }, { validators: deviceProfileAlarmValidator });
     this.alarmFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
     });

@@ -30,7 +30,7 @@ import {
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { DeviceProfileAlarm } from '@shared/models/device.models';
+import { DeviceProfileAlarm, deviceProfileAlarmValidator } from '@shared/models/device.models';
 import { guid } from '@core/utils';
 import { Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
@@ -141,7 +141,7 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
       id: guid(),
       alarmType: '',
       createRules: {
-        empty: {
+        CRITICAL: {
           condition: {
             condition: []
           }
@@ -149,8 +149,11 @@ export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnIni
       }
     };
     const alarmsArray = this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray;
-    alarmsArray.push(this.fb.control(alarm, [Validators.required]));
+    alarmsArray.push(this.fb.control(alarm, [deviceProfileAlarmValidator]));
     this.deviceProfileAlarmsFormGroup.updateValueAndValidity();
+    if (!this.deviceProfileAlarmsFormGroup.valid) {
+      this.updateModel();
+    }
   }
 
   public validate(c: FormControl) {

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="save()" style="min-width: 1000px;">
+<form (ngSubmit)="save()" style="width: 1000px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'device-profile.add' : 'device-profile.edit' ) | translate }}</h2>
     <span fxFlex></span>
@@ -37,11 +37,6 @@
     </tb-device-profile>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || deviceProfileComponent.entityForm?.invalid || !deviceProfileComponent.entityForm?.dirty">
-      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
@@ -49,5 +44,10 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || deviceProfileComponent.entityForm?.invalid || !deviceProfileComponent.entityForm?.dirty">
+      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -41,7 +41,7 @@
 </div>
 <div class="mat-padding" fxLayout="column">
   <form [formGroup]="entityForm">
-    <fieldset [disabled]="(isLoading$ | async) || !isEdit">
+    <fieldset [disabled]="(isLoading$ | async) || !isEdit" style="min-width: 0;">
       <mat-form-field class="mat-block">
         <mat-label translate>device-profile.name</mat-label>
         <input matInput formControlName="name" required/>

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="save()" style="min-width: 600px;">
+<form (ngSubmit)="save()" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
     <span fxFlex></span>
@@ -37,11 +37,6 @@
     </tb-tenant-profile>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || tenantProfileComponent.entityForm?.invalid || !tenantProfileComponent.entityForm?.dirty">
-      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
@@ -49,5 +44,10 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || tenantProfileComponent.entityForm?.invalid || !tenantProfileComponent.entityForm?.dirty">
+      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -53,17 +53,16 @@
   </div>
   <div mat-dialog-actions fxLayout="row">
     <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || relationFormGroup.invalid || !(relationFormGroup.dirty || additionalInfo.dirty)">
-      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || relationFormGroup.invalid || !(relationFormGroup.dirty || additionalInfo.dirty)">
+      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -147,16 +147,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || widgetActionFormGroup.invalid || actionTypeFormGroup.invalid || (!widgetActionFormGroup.dirty && !actionTypeFormGroup.dirty)">
-      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || widgetActionFormGroup.invalid || actionTypeFormGroup.invalid || (!widgetActionFormGroup.dirty && !actionTypeFormGroup.dirty)">
+      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -38,16 +38,16 @@
     </tb-data-key-config>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || dataKeyFormGroup.invalid || !dataKeyFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || dataKeyFormGroup.invalid || !dataKeyFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -50,17 +50,16 @@
     </mat-chip-list>
   </mat-form-field>
   <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+    <button type="button"
+            mat-button
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
     <button type="submit"
             mat-raised-button
             color="primary"
             [disabled]="alarmFilterFormGroup.invalid || !alarmFilterFormGroup.dirty">
       {{ 'action.update' | translate }}
     </button>
-    <button type="button"
-            mat-button
-            (click)="cancel()"
-            style="margin-right: 20px;">
-      {{ 'action.cancel' | translate }}
-    </button>
   </div>
 </form>

@@ -28,7 +28,6 @@
   <div class="tb-panel-actions" fxLayout="row" *ngIf="!settings.autoConfirm">
     <span fxFlex></span>
     <button mat-button mat-raised-button color="primary"
-            style="margin-right: 20px;"
             type="button" (click)="apply()">
       {{ 'action.ok' | translate }}
     </button>

@@ -40,17 +40,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || addEntitiesToCustomerFormGroup.invalid
-            || !addEntitiesToCustomerFormGroup.dirty">
-      {{ 'action.assign' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || addEntitiesToCustomerFormGroup.invalid
+            || !addEntitiesToCustomerFormGroup.dirty">
+      {{ 'action.assign' | translate }}
+    </button>
   </div>
 </form>

@@ -39,17 +39,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || assignToCustomerFormGroup.invalid
-            || !assignToCustomerFormGroup.dirty">
-      {{ 'action.assign' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || assignToCustomerFormGroup.invalid
+            || !assignToCustomerFormGroup.dirty">
+      {{ 'action.assign' | translate }}
+    </button>
   </div>
 </form>

@@ -41,11 +41,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || widgetFormGroup.invalid">
-      {{ 'action.add' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
@@ -53,5 +48,10 @@
             cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || widgetFormGroup.invalid">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -152,17 +152,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || settingsFormGroup.invalid || gridSettingsFormGroup.invalid
-                         || (!settingsFormGroup.dirty && !gridSettingsFormGroup.dirty)">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || settingsFormGroup.invalid || gridSettingsFormGroup.invalid
+                         || (!settingsFormGroup.dirty && !gridSettingsFormGroup.dirty)">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -54,11 +54,6 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button
             color="primary"
             type="button"
@@ -66,5 +61,10 @@
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -54,7 +54,6 @@
   <div mat-dialog-actions fxLayout="row">
     <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()" cdkFocusInitial>

@@ -41,18 +41,17 @@
   </div>
   <div mat-dialog-actions fxLayout="row">
     <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || dashboardCustomersFormGroup.invalid
-            || !dashboardCustomersFormGroup.dirty">
-      {{ actionName | translate }}
-    </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || dashboardCustomersFormGroup.invalid
+            || !dashboardCustomersFormGroup.dirty">
+      {{ actionName | translate }}
+    </button>
   </div>
 </form>

@@ -52,16 +52,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || stateFormGroup.invalid || !stateFormGroup.dirty">
-      {{ (isAdd ? 'action.add' : 'action.save') | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || stateFormGroup.invalid || !stateFormGroup.dirty">
+      {{ (isAdd ? 'action.add' : 'action.save') | translate }}
+    </button>
   </div>
 </form>

@@ -136,16 +136,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || statesFormGroup.invalid || !statesFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || statesFormGroup.invalid || !statesFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -70,7 +70,7 @@
     </div>
   </div>
 </mat-tab>
-<mat-tab *ngIf="entity"
+<mat-tab *ngIf="entity && !isEdit"
          label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
   <tb-audit-log-table detailsMode="true" [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.ENTITY" [entityId]="entity.id"></tb-audit-log-table>
 </mat-tab>

@@ -36,17 +36,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button *ngIf="!isReadOnly" mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || deviceCredentialsFormGroup.invalid
-            || !deviceCredentialsFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ (isReadOnly ? 'action.close' : 'action.cancel') | translate }}
     </button>
+    <button *ngIf="!isReadOnly" mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || deviceCredentialsFormGroup.invalid
+            || !deviceCredentialsFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -46,16 +46,16 @@
     </mat-form-field>
   </div>
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || changePassword.invalid">
-      {{ 'profile.change-password' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             [mat-dialog-close]="false" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || changePassword.invalid">
+      {{ 'profile.change-password' | translate }}
+    </button>
   </div>
 </form>

@@ -40,16 +40,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || tbRuleNode.ruleNodeFormGroup.invalid || !tbRuleNode.ruleNodeFormGroup.dirty">
-      {{ 'action.add' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || tbRuleNode.ruleNodeFormGroup.invalid || !tbRuleNode.ruleNodeFormGroup.dirty">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -39,16 +39,16 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || ruleNodeLinkFormGroup.invalid || !ruleNodeLinkFormGroup.dirty">
-      {{ 'action.add' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || ruleNodeLinkFormGroup.invalid || !ruleNodeLinkFormGroup.dirty">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -41,11 +41,6 @@
     </mat-form-field>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
-      {{ 'action.add' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
@@ -53,5 +48,10 @@
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
+      {{ 'action.add' | translate }}
+    </button>
   </div>
 </form>

@@ -46,17 +46,17 @@
     </fieldset>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || saveWidgetTypeAsFormGroup.invalid
-            || !saveWidgetTypeAsFormGroup.dirty">
-      {{ 'action.saveAs' | translate }}
-    </button>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || saveWidgetTypeAsFormGroup.invalid
+            || !saveWidgetTypeAsFormGroup.dirty">
+      {{ 'action.saveAs' | translate }}
+    </button>
   </div>
 </form>

@@ -34,7 +34,6 @@
     </button>
     <button mat-button
             type="submit"
-            style="margin-right: 20px;"
             [disabled]="(isLoading$ | async) || colorPickerFormGroup.invalid || !colorPickerFormGroup.dirty">
       {{ 'action.select' | translate }}
     </button>

@@ -41,17 +41,16 @@
   </div>
   <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
     <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || jsonFormGroup.invalid || !jsonFormGroup.dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || jsonFormGroup.invalid || !jsonFormGroup.dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -109,18 +109,17 @@
       {{ 'rulenode.test' | translate }}
     </button>
     <span fxFlex></span>
-    <button mat-button mat-raised-button color="primary"
-            type="submit"
-            [disabled]="(isLoading$ | async) || nodeScriptTestFormGroup.get('script').invalid || !nodeScriptTestFormGroup.get('script').dirty">
-      {{ 'action.save' | translate }}
-    </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"
             (click)="cancel()">
       {{ 'action.cancel' | translate }}
     </button>
+    <button mat-button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || nodeScriptTestFormGroup.get('script').invalid || !nodeScriptTestFormGroup.get('script').dirty">
+      {{ 'action.save' | translate }}
+    </button>
   </div>
 </form>

@@ -140,19 +140,18 @@
         </tb-timeinterval>
       </div>
       <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+        <button type="button"
+                mat-button
+                [disabled]="(isLoading$ | async)"
+                (click)="cancel()">
+          {{ 'action.cancel' | translate }}
+        </button>
         <button type="submit"
                 mat-raised-button
                 color="primary"
                 [disabled]="(isLoading$ | async) || timewindowForm.invalid || !timewindowForm.dirty">
             {{ 'action.update' | translate }}
         </button>
-        <button type="button"
-                mat-button
-                [disabled]="(isLoading$ | async)"
-                (click)="cancel()"
-                style="margin-right: 20px;">
-            {{ 'action.cancel' | translate }}
-        </button>
       </div>
     </div>
   </fieldset>

@@ -26,7 +26,7 @@ import { EntityInfoData } from '@shared/models/entity.models';
 import { KeyFilter } from '@shared/models/query/query.models';
 import { TimeUnit } from '@shared/models/time/time.models';
 import * as _moment from 'moment-timezone';
-import { AbstractControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms';
 
 export enum DeviceProfileType {
   DEFAULT = 'DEFAULT'
@@ -87,7 +87,7 @@ export const deviceProvisionTypeTranslationMap = new Map<DeviceProvisionType, st
     [DeviceProvisionType.ALLOW_CREATE_NEW_DEVICES, 'device-profile.provision-strategy-created-new'],
     [DeviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES, 'device-profile.provision-strategy-check-pre-provisioned']
   ]
-)
+);
 
 export const deviceTransportTypeHintMap = new Map<DeviceTransportType, string>(
   [
@@ -303,6 +303,18 @@ export interface AlarmRule {
   schedule?: AlarmSchedule;
 }
 
+export function alarmRuleValidator(control: AbstractControl): ValidationErrors | null {
+  const alarmRule: AlarmRule = control.value;
+  return alarmRuleValid(alarmRule) ? null : {alarmRule: true};
+}
+
+function alarmRuleValid(alarmRule: AlarmRule): boolean {
+  if (!alarmRule || !alarmRule.condition || !alarmRule.condition.condition || !alarmRule.condition.condition.length) {
+    return false;
+  }
+  return true;
+}
+
 export interface DeviceProfileAlarm {
   id: string;
   alarmType: string;
@@ -312,6 +324,34 @@ export interface DeviceProfileAlarm {
   propagateRelationTypes?: Array<string>;
 }
 
+export function deviceProfileAlarmValidator(control: AbstractControl): ValidationErrors | null {
+  const deviceProfileAlarm: DeviceProfileAlarm = control.value;
+  if (deviceProfileAlarm && deviceProfileAlarm.id && deviceProfileAlarm.alarmType &&
+    deviceProfileAlarm.createRules) {
+    const severities = Object.keys(deviceProfileAlarm.createRules);
+    if (severities.length) {
+      let alarmRulesValid = true;
+      for (const severity of severities) {
+        const alarmRule = deviceProfileAlarm.createRules[severity];
+        if (!alarmRuleValid(alarmRule)) {
+          alarmRulesValid = false;
+          break;
+        }
+      }
+      if (alarmRulesValid) {
+        if (deviceProfileAlarm.clearRule && !alarmRuleValid(deviceProfileAlarm.clearRule)) {
+          alarmRulesValid = false;
+        }
+      }
+      if (alarmRulesValid) {
+        return null;
+      }
+    }
+  }
+  return {deviceProfileAlarm: true};
+}
+
+
 export interface DeviceProfileData {
   configuration: DeviceProfileConfiguration;
   transportConfiguration: DeviceProfileTransportConfiguration;

@@ -908,6 +908,7 @@
         "create-alarm-pattern": "Create <b>{{alarmType}}</b> alarm",
         "create-alarm-rules": "Create alarm rules",
         "no-create-alarm-rules": "No create conditions configured",
+        "add-create-alarm-rule-prompt": "Please add create alarm rule",
         "clear-alarm-rule": "Clear alarm rule",
         "no-clear-alarm-rule": "No clear condition configured",
         "add-create-alarm-rule": "Add create condition",

@@ -331,6 +331,9 @@ pre.tb-highlight {
   font-weight: 400;
   line-height: 18px;
   color: rgba(0, 0, 0, .38);
+  &.required {
+    color: rgb(221, 44, 0);
+  }
 }
 
 .tb-fullscreen {