File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
alarms
|
Type : IResultList<>
|
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 false, the alarm list is displayed. When set to true, the opacity of alarms list is changed and a loading bar is shown.
|
|
loadMoreMode
|
Type : LoadMoreMode
|
Default value : 'hidden'
|
Input property for receiving load more mode.
|
|
navigationOptions
|
Type : { allowNavigationToAlarmsView: boolean; alwaysNavigateToAllAlarms: boolean; includeClearedQueryParams: boolean; }
|
Default value : {
/**
* Defines if the alarm should navigate to a detail view when clicked.
*/
allowNavigationToAlarmsView: true,
/**
* Defines if the component should try to determine the context to navigate
* to the correct alarm detail view or not. If set to true, the component will
* not try to determine the context and will always navigate to the all alarms view.
*/
alwaysNavigateToAllAlarms: false,
/**
* Defines if the cleared query parameter should be included in the navigation if
* the alarm is cleared.
*/
includeClearedQueryParams: false
}
|
Defines options, how the alarm list should be navigated if a user
clicks on an alarm.
|
|
splitView
|
Type : boolean
|
Default value : false
|
Controls the visibility and functionality of some components
When set to true, means the list is displayed in a split view layout:
the list on the first column and the selected record detail on the second column (the cockpit
alarms view for example)
When set to false, the list is displayed as a standalone component, opening the detail will
redirect to the alarms
|
|
typeFilters
|
Type : AlarmDetails[]
|
Default value : []
|
Input property for the currently applied type filters.
|
Outputs
|
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.
|
Methods
|
activeRouteChanged
|
activeRouteChanged(isActive: boolean, scrollAnchor: ListItemComponent, alarm: IAlarm)
|
Handles the change of the active route.
Parameters :
| Name |
Type |
Optional |
Description |
| isActive |
boolean
|
No
|
- A boolean indicating whether the route is active or not.
|
| scrollAnchor |
ListItemComponent
|
No
|
- The ListItemComponent used as a scroll anchor.
|
| alarm |
IAlarm
|
No
|
- The IAlarm object representing the active alarm.
|
|
|
getRouterLink
|
getRouterLink(alarm: IAlarm)
|
Parameters :
| Name |
Type |
Optional |
| alarm |
IAlarm
|
No
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
ngOnChanges
|
ngOnChanges(changes: SimpleChanges)
|
Parameters :
| Name |
Type |
Optional |
| changes |
SimpleChanges
|
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
onAlarmOpen
|
onAlarmOpen(alarm: IAlarm)
|
Parameters :
| Name |
Type |
Optional |
| alarm |
IAlarm
|
No
|
|
|
activeAlarm$
|
Default value : new BehaviorSubject<IAlarm>(null)
|
Current alarm or last alarm marked as active by the routerLinkActive directive.
|
|
activeChildParam$
|
Default value : new Observable<string>()
|
|
Readonly
alarmBadgeTooltip
|
Default value : gettext(
'Number of occurrences`number of occurrences of alarm`. First occurrence {{ alarmFirstOccurrenceTime }} (device time).'
)
|
|
Readonly
alarmLastOccurrenceLabel
|
Default value : gettext('Last occurrence of this alarm (device time).')
|
|
alertAggregator
|
Default value : new DynamicComponentAlertAggregator()
|
|
innerScrollWrapper
|
Type : ElementRef
|
Decorators :
@ViewChild('scrollWrapper')
|
|
isEmptyListLoading
|
Default value : true
|
Determines whether the c8y-loading component should be displayed.
The loading component is shown when no alarms are displayed in the view or when the request is initial,
as we don't want to see empty space on alarm list during loading.
|
|
isScrolling
|
Default value : false
|
|
mapAlarmLink
|
Default value : pipe(
map((alarms: IAlarm[]) =>
alarms.map((alarm: IAlarm) => {
alarm.link = this.getRouterLink(alarm);
return alarm;
})
)
)
|
<div
class="inner-scroll"
[ngClass]="{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }"
data-cy="c8y-alarms-list"
#scrollWrapper
>
<div
class="flex-wrap flex-no-shrink sticky-top m-b-16"
[ngClass]="{
'separator-bottom card-header p-b-0': splitView,
'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':
!splitView && navigationOptions.allowNavigationToAlarmsView
}"
>
<div
class="h4 card-title"
*ngIf="splitView"
>
{{ 'Alarms list' | translate }}
</div>
<div
[ngClass]="{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }"
>
<ng-content></ng-content>
</div>
<!-- Loading -->
<div
class="fit-w overflow-hidden"
[ngClass]="{ 'p-t-16': splitView }"
>
<div
class="loading-bar"
style="z-index: 101"
[ngClass]="{ active: isInitialLoading && !isEmptyListLoading }"
></div>
</div>
<div
class="alert alert-warning"
role="alert"
translate
*ngIf="
!isEmptyListLoading &&
(activeChildParam$ | async) &&
(activeAlarm$ | async)?.id !== (activeChildParam$ | async)
"
>
The selected alarm is not currently in the list, change your filter.
</div>
</div>
<c8y-list-group
class="p-r-16 interactive"
[ngStyle]="{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }"
style="transition: opacity 0.15s linear"
data-cy="c8y-alarm-list--group"
>
<c8y-li-timeline
class="pointer"
role="button"
data-cy="c8y-alarm-list--timeline-repeat"
*c8yFor="let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode"
[routerLink]="navigationOptions.allowNavigationToAlarmsView ? alarm.link : null"
routerLinkActive="active"
queryParamsHandling="merge"
(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"
[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>
<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"
*ngIf="alarm.firstOccurrenceTime"
(click)="$event.stopPropagation()"
[delay]="500"
>
<span
class="badge badge-info"
*ngIf="alarm.count > 1"
>
{{ 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">
{{ alarm.text | translate }}
</p>
<div class="d-flex">
<p
class="small text-muted text-truncate flex-grow"
[title]="alarm.source.name"
>
<i [c8yIcon]="'exchange'"></i>
{{ alarm.source.name }}
</p>
<div class="d-flex">
<div
[title]="item.title | translate"
*ngFor="let item of alarm | alarmListIndicator | async"
>
<i
[class]="item.class"
[c8yIcon]="item.icon"
></i>
</div>
</div>
</div>
</div>
</div>
</c8y-li-body>
</c8y-li>
</c8y-li-timeline>
<c8y-loading *ngIf="isInitialLoading && isEmptyListLoading"></c8y-loading>
<div
class="p-relative p-l-24"
*ngIf="isEmptyListLoading && !isInitialLoading"
>
<c8y-ui-empty-state
[icon]="'c8y-alert-idle'"
[title]="'No alarms to display.' | translate"
data-cy="alarm-list--empty-state"
*ngIf="hasPermissions; else alertsA"
>
<p c8y-guide-docs>
<small
translate
ngNonBindable
>
Find out more in the
<a
c8y-guide-href="/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms"
>
user documentation
</a>
.
</small>
</p>
</c8y-ui-empty-state>
</div>
</c8y-list-group>
</div>
<ng-template #alertsA>
<c8y-dynamic-component-alerts [alerts]="alertAggregator"></c8y-dynamic-component-alerts>
</ng-template>