dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: add id to queues and fixed bugs

Browse Source
This commit is contained in:
fe-dev 2022-05-25 18:45:00 +03:00
parent b6cbe0ca77
commit d99d4ebb0d
14 changed files with 312 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,33 +16,16 @@
-->
<div fxLayout="column">
<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;">
<mat-expansion-panel-header>
<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"
[newQueue]="newQueue">
</tb-queue-form>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<div class="tb-tenant-profile-queues"
*ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<tb-queue-form [formControl]="queuesControl"
(removeQueue)="removeQueue($index)"
[mainQueue]="$index === 0"
[expanded]="$index === 0"
[newQueue]="newQueue">
</tb-queue-form>
</div>
<div *ngIf="!queuesFormArray.controls.length">
<span translate fxLayoutAlign="center center"

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

@ -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;

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

@ -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);
}
}

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

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

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

@ -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(

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

@ -15,161 +15,182 @@
limitations under the License.
-->
<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-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.poll-interval</mat-label>
<input type="number" matInput formControlName="pollInterval" required>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
{{ 'queue.poll-interval-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('min') &&
!queueFormGroup.get('pollInterval').hasError('required')">
{{ 'queue.poll-interval-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.partitions</mat-label>
<input type="number" matInput formControlName="partitions" required>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
{{ 'queue.partitions-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('min') &&
!queueFormGroup.get('partitions').hasError('required')">
{{ 'queue.partitions-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox class="hinted-checkbox" formControlName="consumerPerPartition">
<div>{{ 'queue.consumer-per-partition' | translate }}</div>
<div class="tb-hint">{{'queue.consumer-per-partition-hint' | translate}}</div>
</mat-checkbox>
<mat-form-field class="mat-block">
<mat-label translate>queue.processing-timeout</mat-label>
<input type="number" matInput formControlName="packProcessingTimeout" required>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
{{ 'queue.pack-processing-timeout-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('min') &&
!queueFormGroup.get('packProcessingTimeout').hasError('required')">
{{ 'queue.pack-processing-timeout-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-accordion class="queue-strategy" [multi]="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title translate>
queue.submit-strategy
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div formGroupName="submitStrategy">
<mat-form-field class="mat-block">
<mat-label translate>queue.submit-strategy</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let strategy of submitStrategies" [value]="strategy">
{{ strategy }}
</mat-option>
</mat-select>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.type').hasError('required')">
{{ 'queue.submit-strategy-type-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" *ngIf="hideBatchSize">
<mat-label translate>queue.batch-size</mat-label>
<input type="number" matInput formControlName="batchSize" required>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
{{ 'queue.batch-size-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('min') &&
!queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
{{ 'queue.batch-size-min-value' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title translate>
queue.processing-strategy
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div formGroupName="processingStrategy">
<mat-form-field class="mat-block">
<mat-label translate>queue.processing-strategy</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let strategy of processingStrategies" [value]="strategy">
{{ strategy }}
</mat-option>
</mat-select>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.type').hasError('required')">
{{ 'queue.processing-strategy-type-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.retries</mat-label>
<input type="number" matInput formControlName="retries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('required')">
{{ 'queue.retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('min') &&
!queueFormGroup.get('processingStrategy.retries').hasError('required')">
{{ 'queue.retries-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.failure-percentage</mat-label>
<input type="number" matInput formControlName="failurePercentage" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('required')">
{{ 'queue.failure-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('min') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('max')">
{{ 'queue.failure-percentage-min-value' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('max') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('min')">
{{ 'queue.failure-percentage-max-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.pause-between-retries</mat-label>
<input type="number" matInput formControlName="pauseBetweenRetries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
{{ 'queue.pause-between-retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('min') &&
!queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
{{ 'queue.pause-between-retries-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.max-pause-between-retries</mat-label>
<input type="number" matInput formControlName="maxPauseBetweenRetries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
{{ 'queue.max-pause-between-retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('min') &&
!queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
{{ 'queue.max-pause-between-retries-min-value' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<mat-form-field class="mat-block" formGroupName="additionalInfo">
<mat-label translate>queue.description</mat-label>
<textarea matInput formControlName="description" rows="2"></textarea>
</mat-form-field>
</form>
<mat-expansion-panel fxFlex [(expanded)]="expanded">
<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>
<input type="number" matInput formControlName="pollInterval" required>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
{{ 'queue.poll-interval-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('min') &&
!queueFormGroup.get('pollInterval').hasError('required')">
{{ 'queue.poll-interval-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.partitions</mat-label>
<input type="number" matInput formControlName="partitions" required>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
{{ 'queue.partitions-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('min') &&
!queueFormGroup.get('partitions').hasError('required')">
{{ 'queue.partitions-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox class="hinted-checkbox" formControlName="consumerPerPartition">
<div>{{ 'queue.consumer-per-partition' | translate }}</div>
<div class="tb-hint">{{'queue.consumer-per-partition-hint' | translate}}</div>
</mat-checkbox>
<mat-form-field class="mat-block">
<mat-label translate>queue.processing-timeout</mat-label>
<input type="number" matInput formControlName="packProcessingTimeout" required>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
{{ 'queue.pack-processing-timeout-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('min') &&
!queueFormGroup.get('packProcessingTimeout').hasError('required')">
{{ 'queue.pack-processing-timeout-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-accordion class="queue-strategy" [multi]="true">
<mat-expansion-panel [expanded]="false">
<mat-expansion-panel-header>
<mat-panel-title translate>
queue.submit-strategy
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div formGroupName="submitStrategy">
<mat-form-field class="mat-block">
<mat-label translate>queue.submit-strategy</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let strategy of submitStrategies" [value]="strategy">
{{ strategy }}
</mat-option>
</mat-select>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.type').hasError('required')">
{{ 'queue.submit-strategy-type-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" *ngIf="hideBatchSize">
<mat-label translate>queue.batch-size</mat-label>
<input type="number" matInput formControlName="batchSize" required>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
{{ 'queue.batch-size-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('submitStrategy.batchSize').hasError('min') &&
!queueFormGroup.get('submitStrategy.batchSize').hasError('required')">
{{ 'queue.batch-size-min-value' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="false">
<mat-expansion-panel-header>
<mat-panel-title translate>
queue.processing-strategy
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div formGroupName="processingStrategy">
<mat-form-field class="mat-block">
<mat-label translate>queue.processing-strategy</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let strategy of processingStrategies" [value]="strategy">
{{ strategy }}
</mat-option>
</mat-select>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.type').hasError('required')">
{{ 'queue.processing-strategy-type-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.retries</mat-label>
<input type="number" matInput formControlName="retries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('required')">
{{ 'queue.retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.retries').hasError('min') &&
!queueFormGroup.get('processingStrategy.retries').hasError('required')">
{{ 'queue.retries-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.failure-percentage</mat-label>
<input type="number" matInput formControlName="failurePercentage" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('required')">
{{ 'queue.failure-percentage-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('min') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('max')">
{{ 'queue.failure-percentage-min-value' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.failurePercentage').hasError('max') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('required') &&
!queueFormGroup.get('processingStrategy.failurePercentage').hasError('min')">
{{ 'queue.failure-percentage-max-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.pause-between-retries</mat-label>
<input type="number" matInput formControlName="pauseBetweenRetries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
{{ 'queue.pause-between-retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('min') &&
!queueFormGroup.get('processingStrategy.pauseBetweenRetries').hasError('required')">
{{ 'queue.pause-between-retries-min-value' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>queue.max-pause-between-retries</mat-label>
<input type="number" matInput formControlName="maxPauseBetweenRetries" required>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
{{ 'queue.max-pause-between-retries-required' | translate }}
</mat-error>
<mat-error *ngIf="queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('min') &&
!queueFormGroup.get('processingStrategy.maxPauseBetweenRetries').hasError('required')">
{{ 'queue.max-pause-between-retries-min-value' | translate }}
</mat-error>
</mat-form-field>
</div>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<mat-form-field class="mat-block" formGroupName="additionalInfo">
<mat-label translate>queue.description</mat-label>
<textarea matInput formControlName="description" rows="2"></textarea>
</mat-form-field>
</form>
</ng-template>
</mat-expansion-panel>

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

@ -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});
}

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

@ -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');

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

@ -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">
<mat-option *ngFor="let queue of filteredQueues | async" [value]="queue">
[displayWith]="displayQueueFn"
>
<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()">

29
ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss Normal file
View File

@ -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;
}
}
}

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

@ -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() {

1
ui-ngx/src/app/shared/models/queue.models.ts
View File

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

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

@ -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> {

4
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -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",