Artem Babak
4 years ago
16 changed files with 1018 additions and 80 deletions
@ -0,0 +1,52 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<form [formGroup]="editDetailsFormGroup" style="width: 800px;"> |
|||
<mat-toolbar color="primary"> |
|||
<h2 translate>{{ title }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<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"> |
|||
<div fxFlex fxLayout="column"> |
|||
<tb-rate-limits-list |
|||
formControlName="rateLimits" |
|||
[disabled]="isLoading$ | async"> |
|||
</tb-rate-limits-list> |
|||
</div> |
|||
</fieldset> |
|||
</div> |
|||
<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"> |
|||
{{ 'action.save' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,83 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
|||
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 { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
export interface RateLimitsDetailsDialogData { |
|||
rateLimits: string; |
|||
title: string; |
|||
readonly: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
templateUrl: './rate-limits-details-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: RateLimitsDetailsDialogComponent}] |
|||
}) |
|||
export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent, any> |
|||
implements OnInit, ErrorStateMatcher { |
|||
|
|||
editDetailsFormGroup: FormGroup; |
|||
|
|||
submitted: boolean = false; |
|||
|
|||
rateLimits: string = this.data.rateLimits; |
|||
|
|||
title: string = this.data.title; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: RateLimitsDetailsDialogData, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent, any>, |
|||
private fb: FormBuilder, |
|||
public translate: TranslateService) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.editDetailsFormGroup = this.fb.group({ |
|||
rateLimits: [this.rateLimits, []] |
|||
}); |
|||
if (this.data.readonly) { |
|||
this.editDetailsFormGroup.disable(); |
|||
} |
|||
} |
|||
|
|||
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(null); |
|||
} |
|||
|
|||
save(): void { |
|||
this.submitted = true; |
|||
this.dialogRef.close(this.editDetailsFormGroup.get('rateLimits').value); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<section fxFlex fxLayout="column" [formGroup]="rateLimitsListFormGroup"> |
|||
<div fxFlex fxLayout="column" [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> |
|||
tenant-profile.rate-limits.but-less-than |
|||
</div> |
|||
<div fxFlex fxLayout="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block"> |
|||
<mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label> |
|||
<input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}" |
|||
type="number" min="1" step="1" formControlName="value" required> |
|||
<mat-error *ngIf="rateLimit.get('value').hasError('required')"> |
|||
{{ 'tenant-profile.rate-limits.number-of-messages-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block"> |
|||
<mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label> |
|||
<input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}" |
|||
type="number" min="1" step="1" formControlName="time" required> |
|||
<mat-error *ngIf="rateLimit.get('time').hasError('required')"> |
|||
{{ 'tenant-profile.rate-limits.per-seconds-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<button mat-icon-button type="button" color="primary" |
|||
*ngIf="!rateLimitsFormArray().disabled" |
|||
(click)="removeRateLimits($index)" |
|||
[matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above"> |
|||
<mat-icon>remove_circle_outline</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray().disabled" |
|||
(click)="addRateLimits()" |
|||
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above"> |
|||
<span translate>tenant-profile.rate-limits.add-limit</span> |
|||
</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> |
|||
<tb-rate-limits-text [formControl]="rateLimitsControl"></tb-rate-limits-text> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
@ -0,0 +1,47 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
:host { |
|||
button { |
|||
min-width: 40px; |
|||
mat-icon { |
|||
margin-top: 0.6em; |
|||
} |
|||
} |
|||
.tb-rate-limits-preview { |
|||
margin-top: 1.5em; |
|||
span { |
|||
padding-left: 1em; |
|||
} |
|||
div { |
|||
border: 1px groove rgba(0, 0, 0, .25); |
|||
border-radius: 4px; |
|||
padding: 1em; |
|||
} |
|||
} |
|||
.tb-rate-limits-operation { |
|||
font-size: 12px; |
|||
color: rgba(0,0,0,.54); |
|||
margin-bottom: 16px; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
mat-form-field { |
|||
.mat-form-field-wrapper { |
|||
padding-bottom: 1em; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,161 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormArray, |
|||
FormBuilder, |
|||
FormControl, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { Subscription } from 'rxjs'; |
|||
import { |
|||
RateLimits, |
|||
rateLimitsArrayToString, |
|||
stringToRateLimitsArray |
|||
} from '@shared/models/rate-limits.models'; |
|||
import { isDefinedAndNotNull } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-rate-limits-list', |
|||
templateUrl: './rate-limits-list.component.html', |
|||
styleUrls: ['./rate-limits-list.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => RateLimitsListComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => RateLimitsListComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class RateLimitsListComponent implements ControlValueAccessor, Validator, OnInit { |
|||
|
|||
@Input() disabled: boolean; |
|||
|
|||
rateLimitsListFormGroup: FormGroup; |
|||
|
|||
rateLimitsControl: FormControl; |
|||
|
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
private valueChangeSubscription: Subscription = null; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.rateLimitsListFormGroup = this.fb.group({}); |
|||
this.rateLimitsListFormGroup.addControl('rateLimits', |
|||
this.fb.array([])); |
|||
this.rateLimitsControl = this.fb.control(null); |
|||
this.rateLimitsListFormGroup.valueChanges.subscribe((value) => { |
|||
this.updateView(value?.rateLimits); |
|||
} |
|||
); |
|||
} |
|||
|
|||
rateLimitsFormArray(): FormArray { |
|||
return this.rateLimitsListFormGroup.get('rateLimits') as FormArray; |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState?(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.rateLimitsListFormGroup.disable({emitEvent: false}); |
|||
this.rateLimitsControl.disable({emitEvent: false}); |
|||
} else { |
|||
this.rateLimitsListFormGroup.enable({emitEvent: false}); |
|||
this.rateLimitsControl.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.rateLimitsListFormGroup.valid && this.rateLimitsControl.valid ? null : { |
|||
rateLimitsList: {valid: false} |
|||
}; |
|||
} |
|||
|
|||
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(':'); |
|||
let value = valueTime[0]; |
|||
let time = valueTime[1]; |
|||
const rateLimitsControl = this.fb.group({ |
|||
value: [value, [Validators.required]], |
|||
time: [time, [Validators.required]] |
|||
}); |
|||
if (this.disabled) { |
|||
rateLimitsControl.disable(); |
|||
} |
|||
rateLimitsControls.push(rateLimitsControl); |
|||
} |
|||
} |
|||
this.rateLimitsListFormGroup.setControl('rateLimits', this.fb.array(rateLimitsControls)); |
|||
this.rateLimitsControl.patchValue(stringToRateLimitsArray(value), {emitEvent: false}); |
|||
this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges.subscribe((value) => { |
|||
this.updateView(value?.rateLimits); |
|||
}); |
|||
} |
|||
|
|||
public removeRateLimits(index: number) { |
|||
(this.rateLimitsListFormGroup.get('rateLimits') as FormArray).removeAt(index); |
|||
} |
|||
|
|||
public addRateLimits() { |
|||
const rateLimitsArray = this.rateLimitsListFormGroup.get('rateLimits') as FormArray; |
|||
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 rateLimitsString = rateLimitsArrayToString(notNullRateLimits); |
|||
this.propagateChange(rateLimitsString); |
|||
this.rateLimitsControl.patchValue(stringToRateLimitsArray(rateLimitsString), {emitEvent: false}); |
|||
} else { |
|||
this.propagateChange(null); |
|||
this.rateLimitsControl.patchValue(null, {emitEvent: false}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled, required: requiredClass, nowrap: nowrap}" |
|||
[innerHTML]="rateLimitsText"></div> |
|||
@ -0,0 +1,49 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
:host { |
|||
.tb-rate-limits-text { |
|||
overflow: hidden; |
|||
|
|||
&.disabled { |
|||
opacity: 0.7; |
|||
} |
|||
&.required { |
|||
color: #f44336; |
|||
padding: 0 4px; |
|||
} |
|||
&.nowrap { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.tb-rate-limits-text { |
|||
span { |
|||
font-size: 14px; |
|||
line-height: 1.8em; |
|||
} |
|||
.tb-rate-limits-value { |
|||
font-weight: bold; |
|||
border: 1px groove rgba(0, 0, 0, .25); |
|||
border-radius: 4px; |
|||
padding-left: 4px; |
|||
padding-right: 4px; |
|||
color: #305680; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
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 '@shared/models/rate-limits.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-rate-limits-text', |
|||
templateUrl: './rate-limits-text.component.html', |
|||
styleUrls: ['./rate-limits-text.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => RateLimitsTextComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
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) => { }; |
|||
|
|||
constructor(private dialog: MatDialog, |
|||
private fb: FormBuilder, |
|||
private translate: TranslateService) { |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
} |
|||
|
|||
writeValue(value: Array<RateLimits>): void { |
|||
this.updateText(value); |
|||
} |
|||
|
|||
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.requiredClass = true; |
|||
} else { |
|||
this.rateLimitsText = this.noRateLimitsText; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,34 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div fxFlex fxLayout="row" fxLayoutGap="8px"> |
|||
<fieldset class="fieldset-element"> |
|||
<legend class="legend-element">{{ label | translate }}</legend> |
|||
<div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px" |
|||
(click)="onClick($event, 'edit')" |
|||
[matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above"> |
|||
<tb-rate-limits-text formControlName="rateLimits"></tb-rate-limits-text> |
|||
</div> |
|||
</fieldset> |
|||
<div style="padding-top: 12px"> |
|||
<button mat-icon-button color="primary" type="button" *ngIf="!disabled" |
|||
(click)="onClick($event, 'add')" |
|||
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above"> |
|||
<mat-icon>add_circle_outline</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
:host { |
|||
padding: 12px 0 12px 0; |
|||
|
|||
.fieldset-element { |
|||
cursor: pointer; |
|||
padding: 0.5em; |
|||
border: 1px groove rgba(0, 0, 0, 0.25); |
|||
border-radius: 4px; |
|||
width: 100%; |
|||
|
|||
.legend-element { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,153 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormControl, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
Validator |
|||
} from '@angular/forms'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { |
|||
RateLimitsDetailsDialogComponent, |
|||
RateLimitsDetailsDialogData |
|||
} from '@home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component'; |
|||
import { |
|||
addRateLimitTranslationMap, |
|||
editRateLimitTranslationMap, |
|||
rateLimitLabelTranslationMap, |
|||
RateLimitsType, |
|||
stringToRateLimitsArray |
|||
} from '@shared/models/rate-limits.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-rate-limits', |
|||
templateUrl: './rate-limits.component.html', |
|||
styleUrls: ['./rate-limits.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => RateLimitsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => RateLimitsComponent), |
|||
multi: true, |
|||
} |
|||
] |
|||
}) |
|||
export class RateLimitsComponent implements ControlValueAccessor, OnInit, Validator { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
type: RateLimitsType; |
|||
|
|||
label: string; |
|||
|
|||
rateLimitsFormGroup: FormGroup; |
|||
|
|||
private modelValue: string; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
constructor(private dialog: MatDialog, |
|||
private fb: FormBuilder) { |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.label = rateLimitLabelTranslationMap.get(this.type); |
|||
this.rateLimitsFormGroup = this.fb.group({ |
|||
rateLimits: [null, []] |
|||
}); |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean) { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.rateLimitsFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.rateLimitsFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: string) { |
|||
this.modelValue = value; |
|||
this.updateRateLimitsInfo(); |
|||
} |
|||
|
|||
public validate(c: FormControl) { |
|||
return null; |
|||
} |
|||
|
|||
public onClick($event: Event, action: string) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const title = this.setTitle(action); |
|||
this.dialog.open<RateLimitsDetailsDialogComponent, RateLimitsDetailsDialogData, |
|||
string>(RateLimitsDetailsDialogComponent, { |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: { |
|||
rateLimits: this.modelValue, |
|||
title, |
|||
readonly: this.disabled |
|||
} |
|||
}).afterClosed().subscribe((result) => { |
|||
if (result) { |
|||
this.modelValue = result; |
|||
this.updateModel(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private setTitle(action: string): string { |
|||
switch (action) { |
|||
case 'add': |
|||
return addRateLimitTranslationMap.get(this.type); |
|||
case 'edit': |
|||
return editRateLimitTranslationMap.get(this.type); |
|||
} |
|||
} |
|||
|
|||
private updateRateLimitsInfo() { |
|||
this.rateLimitsFormGroup.patchValue( |
|||
{ |
|||
rateLimits: stringToRateLimitsArray(this.modelValue) |
|||
} |
|||
); |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.updateRateLimitsInfo(); |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,137 @@ |
|||
///
|
|||
/// 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.
|
|||
///
|
|||
|
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
export interface RateLimits { |
|||
value: string; |
|||
time: string; |
|||
} |
|||
|
|||
export enum RateLimitsType { |
|||
DEVICE_MESSAGES = 'DEVICE_MESSAGES', |
|||
DEVICE_TELEMETRY_MESSAGES = 'DEVICE_TELEMETRY_MESSAGES', |
|||
DEVICE_TELEMETRY_DATA_POINTS = 'DEVICE_TELEMETRY_DATA_POINTS', |
|||
TENANT_MESSAGES = 'TENANT_MESSAGES', |
|||
TENANT_TELEMETRY_MESSAGES = 'TENANT_TELEMETRY_MESSAGES', |
|||
TENANT_TELEMETRY_DATA_POINTS = 'TENANT_TELEMETRY_DATA_POINTS', |
|||
TENANT_SERVER_REST_LIMITS_CONFIGURATION = 'TENANT_SERVER_REST_LIMITS_CONFIGURATION', |
|||
CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION = 'CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION', |
|||
WS_UPDATE_PER_SESSION_RATE_LIMIT = 'WS_UPDATE_PER_SESSION_RATE_LIMIT', |
|||
CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION = 'CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION', |
|||
} |
|||
|
|||
export const rateLimitLabelTranslationMap = new Map<RateLimitsType, string>( |
|||
[ |
|||
[RateLimitsType.TENANT_MESSAGES, 'tenant-profile.rate-limits.transport-tenant-msg'], |
|||
[RateLimitsType.TENANT_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.transport-tenant-telemetry-msg'], |
|||
[RateLimitsType.TENANT_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.transport-tenant-telemetry-data-points'], |
|||
[RateLimitsType.DEVICE_MESSAGES, 'tenant-profile.rate-limits.transport-device-msg'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.transport-device-telemetry-msg'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.transport-device-telemetry-data-points'], |
|||
[RateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.transport-tenant-msg-rate-limit'], |
|||
[RateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.customer-rest-limits'], |
|||
[RateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT, 'tenant-profile.ws-limit-updates-per-session'], |
|||
[RateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION, 'tenant-profile.cassandra-tenant-limits-configuration'], |
|||
] |
|||
); |
|||
|
|||
export const editRateLimitTranslationMap = new Map<RateLimitsType, string>( |
|||
[ |
|||
[RateLimitsType.TENANT_MESSAGES, 'tenant-profile.rate-limits.edit-transport-tenant-msg-title'], |
|||
[RateLimitsType.TENANT_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.edit-transport-tenant-telemetry-msg-title'], |
|||
[RateLimitsType.TENANT_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.edit-transport-tenant-telemetry-data-points-title'], |
|||
[RateLimitsType.DEVICE_MESSAGES, 'tenant-profile.rate-limits.edit-transport-device-msg-title'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.edit-transport-device-telemetry-msg-title'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.edit-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.edit-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.edit-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT, 'tenant-profile.rate-limits.edit-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.edit-transport-device-telemetry-data-points-title'], |
|||
] |
|||
); |
|||
|
|||
export const addRateLimitTranslationMap = new Map<RateLimitsType, string>( |
|||
[ |
|||
[RateLimitsType.TENANT_MESSAGES, 'tenant-profile.rate-limits.add-transport-tenant-msg-title'], |
|||
[RateLimitsType.TENANT_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.add-transport-tenant-telemetry-msg-title'], |
|||
[RateLimitsType.TENANT_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.add-transport-tenant-telemetry-data-points-title'], |
|||
[RateLimitsType.DEVICE_MESSAGES, 'tenant-profile.rate-limits.add-transport-device-msg-title'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_MESSAGES, 'tenant-profile.rate-limits.add-transport-device-telemetry-msg-title'], |
|||
[RateLimitsType.DEVICE_TELEMETRY_DATA_POINTS, 'tenant-profile.rate-limits.add-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.add-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.add-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT, 'tenant-profile.rate-limits.add-transport-device-telemetry-data-points-title'], |
|||
[RateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.add-transport-device-telemetry-data-points-title'], |
|||
] |
|||
); |
|||
|
|||
export function stringToRateLimitsArray(rateLimits: string): Array<RateLimits> { |
|||
const result: Array<RateLimits> = []; |
|||
if (rateLimits?.length > 0) { |
|||
let rateLimitsArrays = rateLimits.split(','); |
|||
for (let i = 0; i < rateLimitsArrays.length; i++) { |
|||
let valueTime = rateLimitsArrays[i].split(':'); |
|||
let value = valueTime[0]; |
|||
let time = valueTime[1]; |
|||
const rateLimitControl = { |
|||
value, |
|||
time |
|||
} |
|||
result.push(rateLimitControl); |
|||
} |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
export function rateLimitsArrayToString(rateLimits: Array<RateLimits>): string { |
|||
let result = ''; |
|||
for (let i = 0; i < rateLimits.length; i++) { |
|||
result = result.concat(rateLimits[i].value, ':', rateLimits[i].time); |
|||
if ((rateLimits.length > 1) && (i !== rateLimits.length - 1)) { |
|||
result = result.concat(','); |
|||
} |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
export function rateLimitsArrayToHtml(translate: TranslateService, rateLimitsArray: Array<RateLimits>): string { |
|||
const rateLimitsHtml = rateLimitsArray.map((rateLimits, index) => { |
|||
const isLast: boolean = index === rateLimitsArray.length-1; |
|||
return rateLimitsToHtml(translate, rateLimits, isLast); |
|||
}); |
|||
let result: string; |
|||
if (rateLimitsHtml.length > 1) { |
|||
const butLessThanText = translate.instant('tenant-profile.rate-limits.but-less-than'); |
|||
result = rateLimitsHtml.join(' <span class="disabled">' + butLessThanText + '</span> '); |
|||
} else { |
|||
result = rateLimitsHtml[0]; |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
function rateLimitsToHtml(translate: TranslateService, rateLimit: RateLimits, isLast: boolean): string { |
|||
const value = rateLimit.value; |
|||
const time = rateLimit.time; |
|||
const operation = translate.instant('tenant-profile.rate-limits.messages-per'); |
|||
const seconds = translate.instant('tenant-profile.rate-limits.sec'); |
|||
const comma = isLast ? '' : ','; |
|||
const result = `<span class="tb-rate-limits-value">${value}</span>
|
|||
<span>${operation}</span> |
|||
<span class="tb-rate-limits-value"> ${time}</span> |
|||
<span>${seconds}${comma}</span><br>`;
|
|||
return result; |
|||
} |
|||
Loading…
Reference in new issue