Igor Kulikov
1 year ago
committed by
GitHub
GitHub
17 changed files with 9302 additions and 2688 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,54 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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-api-usage-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"> |
|||
<div class="tb-api-usage-overlay" [style]="overlayStyle"></div> |
|||
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
|||
<div class="tb-api-usage-content"> |
|||
<div class="api-items-list"> |
|||
@for (api of apiUsages; track api){ |
|||
<div class="api-item {{api.status.value}}" |
|||
[class.cursor-pointer]="api.state" |
|||
[class.active]="api.state && api.state === currentState" |
|||
(click)="updateState($event, api.state)"> |
|||
<div class="api-item-content"> |
|||
<div class="api-item-title">{{ api.label }}</div> |
|||
<div class="api-item-statistic"> |
|||
<div class="api-item-statistic-count">{{ api.current.value }} / {{ api.maxLimit.value }}</div> |
|||
<div class="api-item-statistic-progress"> |
|||
<mat-progress-bar mode="determinate" |
|||
[value]="api.progress" |
|||
></mat-progress-bar> |
|||
</div> |
|||
<div class="api-item-statistic-status"> |
|||
<div class="statistic-status">{{ ('api-usage.status.' + api.status.value) | translate }}</div> |
|||
<div class="statistic-icon"> |
|||
@if (api.status.value === 'enabled') { |
|||
<tb-icon class="tb-mat-18">check_circle</tb-icon> |
|||
} @else { |
|||
<tb-icon class="tb-mat-18">warning</tb-icon> |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<mat-divider></mat-divider> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,125 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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"; |
|||
|
|||
$enabled-color: #198038; |
|||
$disabled-color: #D12730; |
|||
$warning-color: #FAA405; |
|||
|
|||
.tb-no-notification-svg-color { |
|||
color: $tb-primary-color; |
|||
} |
|||
|
|||
.tb-api-usage-panel { |
|||
> div:not(.tb-api-usage-overlay) { |
|||
z-index: 1; |
|||
} |
|||
.tb-api-usage-overlay { |
|||
position: absolute; |
|||
top: 12px; |
|||
left: 12px; |
|||
bottom: 12px; |
|||
right: 12px; |
|||
} |
|||
.tb-api-usage-content { |
|||
height: 100%; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.api-items-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
.api-item { |
|||
&.enabled { |
|||
.api-item-statistic-status { |
|||
color: $enabled-color; |
|||
} |
|||
.mat-mdc-progress-bar { |
|||
--mdc-linear-progress-active-indicator-color: #{$enabled-color}; |
|||
} |
|||
} |
|||
&.disabled { |
|||
.api-item-statistic-status { |
|||
color: $disabled-color; |
|||
} |
|||
.mat-mdc-progress-bar { |
|||
--mdc-linear-progress-active-indicator-color: #{$disabled-color}; |
|||
} |
|||
} |
|||
&.warning { |
|||
.api-item-statistic-status { |
|||
color: $warning-color; |
|||
} |
|||
.mat-mdc-progress-bar { |
|||
--mdc-linear-progress-active-indicator-color: #{$warning-color}; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
background-color: rgba(0, 0, 0, 0.06); |
|||
} |
|||
&.active { |
|||
background-color: rgba($tb-primary-color, 0.06); |
|||
.mat-divider { |
|||
--mat-divider-color: #{$tb-primary-color}; |
|||
} |
|||
} |
|||
|
|||
.api-item-content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
gap: 8px; |
|||
padding: 5px 16px; |
|||
.api-item-title { |
|||
display: flex; |
|||
flex: 1; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: $tb-primary-color; |
|||
} |
|||
.api-item-statistic { |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
&-count { |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
&-status { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
} |
|||
&-progress { |
|||
--mdc-linear-progress-track-height: 8px; |
|||
--mdc-linear-progress-active-indicator-height: 8px; |
|||
padding: 4px 0; |
|||
.mat-mdc-progress-bar { |
|||
border-radius: 6px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,177 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; |
|||
import { Observable } from 'rxjs'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { DataKey, DatasourceType, widgetType } from "@shared/models/widget.models"; |
|||
import { WidgetSubscriptionOptions } from "@core/api/widget-api.models"; |
|||
import { formattedDataFormDatasourceData } from "@core/utils"; |
|||
|
|||
import { UtilsService } from "@core/services/utils.service"; |
|||
import { |
|||
ApiUsageDataKeysSettings, |
|||
apiUsageDefaultSettings, |
|||
ApiUsageWidgetSettings |
|||
} from "@home/components/widget/lib/settings/cards/api-usage-settings.component.models"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-api-usage-widget', |
|||
templateUrl: './api-usage-widget.component.html', |
|||
styleUrls: ['api-usage-widget.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ApiUsageWidgetComponent implements OnInit, OnDestroy { |
|||
|
|||
settings: ApiUsageWidgetSettings; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@Input() |
|||
widgetTitlePanel: TemplateRef<any>; |
|||
|
|||
backgroundStyle$: Observable<ComponentStyle>; |
|||
overlayStyle: ComponentStyle = {}; |
|||
padding: string; |
|||
|
|||
apiUsages = []; |
|||
currentState = ''; |
|||
noDataDisplayMessageText: string; |
|||
|
|||
private contentResize$: ResizeObserver; |
|||
private powers: {key: string, value: number}[] = [ |
|||
{ key: 'Q', value: 1e15 }, |
|||
{ key: 'T', value: 1e12 }, |
|||
{ key: 'B', value: 1e9 }, |
|||
{ key: 'M', value: 1e6 }, |
|||
{ key: 'K', value: 1e3 } |
|||
]; |
|||
|
|||
constructor(private imagePipe: ImagePipe, |
|||
private utils: UtilsService, |
|||
private sanitizer: DomSanitizer, |
|||
private cd: ChangeDetectorRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.ctx.$scope.apiUsageWidget = this; |
|||
this.settings = {...apiUsageDefaultSettings, ...this.ctx.settings}; |
|||
|
|||
this.parseApiUsages(); |
|||
|
|||
const ds = { |
|||
type: DatasourceType.entity, |
|||
name: '', |
|||
entityAliasId: this.settings.dsEntityAliasId, |
|||
dataKeys: this.getUniqueDataKeys(this.settings.dataKeys) |
|||
} |
|||
|
|||
const apiUsageSubscriptionOptions: WidgetSubscriptionOptions = { |
|||
datasources: [ds], |
|||
useDashboardTimewindow: false, |
|||
type: widgetType.latest, |
|||
callbacks: { |
|||
onDataUpdated: (subscription) => { |
|||
const data = formattedDataFormDatasourceData(subscription.data); |
|||
this.apiUsages.forEach(key => { |
|||
const progress = data[0][key.maxLimit.key] !== 0 ? Math.min(100, ((data[0][key.current.key] / data[0][key.maxLimit.key]) * 100)) : 0; |
|||
key.progress = isFinite(progress) ? progress : 0; |
|||
key.status.value = data[0][key.status.key] ? data[0][key.status.key].toLowerCase() : 'enabled'; |
|||
key.maxLimit.value = isFinite(data[0][key.maxLimit.key]) && data[0][key.maxLimit.key] !== 0 ? this.toShortNumber(data[0][key.maxLimit.key]) : '∞'; |
|||
key.current.value = isFinite(data[0][key.current.key]) ? this.toShortNumber(data[0][key.current.key]) : 0; |
|||
}); |
|||
this.cd.detectChanges(); |
|||
} |
|||
} |
|||
}; |
|||
this.ctx.subscriptionApi.createSubscription(apiUsageSubscriptionOptions, true).subscribe(); |
|||
|
|||
this.currentState = this.ctx.stateController.getStateId(); |
|||
this.ctx.stateController.stateId().subscribe((state) => { |
|||
this.ctx.updateParamsFromData(true); |
|||
this.currentState = state; |
|||
this.cd.markForCheck(); |
|||
}); |
|||
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
|||
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
|||
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
|||
} |
|||
|
|||
updateState($event: MouseEvent, stateName: string) { |
|||
$event?.preventDefault(); |
|||
if (stateName?.length) { |
|||
this.ctx.stateController.updateState(stateName, this.ctx.stateController.getStateParams(), this.ctx.isMobile); |
|||
} |
|||
} |
|||
|
|||
parseApiUsages() { |
|||
this.settings.dataKeys.forEach((key) => { |
|||
this.apiUsages.push({ |
|||
label: this.utils.customTranslation(key.label, key.label), |
|||
state: key.state, |
|||
progress: 0, |
|||
status: {key: key.status.name, value: 'enabled'}, |
|||
maxLimit: {key: key.maxLimit.name, value: '∞'}, |
|||
current: {key: key.current.name, value: 0}, |
|||
}); |
|||
}) |
|||
} |
|||
|
|||
getUniqueDataKeys(data: ApiUsageDataKeysSettings[]): DataKey[] { |
|||
const seenNames = new Set<string>(); |
|||
return data |
|||
.flatMap(item => [item.status, item.maxLimit, item.current]) |
|||
.filter(key => { |
|||
if (seenNames.has(key.name)) { |
|||
return false; |
|||
} |
|||
seenNames.add(key.name); |
|||
return true; |
|||
}); |
|||
}; |
|||
|
|||
|
|||
ngOnDestroy() { |
|||
if (this.contentResize$) { |
|||
this.contentResize$.disconnect(); |
|||
} |
|||
} |
|||
|
|||
private toShortNumber(number: any, decimals = 1) { |
|||
if (!Number.isFinite(number) || number < 0) { |
|||
return '0'; |
|||
} |
|||
for (const power of this.powers) { |
|||
if (number >= power.value) { |
|||
const reduced = number / power.value; |
|||
const rounded = Number(reduced.toFixed(decimals)); |
|||
return `${rounded}${power.key}`; |
|||
} |
|||
} |
|||
return `${Number(number.toFixed(decimals))}`; |
|||
} |
|||
|
|||
public onInit() { |
|||
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
|||
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
|||
this.cd.detectChanges(); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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 [formGroup]="dataKeyFormGroup" class="tb-form-table-row tb-api-usage-data-key-row"> |
|||
<div class="tb-source-field"> |
|||
<mat-form-field |
|||
class="tb-label-field tb-inline-field" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-string-autocomplete [fetchOptionsFn]="fetchDashboardStates.bind(this)" |
|||
placeholderText="{{ 'widget-config.set' | translate }}" |
|||
style="flex: 1" |
|||
formControlName="state"> |
|||
</tb-string-autocomplete> |
|||
</div> |
|||
<div class="tb-data-key-fields"> |
|||
<tb-data-key-input |
|||
class="tb-data-key-field" |
|||
required |
|||
requiredText="{{ 'widgets.api-usage.status-required'}}" |
|||
[datasourceType]="DatasourceType.entity" |
|||
[entityAliasId]="dsEntityAliasId" |
|||
[aliasController]="context.aliasController" |
|||
[widgetType]="widgetType.latest" |
|||
[dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]" |
|||
[callbacks]="context.callbacks" |
|||
[generateKey]="context.generateDataKey" |
|||
(keyEdit)="editKey('status')" |
|||
formControlName="status"> |
|||
</tb-data-key-input> |
|||
<tb-data-key-input |
|||
class="tb-data-key-field" |
|||
required |
|||
requiredText="{{ 'widgets.api-usage.limit-required'}}" |
|||
[datasourceType]="DatasourceType.entity" |
|||
[entityAliasId]="dsEntityAliasId" |
|||
[aliasController]="context.aliasController" |
|||
[widgetType]="widgetType.latest" |
|||
[dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]" |
|||
[callbacks]="context.callbacks" |
|||
[generateKey]="context.generateDataKey" |
|||
(keyEdit)="editKey('maxLimit')" |
|||
formControlName="maxLimit"> |
|||
</tb-data-key-input> |
|||
<tb-data-key-input |
|||
class="tb-data-key-field" |
|||
required |
|||
requiredText="{{ 'widgets.api-usage.current-number-required'}}" |
|||
[datasourceType]="DatasourceType.entity" |
|||
[entityAliasId]="dsEntityAliasId" |
|||
[aliasController]="context.aliasController" |
|||
[widgetType]="widgetType.latest" |
|||
[dataKeyTypes]="[DataKeyType.attribute, DataKeyType.timeseries]" |
|||
[callbacks]="context.callbacks" |
|||
[generateKey]="context.generateDataKey" |
|||
(keyEdit)="editKey('current')" |
|||
formControlName="current"> |
|||
</tb-data-key-input> |
|||
</div> |
|||
<div class="tb-form-table-row-cell-buttons"> |
|||
<div class="tb-remove-button"> |
|||
<button type="button" |
|||
mat-icon-button |
|||
(click)="dataKeyRemoved.emit()" |
|||
matTooltip="{{ 'widgets.api-usage.delete-key' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,56 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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'; |
|||
|
|||
.tb-form-table-row.tb-api-usage-data-key-row { |
|||
|
|||
.tb-source-field { |
|||
flex: 1 1 25%; |
|||
display: flex; |
|||
gap: 12px; |
|||
.tb-label-field { |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.tb-data-key-fields { |
|||
display: flex; |
|||
gap: 12px; |
|||
min-width: 0; |
|||
flex: 1 1 50%; |
|||
} |
|||
|
|||
.tb-data-key-field { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.tb-remove-button { |
|||
width: 40px; |
|||
min-width: 40px; |
|||
} |
|||
|
|||
@media #{$mat-lt-lg} { |
|||
.tb-source-field { |
|||
flex-direction: column; |
|||
flex: 1 1 50%; |
|||
} |
|||
.tb-data-key-fields{ |
|||
flex-direction: column; |
|||
flex: 1 1 50%; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,156 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 { |
|||
ChangeDetectorRef, |
|||
Component, |
|||
DestroyRef, |
|||
EventEmitter, |
|||
forwardRef, |
|||
Input, |
|||
OnInit, |
|||
Output, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormGroup, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { DataKey, DatasourceType, widgetType } from '@shared/models/widget.models'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { |
|||
ApiUsageDataKeysSettings, |
|||
ApiUsageSettingsContext |
|||
} from "@home/components/widget/lib/settings/cards/api-usage-settings.component.models"; |
|||
import { Observable, of } from "rxjs"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-api-usage-data-key-row', |
|||
templateUrl: './api-usage-data-key-row.component.html', |
|||
styleUrls: ['./api-usage-data-key-row.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => ApiUsageDataKeyRowComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ApiUsageDataKeyRowComponent implements ControlValueAccessor, OnInit { |
|||
|
|||
DatasourceType = DatasourceType; |
|||
DataKeyType = DataKeyType; |
|||
|
|||
widgetType = widgetType; |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
dsEntityAliasId: string; |
|||
|
|||
@Input() |
|||
context: ApiUsageSettingsContext; |
|||
|
|||
@Output() |
|||
dataKeyRemoved = new EventEmitter(); |
|||
|
|||
dataKeyFormGroup: UntypedFormGroup; |
|||
|
|||
modelValue: ApiUsageDataKeysSettings; |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private cd: ChangeDetectorRef, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.dataKeyFormGroup = this.fb.group({ |
|||
label: [null, [Validators.required]], |
|||
state: [null, []], |
|||
status: [null, [Validators.required]], |
|||
maxLimit: [null, [Validators.required]], |
|||
current: [null, [Validators.required]] |
|||
}); |
|||
this.dataKeyFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
() => this.updateModel() |
|||
); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.dataKeyFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.dataKeyFormGroup.enable({emitEvent: false}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: ApiUsageDataKeysSettings): void { |
|||
this.modelValue = value; |
|||
this.dataKeyFormGroup.patchValue( |
|||
{ |
|||
label: value?.label, |
|||
state: value?.state, |
|||
status: value?.status, |
|||
maxLimit: value?.maxLimit, |
|||
current: value?.current |
|||
}, {emitEvent: false} |
|||
); |
|||
this.updateValidators(); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
editKey(keyType: 'status' | 'maxLimit' | 'current') { |
|||
const targetDataKey: DataKey = this.dataKeyFormGroup.get(keyType).value; |
|||
this.context.editKey(targetDataKey, this.dsEntityAliasId).subscribe( |
|||
(updatedDataKey) => { |
|||
if (updatedDataKey) { |
|||
this.dataKeyFormGroup.get(keyType).patchValue(updatedDataKey); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
|
|||
private updateValidators() { |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.modelValue = {...this.modelValue, ...this.dataKeyFormGroup.value}; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
fetchDashboardStates(searchText?: string): Observable<Array<string>> { |
|||
return of(this.context.callbacks.fetchDashboardStates(searchText)); |
|||
} |
|||
} |
|||
@ -0,0 +1,106 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 { IAliasController } from '@core/api/widget-api.models'; |
|||
import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models'; |
|||
import { DataKey, Widget, widgetType } from '@shared/models/widget.models'; |
|||
import { Observable } from "rxjs"; |
|||
import { BackgroundSettings, BackgroundType } from "@shared/models/widget-settings.models"; |
|||
import { DataKeyType } from "@shared/models/telemetry/telemetry.models"; |
|||
import { materialColors } from "@shared/models/material.models"; |
|||
|
|||
export interface ApiUsageSettingsContext { |
|||
aliasController: IAliasController; |
|||
callbacks: WidgetConfigCallbacks; |
|||
widget: Widget; |
|||
editKey: (key: DataKey, entityAliasId: string, WidgetType?: widgetType) => Observable<DataKey>; |
|||
generateDataKey: (key: DataKey) => DataKey; |
|||
} |
|||
|
|||
|
|||
export interface ApiUsageWidgetSettings { |
|||
dsEntityAliasId: string; |
|||
dataKeys: ApiUsageDataKeysSettings[]; |
|||
targetDashboardState: string; |
|||
background: BackgroundSettings; |
|||
padding: string; |
|||
} |
|||
|
|||
export interface ApiUsageDataKeysSettings { |
|||
label: string; |
|||
state: string; |
|||
status: DataKey; |
|||
maxLimit: DataKey; |
|||
current: DataKey; |
|||
} |
|||
|
|||
const generateDataKey = (label: string, status: string, maxLimit: string, current: string) => { |
|||
return { |
|||
label, |
|||
state: '', |
|||
status: { |
|||
name: status, |
|||
label: status, |
|||
type: DataKeyType.timeseries, |
|||
funcBody: undefined, |
|||
settings: {}, |
|||
color: materialColors[0].value |
|||
}, |
|||
maxLimit: { |
|||
name: maxLimit, |
|||
label: maxLimit, |
|||
type: DataKeyType.timeseries, |
|||
funcBody: undefined, |
|||
settings: {}, |
|||
color: materialColors[0].value |
|||
}, |
|||
current: { |
|||
name: current, |
|||
label: current, |
|||
type: DataKeyType.timeseries, |
|||
funcBody: undefined, |
|||
settings: {}, |
|||
color: materialColors[0].value |
|||
} |
|||
} |
|||
} |
|||
|
|||
export const apiUsageDefaultSettings: ApiUsageWidgetSettings = { |
|||
dsEntityAliasId: '', |
|||
dataKeys: [ |
|||
generateDataKey('{i18n:api-usage.transport-messages}', 'transportApiState', 'transportMsgLimit', 'transportMsgCount'), |
|||
generateDataKey('{i18n:api-usage.transport-data-points}', 'transportApiState', 'transportDataPointsLimit', 'transportDataPointsCount'), |
|||
generateDataKey('{i18n:api-usage.rule-engine-executions}', 'ruleEngineApiState', 'ruleEngineExecutionLimit', 'ruleEngineExecutionCount'), |
|||
generateDataKey('{i18n:api-usage.javascript-function-executions}', 'jsExecutionApiState', 'jsExecutionLimit', 'jsExecutionCount'), |
|||
generateDataKey('{i18n:api-usage.tbel-function-executions}', 'tbelExecutionApiState', 'tbelExecutionLimit', 'tbelExecutionCount'), |
|||
generateDataKey('{i18n:api-usage.data-points-storage-days}', 'dbApiState', 'storageDataPointsLimit', 'storageDataPointsCount'), |
|||
generateDataKey('{i18n:api-usage.alarms-created}', 'alarmApiState', 'createdAlarmsLimit', 'createdAlarmsCount'), |
|||
generateDataKey('{i18n:api-usage.emails}', 'emailApiState', 'emailLimit', 'emailCount'), |
|||
generateDataKey('{i18n:api-usage.sms}', 'notificationApiState', 'smsLimit', 'smsCount'), |
|||
], |
|||
targetDashboardState: 'default', |
|||
background: { |
|||
type: BackgroundType.color, |
|||
color: '#fff', |
|||
overlay: { |
|||
enabled: false, |
|||
color: 'rgba(255,255,255,0.72)', |
|||
blur: 3 |
|||
} |
|||
}, |
|||
padding: '0' |
|||
}; |
|||
|
|||
@ -0,0 +1,99 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 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-container [formGroup]="apiUsageWidgetSettingsForm"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.datasource</div> |
|||
<tb-entity-alias-select |
|||
class="tb-entity-alias-field" |
|||
tbRequired |
|||
[appearance]="'outline'" |
|||
[aliasController]="context.aliasController" |
|||
formControlName="dsEntityAliasId" |
|||
[callbacks]="context.callbacks"> |
|||
</tb-entity-alias-select> |
|||
|
|||
<div class="tb-form-panel no-padding no-border"> |
|||
<div class="tb-form-table tb-map-data-layers"> |
|||
<div class="tb-form-table-header no-padding-right"> |
|||
<div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.label</div> |
|||
<div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.state-name</div> |
|||
<div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.status</div> |
|||
<div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.limit</div> |
|||
<div class="tb-form-table-header-cell tb-key-header" translate>widgets.api-usage.current-number</div> |
|||
<div class="tb-form-table-header-cell tb-actions-header"></div> |
|||
</div> |
|||
<div cdkDropList cdkDropListOrientation="vertical" |
|||
[cdkDropListDisabled]="!dragEnabled" |
|||
(cdkDropListDropped)="layerDrop($event)" *ngIf="dataKeysFormArray().controls?.length; else noDataLayers" class="tb-form-table-body"> |
|||
<div cdkDrag [cdkDragDisabled]="!dragEnabled" |
|||
*ngFor="let dataKeyControl of dataKeysFormArray().controls; trackBy: trackByDataKey; let $index = index;"> |
|||
<div class="tb-draggable-form-table-row"> |
|||
<tb-api-usage-data-key-row class="flex-1" |
|||
[context]="context" |
|||
[dsEntityAliasId]="apiUsageWidgetSettingsForm.get('dsEntityAliasId').value" |
|||
[formControl]="dataKeyControl" |
|||
(dataKeyRemoved)="removeDataKey($index)"> |
|||
</tb-api-usage-data-key-row> |
|||
<div class="tb-form-table-row-cell-buttons"> |
|||
<button [class.tb-hidden]="!dragEnabled" |
|||
mat-icon-button |
|||
type="button" |
|||
cdkDragHandle |
|||
matTooltip="{{ 'action.drag' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>drag_indicator</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<button type="button" mat-stroked-button color="primary" (click)="addDataKey()"> |
|||
{{ 'widgets.api-usage.add-key' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<ng-template #noDataLayers> |
|||
<span class="tb-prompt flex items-center justify-center">{{ 'widgets.api-usage.no-key' | translate }}</span> |
|||
</ng-template> |
|||
<tb-string-autocomplete [fetchOptionsFn]="fetchDashboardStates.bind(this)" |
|||
additionalClass="tb-suffix-show-on-hover" |
|||
appearance="outline" |
|||
panelWidth="" |
|||
label="{{ 'widgets.api-usage.target-dashboard-state' | translate }}" |
|||
style="flex: 1" |
|||
formControlName="targetDashboardState"> |
|||
</tb-string-autocomplete> |
|||
</div> |
|||
|
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widget-config.card-padding' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
@ -0,0 +1,62 @@ |
|||
/** |
|||
* Copyright © 2016-2025 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'; |
|||
|
|||
.tb-map-data-layers { |
|||
.tb-form-table-header-cell { |
|||
&.tb-source-header { |
|||
flex: 1 1 50%; |
|||
} |
|||
&.tb-x-pos-header { |
|||
flex: 1 1 25%; |
|||
} |
|||
&.tb-y-pos-header { |
|||
flex: 1 1 25%; |
|||
} |
|||
&.tb-key-header { |
|||
flex: 1 1 50%; |
|||
} |
|||
&.tb-actions-header { |
|||
width: 80px; |
|||
min-width: 80px; |
|||
} |
|||
@media #{$mat-lt-lg} { |
|||
&.tb-source-header { |
|||
flex: 1 1 30%; |
|||
} |
|||
&.tb-x-pos-header, &.tb-y-pos-header { |
|||
flex: 1 1 35%; |
|||
} |
|||
&.tb-key-header { |
|||
flex: 1 1 70%; |
|||
} |
|||
} |
|||
@media #{$mat-xs} { |
|||
&.tb-x-pos-header, &.tb-y-pos-header { |
|||
display: none; |
|||
} |
|||
&.tb-key-header { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tb-form-table-body { |
|||
tb-api-usage-data-key-row { |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,211 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 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 } from '@angular/core'; |
|||
import { |
|||
DataKey, |
|||
DataKeyConfigMode, |
|||
WidgetSettings, |
|||
WidgetSettingsComponent, |
|||
widgetType |
|||
} from '@shared/models/widget.models'; |
|||
import { |
|||
AbstractControl, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormArray, |
|||
UntypedFormBuilder, |
|||
UntypedFormGroup, |
|||
ValidationErrors, |
|||
ValidatorFn |
|||
} from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { |
|||
ApiUsageDataKeysSettings, |
|||
apiUsageDefaultSettings, |
|||
ApiUsageSettingsContext |
|||
} from "@home/components/widget/lib/settings/cards/api-usage-settings.component.models"; |
|||
import { deepClone } from "@core/utils"; |
|||
import { Observable, of } from "rxjs"; |
|||
import { |
|||
DataKeyConfigDialogComponent, |
|||
DataKeyConfigDialogData |
|||
} from "@home/components/widget/lib/settings/common/key/data-key-config-dialog.component"; |
|||
import { MatDialog } from "@angular/material/dialog"; |
|||
import { CdkDragDrop } from "@angular/cdk/drag-drop"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-api-usage-widget-settings', |
|||
templateUrl: './api-usage-widget-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss', 'api-usage-widget-settings.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => ApiUsageWidgetSettingsComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
}) |
|||
export class ApiUsageWidgetSettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
apiUsageWidgetSettingsForm: UntypedFormGroup; |
|||
|
|||
context: ApiUsageSettingsContext; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private dialog: MatDialog, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.context = { |
|||
aliasController: this.aliasController, |
|||
callbacks: this.callbacks, |
|||
widget: this.widget, |
|||
editKey: this.editKey.bind(this), |
|||
generateDataKey: this.generateDataKey.bind(this) |
|||
}; |
|||
} |
|||
|
|||
protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) { |
|||
settingsForm.setControl('dataKeys', this.prepareDataKeysFormArray(settings?.dataKeys), {emitEvent: false}); |
|||
} |
|||
|
|||
dataKeysFormArray(): UntypedFormArray { |
|||
return this.apiUsageWidgetSettingsForm.get('dataKeys') as UntypedFormArray; |
|||
} |
|||
|
|||
trackByDataKey(index: number): any { |
|||
return index; |
|||
} |
|||
|
|||
get dragEnabled(): boolean { |
|||
return this.dataKeysFormArray().controls.length > 1; |
|||
} |
|||
|
|||
layerDrop(event: CdkDragDrop<string[]>) { |
|||
const layer = this.dataKeysFormArray().at(event.previousIndex); |
|||
this.dataKeysFormArray().removeAt(event.previousIndex); |
|||
this.dataKeysFormArray().insert(event.currentIndex, layer); |
|||
} |
|||
|
|||
removeDataKey(index: number) { |
|||
(this.apiUsageWidgetSettingsForm.get('dataKeys') as UntypedFormArray).removeAt(index); |
|||
} |
|||
|
|||
addDataKey() { |
|||
const dataKey = { |
|||
label: '', |
|||
state: '', |
|||
status: null, |
|||
maxLimit: null, |
|||
current: null |
|||
}; |
|||
const dataKeysArray = this.apiUsageWidgetSettingsForm.get('dataKeys') as UntypedFormArray; |
|||
const dataKeyControl = this.fb.control(dataKey, [this.apiUsageDataKeyValidator()]); |
|||
dataKeysArray.push(dataKeyControl); |
|||
} |
|||
|
|||
protected settingsForm(): UntypedFormGroup { |
|||
return this.apiUsageWidgetSettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return apiUsageDefaultSettings; |
|||
} |
|||
|
|||
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings { |
|||
return { |
|||
dsEntityAliasId: settings?.dsEntityAliasId, |
|||
dataKeys: settings?.dataKeys, |
|||
targetDashboardState: settings?.targetDashboardState, |
|||
background: settings?.background, |
|||
padding: settings.padding |
|||
}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.apiUsageWidgetSettingsForm = this.fb.group({ |
|||
dsEntityAliasId: [settings?.dsEntityAliasId], |
|||
dataKeys: this.prepareDataKeysFormArray(settings?.dataKeys), |
|||
targetDashboardState: [settings?.targetDashboardState], |
|||
background: [settings?.background, []], |
|||
padding: [settings.padding, []] |
|||
}); |
|||
} |
|||
|
|||
private prepareDataKeysFormArray(dataKeys: ApiUsageDataKeysSettings[]): UntypedFormArray { |
|||
const dataKeysControls: Array<AbstractControl> = []; |
|||
if (dataKeys) { |
|||
dataKeys.forEach((dataLayer) => { |
|||
dataKeysControls.push(this.fb.control(dataLayer, [this.apiUsageDataKeyValidator()])); |
|||
}); |
|||
} |
|||
return this.fb.array(dataKeysControls); |
|||
} |
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return []; |
|||
} |
|||
|
|||
protected updateValidators() { |
|||
} |
|||
|
|||
apiUsageDataKeyValidator = (): ValidatorFn => { |
|||
return (control: AbstractControl): ValidationErrors | null => { |
|||
const value: ApiUsageDataKeysSettings = control.value; |
|||
if (!value?.label || !value?.current || !value?.maxLimit || !value?.status) { |
|||
return { |
|||
dataKey: true |
|||
} |
|||
} |
|||
return null; |
|||
}; |
|||
}; |
|||
|
|||
private editKey(key: DataKey, entityAliasId: string, _widgetType = widgetType.latest): Observable<DataKey> { |
|||
return this.dialog.open<DataKeyConfigDialogComponent, DataKeyConfigDialogData, DataKey>(DataKeyConfigDialogComponent, |
|||
{ |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: { |
|||
dataKey: deepClone(key), |
|||
dataKeyConfigMode: DataKeyConfigMode.general, |
|||
aliasController: this.aliasController, |
|||
widgetType: _widgetType, |
|||
entityAliasId, |
|||
showPostProcessing: true, |
|||
callbacks: this.callbacks, |
|||
hideDataKeyColor: true, |
|||
hideDataKeyDecimals: true, |
|||
hideDataKeyUnits: true, |
|||
widget: this.widget, |
|||
dashboard: null, |
|||
dataKeySettingsForm: null, |
|||
dataKeySettingsDirective: null |
|||
} |
|||
}).afterClosed(); |
|||
} |
|||
|
|||
private generateDataKey(key: DataKey): DataKey { |
|||
return this.callbacks.generateDataKey(key.name, key.type, null, false, null); |
|||
} |
|||
|
|||
fetchDashboardStates(searchText?: string): Observable<Array<string>> { |
|||
return of(this.callbacks.fetchDashboardStates(searchText)); |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue