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

UI: Trigger settings to persent

Browse Source
This commit is contained in:
Artem Dzhereleiko 2025-02-26 16:28:28 +02:00
parent e59b38f281
commit a302451a5b
4 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
View File

@ -481,16 +481,16 @@
[allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
</tb-entity-type-list>
<div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
<label translate>notification.threshold</label>
<span translate>notification.threshold</span>
<div class="flex flex-1 flex-row items-center justify-start">
<mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
<mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
<input matSliderThumb formControlName="threshold">
</mat-slider>
<mat-form-field class="limit-slider-value">
<input matInput formControlName="threshold" type="number" step="0.01"
<input matInput formControlName="threshold" type="number" step="1"
[value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value"
min="0"
max="1"/>
max="100"/>
</mat-form-field>
</div>
</div>
@ -599,44 +599,44 @@
<fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
<legend translate>notification.filter</legend>
<div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
<label translate>notification.cpu-threshold</label>
<span translate>notification.cpu-threshold</span>
<div class="flex flex-1 flex-row items-center justify-start">
<mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
<mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
<input matSliderThumb formControlName="cpuThreshold">
</mat-slider>
<mat-form-field class="limit-slider-value">
<input matInput formControlName="cpuThreshold" type="number" step="0.01"
<input matInput formControlName="cpuThreshold" type="number" step="1"
[value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value"
min="0"
max="1"/>
max="100"/>
</mat-form-field>
</div>
</div>
<div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
<label translate>notification.ram-threshold</label>
<span translate>notification.ram-threshold</span>
<div class="flex flex-1 flex-row items-center justify-start">
<mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
<mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
<input matSliderThumb formControlName="ramThreshold">
</mat-slider>
<mat-form-field class="limit-slider-value">
<input matInput formControlName="ramThreshold" type="number" step="0.01"
<input matInput formControlName="ramThreshold" type="number" step="1"
[value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value"
min="0"
max="1"/>
max="100"/>
</mat-form-field>
</div>
</div>
<div class="limit-slider-container flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
<label translate>notification.storage-threshold</label>
<span translate>notification.storage-threshold</span>
<div class="flex flex-1 flex-row items-center justify-start">
<mat-slider class="flex-1" min="0" max="1" step="0.01" discrete [displayWith]="formatLabel">
<mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
<input matSliderThumb formControlName="storageThreshold">
</mat-slider>
<mat-form-field class="limit-slider-value">
<input matInput formControlName="storageThreshold" type="number" step="0.01"
<input matInput formControlName="storageThreshold" type="number" step="1"
[value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value"
min="0"
max="1"/>
max="100"/>
</mat-form-field>
</div>
</div>

2
ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss
View File

@ -81,7 +81,7 @@
min-width: 364px;
}
.limit-slider-container {
> label {
> span {
margin-right: 16px;
width: min-content;
max-width: 40%;

27
ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.ts
View File

@ -316,7 +316,7 @@ export class RuleNotificationDialogComponent extends
this.entitiesLimitTemplateForm = this.fb.group({
triggerConfig: this.fb.group({
entityTypes: [],
threshold: [.8, [Validators.min(0), Validators.max(1)]]
threshold: [80, [Validators.min(0), Validators.max(100)]]
})
});
@ -347,9 +347,9 @@ export class RuleNotificationDialogComponent extends
this.resourceUsageShortageTemplateForm = this.fb.group({
triggerConfig: this.fb.group({
cpuThreshold: [.8, [Validators.min(0), Validators.max(1)]],
ramThreshold: [.8, [Validators.min(0), Validators.max(1)]],
storageThreshold: [.8, [Validators.min(0), Validators.max(1)]]
cpuThreshold: [80, [Validators.min(0), Validators.max(100)]],
ramThreshold: [80, [Validators.min(0), Validators.max(100)]],
storageThreshold: [80, [Validators.min(0), Validators.max(100)]]
})
});
@ -390,6 +390,14 @@ export class RuleNotificationDialogComponent extends
this.deviceInactivityTemplateForm.get('triggerConfig.filterByDevice')
.patchValue(!!this.ruleNotification.triggerConfig.devices, {onlySelf: true});
}
if (this.ruleNotification.triggerType === TriggerType.ENTITIES_LIMIT) {
this.entitiesLimitTemplateForm.get('triggerConfig.threshold').patchValue(this.ruleNotification.triggerConfig.threshold * 100, {emitEvent: false});
}
if (this.ruleNotification.triggerType === TriggerType.RESOURCES_SHORTAGE) {
this.resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').patchValue(this.ruleNotification.triggerConfig.cpuThreshold * 100, {emitEvent: false});
this.resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').patchValue(this.ruleNotification.triggerConfig.ramThreshold * 100, {emitEvent: false});
this.resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').patchValue(this.ruleNotification.triggerConfig.storageThreshold * 100, {emitEvent: false});
}
}
}
@ -438,6 +446,14 @@ export class RuleNotificationDialogComponent extends
if (triggerType === TriggerType.DEVICE_ACTIVITY) {
delete formValue.triggerConfig.filterByDevice;
}
if (triggerType === TriggerType.ENTITIES_LIMIT) {
formValue.triggerConfig.threshold = formValue.triggerConfig.threshold / 100;
}
if (triggerType === TriggerType.RESOURCES_SHORTAGE) {
formValue.triggerConfig.cpuThreshold = formValue.triggerConfig.cpuThreshold / 100;
formValue.triggerConfig.ramThreshold = formValue.triggerConfig.ramThreshold / 100;
formValue.triggerConfig.storageThreshold = formValue.triggerConfig.storageThreshold / 100;
}
formValue.recipientsConfig.triggerType = triggerType;
formValue.triggerConfig.triggerType = triggerType;
if (this.ruleNotification && !this.data.isCopy) {
@ -493,8 +509,7 @@ export class RuleNotificationDialogComponent extends
}
formatLabel(value: number): string {
const formatValue = (value * 100).toFixed();
return `${formatValue}%`;
return `${value}%`;
}
private isSysAdmin(): boolean {

8
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -129,7 +129,7 @@ export interface NotificationRule extends Omit<BaseData<NotificationRuleId>, 'la
export type NotificationRuleTriggerConfig = Partial<AlarmNotificationRuleTriggerConfig & DeviceInactivityNotificationRuleTriggerConfig &
EntityActionNotificationRuleTriggerConfig & AlarmCommentNotificationRuleTriggerConfig & AlarmAssignmentNotificationRuleTriggerConfig &
RuleEngineLifecycleEventNotificationRuleTriggerConfig & EntitiesLimitNotificationRuleTriggerConfig &
ApiUsageLimitNotificationRuleTriggerConfig & RateLimitsNotificationRuleTriggerConfig>;
ApiUsageLimitNotificationRuleTriggerConfig & RateLimitsNotificationRuleTriggerConfig & ResourceUsageShortageNotificationRuleTriggerConfig>;
export interface AlarmNotificationRuleTriggerConfig {
alarmTypes?: Array<string>;
@ -183,6 +183,12 @@ export interface EntitiesLimitNotificationRuleTriggerConfig {
threshold: number;
}
export interface ResourceUsageShortageNotificationRuleTriggerConfig {
cpuThreshold: number;
ramThreshold: number;
storageThreshold: number;
}
export interface ApiUsageLimitNotificationRuleTriggerConfig {
apiFeatures: ApiFeature[];
notifyOn: ApiUsageStateValue[];