File
Implements
Methods
|
highlightDependingOnExpirationStatus
|
highlightDependingOnExpirationStatus(item: ProvisionedCertificate)
|
|
Returns : "" | "text-danger" | "text-warning"
|
|
Async
revokeProvisionedCertificate
|
revokeProvisionedCertificate(provisionedCertificate: ProvisionedCertificate)
|
|
|
|
provisionedCertificates
|
Type : Observable<ProvisionedCertificate[]>
|
Default value : this.reload.pipe(
tap(() => {
this.reloading = true;
}),
map(() => this.route.snapshot.parent.data.contextData as IManagedObject),
switchMap(device => this.deviceSerialsService.getDeviceProvisionedCertificates(device)),
finalize(() => {
this.reloading = false;
})
)
|
|
Protected
Readonly
PX_ACTIONS
|
Default value : PX_ACTIONS
|
|
reload
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
|
reloading
|
Default value : false
|
<c8y-action-bar-item [placement]="'right'">
<button
class="btn btn-link"
title="{{ 'Reload' | translate }}"
type="button"
(click)="reload.next()"
>
<i
c8yIcon="refresh"
[ngClass]="{ 'icon-spin': reloading }"
></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<!-- TODO: Add link to the mentioned documentation when it's available -->
<c8y-ui-empty-state
[icon]="'certificate'"
[title]="'No provisioned certificates to display.' | translate"
[subtitle]="
'This device can no longer connect to the platform because the last certificate has been revoked. Reissuing the certificate is not possible. To restore access, the device must be re-enrolled. Please follow the re-enrollment process as outlined in the documentation.'
| translate
"
*ngIf="(provisionedCertificates | async)?.length === 0"
></c8y-ui-empty-state>
<div
[ngStyle]="{ width: '50%' }"
*ngIf="(provisionedCertificates | async)?.length > 0"
>
<div class="bg-level-0">
<div class="card-header separator">
<div
class="card-title"
translate
>
Provisioned certificates
</div>
</div>
<div class="p-16">
<c8y-list-group class="m-b-24">
<div
class="page-sticky-header hidden-xs c8y-list__item"
style="display: block !important"
>
<div class="c8y-list__item__block">
<div class="c8y-list__item__body">
<div class="content-flex-60">
<div class="col-5">
<span
class="text-truncate"
title=" {{ 'Serial No.' | translate }} "
>
{{ 'Serial No.' | translate }}
</span>
</div>
<div class="col-6">
<span
class="text-truncate"
title="{{ 'Expiration date' | translate }}"
>
{{ 'Expiration date' | translate }}
</span>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
</div>
<c8y-li
*ngFor="let provisionedCertificate of provisionedCertificates | async; let i = index"
>
<c8y-li-body class="content-flex-60">
<div class="col-5">
<div
class="text-truncate"
title="{{ 'Serial No.' | translate }}: {{ provisionedCertificate.serialNumber }}"
>
<span
class="text-label-small m-t-8 m-r-8 visible-xs-inline"
translate
>
Serial No.
</span>
{{ provisionedCertificate.serialNumber }}
</div>
</div>
<div class="col-6">
<div
class="text-truncate"
title="{{ 'Expiration date' | translate }}: {{
provisionedCertificate.validTill | c8yDate
}}"
>
<span
class="text-label-small m-t-8 m-r-8 visible-xs-inline"
translate
>
Expiration date
</span>
<small
*ngIf="provisionedCertificate.validTill"
[ngClass]="highlightDependingOnExpirationStatus(provisionedCertificate)"
>
<i
class="m-r-4"
c8yIcon="calendar"
*ngIf="!highlightDependingOnExpirationStatus(provisionedCertificate)"
></i>
<i
class="m-r-4"
c8yIcon="warning"
*ngIf="highlightDependingOnExpirationStatus(provisionedCertificate)"
></i>
<span>{{ provisionedCertificate.validTill | c8yDate }}</span>
</small>
</div>
</div>
<div class="col-1">
<button
class="btn btn-dot btn-dot--danger"
title="{{ 'Revoke' | translate }}"
type="button"
(click)="revokeProvisionedCertificate(provisionedCertificate)"
>
<i c8yIcon="delete"></i>
</button>
</div>
</c8y-li-body>
</c8y-li>
</c8y-list-group>
</div>
</div>
</div>