Fixed bugs, removed redundant code

ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html

@@ -422,18 +422,18 @@
       {{ 'tenant-profile.rate-limits.rate-limits' | translate }}
     </legend>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex="50" formControlName="transportTenantMsgRateLimit"
+      <tb-rate-limits fxFlex formControlName="transportTenantMsgRateLimit"
                       [type]="rateLimitsType.TENANT_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex="50" formControlName="transportDeviceMsgRateLimit"
+      <tb-rate-limits fxFlex formControlName="transportDeviceMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_MESSAGES">
       </tb-rate-limits>
     </div>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <tb-rate-limits fxFlex="50" formControlName="transportTenantTelemetryMsgRateLimit"
+      <tb-rate-limits fxFlex formControlName="transportTenantTelemetryMsgRateLimit"
                       [type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
       </tb-rate-limits>
-      <tb-rate-limits fxFlex="50" formControlName="transportDeviceTelemetryMsgRateLimit"
+      <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryMsgRateLimit"
                       [type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
       </tb-rate-limits>
     </div>
@@ -445,34 +445,34 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="transportTenantTelemetryDataPointsRateLimit"
+          <tb-rate-limits fxFlex formControlName="transportTenantTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="transportDeviceTelemetryDataPointsRateLimit"
+          <tb-rate-limits fxFlex formControlName="transportDeviceTelemetryDataPointsRateLimit"
                           [type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
           </tb-rate-limits>
         </div>
         <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="tenantServerRestLimitsConfiguration"
+          <tb-rate-limits fxFlex formControlName="tenantServerRestLimitsConfiguration"
                           [type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="customerServerRestLimitsConfiguration"
+          <tb-rate-limits fxFlex formControlName="customerServerRestLimitsConfiguration"
                           [type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>
         <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="tenantEntityExportRateLimit"
+          <tb-rate-limits fxFlex formControlName="tenantEntityExportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="tenantEntityImportRateLimit"
+          <tb-rate-limits fxFlex formControlName="tenantEntityImportRateLimit"
                           [type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
           </tb-rate-limits>
         </div>
         <div fxFlex fxLayout="row"  fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <tb-rate-limits fxFlex="50" formControlName="wsUpdatesPerSessionRateLimit"
+          <tb-rate-limits fxFlex formControlName="wsUpdatesPerSessionRateLimit"
                           [type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
           </tb-rate-limits>
-          <tb-rate-limits fxFlex="50" formControlName="cassandraQueryTenantRateLimitsConfiguration"
+          <tb-rate-limits fxFlex formControlName="cassandraQueryTenantRateLimitsConfiguration"
                           [type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
           </tb-rate-limits>
         </div>

ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.ts

@@ -21,7 +21,7 @@ import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DefaultTenantProfileConfiguration, TenantProfileConfiguration } from '@shared/models/tenant.model';
 import { isDefinedAndNotNull } from '@core/utils';
-import { RateLimitsType } from '@shared/models/rate-limits.models';
+import { RateLimitsType } from './rate-limits/rate-limits.models';
 
 @Component({
   selector: 'tb-default-tenant-profile-configuration',

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html

@@ -25,14 +25,11 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
-  </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async">
+    <fieldset>
       <div fxFlex fxLayout="column">
         <tb-rate-limits-list
-          formControlName="rateLimits"
+          formControlName="rateLimits">
-          [disabled]="isLoading$ | async">
         </tb-rate-limits-list>
       </div>
     </fieldset>
@@ -40,12 +37,11 @@
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"
             type="button"
-            [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
     <button *ngIf="!data.readonly" mat-raised-button color="primary" (click)="save()"
-            [disabled]="(isLoading$ | async) || editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
+            [disabled]="editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
   </div>

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.ts

@@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import { TranslateService } from '@ngx-translate/core';
@@ -31,16 +31,12 @@ export interface RateLimitsDetailsDialogData {
 }
 
 @Component({
-  templateUrl: './rate-limits-details-dialog.component.html',
+  templateUrl: './rate-limits-details-dialog.component.html'
-  providers: [{provide: ErrorStateMatcher, useExisting: RateLimitsDetailsDialogComponent}]
 })
-export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent, any>
+export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent> implements OnInit {
-  implements OnInit, ErrorStateMatcher {
 
   editDetailsFormGroup: FormGroup;
 
-  submitted: boolean = false;
-
   rateLimits: string = this.data.rateLimits;
 
   title: string = this.data.title;
@@ -49,7 +45,7 @@ export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimits
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: RateLimitsDetailsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent, any>,
+              public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent>,
               private fb: FormBuilder,
               public translate: TranslateService) {
     super(store, router, dialogRef);
@@ -65,18 +61,11 @@ export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimits
   ngOnInit(): void {
   }
 
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
-    const customErrorState = !!(control && control.invalid && this.submitted);
-    return originalErrorState || customErrorState;
-  }
-
   cancel(): void {
-    this.dialogRef.close(false);
+    this.dialogRef.close(undefined);
   }
 
   save(): void {
-    this.submitted = true;
     this.dialogRef.close(this.editDetailsFormGroup.get('rateLimits').value);
   }
 

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<section fxFlex fxLayout="column" [formGroup]="rateLimitsListFormGroup">
+<section [formGroup]="rateLimitsListFormGroup">
-  <div fxFlex fxLayout="column" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray().controls; let $index = index">
+  <div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
-    <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray().controls.length > 1" translate>
+    <div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
       tenant-profile.rate-limits.but-less-than
     </div>
     <div fxFlex fxLayout="row" fxLayoutGap="8px">
@@ -45,7 +45,7 @@
       </mat-form-field>
       <button mat-icon-button type="button" color="primary"
               class="tb-rate-limits-button"
-              *ngIf="!rateLimitsFormArray().disabled"
+              *ngIf="!rateLimitsFormArray.disabled"
               (click)="removeRateLimits($index)"
               [disabled]="disabled"
               [matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above">
@@ -53,14 +53,12 @@
       </button>
     </div>
   </div>
-  <div>
+  <button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray.disabled"
-    <button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray().disabled"
+          (click)="addRateLimits()"
-            (click)="addRateLimits()"
+          [disabled]="disabled"
-            [disabled]="disabled"
+          [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
-            [matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
+    <span translate>tenant-profile.rate-limits.add-limit</span>
-      <span translate>tenant-profile.rate-limits.add-limit</span>
+  </button>
-    </button>
-  </div>
   <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
     <span translate>tenant-profile.rate-limits.preview</span>
     <div>

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.ts

@@ -32,7 +32,7 @@ import {
   RateLimits,
   rateLimitsArrayToString,
   stringToRateLimitsArray
-} from '@shared/models/rate-limits.models';
+} from './rate-limits.models';
 import { isDefinedAndNotNull } from '@core/utils';
 
 @Component({
@@ -68,17 +68,17 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
   }
 
   ngOnInit(): void {
-    this.rateLimitsListFormGroup = this.fb.group({});
+    this.rateLimitsListFormGroup = this.fb.group({
-    this.rateLimitsListFormGroup.addControl('rateLimits',
+      rateLimits: this.fb.array([])
-      this.fb.array([]));
+    });
     this.rateLimitsControl = this.fb.control(null);
-    this.rateLimitsListFormGroup.valueChanges.subscribe((value) => {
+    this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges.subscribe((value) => {
         this.updateView(value?.rateLimits);
       }
     );
   }
 
-  rateLimitsFormArray(): FormArray {
+  get rateLimitsFormArray(): FormArray {
     return this.rateLimitsListFormGroup.get('rateLimits') as FormArray;
   }
 
@@ -107,16 +107,11 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
   }
 
   writeValue(value: string) {
-    if (this.valueChangeSubscription) {
-      this.valueChangeSubscription.unsubscribe();
-    }
     const rateLimitsControls: Array<FormGroup> = [];
     if (value) {
       let rateLimitsArray = value.split(',');
       for (let i = 0; i < rateLimitsArray.length; i++) {
-        let valueTime = rateLimitsArray[i].split(':');
+        const [value, time] = rateLimitsArray[i].split(':');
-        let value = valueTime[0];
-        let time = valueTime[1];
         const rateLimitsControl = this.fb.group({
           value: [value, [Validators.required]],
           time: [time, [Validators.required]]
@@ -127,11 +122,8 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
         rateLimitsControls.push(rateLimitsControl);
       }
     }
-    this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls));
+    this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls), {emitEvent: false});
     this.rateLimitsControl.patchValue(stringToRateLimitsArray(value), {emitEvent: false});
-    this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges.subscribe((value) => {
-      this.updateView(value?.rateLimits);
-    });
   }
 
   public removeRateLimits(index: number) {
@@ -139,17 +131,17 @@ export class RateLimitsListComponent implements ControlValueAccessor, Validator,
   }
 
   public addRateLimits() {
-    const rateLimitsArray = this.rateLimitsListFormGroup.get('rateLimits') as FormArray;
+    this.rateLimitsFormArray.push(this.fb.group({
-    rateLimitsArray.push(this.fb.group({
       value: [null, [Validators.required]],
       time: [null, [Validators.required]]
     }));
-    this.rateLimitsListFormGroup.updateValueAndValidity();
   }
 
   updateView(rateLimitsArray: Array<RateLimits>) {
     if (rateLimitsArray.length > 0) {
-      const notNullRateLimits = rateLimitsArray.filter(rateLimits => isDefinedAndNotNull(rateLimits.value) && isDefinedAndNotNull(rateLimits.time));
+      const notNullRateLimits = rateLimitsArray.filter(rateLimits =>
+        isDefinedAndNotNull(rateLimits.value) && isDefinedAndNotNull(rateLimits.time)
+      );
       const rateLimitsString = rateLimitsArrayToString(notNullRateLimits);
       this.propagateChange(rateLimitsString);
       this.rateLimitsControl.patchValue(stringToRateLimitsArray(rateLimitsString), {emitEvent: false});

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html

@@ -15,5 +15,5 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}"
+<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}"
      [innerHTML]="rateLimitsText"></div>

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.scss

@@ -20,14 +20,6 @@
     &.disabled {
       opacity: 0.7;
     }
-    &.required {
-      color: #f44336;
-      padding: 0 4px;
-    }
-    &.nowrap {
-      white-space: nowrap;
-      overflow: hidden;
-    }
   }
 }
 

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts

@@ -18,8 +18,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { RateLimits, rateLimitsArrayToHtml } from './rate-limits.models';
-import { RateLimits, rateLimitsArrayToHtml } from '@shared/models/rate-limits.models';
 
 @Component({
   selector: 'tb-rate-limits-text',
@@ -35,26 +34,11 @@ import { RateLimits, rateLimitsArrayToHtml } from '@shared/models/rate-limits.mo
 })
 export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
 
-  private requiredValue: boolean;
-  get required(): boolean {
-    return this.requiredValue;
-  }
-  @Input()
-  set required(value: boolean) {
-    this.requiredValue = coerceBooleanProperty(value);
-  }
-
   @Input()
   disabled: boolean;
 
-  @Input()
   noRateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
 
-  @Input()
-  nowrap = false;
-
-  requiredClass = false;
-
   public rateLimitsText: string;
 
   private propagateChange = (v: any) => { };
@@ -83,15 +67,10 @@ export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
   }
 
   private updateText(value: Array<RateLimits>) {
-    this.requiredClass = false;
     if (value && value.length) {
       this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value);
     } else {
-      if (this.required && !this.disabled) {
+      this.rateLimitsText = this.noRateLimitsText;
-        this.requiredClass = true;
-      } else {
-        this.rateLimitsText = this.noRateLimitsText;
-      }
     }
   }
 

ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts

@@ -34,7 +34,7 @@ import {
   rateLimitsLabelTranslationMap,
   RateLimitsType,
   stringToRateLimitsArray
-} from '@shared/models/rate-limits.models';
+} from './rate-limits.models';
 
 @Component({
   selector: 'tb-rate-limits',