operations/operation-details/operation-details.component.ts
Operation details component displays a single operation's status, description and creationTime.
Example :<c8y-operation-details [operation]="operation"></c8y-operation-details>
| providers |
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => OperationDetailsComponent)
}
|
| selector | c8y-operation-details |
| templateUrl | ./operation-details.component.html |
Properties |
Methods |
Inputs |
constructor(operationDetailsService: OperationDetailsService)
|
||||||
|
Parameters :
|
| operation |
Type : IOperation
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| openDetails |
openDetails()
|
|
Returns :
void
|
| ACTIONS |
Default value : ACTIONS_OPERATIONS
|
| productExperienceEvent |
Type : ProductExperienceEvent
|
Default value : {
eventName: undefined, // supress emitting events if a parent component does not declare event name
data: {
component: COMPONENTS.OPERATION_DETAILS
}
}
|
| statusClasses |
Type : object
|
| statusIcons |
Type : object
|
<div class="c8y-list--group" *ngIf="operation">
<a class="c8y-list__item">
<div class="c8y-list__item__block">
<div class="c8y-list__item__icon">
<button
class="btn-clean"
type="button"
[attr.aria-label]="operation.status?.toString() | translate"
[tooltip]="operation.status?.toString() | translate"
[delay]="500"
placement="right"
container="body"
>
<i
[c8yIcon]="statusIcons[operation.status]"
[ngClass]="statusClasses[operation.status]"
></i>
</button>
</div>
<div class="c8y-list__item__body p-r-16">
<div class="content-flex-40">
<div class="col-8">
<button
class="btn-clean text-truncate"
type="button"
title="{{ operation.description | translate }}"
(click)="openDetails()"
c8yProductExperience
inherit
[actionData]="{ action: ACTIONS.OPEN_OPERATION_DETAILS }"
>
{{ operation.description | translate }}
</button>
</div>
<div class="col-4 text-muted">
<small class="icon-flex">
<i c8yIcon="calendar" class="m-r-4"></i>
<span>{{ operation.creationTime | c8yDate }}</span>
</small>
</div>
</div>
</div>
</div>
</a>
</div>