mpetrov
2 years ago
24 changed files with 438 additions and 35 deletions
@ -0,0 +1,37 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { Pipe, PipeTransform } from '@angular/core'; |
|||
import { MINUTE } from '@shared/models/time/time.models'; |
|||
|
|||
@Pipe({ |
|||
name: 'debugDurationLeft', |
|||
pure: false, |
|||
standalone: true, |
|||
}) |
|||
export class DebugDurationLeftPipe implements PipeTransform { |
|||
transform(lastUpdateTs: number, maxRuleNodeDebugDurationMinutes: number): string { |
|||
const minutes = Math.max(0, Math.floor(this.getDebugTime(lastUpdateTs, maxRuleNodeDebugDurationMinutes) / MINUTE)); |
|||
return `${minutes} min left`; |
|||
} |
|||
|
|||
getDebugTime(lastUpdateTs: number, maxRuleNodeDebugDurationMinutes: number): number { |
|||
const maxDuration = maxRuleNodeDebugDurationMinutes * MINUTE; |
|||
const updateDuration = lastUpdateTs ? new Date().getTime() - lastUpdateTs : 0; |
|||
const leftTime = maxDuration - updateDuration; |
|||
return leftTime > 0 ? leftTime : 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<button mat-stroked-button |
|||
class="tb-rounded-btn flex-1 mr-2 w-[140px]" |
|||
color="primary" |
|||
#matButton |
|||
[class.active]="debugStrategyFormControl.value !== DebugStrategy.DISABLED && !disabled" |
|||
[disabled]="disabled" |
|||
(click)="openDebugStrategyPanel($event, matButton)"> |
|||
<mat-icon [color]="disabled ? 'inherit' : 'primary'">bug_report</mat-icon> |
|||
<ng-container [ngSwitch]="debugStrategyFormControl.value"> |
|||
<span *ngSwitchCase="DebugStrategy.DISABLED" translate>disabled</span> |
|||
<span *ngSwitchCase="DebugStrategy.ALL_WITH_FAILURES" translate>debug-strategy.all</span> |
|||
<span *ngSwitchCase="DebugStrategy.ALL_EVENTS">{{ lastUpdateTs | debugDurationLeft : maxRuleNodeDebugDurationMinutes }}</span> |
|||
<span *ngSwitchCase="DebugStrategy.ONLY_FAILURE_EVENTS" translate>debug-strategy.failures</span> |
|||
</ng-container> |
|||
</button> |
|||
@ -0,0 +1,120 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, |
|||
forwardRef, |
|||
Renderer2, |
|||
ViewContainerRef, |
|||
DestroyRef, |
|||
ChangeDetectionStrategy, |
|||
ChangeDetectorRef |
|||
} from '@angular/core'; |
|||
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SharedModule } from '@shared/shared.module'; |
|||
import { DebugStrategy } from '@shared/models/rule-node.models'; |
|||
import { DebugDurationLeftPipe } from '@home/pages/rulechain/debug-duration-left.pipe'; |
|||
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { TbPopoverService } from '@shared/components/popover.service'; |
|||
import { MatButton } from '@angular/material/button'; |
|||
import { DebugStrategyPanelComponent } from '@home/pages/rulechain/debug-strategy-panel.component'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { interval } from 'rxjs'; |
|||
import { MINUTE } from '@shared/models/time/time.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-debug-strategy-button', |
|||
templateUrl: './debug-strategy-button.component.html', |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DebugStrategyButtonComponent), |
|||
multi: true |
|||
} |
|||
], |
|||
standalone: true, |
|||
imports: [ |
|||
CommonModule, |
|||
SharedModule, |
|||
DebugDurationLeftPipe, |
|||
], |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class DebugStrategyButtonComponent implements ControlValueAccessor { |
|||
|
|||
@Input() disabled = false; |
|||
@Input() lastUpdateTs: number; |
|||
|
|||
debugStrategyFormControl: FormControl<DebugStrategy>; |
|||
|
|||
private onChange: (debugStrategy: DebugStrategy) => void; |
|||
|
|||
readonly maxRuleNodeDebugDurationMinutes = getCurrentAuthState(this.store).maxRuleNodeDebugDurationMinutes; |
|||
readonly DebugStrategy = DebugStrategy; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder, |
|||
private popoverService: TbPopoverService, |
|||
private renderer: Renderer2, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private destroyRef: DestroyRef, |
|||
private cdr: ChangeDetectorRef |
|||
) { |
|||
this.debugStrategyFormControl = this.fb.control(DebugStrategy.DISABLED); |
|||
this.debugStrategyFormControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.onChange(value)); |
|||
interval(0.5 * MINUTE) |
|||
.pipe(takeUntilDestroyed(this.destroyRef)) |
|||
.subscribe(() => this.cdr.markForCheck()); |
|||
} |
|||
|
|||
openDebugStrategyPanel($event: Event, matButton: MatButton): void { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const trigger = matButton._elementRef.nativeElement; |
|||
const debugStrategy = this.debugStrategyFormControl.value; |
|||
if (this.popoverService.hasPopover(trigger)) { |
|||
this.popoverService.hidePopover(trigger); |
|||
} else { |
|||
const debugStrategyPopover = this.popoverService.displayPopover(trigger, this.renderer, |
|||
this.viewContainerRef, DebugStrategyPanelComponent, 'bottom', true, null, |
|||
{ debugStrategy }, |
|||
{}, |
|||
{}, {}, true); |
|||
debugStrategyPopover.tbComponentRef.instance.popover = debugStrategyPopover; |
|||
debugStrategyPopover.tbComponentRef.instance.onStrategyApplied.subscribe((strategy: DebugStrategy) => { |
|||
this.debugStrategyFormControl.patchValue(strategy); |
|||
this.cdr.markForCheck(); |
|||
debugStrategyPopover.hide(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
registerOnChange(onChange: (debugStrategy: DebugStrategy) => void): void { |
|||
this.onChange = onChange; |
|||
} |
|||
|
|||
registerOnTouched(_: () => {}): void {} |
|||
|
|||
writeValue(value: DebugStrategy): void { |
|||
this.debugStrategyFormControl.patchValue(value, { emitEvent: false }); |
|||
this.cdr.markForCheck(); |
|||
} |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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]="debugStrategyFormGroup"> |
|||
<div class="tb-form-panel-title p-2" translate>debug-strategy.label</div> |
|||
<div class="p-1 hint-container"> |
|||
<div class="tb-form-hint tb-primary-fill tb-flex center" tbTruncateWithTooltip>{{ 'debug-strategy.hint.main' | translate }}</div> |
|||
</div> |
|||
<div class="flex flex-col p-2"> |
|||
<mat-slide-toggle class="mat-slide p-1" formControlName="onFailure"> |
|||
<mat-label tb-hint-tooltip-icon="{{ 'debug-strategy.hint.on-failure' | translate }}"> |
|||
{{ 'debug-strategy.on-failure' | translate }} |
|||
</mat-label> |
|||
</mat-slide-toggle> |
|||
<mat-slide-toggle class="mat-slide p-1" formControlName="allMessages"> |
|||
<mat-label tb-hint-tooltip-icon="{{ 'debug-strategy.hint.all-messages' | translate }}"> |
|||
{{ 'debug-strategy.all-messages' | translate }} {{ ' (' + maxRuleNodeDebugDurationMinutes + ' ' }} {{ ('debug-strategy.min' | translate) + ')'}} |
|||
</mat-label> |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="flex justify-end"> |
|||
<button mat-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="onCancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button mat-raised-button |
|||
color="primary" |
|||
type="button" |
|||
(click)="onApply()"> |
|||
{{ 'action.apply' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
@ -0,0 +1,94 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, EventEmitter, Input, OnInit } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { CommonModule } from '@angular/common'; |
|||
import { SharedModule } from '@shared/shared.module'; |
|||
import { getCurrentAuthState } from '@core/auth/auth.selectors'; |
|||
import { DebugStrategy } from '@shared/models/rule-node.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-debug-strategy-panel', |
|||
templateUrl: './debug-strategy-panel.component.html', |
|||
standalone: true, |
|||
imports: [ |
|||
SharedModule, |
|||
CommonModule |
|||
] |
|||
}) |
|||
export class DebugStrategyPanelComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() popover: TbPopoverComponent<DebugStrategyPanelComponent>; |
|||
@Input() debugStrategy: DebugStrategy; |
|||
|
|||
debugStrategyFormGroup: UntypedFormGroup; |
|||
|
|||
onStrategyApplied = new EventEmitter<DebugStrategy>() |
|||
|
|||
readonly maxRuleNodeDebugDurationMinutes = getCurrentAuthState(this.store).maxRuleNodeDebugDurationMinutes; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
protected store: Store<AppState>) { |
|||
super(store); |
|||
|
|||
this.debugStrategyFormGroup = this.fb.group({ |
|||
allMessages: [false], |
|||
onFailure: [false] |
|||
}); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.updatePanelStrategy(); |
|||
} |
|||
|
|||
onCancel() { |
|||
this.popover?.hide(); |
|||
} |
|||
|
|||
onApply(): void { |
|||
const allMessages = this.debugStrategyFormGroup.get('allMessages').value; |
|||
const onFailure = this.debugStrategyFormGroup.get('onFailure').value; |
|||
if (allMessages && onFailure) { |
|||
this.onStrategyApplied.emit(DebugStrategy.ALL_WITH_FAILURES); |
|||
} else if (allMessages) { |
|||
this.onStrategyApplied.emit(DebugStrategy.ALL_EVENTS); |
|||
} else if (onFailure) { |
|||
this.onStrategyApplied.emit(DebugStrategy.ONLY_FAILURE_EVENTS); |
|||
} else { |
|||
this.onStrategyApplied.emit(DebugStrategy.DISABLED); |
|||
} |
|||
} |
|||
|
|||
private updatePanelStrategy(): void { |
|||
switch (this.debugStrategy) { |
|||
case DebugStrategy.ALL_WITH_FAILURES: |
|||
this.debugStrategyFormGroup.get('allMessages').patchValue(true, { emitEvent: false }); |
|||
this.debugStrategyFormGroup.get('onFailure').patchValue(true, { emitEvent: false }); |
|||
break; |
|||
case DebugStrategy.ONLY_FAILURE_EVENTS: |
|||
this.debugStrategyFormGroup.get('onFailure').patchValue(true, { emitEvent: false }); |
|||
break; |
|||
case DebugStrategy.ALL_EVENTS: |
|||
this.debugStrategyFormGroup.get('allMessages').patchValue(true, { emitEvent: false }); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue