Igor Kulikov
4 years ago
committed by
GitHub
GitHub
16 changed files with 936 additions and 97 deletions
@ -0,0 +1,43 @@ |
|||
<!-- |
|||
|
|||
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"> |
|||
<mat-toolbar color="primary"> |
|||
<h2>{{ title | translate }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
[matDialogClose]="undefined" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content> |
|||
<tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list> |
|||
</div> |
|||
<div mat-dialog-actions fxLayoutAlign="end center"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[matDialogClose]="undefined" |
|||
cdkFocusInitial> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button *ngIf="!data.readonly" mat-raised-button color="primary" (click)="save()" |
|||
[disabled]="editDetailsFormGroup.invalid || !editDetailsFormGroup.dirty"> |
|||
{{ 'action.save' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,59 @@ |
|||
///
|
|||
/// 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 } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
|
|||
export interface RateLimitsDetailsDialogData { |
|||
rateLimits: string; |
|||
title: string; |
|||
readonly: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
templateUrl: './rate-limits-details-dialog.component.html' |
|||
}) |
|||
export class RateLimitsDetailsDialogComponent extends DialogComponent<RateLimitsDetailsDialogComponent> { |
|||
|
|||
editDetailsFormGroup: FormGroup; |
|||
|
|||
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, |
|||
public dialogRef: MatDialogRef<RateLimitsDetailsDialogComponent>, |
|||
private fb: FormBuilder) { |
|||
super(store, router, dialogRef); |
|||
this.editDetailsFormGroup = this.fb.group({ |
|||
rateLimits: [this.rateLimits, []] |
|||
}); |
|||
if (this.data.readonly) { |
|||
this.editDetailsFormGroup.disable(); |
|||
} |
|||
} |
|||
|
|||
save(): void { |
|||
this.dialogRef.close(this.editDetailsFormGroup.get('rateLimits').value); |
|||
} |
|||
} |
|||
@ -0,0 +1,66 @@ |
|||
<!-- |
|||
|
|||
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 class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup"> |
|||
<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> |
|||
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-error *ngIf="rateLimit.get('value').hasError('min')"> |
|||
{{ 'tenant-profile.rate-limits.number-of-messages-min' | 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-error *ngIf="rateLimit.get('time').hasError('min')"> |
|||
{{ 'tenant-profile.rate-limits.per-seconds-min' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<button mat-icon-button type="button" color="primary" |
|||
class="tb-rate-limits-button" |
|||
*ngIf="!rateLimitsFormArray.disabled" |
|||
(click)="removeRateLimits($index)" |
|||
[disabled]="disabled" |
|||
[matTooltip]="'tenant-profile.rate-limits.remove-limit' | translate" matTooltipPosition="above"> |
|||
<mat-icon>remove_circle_outline</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<button mat-raised-button color="primary" *ngIf="!rateLimitsFormArray.disabled" |
|||
(click)="addRateLimits()" |
|||
[disabled]="disabled" |
|||
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above"> |
|||
<span translate>tenant-profile.rate-limits.add-limit</span> |
|||
</button> |
|||
<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> |
|||
<tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text> |
|||
</div> |
|||
</section> |
|||
@ -0,0 +1,57 @@ |
|||
/** |
|||
* 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 "../../../../../../../scss/constants"; |
|||
|
|||
:host { |
|||
.tb-rate-limits-form { |
|||
@media #{$mat-gt-sm} { |
|||
min-width: 600px; |
|||
} |
|||
} |
|||
|
|||
.tb-rate-limits-preview { |
|||
margin-top: 1.5em; |
|||
span { |
|||
padding-left: 1em; |
|||
} |
|||
tb-rate-limits-text { |
|||
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; |
|||
} |
|||
|
|||
.tb-rate-limits-button { |
|||
margin-top: 0.5em; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
mat-form-field { |
|||
.mat-form-field-wrapper { |
|||
padding-bottom: 1em; |
|||
} |
|||
.mat-form-field-infix { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,152 @@ |
|||
///
|
|||
/// 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, OnDestroy, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormArray, |
|||
FormBuilder, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { Subject, Subscription } from 'rxjs'; |
|||
import { RateLimits, rateLimitsArrayToString, stringToRateLimitsArray } from './rate-limits.models'; |
|||
import { isDefinedAndNotNull } from '@core/utils'; |
|||
import { takeUntil } from 'rxjs/operators'; |
|||
|
|||
@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, OnDestroy { |
|||
|
|||
@Input() disabled: boolean; |
|||
|
|||
rateLimitsListFormGroup: FormGroup; |
|||
|
|||
rateLimitsArray: Array<RateLimits>; |
|||
|
|||
private valueChangeSubscription: Subscription = null; |
|||
private destroy$ = new Subject(); |
|||
private propagateChange = (v: any) => { }; |
|||
|
|||
constructor(private fb: FormBuilder) {} |
|||
|
|||
ngOnInit(): void { |
|||
this.rateLimitsListFormGroup = this.fb.group({ |
|||
rateLimits: this.fb.array([]) |
|||
}); |
|||
this.valueChangeSubscription = this.rateLimitsListFormGroup.valueChanges |
|||
.pipe(takeUntil(this.destroy$)) |
|||
.subscribe((value) => { |
|||
this.updateView(value?.rateLimits); |
|||
} |
|||
); |
|||
} |
|||
|
|||
public removeRateLimits(index: number) { |
|||
(this.rateLimitsListFormGroup.get('rateLimits') as FormArray).removeAt(index); |
|||
} |
|||
|
|||
public addRateLimits() { |
|||
this.rateLimitsFormArray.push(this.fb.group({ |
|||
value: [null, [Validators.required]], |
|||
time: [null, [Validators.required]] |
|||
})); |
|||
} |
|||
|
|||
get 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}); |
|||
} else { |
|||
this.rateLimitsListFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.rateLimitsListFormGroup.valid ? null : { |
|||
rateLimitsList: {valid: false} |
|||
}; |
|||
} |
|||
|
|||
writeValue(rateLimits: string) { |
|||
const rateLimitsControls: Array<FormGroup> = []; |
|||
if (rateLimits) { |
|||
const rateLimitsArray = rateLimits.split(','); |
|||
for (let i = 0; i < rateLimitsArray.length; i++) { |
|||
const [value, time] = rateLimitsArray[i].split(':'); |
|||
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), {emitEvent: false}); |
|||
this.rateLimitsArray = stringToRateLimitsArray(rateLimits); |
|||
} |
|||
|
|||
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.rateLimitsArray = stringToRateLimitsArray(rateLimitsString); |
|||
} else { |
|||
this.propagateChange(null); |
|||
this.rateLimitsArray = null; |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
<!-- |
|||
|
|||
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}" [innerHTML]="rateLimitsText"></div> |
|||
@ -0,0 +1,41 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
: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,55 @@ |
|||
///
|
|||
/// 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, Input, OnChanges, SimpleChanges } from '@angular/core'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { RateLimits, rateLimitsArrayToHtml } from './rate-limits.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-rate-limits-text', |
|||
templateUrl: './rate-limits-text.component.html', |
|||
styleUrls: ['./rate-limits-text.component.scss'] |
|||
}) |
|||
export class RateLimitsTextComponent implements OnChanges { |
|||
|
|||
@Input() |
|||
rateLimitsArray: Array<RateLimits>; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
rateLimitsText: string; |
|||
|
|||
constructor(private translate: TranslateService) { |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
for (const propName of Object.keys(changes)) { |
|||
if (propName === 'rateLimitsArray') { |
|||
const change = changes[propName]; |
|||
this.updateView(change.currentValue); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private updateView(value: Array<RateLimits>): void { |
|||
if (value?.length) { |
|||
this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value); |
|||
} else { |
|||
this.rateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set'); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<!-- |
|||
|
|||
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)" |
|||
[matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above"> |
|||
<tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text> |
|||
</div> |
|||
</fieldset> |
|||
<button mat-icon-button color="primary" type="button" *ngIf="!disabled" |
|||
class="tb-rate-limits-button" |
|||
(click)="onClick($event)" |
|||
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above"> |
|||
<mat-icon>add_circle_outline</mat-icon> |
|||
</button> |
|||
</div> |
|||
@ -0,0 +1,35 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
} |
|||
|
|||
.tb-rate-limits-button { |
|||
margin-top: 0.5em; |
|||
} |
|||
} |
|||
@ -0,0 +1,149 @@ |
|||
///
|
|||
/// 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 { |
|||
RateLimits, |
|||
rateLimitsDialogTitleTranslationMap, |
|||
rateLimitsLabelTranslationMap, |
|||
RateLimitsType, |
|||
stringToRateLimitsArray |
|||
} from './rate-limits.models'; |
|||
import { isDefined } from '@core/utils'; |
|||
|
|||
@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; |
|||
|
|||
get rateLimitsArray(): Array<RateLimits> { |
|||
return this.rateLimitsFormGroup.get('rateLimits').value; |
|||
} |
|||
|
|||
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 = rateLimitsLabelTranslationMap.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) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const title = rateLimitsDialogTitleTranslationMap.get(this.type); |
|||
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 (isDefined(result)) { |
|||
this.modelValue = result; |
|||
this.updateModel(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private updateRateLimitsInfo() { |
|||
this.rateLimitsFormGroup.patchValue( |
|||
{ |
|||
rateLimits: stringToRateLimitsArray(this.modelValue) |
|||
} |
|||
); |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.updateRateLimitsInfo(); |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,125 @@ |
|||
///
|
|||
/// 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', |
|||
TENANT_ENTITY_EXPORT_RATE_LIMIT = 'TENANT_ENTITY_EXPORT_RATE_LIMIT', |
|||
TENANT_ENTITY_IMPORT_RATE_LIMIT = 'TENANT_ENTITY_IMPORT_RATE_LIMIT' |
|||
} |
|||
|
|||
export const rateLimitsLabelTranslationMap = 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'], |
|||
[RateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT, 'tenant-profile.tenant-entity-export-rate-limit'], |
|||
[RateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT, 'tenant-profile.tenant-entity-import-rate-limit'], |
|||
] |
|||
); |
|||
|
|||
export const rateLimitsDialogTitleTranslationMap = 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-tenant-msg-rate-limit-title'], |
|||
[RateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.edit-customer-rest-limits-title'], |
|||
[RateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT, 'tenant-profile.rate-limits.edit-ws-limit-updates-per-session-title'], |
|||
[RateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION, 'tenant-profile.rate-limits.edit-cassandra-tenant-limits-configuration-title'], |
|||
[RateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT, 'tenant-profile.rate-limits.edit-tenant-entity-export-rate-limit-title'], |
|||
[RateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT, 'tenant-profile.rate-limits.edit-tenant-entity-import-rate-limit-title'], |
|||
] |
|||
); |
|||
|
|||
export function stringToRateLimitsArray(rateLimits: string): Array<RateLimits> { |
|||
const result: Array<RateLimits> = []; |
|||
if (rateLimits?.length > 0) { |
|||
const rateLimitsArrays = rateLimits.split(','); |
|||
for (let i = 0; i < rateLimitsArrays.length; i++) { |
|||
const [value, time] = rateLimitsArrays[i].split(':'); |
|||
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 ? '' : ','; |
|||
return `<span class="tb-rate-limits-value">${value}</span>
|
|||
<span>${operation}</span> |
|||
<span class="tb-rate-limits-value"> ${time}</span> |
|||
<span>${seconds}${comma}</span><br>`;
|
|||
} |
|||
Loading…
Reference in new issue