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 : ''
|
|
parsePipe
|
Default value : pipe(map((data: IManagedObject[]) => this.parser.parseDatapoints(data)))
|
|
reload$
|
Type : BehaviorSubject<void>
|
Default value : new BehaviorSubject(null)
|
|
Readonly
title
|
Default value : gettext('Data point library')
|
<c8y-title>{{ title | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="'Configuration' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="title | translate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-action-bar-item
[placement]="'right'"
*c8yIfAllowed="['ROLE_INVENTORY_ADMIN']"
[priority]="1"
>
<button
class="btn btn-link"
[title]="'Add data point' | translate"
type="button"
(click)="addDatapointEntry()"
data-cy="c8y-datapoint-library-list--add-data-point"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add data point' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
[priority]="0"
>
<button
class="btn btn-link"
[title]="'Reload' | translate"
type="button"
[disabled]="isLoading"
(click)="reload()"
>
<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="/docs/cockpit/data-point-library/#data-point-library"></c8y-help>
<!-- empty state
-->
<c8y-ui-empty-state
[icon]="'c8y-data-points'"
[title]="'No data points to display.' | translate"
[subtitle]="'Add a data point using the button below.' | translate"
*ngIf="(datapoints$ | async)?.data?.length === 0"
>
<p>
<button
class="btn btn-primary"
[title]="'Add data point' | translate"
type="button"
(click)="addDatapointEntry()"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add data point' | translate }}
</button>
</p>
</c8y-ui-empty-state>
<!-- loading indicator -->
<div
class="d-flex j-c-center"
*ngIf="isLoading"
>
<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="d-flex">
<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
class="col-sm-6 col-md-4 col-lg-3 col-xs-12"
*c8yFor="let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe"
>
<div
class="card pointer"
(click)="editDatapointEntry(datapoint)"
>
<div
class="card-actions"
(click)="$event.stopPropagation()"
>
<div
class="dropdown settings pull-right"
dropdown
#datapointOptionsDropdown="bs-dropdown"
[cdkTrapFocus]="datapointOptionsDropdown.isOpen"
>
<button
class="dropdown-toggle c8y-dropdown"
[title]="'Actions' | translate"
type="button"
dropdownToggle
>
<i c8yIcon="ellipsis-v"></i>
</button>
<ul
class="dropdown-menu"
*dropdownMenu
>
<li>
<button
[title]="'Edit' | translate"
type="button"
(click)="editDatapointEntry(datapoint)"
>
<i c8yIcon="pencil"></i>
{{ 'Edit' | translate }}
</button>
</li>
<li>
<button
[title]="'Remove' | translate"
type="button"
(click)="removeDatapointEntry(datapoint)"
>
<i c8yIcon="delete"></i>
{{ 'Remove' | translate }}
</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-level-1 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>