File
Methods
|
addDatapointEntry
|
addDatapointEntry()
|
|
|
|
editDatapointEntry
|
editDatapointEntry(entry: IManagedObject)
|
Parameters :
| Name |
Type |
Optional |
| entry |
IManagedObject
|
No
|
|
|
getDatapoints
|
getDatapoints()
|
|
Returns : Promise<IResultList<IManagedObject>>
|
|
Async
removeDatapointEntry
|
removeDatapointEntry(entry: IManagedObject)
|
Parameters :
| Name |
Type |
Optional |
| entry |
IManagedObject
|
No
|
|
|
datapoints$
|
Type : Observable<IResultList<IManagedObject>>
|
Default value : this.reload$.pipe(
tap(() => {
this.isLoading = true;
}),
switchMap(() => this.getDatapoints()),
tap(() => {
this.isLoading = false;
}),
shareReplay()
)
|
|
isLoading
|
Default value : true
|
|
listClass
|
Type : string
|
Default value : ''
|
|
reload$
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
<c8y-title>Data point library</c8y-title>
<c8y-action-bar-item [placement]="'right'" *c8yIfAllowed="['ROLE_INVENTORY_ADMIN']" [priority]="1">
<button (click)="addDatapointEntry()" class="btn btn-link" [title]="'Add data point' | translate">
<i c8yIcon="plus-circle"></i>
{{ 'Add data point' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'" [priority]="0">
<button
(click)="reload()"
class="btn btn-link"
[disabled]="isLoading"
[title]="'Reload' | translate"
>
<i c8yIcon="refresh" [ngClass]="{ 'icon-spin': isLoading }"></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form hidden-xs">
<c8y-list-display-switch
(onListClassChange)="listClass = $event"
[listLength]="(datapoints$ | async)?.data?.length"
></c8y-list-display-switch>
</c8y-action-bar-item>
<c8y-help src="/users-guide/cockpit/#data-point-library"></c8y-help>
<!-- empty state -->
<div *ngIf="(datapoints$ | async)?.data?.length === 0" class="c8y-empty-state text-center">
<h1 class="c8y-icon c8y-icon-modules c8y-icon-duocolor"></h1>
<h3 translate>No data points to display.</h3>
<p translate>Add a data point using the button below.</p>
<p>
<button
(click)="addDatapointEntry()"
class="btn btn-primary"
[title]="'Add data point' | translate"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add data point' | translate }}
</button>
</p>
</div>
<!-- loading indicator -->
<div *ngIf="isLoading" class="d-flex j-c-center">
<c8y-loading></c8y-loading>
</div>
<div
class="card-group"
[ngClass]="listClass"
*ngIf="!isLoading && (datapoints$ | async) as datapoints"
>
<div class="page-sticky-header hidden-xs" *ngIf="datapoints.data.length">
<div class="flex-row">
<div class="card-header">
<div class="card-icon"></div>
<p translate>Label</p>
</div>
<div class="card-actions"></div>
<div class="card-block p-l-0">
<div class="col-sm-3 p-l-16">
<p translate>Fragment</p>
</div>
<div class="col-sm-2">
<p translate>Series</p>
</div>
<div class="col-sm-1">
<span translate>Unit</span>
</div>
<div class="col-sm-2">
<span translate>Target</span>
</div>
<div class="col-sm-4">
<span translate>Range</span>
</div>
</div>
</div>
</div>
<div *c8yFor="let datapoint of datapoints; loadMore: 'hidden';" class="col-sm-6 col-md-4 col-lg-3 col-xs-12">
<div class="card pointer" (click)="editDatapointEntry(datapoint)">
<div class="card-actions" (click)="$event.stopPropagation()">
<div class="dropdown settings pull-right" dropdown>
<button
[title]="'Actions' | translate"
type="button"
class="dropdown-toggle c8y-dropdown"
dropdownToggle
>
<i c8yIcon="ellipsis-v"></i>
</button>
<ul class="dropdown-menu" *dropdownMenu>
<li>
<button
type="button"
[title]="'Edit' | translate"
(click)="editDatapointEntry(datapoint)"
>
<i c8yIcon="pencil"></i>
<span translate>Edit</span>
</button>
</li>
<li>
<button
type="button"
[title]="'Remove' | translate"
(click)="removeDatapointEntry(datapoint)"
>
<i c8yIcon="trash"></i>
<span translate>Remove</span>
</button>
</li>
</ul>
</div>
</div>
<div class="card-header separator">
<div class="card-icon">
<i c8yIcon="circle" [style.color]="datapoint.c8y_Kpi?.color"></i>
</div>
<div class="card-title text-truncate" [title]="datapoint.c8y_Kpi?.label">
{{ datapoint.c8y_Kpi?.label }}
</div>
</div>
<div class="card-block bg-gray-white p-b-24 card-hidden-list">
<div class="col-sm-3 col-md-2 ">
<c8y-range-display [config]="datapoint.c8y_Kpi" [display]="'compact'"></c8y-range-display>
</div>
</div>
<div class="card-block">
<div class="col-sm-3 text-truncate">
<span>
<label class="text-label-small m-r-4" translate>Fragment</label>
<span [title]="datapoint.c8y_Kpi?.fragment">
{{ datapoint.c8y_Kpi?.fragment }}
</span>
</span>
</div>
<div class="col-sm-2 text-truncate">
<label class="text-label-small m-r-4" translate>Series</label>
<span [title]="datapoint.c8y_Kpi?.series">{{ datapoint.c8y_Kpi?.series }}</span>
</div>
<div class="col-sm-1 text-truncate card-hidden-grid">
<span *ngIf="datapoint.c8y_Kpi?.unit">
<label class="text-label-small m-r-4" translate>Unit</label>
<span [title]="datapoint.c8y_Kpi?.unit">{{ datapoint.c8y_Kpi?.unit }}</span>
</span>
</div>
<div class="col-sm-2 text-truncate">
<span *ngIf="datapoint.c8y_Kpi?.target">
<label class="text-label-small m-r-4" translate>Target</label>
<span [title]="datapoint.c8y_Kpi?.target">{{ datapoint.c8y_Kpi?.target }}</span>
</span>
</div>
<div class="col-sm-4 card-hidden-grid">
<c8y-range-display [config]="datapoint.c8y_Kpi" [display]="'inline'"></c8y-range-display>
</div>
</div>
</div>
</div>
</div>