@if (selectedAlarm) {
<div
class="card-header p-24 m-b-16 bg-component separator-bottom sticky-top"
style="margin: 0 -24px"
>
<h4
class="m-0"
data-cy="c8y-alarm-details-title"
[innerHTML]="selectedAlarm.text | translate | markdownToHtml | async"
></h4>
</div>
}
<c8y-icon-panel [sections]="alarmInfoSections">
@if (showSections && !hiddenSections?.source) {
<div
class="col-xs-12 col-md-6 d-flex p-b-8"
data-cy="c8y-alarm-details--source-wrapper"
>
<div class="border-all fit-w d-flex">
<div class="p-8">
<i
class="icon-24 m-t-4 stroked-icon status"
c8yIcon="contactless-payment"
></i>
</div>
<div class="p-t-8 p-b-8 p-r-8">
<p class="text-label-small m-b-0 m-r-8">{{ 'Source' | translate }}</p>
<p class="small">
<button
class="btn-link text-muted p-0 m-r-8 text-left"
title="{{ selectedAlarm?.source?.name }}"
type="button"
routerLink="{{ selectedAlarmMO | assetLink }}"
>
<small class="icon-flex">
<i c8yIcon="exchange"></i>
{{ selectedAlarm?.source?.name || selectedAlarm?.source?.id }}
</small>
</button>
@if (showSourceNavigationLink$ | async) {
<button
class="btn-link p-0 text-left"
title="{{
linkTitle
| translate
: { appName: userDeviceManagementApp$ | async | humanizeAppName | async }
}}"
type="button"
(click)="goToAlarmSource(selectedAlarm?.id)"
data-cy="alarm-details-device-management-link"
>
{{ userDeviceManagementApp$ | async | humanizeAppName | async }}
<i c8yIcon="external-link"></i>
</button>
}
</p>
</div>
</div>
</div>
}
@if (showSections && !hiddenSections?.type) {
<div
class="col-xs-12 col-md-6 d-flex p-b-8"
data-cy="c8y-alarm-details--severity-type-wrapper"
>
<div class="border-all fit-w d-flex">
<div class="p-8">
<span
class="circle-icon-wrapper"
[ngStyle]="{ 'background-color': typeColor }"
>
<i
class="stroked-icon"
c8yIcon="bell"
></i>
</span>
</div>
<div class="p-t-8 p-b-8 p-r-8 min-width-0">
<p class="text-label-small m-b-0 m-r-8">{{ 'Type' | translate }}</p>
<p
class="small text-truncate"
title="{{ selectedAlarm?.type }}"
>
<code>{{ selectedAlarm?.type }}</code>
</p>
</div>
</div>
</div>
}
<div class="col-xs-12 col-md-12 p-b-16">
<div class="border-all fit-w d-flex">
<div class="p-8">
<i
class="icon-24 text-gray-dark m-t-4"
c8yIcon="calendar"
data-cy="c8y-alarm-details--last-updated-icon"
></i>
</div>
<div class="p-t-8 p-b-0 p-r-8 flex-grow">
<div class="content-flex-50">
@if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {
<div
class="col-4 p-b-8"
data-cy="c8y-alarm-details--number-of-occurrences-wrapper"
>
<p class="text-label-small m-b-0 m-r-8">
{{ 'Number of occurrences' | translate }}
</p>
<p>
<span
class="badge badge-info"
data-cy="c8y-alarm-details--badge"
>
{{ selectedAlarm?.count }}
</span>
</p>
</div>
}
@if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {
<div
class="col-4 p-b-8"
data-cy="c8y-alarm-details--first-occurrence-wrapper"
>
<p class="text-label-small m-b-0 m-r-8">{{ 'First occurrence' | translate }}</p>
<p class="small">
{{ selectedAlarm?.creationTime | c8yDate: 'medium' }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Time in which the alarm was created. The time shown corresponds to the server\'s time. Device time can be different from server time.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</p>
</div>
}
@if (showSections && !hiddenSections?.lastOccurrence) {
<div
class="col-4 p-b-8"
data-cy="c8y-alarm-details--last-updated-wrapper"
>
<p class="text-label-small m-b-0 m-r-8">{{ 'Last occurrence' | translate }}</p>
<p class="small">
{{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Time in which the alarm was last updated. The time shown corresponds to the server\'s time. Device time can be different from server time.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</p>
</div>
}
</div>
</div>
</div>
</div>
@if (customFragments && showSections && !hiddenSections?.customData) {
<div
class="col-xs-12 col-md-12 p-b-16"
data-cy="c8y-alarm-details--custom-fragments-wrapper"
>
<div class="border-all fit-w d-flex">
<div class="p-8">
<i
class="icon-24 text-gray-dark m-t-4"
c8yIcon="outgoing-data"
></i>
</div>
<div
class="p-t-8 p-b-0 p-r-8 flex-grow"
data-cy="alarm-details-custom-data"
>
<p class="text-label-small m-b-4 m-r-8">{{ 'Custom data' | translate }}</p>
<pre><code>{{ customFragments | json }}</code></pre>
</div>
</div>
</div>
}
</c8y-icon-panel>
@if (showActions) {
<c8y-sv-details-actions [actions]="alarmActions">
@for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {
<button
class="btn btn-default btn-sm no-swing"
[title]="button.title | translate"
type="button"
[ngClass]="button.additionalButtonClasses"
(click)="detailsButtonAction(button, selectedAlarm!)"
[disabled]="button.disabled"
>
<i
[c8yIcon]="button.icon"
[ngClass]="button.additionalIconClasses"
></i>
@if (button.label) {
<span>{{ button.label | translate }}</span>
}
</button>
}
</c8y-sv-details-actions>
}
@if (showSections && !hiddenSections?.auditLogs) {
<ng-template #noAuditLogAvailable>
<div class="p-16">
<c8y-ui-empty-state
[icon]="'archive'"
[title]="'No audit logs found.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
</ng-template>
<div>
<div class="legend form-block">{{ 'Audit logs' | translate }}</div>
@if (isLoading || auditLog?.data.length) {
@if (isLoading) {
<c8y-loading></c8y-loading>
}
@if (!isLoading) {
<c8y-list-group data-cy="c8y-alarms-details--audit-logs">
<c8y-li-timeline *c8yFor="let log of auditLog; loadMore: 'hidden'">
{{ log.creationTime | c8yDate: 'mediumDate' }}
{{ log.creationTime | c8yDate: 'mediumTime' }}
<c8y-li>
<c8y-li-body>
<p class="text-truncate-wrap separator-bottom p-b-4">
{{ log | auditChangesMessage }}
</p>
<div class="c8y-list__item__footer">
@if (log.user) {
<span class="m-r-16 small">
<span class="text-label-small">
{{ 'by`user`' | translate }}
</span>
{{ log.user }}
</span>
}
<span class="small">
<span class="text-label-small">
{{ 'device time' | translate }}
</span>
{{ log.time | c8yDate: 'medium' }}
</span>
</div>
</c8y-li-body>
</c8y-li>
</c8y-li-timeline>
</c8y-list-group>
}
} @else {
<ng-container [ngTemplateOutlet]="noAuditLogAvailable"></ng-container>
}
</div>
}