Web SDK documentation
  1. Components
  2. DiagnosticsComponent

File

diagnostics/diagnostics.component.ts

Metadata

selector c8y-diagnostics
templateUrl ./diagnostics.component.html

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, diagnosticService: DiagnosticsService, operationRealtime: OperationRealtimeService)
Parameters :
Name Type Optional
route ActivatedRoute No
diagnosticService DiagnosticsService No
operationRealtime OperationRealtimeService No

Methods

onCancel
onCancel(operation: IOperation)
Parameters :
Name Type Optional
operation IOperation No
Returns : void
onDelete
onDelete(operation: IOperation)
Parameters :
Name Type Optional
operation IOperation No
Returns : void
onDiagnosticRequest
onDiagnosticRequest()
Returns : void

Properties

device$
Default value : new BehaviorSubject<IManagedObject>(this.route.snapshot.parent.data.contextData)
deviceId
Type : string
Default value : this.route.snapshot.parent.data.contextData.id
operationCount
Type : number
Public operationRealtime
Type : OperationRealtimeService
operations$
Default value : this.diagnosticService.getOperations$(this.device$)
operationsPipe
Type : ForOfFilterPipe<IOperation>
Default value : pipe( map(ops => ops.filter(op => op[this.diagnosticService.fragment])) )
realtimeOptions
Type : ForOfRealtimeOptions
Default value : { entityOrId: this.deviceId, removeOnUpdate: true, insertOnUpdate: true } as ForOfRealtimeOptions
statusClasses
Default value : operationStatusClasses
statusIcons
Default value : operationStatusIcons 
<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Request diagnostic file' | translate }}"
    (click)="onDiagnosticRequest()"
  >
    <i c8yIcon="stethoscope"></i>
    <span translate>Request diagnostic file</span>
  </button>
</c8y-action-bar-item>

<div
  class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline"
  *ngIf="operationCount > 0"
>
  <div class="d-flex">
    <div class="c8y-list--timeline__item__date a-s-center">
      <label>{{ 'Date' | translate }}</label>
    </div>
    <div class="c8y-list__item__block flex-grow">
      <div class="c8y-list__item__icon">
        <i class="p-l-24"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-40">
          <div class="col-4">{{ 'Event' | translate }}</div>
          <div class="col-5 m-l-8">{{ 'File' | translate }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

<c8y-list-group>
  <ng-template
    c8yFor
    let-operation
    [c8yForOf]="operations$"
    [c8yForPipe]="operationsPipe"
    [c8yForRealtime]="operationRealtime"
    [c8yForRealtimeOptions]="realtimeOptions"
    (c8yForCount)="operationCount = $event"
  >
    <c8y-li-timeline>
      {{ operation.creationTime | c8yDate }}
      <c8y-li>
        <c8y-li-icon>
          <i
            [c8yIcon]="statusIcons[operation.status]"
            [ngClass]="statusClasses[operation.status]"
            [tooltip]="operation.status?.toString() | translate"
          ></i>
        </c8y-li-icon>
        <c8y-li-body class="content-flex-40">
          <div class="col-4">
            <p class="text-truncate-wrap" title="{{ operation.description | translate }}">
              {{ operation.description | translate }}
            </p>
          </div>
          <div class="col-5" *ngIf="operation.c8y_DiagnosticReport?.file">
            <div class="text-truncate-wrap m-t-xs-8">
              <span class="text-label-small visible-xs" translate>File</span>
              <span title="{{ operation.c8y_DiagnosticReport.file }}">
                <c8y-file-download
                  url="{{ operation.c8y_DiagnosticReport.file }}"
                ></c8y-file-download>
              </span>
            </div>
          </div>
        </c8y-li-body>
        <c8y-li-action
          (click)="onCancel(operation)"
          *ngIf="operation.status === 'PENDING'"
          icon="times"
          label="{{ 'Cancel' | translate }}"
        ></c8y-li-action>
        <c8y-li-action
          (click)="onDelete(operation)"
          *ngIf="operation.status === 'SUCCESSFUL'"
          icon="delete"
          label="{{ 'Delete' | translate }}"
        ></c8y-li-action>
      </c8y-li>
    </c8y-li-timeline>
  </ng-template>
</c8y-list-group>

<!-- EMPTY STATE -->

<c8y-ui-empty-state
  *ngIf="operationCount === 0"
  [icon]="'stethoscope'"
  [title]="'No diagnostic files available.' | translate"
></c8y-ui-empty-state>

results matching ""

    No results matching ""