Vladyslav Prykhodko
10 months ago
committed by
GitHub
GitHub
35 changed files with 852 additions and 112 deletions
@ -0,0 +1,94 @@ |
|||
<!-- |
|||
|
|||
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 *ngIf="panelMode; else componentMode"> |
|||
<ng-container *ngTemplateOutlet="alarmRuleFilterPanel"></ng-container> |
|||
</ng-container> |
|||
<ng-template #componentMode> |
|||
<ng-container *ngIf="buttonMode; else alarmFilter"> |
|||
<button color="primary" |
|||
matTooltip="{{buttonDisplayValue}}" |
|||
matTooltipPosition="above" |
|||
mat-stroked-button |
|||
(click)="toggleAlarmRuleFilterPanel($event)"> |
|||
<mat-icon>filter_list</mat-icon>{{buttonDisplayValue}} |
|||
</button> |
|||
</ng-container> |
|||
</ng-template> |
|||
<ng-template #alarmRuleFilterPanel> |
|||
<form class="mat-content mat-padding flex flex-col" (ngSubmit)="update()"> |
|||
<ng-container *ngTemplateOutlet="alarmFilter"></ng-container> |
|||
<div class="tb-panel-actions flex flex-row items-center justify-end"> |
|||
<button type="button" |
|||
mat-button |
|||
color="primary" |
|||
(click)="reset()"> |
|||
{{ 'action.reset' | translate }} |
|||
</button> |
|||
<span class="flex-1"></span> |
|||
<button type="button" |
|||
mat-button |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
<button type="submit" |
|||
mat-raised-button |
|||
color="primary" |
|||
[disabled]="alarmRuleFilterConfigForm.invalid || !alarmRuleFilterConfigForm.dirty"> |
|||
{{ 'action.update' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
</ng-template> |
|||
<ng-template #alarmFilter> |
|||
<div class="tb-form-panel tb-alarm-filter-config-component no-padding no-border" [formGroup]="alarmRuleFilterConfigForm"> |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="fixed-title-width" translate>alarm-rule.alarm-rule-type-list</div> |
|||
<tb-entity-subtype-list subscriptSizing="dynamic" |
|||
formControlName="name" |
|||
appearance="outline" |
|||
[additionalClasses]="['tb-chips', 'flex']" |
|||
[entityType]="entityType.CALCULATED_FIELD"> |
|||
</tb-entity-subtype-list> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="fixed-title-width" translate>alarm-rule.entity-type</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="entityType" placeholder="{{ 'alarm-rule.any-type' | translate }}"> |
|||
<mat-option>{{ 'alarm-rule.any-type' | translate }}</mat-option> |
|||
<mat-option *ngFor="let type of listEntityTypes" [value]="type"> |
|||
{{ entityTypeTranslations.get(type)?.type | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
@if (alarmRuleFilterConfigForm.get('entityType').value) { |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="fixed-title-width" translate>alarm-rule.alarm-rule-entity-list</div> |
|||
<tb-entity-list appearance="outline" |
|||
subscriptSizing="dynamic" |
|||
class="flex flex-1" |
|||
inlineField |
|||
syncIdsWithDB |
|||
labelText="{{'entity.entity-list' | translate}}" |
|||
[entityType]="alarmRuleFilterConfigForm.get('entityType').value" |
|||
formControlName="entities"> |
|||
</tb-entity-list> |
|||
</div> |
|||
} |
|||
</div> |
|||
</ng-template> |
|||
@ -0,0 +1,58 @@ |
|||
/** |
|||
* 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'; |
|||
|
|||
:host { |
|||
display: flex; |
|||
max-width: 100%; |
|||
.mdc-button { |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
.mdc-button { |
|||
.mat-icon { |
|||
min-width: 24px; |
|||
} |
|||
.mdc-button__label { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
} |
|||
|
|||
::ng-deep { |
|||
|
|||
.tb-alarm-filter-config-component { |
|||
max-width: 100%; |
|||
width: 600px; |
|||
min-width: 100%; |
|||
flex: 1; |
|||
|
|||
|
|||
tb-entity-subtype-list { |
|||
flex: 1; |
|||
@media #{$mat-gt-xs} { |
|||
width: 180px; |
|||
} |
|||
.mdc-evolution-chip-set__chips { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,296 @@ |
|||
///
|
|||
/// 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, |
|||
DestroyRef, |
|||
ElementRef, |
|||
forwardRef, |
|||
Inject, |
|||
InjectionToken, |
|||
Input, |
|||
OnInit, |
|||
Optional, |
|||
TemplateRef, |
|||
ViewChild, |
|||
ViewContainerRef |
|||
} from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
|||
import { TemplatePortal } from '@angular/cdk/portal'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { deepClone, isArraysEqualIgnoreUndefined, isDefinedAndNotNull, isEmpty, isUndefinedOrNull } from '@core/utils'; |
|||
import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.models'; |
|||
import { fromEvent, Subscription } from 'rxjs'; |
|||
import { POSITION_MAP } from '@shared/models/overlay.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { AlarmRuleFilterConfig } from "@shared/models/alarm-rule.models"; |
|||
|
|||
export const ALARM_FILTER_CONFIG_DATA = new InjectionToken<any>('AlarmRuleFilterConfigData'); |
|||
|
|||
export interface AlarmRuleFilterConfigData { |
|||
panelMode: boolean; |
|||
userMode: boolean; |
|||
alarmRuleFilterConfig: AlarmRuleFilterConfig; |
|||
initialAlarmRuleFilterConfig?: AlarmRuleFilterConfig; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-alarm-rule-filter-config', |
|||
templateUrl: './alarm-rule-filter-config.component.html', |
|||
styleUrls: ['./alarm-rule-filter-config.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => AlarmRuleFilterConfigComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class AlarmRuleFilterConfigComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
@ViewChild('alarmRuleFilterPanel') |
|||
alarmRuleFilterPanel: TemplateRef<any>; |
|||
|
|||
@Input() disabled: boolean; |
|||
|
|||
@coerceBoolean() |
|||
@Input() |
|||
buttonMode = true; |
|||
|
|||
@coerceBoolean() |
|||
@Input() |
|||
userMode = false; |
|||
|
|||
@coerceBoolean() |
|||
@Input() |
|||
propagatedFilter = true; |
|||
|
|||
@Input() |
|||
initialAlarmRuleFilterConfig: AlarmRuleFilterConfig = { |
|||
name: [], |
|||
entityType: null, |
|||
entities: [] |
|||
}; |
|||
|
|||
panelMode = false; |
|||
|
|||
buttonDisplayValue = this.translate.instant('alarm-rule.alarm-rule-filter'); |
|||
|
|||
alarmRuleFilterConfigForm: FormGroup; |
|||
|
|||
alarmFilterOverlayRef: OverlayRef; |
|||
|
|||
panelResult: AlarmRuleFilterConfig = null; |
|||
|
|||
entityType = EntityType; |
|||
|
|||
listEntityTypes = [EntityType.DEVICE, EntityType.ASSET, EntityType.CUSTOMER, EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE]; |
|||
entityTypeTranslations = entityTypeTranslations; |
|||
|
|||
private alarmRuleFilterConfig: AlarmRuleFilterConfig; |
|||
private resizeWindows: Subscription; |
|||
|
|||
private propagateChange = (_: any) => {}; |
|||
|
|||
constructor(@Optional() @Inject(ALARM_FILTER_CONFIG_DATA) |
|||
private data: AlarmRuleFilterConfigData | undefined, |
|||
@Optional() |
|||
private overlayRef: OverlayRef, |
|||
private fb: FormBuilder, |
|||
private translate: TranslateService, |
|||
private overlay: Overlay, |
|||
private nativeElement: ElementRef, |
|||
private viewContainerRef: ViewContainerRef, |
|||
private utils: UtilsService, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
if (this.data) { |
|||
this.panelMode = this.data.panelMode; |
|||
this.userMode = this.data.userMode; |
|||
this.alarmRuleFilterConfig = this.data.alarmRuleFilterConfig; |
|||
this.initialAlarmRuleFilterConfig = this.data.initialAlarmRuleFilterConfig; |
|||
if (this.panelMode && !this.initialAlarmRuleFilterConfig) { |
|||
this.initialAlarmRuleFilterConfig = deepClone(this.alarmRuleFilterConfig); |
|||
} |
|||
} |
|||
this.alarmRuleFilterConfigForm = this.fb.group({ |
|||
name: [null, []], |
|||
entityType: [null, []], |
|||
entities: [null, []] |
|||
}); |
|||
this.alarmRuleFilterConfigForm.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe( |
|||
() => { |
|||
if (!this.buttonMode) { |
|||
this.alarmRuleConfigUpdated(this.alarmRuleFilterConfigForm.value); |
|||
} |
|||
} |
|||
); |
|||
if (this.panelMode) { |
|||
this.updateAlarmRuleConfigForm(this.alarmRuleFilterConfig); |
|||
} |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (this.disabled) { |
|||
this.alarmRuleFilterConfigForm.disable({emitEvent: false}); |
|||
} else { |
|||
this.alarmRuleFilterConfigForm.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(alarmRuleFilterConfig?: AlarmRuleFilterConfig): void { |
|||
this.alarmRuleFilterConfig = alarmRuleFilterConfig; |
|||
if (!this.initialAlarmRuleFilterConfig && alarmRuleFilterConfig) { |
|||
this.initialAlarmRuleFilterConfig = deepClone(alarmRuleFilterConfig); |
|||
} |
|||
this.updateButtonDisplayValue(); |
|||
this.updateAlarmRuleConfigForm(alarmRuleFilterConfig); |
|||
} |
|||
|
|||
toggleAlarmRuleFilterPanel($event: Event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
const config = new OverlayConfig({ |
|||
panelClass: 'tb-filter-panel', |
|||
backdropClass: 'cdk-overlay-transparent-backdrop', |
|||
hasBackdrop: true, |
|||
maxHeight: '80vh', |
|||
height: 'min-content', |
|||
minWidth: '' |
|||
}); |
|||
config.hasBackdrop = true; |
|||
config.positionStrategy = this.overlay.position() |
|||
.flexibleConnectedTo(this.nativeElement) |
|||
.withPositions([POSITION_MAP.bottomLeft]); |
|||
|
|||
this.alarmFilterOverlayRef = this.overlay.create(config); |
|||
this.alarmFilterOverlayRef.backdropClick().subscribe(() => { |
|||
this.alarmFilterOverlayRef.dispose(); |
|||
}); |
|||
this.alarmFilterOverlayRef.attach(new TemplatePortal(this.alarmRuleFilterPanel, |
|||
this.viewContainerRef)); |
|||
this.resizeWindows = fromEvent(window, 'resize').subscribe(() => { |
|||
this.alarmFilterOverlayRef.updatePosition(); |
|||
}); |
|||
} |
|||
|
|||
cancel() { |
|||
this.updateAlarmRuleConfigForm(this.alarmRuleFilterConfig); |
|||
if (this.overlayRef) { |
|||
this.overlayRef.dispose(); |
|||
} else { |
|||
this.resizeWindows.unsubscribe(); |
|||
this.alarmFilterOverlayRef.dispose(); |
|||
} |
|||
} |
|||
|
|||
update() { |
|||
this.alarmRuleConfigUpdated(this.alarmRuleFilterConfigForm.value); |
|||
this.alarmRuleFilterConfigForm.markAsPristine(); |
|||
if (this.panelMode) { |
|||
this.panelResult = this.alarmRuleFilterConfig; |
|||
} |
|||
if (this.overlayRef) { |
|||
this.overlayRef.dispose(); |
|||
} else { |
|||
this.resizeWindows.unsubscribe(); |
|||
this.alarmFilterOverlayRef.dispose(); |
|||
} |
|||
} |
|||
|
|||
reset() { |
|||
const alarmRuleFilterConfig = this.alarmRuleFilterConfigFromFormValue(this.alarmRuleFilterConfigForm.value); |
|||
if (!this.alarmRuleFilterConfigEquals(alarmRuleFilterConfig, this.initialAlarmRuleFilterConfig)) { |
|||
this.updateAlarmRuleConfigForm(this.initialAlarmRuleFilterConfig); |
|||
this.alarmRuleFilterConfigForm.markAsDirty(); |
|||
} |
|||
} |
|||
|
|||
private alarmRuleFilterConfigEquals = (filter1?: AlarmRuleFilterConfig, filter2?: AlarmRuleFilterConfig): boolean => { |
|||
if (filter1 === filter2) { |
|||
return true; |
|||
} |
|||
if ((isUndefinedOrNull(filter1) || isEmpty(filter1)) && (isUndefinedOrNull(filter2) || isEmpty(filter2))) { |
|||
return true; |
|||
} else if (isDefinedAndNotNull(filter1) && isDefinedAndNotNull(filter2)) { |
|||
if (!isArraysEqualIgnoreUndefined(filter1.name, filter2.name)) { |
|||
return false; |
|||
} |
|||
if (!isArraysEqualIgnoreUndefined(filter1.entities, filter2.entities)) { |
|||
return false; |
|||
} |
|||
return filter1.entityType !== filter2.entityType; |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
private updateAlarmRuleConfigForm(alarmRuleFilterConfig?: AlarmRuleFilterConfig) { |
|||
this.alarmRuleFilterConfigForm.patchValue({ |
|||
name: alarmRuleFilterConfig?.name ?? [], |
|||
entityType: alarmRuleFilterConfig?.entityType ?? null, |
|||
entities: alarmRuleFilterConfig?.entities ?? [], |
|||
}, {emitEvent: false}); |
|||
} |
|||
|
|||
private alarmRuleConfigUpdated(formValue: any) { |
|||
this.alarmRuleFilterConfig = this.alarmRuleFilterConfigFromFormValue(formValue); |
|||
this.updateButtonDisplayValue(); |
|||
this.propagateChange(this.alarmRuleFilterConfig); |
|||
} |
|||
|
|||
private alarmRuleFilterConfigFromFormValue(formValue: any): AlarmRuleFilterConfig { |
|||
return { |
|||
name: formValue?.name ?? [], |
|||
entityType: formValue?.entityType ?? null, |
|||
entities: formValue?.entities ?? [], |
|||
}; |
|||
} |
|||
|
|||
private updateButtonDisplayValue() { |
|||
if (this.buttonMode) { |
|||
const filterTextParts: string[] = []; |
|||
if (this.alarmRuleFilterConfig?.name?.length) { |
|||
filterTextParts.push(this.alarmRuleFilterConfig.name.map((type) => this.customTranslate(type)).join(', ')); |
|||
} |
|||
if (!filterTextParts.length) { |
|||
this.buttonDisplayValue = this.translate.instant('alarm-rule.alarm-rule-filter-title'); |
|||
} else { |
|||
this.buttonDisplayValue = this.translate.instant('alarm-rule.alarm-rule-filter-title') + `: ${filterTextParts.join(', ')}`; |
|||
} |
|||
} |
|||
} |
|||
|
|||
private customTranslate(entity: string) { |
|||
return this.utils.customTranslation(entity, entity); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<tb-alarm-rule-filter-config [ngModel]="alarmRuleTableConfig.alarmRuleFilterConfig" |
|||
(ngModelChange)="alarmRuleFilterChanged($event)"> |
|||
</tb-alarm-rule-filter-config> |
|||
@ -0,0 +1,21 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
|
|||
:host { |
|||
padding-right: 8px; |
|||
overflow: hidden; |
|||
max-width: 100%; |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
///
|
|||
/// 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 } from '@angular/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { EntityTableHeaderComponent } from '../../components/entity/entity-table-header.component'; |
|||
import { AlarmFilterConfig } from '@shared/models/query/query.models'; |
|||
import { CalculatedFieldAlarmRule, CalculatedFieldsQuery } from "@shared/models/calculated-field.models"; |
|||
import { AlarmRulesTableConfig } from "@home/components/alarm-rules/alarm-rules-table-config"; |
|||
|
|||
@Component({ |
|||
selector: 'tb-alarm-rule-table-header', |
|||
templateUrl: './alarm-rule-table-header.component.html', |
|||
styleUrls: ['./alarm-rule-table-header.component.scss'] |
|||
}) |
|||
export class AlarmRuleTableHeaderComponent extends EntityTableHeaderComponent<CalculatedFieldAlarmRule> { |
|||
|
|||
get alarmRuleTableConfig(): AlarmRulesTableConfig { |
|||
return this.entitiesTableConfig as AlarmRulesTableConfig; |
|||
} |
|||
|
|||
constructor(protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
alarmRuleFilterChanged(alarmRuleFilterConfig: CalculatedFieldsQuery) { |
|||
this.alarmRuleTableConfig.alarmRuleFilterConfig = alarmRuleFilterConfig; |
|||
this.alarmRuleTableConfig.getTable().resetSortAndFilter(true, true); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue