From f96be893b8d46ce6fb44fb082f0142f41b56068b Mon Sep 17 00:00:00 2001
From: Viacheslav Klimov <viacheslavklimov11@gmail.com>
Date: Fri, 21 Jan 2022 15:31:53 +0200
Subject: [PATCH] Tenant profile rate limits configuration UI refactoring

---
 .../tenant-profile-data.component.html        | 17 +++++--
 .../profile/tenant-profile.component.html     |  8 ++--
 ...enant-profile-configuration.component.html | 48 +++++++------------
 3 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
index 4a979fb0cb..9af8d294de 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile-data.component.html
@@ -16,8 +16,17 @@
 
 -->
 <form [formGroup]="tenantProfileDataFormGroup" style="padding-bottom: 16px;">
-  <tb-tenant-profile-configuration
-    formControlName="configuration"
-    required>
-  </tb-tenant-profile-configuration>
+  <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <div translate>tenant-profile.profile-configuration</div>
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <ng-template matExpansionPanelContent>
+      <tb-tenant-profile-configuration
+        formControlName="configuration"
+        required>
+      </tb-tenant-profile-configuration>
+    </ng-template>
+  </mat-expansion-panel>
 </form>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
index 18dd97fac4..e5a3a54293 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html
@@ -62,14 +62,14 @@
           <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>
         </mat-checkbox>
       </div>
-      <mat-form-field class="mat-block">
-        <mat-label translate>tenant-profile.description</mat-label>
-        <textarea matInput formControlName="description" rows="2"></textarea>
-      </mat-form-field>
       <tb-tenant-profile-data
         formControlName="profileData"
         required>
       </tb-tenant-profile-data>
+      <mat-form-field class="mat-block">
+        <mat-label translate>tenant-profile.description</mat-label>
+        <textarea matInput formControlName="description" rows="2"></textarea>
+      </mat-form-field>
     </fieldset>
   </form>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 9ea904d820..911b0b4bd2 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -213,12 +213,10 @@
     <input matInput required min="0" step="1"
            formControlName="maxRuleNodeExecutionsPerMessage"
            type="number">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleNodeExecutionsPerMessage').hasError('required')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleNodeExecutionsPerMessage').hasError('required')">
       {{ 'tenant-profile.max-rule-node-executions-per-message-required' | translate}}
     </mat-error>
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleNodeExecutionsPerMessage').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleNodeExecutionsPerMessage').hasError('min')">
       {{ 'tenant-profile.max-rule-node-executions-per-message-range' | translate}}
     </mat-error>
   </mat-form-field>
@@ -262,32 +260,28 @@
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.transport-tenant-msg-rate-limit</mat-label>
     <input matInput formControlName="transportTenantMsgRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantMsgRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantMsgRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.transport-tenant-telemetry-msg-rate-limit</mat-label>
     <input matInput formControlName="transportTenantTelemetryMsgRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantTelemetryMsgRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantTelemetryMsgRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.transport-tenant-telemetry-data-points-rate-limit</mat-label>
     <input matInput formControlName="transportTenantTelemetryDataPointsRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantTelemetryDataPointsRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportTenantTelemetryDataPointsRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.transport-device-msg-rate-limit</mat-label>
     <input matInput formControlName="transportDeviceMsgRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportDeviceMsgRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportDeviceMsgRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
@@ -298,8 +292,7 @@
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.transport-device-telemetry-data-points-rate-limit</mat-label>
     <input matInput formControlName="transportDeviceTelemetryDataPointsRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportDeviceTelemetryDataPointsRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('transportDeviceTelemetryDataPointsRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
@@ -308,8 +301,7 @@
     <input matInput
            formControlName="tenantServerRestLimitsConfiguration"
            type="text">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('tenantServerRestLimitsConfiguration').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('tenantServerRestLimitsConfiguration').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
@@ -318,8 +310,7 @@
     <input matInput
            formControlName="customerServerRestLimitsConfiguration"
            type="text">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('customerServerRestLimitsConfiguration').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('customerServerRestLimitsConfiguration').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
@@ -340,8 +331,7 @@
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
     <input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerRegularUser').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerRegularUser').hasError('min')">
       {{ 'tenant-profile.too-small-value-zero' | translate}}
     </mat-error>
   </mat-form-field>
@@ -362,48 +352,42 @@
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
     <input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerTenant').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerTenant').hasError('min')">
       {{ 'tenant-profile.too-small-value-zero' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
     <input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerCustomer').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerCustomer').hasError('min')">
       {{ 'tenant-profile.too-small-value-zero' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
     <input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
       {{ 'tenant-profile.too-small-value-zero' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
     <input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
       {{ 'tenant-profile.too-small-value-zero' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.ws-limit-updates-per-session</mat-label>
     <input matInput type="text" formControlName="wsUpdatesPerSessionRateLimit">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('wsUpdatesPerSessionRateLimit').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('wsUpdatesPerSessionRateLimit').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>tenant-profile.cassandra-tenant-limits-configuration</mat-label>
     <input matInput type="text" formControlName="cassandraQueryTenantRateLimitsConfiguration">
-    <mat-error
-            *ngIf="defaultTenantProfileConfigurationFormGroup.get('cassandraQueryTenantRateLimitsConfiguration').hasError('pattern')">
+    <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('cassandraQueryTenantRateLimitsConfiguration').hasError('pattern')">
       {{ 'tenant-profile.incorrect-pattern-for-rate-limits' | translate}}
     </mat-error>
   </mat-form-field>