|
|
|
@ -15,7 +15,7 @@ |
|
|
|
limitations under the License. |
|
|
|
|
|
|
|
--> |
|
|
|
<mat-form-field [formGroup]="keysListFormGroup" class="mat-block"> |
|
|
|
<mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list"> |
|
|
|
<mat-chip-grid #chipList formControlName="keys" tb-chip-draggable (chipDrop)="onChipDrop($event)"> |
|
|
|
<mat-chip-row class="tb-datakey-chip" |
|
|
|
*ngFor="let key of keys; let $index = index" |
|
|
|
@ -30,34 +30,28 @@ |
|
|
|
</div> |
|
|
|
<div class="tb-chip-labels"> |
|
|
|
<div class="tb-chip-label"> |
|
|
|
<span *ngIf="datasourceType === datasourceTypes.entity"> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-20">notifications</mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.attribute" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-20" |
|
|
|
svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.entityField" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-20" |
|
|
|
svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.timeseries" |
|
|
|
matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-20">timeline</mat-icon> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<ng-container *ngIf="datasourceType === datasourceTypes.entity"> |
|
|
|
<mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above">notifications</mat-icon> |
|
|
|
<mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.attribute" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
|
|
|
<mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.entityField" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
|
|
|
<mat-icon class="tb-mat-20 tb-datakey-icon" *ngIf="key.type === dataKeyTypes.timeseries" |
|
|
|
matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above">timeline</mat-icon> |
|
|
|
</ng-container> |
|
|
|
{{key.label}} |
|
|
|
</div> |
|
|
|
<div class="tb-chip-separator">: </div> |
|
|
|
<div class="tb-chip-label" [innerHTML]="displayDataKeyNameFn(key)"></div> |
|
|
|
<div class="tb-chip-label"> |
|
|
|
<strong> |
|
|
|
<ng-container *ngTemplateOutlet="keyName; context:{key: key}"></ng-container> |
|
|
|
</strong> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button *ngIf="!disabled" |
|
|
|
type="button" |
|
|
|
@ -76,6 +70,7 @@ |
|
|
|
#origin="matAutocompleteOrigin" |
|
|
|
[matAutocompleteConnectedTo]="origin" |
|
|
|
(focusin)="onFocus()" |
|
|
|
(drop)="$event.preventDefault();" |
|
|
|
[matAutocomplete]="keyAutocomplete" |
|
|
|
[matAutocompleteDisabled]="isEntityCountDatasource" |
|
|
|
[matChipInputFor]="chipList" |
|
|
|
@ -84,33 +79,24 @@ |
|
|
|
</mat-chip-grid> |
|
|
|
<mat-autocomplete #keyAutocomplete="matAutocomplete" |
|
|
|
class="tb-autocomplete" |
|
|
|
panelWidth="fit-content" |
|
|
|
[displayWith]="displayKeyFn"> |
|
|
|
<mat-option *ngFor="let key of filteredKeys | async" [value]="key"> |
|
|
|
<span style="white-space: nowrap;"> |
|
|
|
<span *ngIf="datasourceType === datasourceTypes.entity"> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-16">notifications</mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.attribute" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-16" |
|
|
|
svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.entityField" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-16" |
|
|
|
svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="key.type === dataKeyTypes.timeseries" |
|
|
|
matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon class="tb-mat-16">timeline</mat-icon> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<ng-container *ngIf="datasourceType === datasourceTypes.entity"> |
|
|
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above">notifications</mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.attribute" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.entityField" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon" *ngIf="key.type === dataKeyTypes.timeseries" |
|
|
|
matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above">timeline</mat-icon> |
|
|
|
</ng-container> |
|
|
|
<span [innerHTML]="key.name | highlight:searchText"></span> |
|
|
|
</span> |
|
|
|
</mat-option> |
|
|
|
@ -129,31 +115,22 @@ |
|
|
|
</span> |
|
|
|
<ng-template #createEntityKey> |
|
|
|
<span>{{'entity.create-new-key' | translate }} </span> |
|
|
|
<span *ngIf="widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon (click)="createKey(searchText, dataKeyTypes.alarm)" |
|
|
|
class="tb-mat-16">notifications</mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon (click)="createKey(searchText, dataKeyTypes.attribute)" |
|
|
|
class="tb-mat-16" |
|
|
|
svgIcon="mdi:alpha-a-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon (click)="createKey(searchText, dataKeyTypes.entityField)" |
|
|
|
class="tb-mat-16" |
|
|
|
svgIcon="mdi:alpha-e-circle-outline"></mat-icon> |
|
|
|
</span> |
|
|
|
<span matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above"> |
|
|
|
<mat-icon (click)="createKey(searchText, dataKeyTypes.timeseries)" |
|
|
|
class="tb-mat-16">timeline</mat-icon> |
|
|
|
</span> |
|
|
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.alarm' | translate }}" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="createKey(searchText, dataKeyTypes.alarm)">notifications</mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.attributes' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-a-circle-outline" |
|
|
|
(click)="createKey(searchText, dataKeyTypes.attribute)"></mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon new-key" *ngIf="widgetType === widgetTypes.latest || widgetType === widgetTypes.alarm" |
|
|
|
matTooltip="{{'datakey.entity-field' | translate }}" |
|
|
|
matTooltipPosition="above" svgIcon="mdi:alpha-e-circle-outline" |
|
|
|
(click)="createKey(searchText, dataKeyTypes.entityField)"></mat-icon> |
|
|
|
<mat-icon class="tb-datakey-icon new-key" |
|
|
|
matTooltip="{{'datakey.timeseries' | translate }}" |
|
|
|
matTooltipPosition="above" |
|
|
|
(click)="createKey(searchText, dataKeyTypes.timeseries)">timeline</mat-icon> |
|
|
|
</ng-template> |
|
|
|
</ng-template> |
|
|
|
</div> |
|
|
|
@ -166,3 +143,19 @@ |
|
|
|
<div class="mat-caption" style="color: rgba(0,0,0,0.57);" *ngIf="maxDataKeys !== null && maxDataKeys > -1"> |
|
|
|
{{ maxDataKeysText() }} |
|
|
|
</div> |
|
|
|
<ng-template #keyName let-key="key"> |
|
|
|
<ng-container *ngIf="dataKeyHasPostprocessing(key); else keyName"> |
|
|
|
<span>f(</span><ng-container *ngTemplateOutlet="keyNameTemplate; context:{key: key}"></ng-container><span>)</span> |
|
|
|
</ng-container> |
|
|
|
<ng-template #keyName> |
|
|
|
<ng-container *ngTemplateOutlet="keyNameTemplate; context:{key: key}"></ng-container> |
|
|
|
</ng-template> |
|
|
|
</ng-template> |
|
|
|
<ng-template #keyNameTemplate let-key="key"> |
|
|
|
<ng-container *ngIf="dataKeyHasAggregation(key); else keyName;"> |
|
|
|
<span class="tb-agg-func">{{ key.aggregationType }}</span><span>({{ key.name }})</span> |
|
|
|
</ng-container> |
|
|
|
<ng-template #keyName> |
|
|
|
<span>{{key.name}}</span> |
|
|
|
</ng-template> |
|
|
|
</ng-template> |
|
|
|
|
Igor Kulikov
4 years ago