UI: add id to queues and fixed bugs

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html

@@ -16,33 +16,16 @@
 
 -->
 <div fxLayout="column">
-  <div class="tb-tenant-profile-queues">
+  <div class="tb-tenant-profile-queues"
-    <mat-accordion multi>
-      <mat-expansion-panel fxFlex expanded
        *ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
-                           let $index = index; last as isLast;">
+       let $index = index; last as isLast;"
-        <mat-expansion-panel-header>
+       [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <mat-panel-title>
-              {{ getName(queuesControl.value.name) }}
-            </mat-panel-title>
-            <span fxFlex></span>
-            <button *ngIf="!($index === 0) && !this.disabled" mat-icon-button style="min-width: 40px;"
-                    type="button"
-                    (click)="removeQueue($index)"
-                    matTooltip="{{ 'action.remove' | translate }}"
-                    matTooltipPosition="above">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
     <tb-queue-form [formControl]="queuesControl"
+                   (removeQueue)="removeQueue($index)"
+                   [mainQueue]="$index === 0"
+                   [expanded]="$index === 0"
                    [newQueue]="newQueue">
     </tb-queue-form>
-        </ng-template>
-      </mat-expansion-panel>
-    </mat-accordion>
   </div>
   <div *ngIf="!queuesFormArray.controls.length">
       <span translate fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts

@@ -33,6 +33,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subscription } from 'rxjs';
 import { QueueInfo } from '@shared/models/queue.models';
 import { UtilsService } from '@core/services/utils.service';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-tenant-profile-queues',
@@ -131,7 +132,10 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
   }
 
   public trackByQueue(index: number, queueControl: AbstractControl) {
-    return queueControl;
+    if (queueControl) {
+      return queueControl.value.id;
+    }
+    return null;
   }
 
   public removeQueue(index: number) {
@@ -140,6 +144,7 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
 
   public addQueue() {
     const queue = {
+      id: guid(),
       consumerPerPartition: false,
       name: '',
       packProcessingTimeout: 2000,
@@ -156,7 +161,10 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
         batchSize: 0,
         type: ''
       },
-      topic: ''
+      topic: '',
+      additionalInfo: {
+        description: ''
+      }
     };
     this.newQueue = true;
     const queuesArray = this.tenantProfileQueuesFormGroup.get('queues') as FormArray;

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

@@ -14,12 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TenantProfileData } from '@shared/models/tenant.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'tb-tenant-profile-data',
@@ -31,7 +32,7 @@ import { TenantProfileData } from '@shared/models/tenant.model';
     multi: true
   }]
 })
-export class TenantProfileDataComponent implements ControlValueAccessor, OnInit {
+export class TenantProfileDataComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   tenantProfileDataFormGroup: FormGroup;
 
@@ -47,6 +48,7 @@ export class TenantProfileDataComponent implements ControlValueAccessor, OnInit
   @Input()
   disabled: boolean;
 
+  private valueChange$: Subscription = null;
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
@@ -64,11 +66,17 @@ export class TenantProfileDataComponent implements ControlValueAccessor, OnInit
     this.tenantProfileDataFormGroup = this.fb.group({
       configuration: [null, Validators.required]
     });
-    this.tenantProfileDataFormGroup.valueChanges.subscribe(() => {
+    this.valueChange$ = this.tenantProfileDataFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
     });
   }
 
+  ngOnDestroy() {
+    if (this.valueChange$) {
+      this.valueChange$.unsubscribe();
+    }
+  }
+
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -87,7 +95,7 @@ export class TenantProfileDataComponent implements ControlValueAccessor, OnInit
     if (this.tenantProfileDataFormGroup.valid) {
       tenantProfileData = this.tenantProfileDataFormGroup.getRawValue();
     }
-    this.propagateChange(tenantProfileData);
+    this.propagateChange(tenantProfileData.configuration);
   }
 
 }

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

@@ -35,6 +35,10 @@
       width: fit-content;
     }
   }
