alarms/alarms-list.component.ts
OnChanges
AfterViewInit
OnDestroy
| selector | c8y-alarms-list |
| imports |
C8yTranslateDirective
ForOfDirective
ListItemTimelineComponent
RouterLinkActive
RouterLink
TooltipDirective
ListItemComponent
ListItemIconComponent
AlarmsIconComponent
ListItemBodyComponent
IconDirective
DynamicComponentAlertsComponent
C8yTranslatePipe
AsyncPipe
DatePipe
AlarmListIndicatorPipe
SplitViewListComponent
SplitViewHeaderActionsComponent
SplitViewAlertsComponent
ListGroupComponent
|
| templateUrl | ./alarms-list.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(activatedRoute: ActivatedRoute, alarmsViewService: AlarmsViewService, contextRouteService: ContextRouteService, router: Router)
|
|||||||||||||||
|
Parameters :
|
| alarms |
Type : IResultList<unknown>
|
|
Input property for receiving a list of alarms. |
| hasPermissions |
Type : boolean
|
Default value : true
|
| isInitialLoading |
Type : boolean
|
Default value : false
|
|
Controls the visibility of the loading bar
When set to |
| isInPreviewMode |
Type : boolean
|
Default value : false
|
|
Indicates whether the component is in widget preview mode. |
| loadMoreMode |
Type : LoadMoreMode
|
Default value : 'hidden'
|
|
Input property for receiving load more mode. |
| navigationOptions |
Type : AlarmNavigationOptions
|
Default value : {
allowNavigationToAlarmsView: true,
alwaysNavigateToAllAlarms: false,
includeClearedQueryParams: false,
queryParamsHandling: 'merge'
}
|
|
Defines options, how the alarm list should be navigated if a user clicks on an alarm. |
| typeFilters |
Type : AlarmDetails[]
|
Default value : []
|
|
Input property for the currently applied type filters. |
| onScrollingStateChange |
Type : EventEmitter
|
|
Emits a boolean value indicating the scrolling state: true when the user starts scrolling, and false when the user reaches the top of the list. |
| onSelectedAlarm |
Type : EventEmitter
|
|
Emits an instance of a selected alarm when one is chosen from the list. |
| activeRouteChanged | ||||||||||||||||
activeRouteChanged(isActive: boolean, scrollAnchor: ListItemComponent, alarm: IAlarm)
|
||||||||||||||||
|
Handles the change of the active route.
Parameters :
Returns :
void
|
| getRouterLink | ||||||
getRouterLink(alarm: IAlarm)
|
||||||
|
Parameters :
Returns :
string
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| onAlarmOpen | ||||||
onAlarmOpen(alarm: IAlarm)
|
||||||
|
Parameters :
Returns :
void
|
| activeAlarm$ |
Type : unknown
|
Default value : new BehaviorSubject<IAlarm>(null)
|
|
Current alarm or last alarm marked as active by the routerLinkActive directive. |
| activeChildParam$ |
Type : unknown
|
Default value : new Observable<string>()
|
| Readonly alarmBadgeTooltip |
Type : unknown
|
Default value : gettext(
'Number of occurrences`number of occurrences of alarm`. First occurrence {{ alarmFirstOccurrenceTime }} (device time).'
)
|
| Readonly alarmLastOccurrenceLabel |
Type : unknown
|
Default value : gettext('Last occurrence of this alarm (device time).')
|
| alertAggregator |
Type : unknown
|
Default value : new DynamicComponentAlertAggregator()
|
| isScrolling |
Type : unknown
|
Default value : false
|
| mapAlarmLink |
Type : unknown
|
Default value : pipe(
map((alarms: IAlarm[]) =>
alarms.map((alarm: IAlarm) => {
alarm.link = this.getRouterLink(alarm);
return alarm;
})
)
)
|
| svListComponent |
Type : SplitViewListComponent
|
Decorators :
@ViewChild('scrollWrapper')
|
<c8y-sv-list
[emptyStateIcon]="'c8y-alert-idle'"
[title]="'Alarms list' | translate"
[emptyStateTitle]="'No alarms to display.' | translate"
[loading]="isInitialLoading || isEmptyListLoading"
[showEmptyState]="isEmptyListLoading && !isInitialLoading && hasPermissions"
[docsUrl]="
'/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'
"
data-cy="c8y-alarms-list"
#scrollWrapper
>
<c8y-sv-header-actions>
<ng-content></ng-content>
</c8y-sv-header-actions>
<c8y-sv-alerts>
@if (
!isEmptyListLoading &&
(activeChildParam$ | async) &&
(activeAlarm$ | async)?.id !== (activeChildParam$ | async)
) {
<div
class="alert alert-warning m-b-0"
role="alert"
translate
>
The selected alarm is not currently in the list, change your filter.
</div>
}
</c8y-sv-alerts>
<c8y-list-group class="c8y-list--timeline d-block p-r-16 p-t-16">
<c8y-li-timeline
class="pointer c8y-list--timeline__item"
role="button"
data-cy="c8y-alarms-list--timeline-repeat"
*c8yFor="let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode"
[routerLink]="navigationOptions.allowNavigationToAlarmsView ? alarm.link : null"
routerLinkActive="active"
[queryParamsHandling]="navigationOptions.queryParamsHandling"
(isActiveChange)="activeRouteChanged($event, liScrollAnchor, alarm)"
(click)="onAlarmOpen(alarm)"
[queryParams]="
navigationOptions.includeClearedQueryParams
? { showCleared: alarm.status === 'CLEARED' }
: {}
"
>
<span
[attr.aria-label]="alarmLastOccurrenceLabel | translate"
[tooltip]="alarmLastOccurrenceLabel | translate"
placement="right"
container="body"
data-cy="c8y-alarms-list--last-occurrence-date"
[delay]="500"
>
{{ alarm.time | c8yDate: 'mediumDate' }}
{{ alarm.time | c8yDate: 'mediumTime' }}
</span>
<c8y-li
style="scroll-margin-top: 56px"
#liScrollAnchor
>
<c8y-li-icon class="a-s-start">
<div class="alarm-icons">
<c8y-alarms-icon
[typeFilters]="typeFilters"
[alarm]="alarm"
></c8y-alarms-icon>
</div>
@if (alarm.firstOccurrenceTime) {
<button
class="btn-clean text-center"
[attr.aria-label]="
alarmBadgeTooltip
| translate
: { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }
"
[tooltip]="
alarmBadgeTooltip
| translate
: { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }
"
placement="right"
container="body"
type="button"
data-cy="c8y-alarms-list--badge"
(click)="$event.stopPropagation()"
[delay]="500"
>
@if (alarm.count > 1) {
<span class="badge badge-info">
{{ alarm.count }}
</span>
}
</button>
}
</c8y-li-icon>
<c8y-li-body class="a-s-stretch">
<div class="d-flex a-i-start fit-h">
<div class="min-width-0 flex-grow">
<p
class="text-truncate-wrap p-b-4"
data-cy="c8y-alarms-list--alarm-text"
>
{{ alarm.text | translate }}
</p>
<div class="d-flex">
<p
class="small text-muted text-truncate flex-grow"
[title]="alarm.source.name"
data-cy="c8y-alarms-list--alarm-source-name"
>
<i [c8yIcon]="'exchange'"></i>
{{ alarm.source.name }}
</p>
<div class="d-flex">
@for (item of alarm | alarmListIndicator | async; track $index) {
<div [title]="item.title | translate">
<i
[class]="item.class"
[c8yIcon]="item.icon"
></i>
</div>
}
</div>
</div>
</div>
</div>
</c8y-li-body>
</c8y-li>
</c8y-li-timeline>
</c8y-list-group>
</c8y-sv-list>
<ng-template #alertsA>
<c8y-dynamic-component-alerts [alerts]="alertAggregator"></c8y-dynamic-component-alerts>
</ng-template>