+
+  .mat-expansion-panel-header {
+    height: 48px;
+  }
   .expansion-panel-block {
     padding-bottom: 16px;
   }

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

@@ -23,6 +23,7 @@ import { ActionNotificationShow } from '@app/core/notification/notification.acti
 import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { EntityComponent } from '../entity/entity.component';
+import { guid } from '@core/utils';
 
 @Component({
   selector: 'tb-tenant-profile',
@@ -54,6 +55,7 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
   buildForm(entity: TenantProfile): FormGroup {
     const mainQueue = [
       {
+        id: guid(),
         consumerPerPartition: true,
         name: 'Main',
         packProcessingTimeout: 2000,
@@ -70,7 +72,10 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
           batchSize: 1000,
           type: 'BURST'
         },
-        topic: 'tb_rule_engine.main'
+        topic: 'tb_rule_engine.main',
+        additionalInfo: {
+          description: ''
+        }
       }
     ];
     const formGroup = this.fb.group(

ui-ngx/src/app/modules/home/components/queue/queue-form.component.html

@@ -15,14 +15,33 @@
     limitations under the License.
 
 -->
-
+<mat-expansion-panel fxFlex [(expanded)]="expanded">
-<form [formGroup]="queueFormGroup" fxLayout="column" fxLayoutGap="0.5em">
+  <mat-expansion-panel-header>
+    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+      <mat-panel-title>
+        {{ queueTitle }}
+      </mat-panel-title>
+      <span fxFlex></span>
+      <button *ngIf="!mainQueue && !disabled" mat-icon-button style="min-width: 40px;"
+              type="button"
+              (click)="removeQueue.emit()"
+              matTooltip="{{ 'action.remove' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </mat-expansion-panel-header>
+  <ng-template matExpansionPanelContent>
+    <form [formGroup]="queueFormGroup" fxLayout="column" fxLayoutGap="0.5em">
       <mat-form-field class="mat-block">
         <mat-label translate>admin.queue-name</mat-label>
         <input matInput formControlName="name" required>
         <mat-error *ngIf="queueFormGroup.get('name').hasError('required')">
           {{ 'queue.name-required' | translate }}
         </mat-error>
+        <mat-error *ngIf="queueFormGroup.get('name').hasError('unique')">
+          {{ 'queue.name-unique' | translate }}
+        </mat-error>
       </mat-form-field>
       <mat-form-field class="mat-block">
         <mat-label translate>queue.poll-interval</mat-label>
@@ -62,7 +81,7 @@
         </mat-error>
       </mat-form-field>
       <mat-accordion class="queue-strategy" [multi]="true">
-    <mat-expansion-panel>
+        <mat-expansion-panel [expanded]="false">
           <mat-expansion-panel-header>
             <mat-panel-title translate>
               queue.submit-strategy
@@ -95,7 +114,7 @@
             </div>
           </ng-template>
         </mat-expansion-panel>
-    <mat-expansion-panel>
+        <mat-expansion-panel [expanded]="false">
           <mat-expansion-panel-header>
             <mat-panel-title translate>
               queue.processing-strategy
@@ -172,4 +191,6 @@
         <mat-label translate>queue.description</mat-label>
         <textarea matInput formControlName="description" rows="2"></textarea>
       </mat-form-field>
-</form>
+    </form>
+  </ng-template>
+</mat-expansion-panel>

ui-ngx/src/app/modules/home/components/queue/queue-form.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
 import {
   ControlValueAccessor,
   FormBuilder,
@@ -29,6 +29,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { UtilsService } from '@core/services/utils.service';
 import { QueueInfo, QueueProcessingStrategyTypes, QueueSubmitStrategyTypes } from '@shared/models/queue.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'tb-queue-form',
@@ -47,7 +48,7 @@ import { isDefinedAndNotNull } from '@core/utils';
     }
   ]
 })
-export class QueueFormComponent implements ControlValueAccessor, OnInit, Validator {
+export class QueueFormComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator {
 
   @Input()
   disabled: boolean;
@@ -55,20 +56,28 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, Validat
   @Input()
   newQueue = false;
 
+  @Input()
+  mainQueue = false;
+
   @Input()
   systemQueue = false;
 
-  private modelValue: QueueInfo;
+  @Input()
+  expanded = false;
+
+  @Output()
+  removeQueue = new EventEmitter();
 
   queueFormGroup: FormGroup;
-
   submitStrategies: string[] = [];
   processingStrategies: string[] = [];
-
+  queueTitle = '';
   hideBatchSize = false;
 
+  private modelValue: QueueInfo;
   private propagateChange = null;
   private propagateChangePending = false;
+  private valueChange$: Subscription = null;
 
   constructor(private dialog: MatDialog,
               private utils: UtilsService,
@@ -114,10 +123,13 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, Validat
           description: ['']
         })
       });
-    this.queueFormGroup.valueChanges.subscribe(() => {
+    this.valueChange$ = this.queueFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
     });
-    this.queueFormGroup.get('name').valueChanges.subscribe((value) => this.queueFormGroup.patchValue({topic: `tb_rule_engine.${value}`}));
+    this.queueFormGroup.get('name').valueChanges.subscribe((value) => {
+      this.queueFormGroup.patchValue({topic: `tb_rule_engine.${value}`});
+      this.queueTitle = this.utils.customTranslation(value, value);
+    });
     this.queueFormGroup.get('submitStrategy').get('type').valueChanges.subscribe(() => {
       this.submitStrategyTypeChanged();
     });
@@ -128,6 +140,13 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, Validat
     }
   }
 
+  ngOnDestroy() {
+    if (this.valueChange$) {
+      this.valueChange$.unsubscribe();
+      this.valueChange$ = null;
+    }
+  }
+
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
@@ -141,6 +160,10 @@ export class QueueFormComponent implements ControlValueAccessor, OnInit, Validat
   writeValue(value: QueueInfo): void {
     this.propagateChangePending = false;
     this.modelValue = value;
+    if (!this.modelValue.name) {
+      this.expanded = true;
+    }
+    this.queueTitle = this.utils.customTranslation(value.name, value.name);
     if (isDefinedAndNotNull(this.modelValue)) {
       this.queueFormGroup.patchValue(this.modelValue, {emitEvent: false});
     }

ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts

@@ -33,6 +33,8 @@ import { TenantProfileComponent } from '../../components/profile/tenant-profile.
 import { TenantProfileTabsComponent } from './tenant-profile-tabs.component';
 import { DialogService } from '@core/services/dialog.service';
 import { ImportExportService } from '@home/components/import-export/import-export.service';
+import { map } from 'rxjs/operators';
+import { guid } from '@core/utils';
 
 @Injectable()
 export class TenantProfilesTableConfigResolver implements Resolve<EntityTableConfig<TenantProfile>> {
@@ -84,7 +86,12 @@ export class TenantProfilesTableConfigResolver implements Resolve<EntityTableCon
     this.config.deleteEntitiesContent = () => this.translate.instant('tenant-profile.delete-tenant-profiles-text');
 
     this.config.entitiesFetchFunction = pageLink => this.tenantProfileService.getTenantProfiles(pageLink);
-    this.config.loadEntity = id => this.tenantProfileService.getTenantProfile(id.id);
+    this.config.loadEntity = id => this.tenantProfileService.getTenantProfile(id.id).pipe(
+      map(tenantProfile => ({
+        ...tenantProfile,
+        profileData: {...tenantProfile.profileData, queueConfiguration: this.addId(tenantProfile.profileData.queueConfiguration)},
+      }))
+    );
     this.config.saveEntity = tenantProfile => this.tenantProfileService.saveTenantProfile(tenantProfile);
     this.config.deleteEntity = id => this.tenantProfileService.deleteTenantProfile(id.id);
     this.config.onEntityAction = action => this.onTenantProfileAction(action);
@@ -93,6 +100,15 @@ export class TenantProfilesTableConfigResolver implements Resolve<EntityTableCon
     this.config.addActionDescriptors = this.configureAddActions();
   }
 
+  addId(queues) {
+    const queuesWithId = [];
+    queues.forEach(value => {
+      value.id = guid();
+      queuesWithId.push(value);
+    });
+    return queuesWithId;
+  }
+
   resolve(): EntityTableConfig<TenantProfile> {
     this.config.tableTitle = this.translate.instant('tenant-profile.tenant-profiles');
 

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectQueueFormGroup" class="mat-block">
+<mat-form-field [formGroup]="selectQueueFormGroup" class="mat-block autocomplete-queue">
   <input matInput type="text" placeholder="{{ 'queue.queue-name' | translate }}"
          #queueInput
          formControlName="queueId"
@@ -30,10 +30,11 @@
   </button>
   <mat-autocomplete class="tb-autocomplete"
                     #queueAutocomplete="matAutocomplete"
-                    [displayWith]="displayQueueFn">
+                    [displayWith]="displayQueueFn"
-    <mat-option *ngFor="let queue of filteredQueues | async" [value]="queue">
+                    >
+    <mat-option *ngFor="let queue of filteredQueues | async" [value]="queue" class="queue-option">
       <span [innerHTML]="queue.name | highlight:searchText"></span>
-      <small style="display: block;">{{getDescription(queue)}}</small>
+      <small class="queue-option-description">{{getDescription(queue)}}</small>
     </mat-option>
     <mat-option *ngIf="!(filteredQueues | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2022 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+::ng-deep {
+  .queue-option {
+    .mat-option-text {
+      display: inline;
+    }
+    .queue-option-description {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts

@@ -36,7 +36,7 @@ import { emptyPageData } from '@shared/models/page/page-data';
 @Component({
   selector: 'tb-queue-autocomplete',
   templateUrl: './queue-autocomplete.component.html',
-  styleUrls: [],
+  styleUrls: ['./queue-autocomplete.component.scss'],
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => QueueAutocompleteComponent),
@@ -207,7 +207,10 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
 
   getDescription(value) {
     return value.additionalInfo?.description ? value.additionalInfo.description :
-      `Submit Strategy: ${value.submitStrategy.type}, Processing Strategy: ${value.processingStrategy.type}`;
+      this.translate.instant(
+        'queue.alt-description',
+        {submitStrategy: value.submitStrategy.type, processingStrategy: value.processingStrategy.type}
+      );
   }
 
   clear() {

ui-ngx/src/app/shared/models/queue.models.ts

@@ -43,6 +43,7 @@ export enum QueueProcessingStrategyTypes {
 }
 
 export interface QueueInfo extends BaseData<QueueId> {
+  generatedId?: string;
   name: string;
   packProcessingTimeout: number;
   partitions: number;

ui-ngx/src/app/shared/models/tenant.model.ts

@@ -98,7 +98,7 @@ export function createTenantProfileConfiguration(type: TenantProfileType): Tenan
 
 export interface TenantProfileData {
   configuration: TenantProfileConfiguration;
-  queueConfiguration?: QueueInfo;
+  queueConfiguration?: Array<QueueInfo>;
 }
 
 export interface TenantProfile extends BaseData<TenantProfileId> {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2773,6 +2773,7 @@
         "select-name": "Select queue name",
         "name": "Name",
         "name-required": "Queue name is required!",
+        "name-unique": "Queue name is not unique!",
         "queue-required": "Queue is required!",
         "topic-required": "Queue topic is required!",
         "poll-interval-required": "Poll interval is required!",
@@ -2819,7 +2820,8 @@
         "delete": "Delete queue",
         "copyId": "Copy queue Id",
         "idCopiedMessage": "Queue Id has been copied to clipboard",
-        "description": "Description"
+        "description": "Description",
+        "alt-description": "Submit Strategy: {{submitStrategy}}, Processing Strategy: {{processingStrategy}}"
     },
     "tenant": {
         "tenant": "Tenant",