Browse Source

UI: Updated cf hint text and updated style selected cf type

pull/14718/head
Vladyslav_Prykhodko 9 months ago
committed by Vladyslav Prykhodko
parent
commit
3764dc061d
  1. 18
      ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html
  2. 18
      ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
  3. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html
  4. 5
      ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html
  5. 4
      ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
  6. 2
      ui-ngx/src/app/modules/home/components/calculated-fields/components/related-entities-aggregation-configuration/related-entities-aggregation-component.component.html
  7. 10
      ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.html
  8. 12
      ui-ngx/src/app/shared/models/calculated-field.models.ts
  9. 25
      ui-ngx/src/assets/locale/locale.constant-en_US.json

18
ui-ngx/src/app/modules/home/components/calculated-fields/calculated-field.component.html

@ -74,13 +74,23 @@
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>{{ 'common.type' | translate }}</mat-label>
<mat-select formControlName="type">
<mat-select-trigger>
{{ CalculatedFieldTypeTranslations.has(entityForm.get('type').value)
? (CalculatedFieldTypeTranslations.get(entityForm.get('type').value).name | translate)
: entityForm.get('type').value }}
</mat-select-trigger>
@for (type of fieldTypes; track type) {
<mat-option [value]="type">{{ CalculatedFieldTypeTranslations.get(type).name | translate }}</mat-option>
<mat-option [value]="type" class="py-1">
<span matListItemTitle>
{{ CalculatedFieldTypeTranslations.get(type).name | translate }}
</span>
<br>
<small matListItemMeta style="color: inherit">
{{ CalculatedFieldTypeTranslations.get(type).hint | translate }}
</small>
</mat-option>
}
</mat-select>
@if (CalculatedFieldTypeTranslations.get(entityForm.get('type').value).hint) {
<mat-hint>{{ CalculatedFieldTypeTranslations.get(entityForm.get('type').value).hint | translate }}</mat-hint>
}
</mat-form-field>
</div>
@switch (entityForm.get('type').value) {

18
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@ -69,13 +69,23 @@
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>{{ 'common.type' | translate }}</mat-label>
<mat-select formControlName="type">
<mat-select-trigger>
{{ CalculatedFieldTypeTranslations.has(fieldFormGroup.get('type').value)
? (CalculatedFieldTypeTranslations.get(fieldFormGroup.get('type').value).name | translate)
: fieldFormGroup.get('type').value }}
</mat-select-trigger>
@for (type of fieldTypes; track type) {
<mat-option [value]="type">{{ CalculatedFieldTypeTranslations.get(type).name | translate}}</mat-option>
<mat-option [value]="type" class="py-1">
<span matListItemTitle>
{{ CalculatedFieldTypeTranslations.get(type).name | translate}}
</span>
<br>
<small matListItemMeta style="color: inherit">
{{ CalculatedFieldTypeTranslations.get(type).hint | translate }}
</small>
</mat-option>
}
</mat-select>
@if (CalculatedFieldTypeTranslations.get(fieldFormGroup.get('type').value).hint) {
<mat-hint>{{ CalculatedFieldTypeTranslations.get(fieldFormGroup.get('type').value).hint | translate }}</mat-hint>
}
</mat-form-field>
</div>
@switch (fieldFormGroup.get('type').value) {

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/entity-aggregation-configuration/entity-aggregation-component.component.html

@ -17,7 +17,7 @@
-->
<div [formGroup]="entityAggregationConfiguration" class="tb-form-panel no-border no-padding">
<div class="tb-form-panel">
<div class="tb-form-panel-title">
<div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'calculated-fields.entity-aggregation.argument-title-hint' | translate }}">
{{ 'calculated-fields.arguments' | translate }}
</div>
<div class="tb-form-hint tb-primary-fill hint-container">
@ -29,7 +29,7 @@
[entityName]="entityName"/>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'calculated-fields.hint.metrics' | translate }}">
<div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'calculated-fields.hint.entity-aggregation-metrics' | translate }}">
{{ 'calculated-fields.metrics.metrics' | translate }}
</div>
<tb-calculated-field-metrics-table formControlName="metrics"

5
ui-ngx/src/app/modules/home/components/calculated-fields/components/metrics/calculated-field-metrics-panel.component.html

@ -130,7 +130,10 @@
<ng-container formGroupName="input">
@if (!simpleMode) {
<div class="tb-form-row">
<div class="fixed-title-width">{{ 'calculated-fields.metrics.value-source' | translate }}</div>
<div class="fixed-title-width"
tb-hint-tooltip-icon="{{ 'calculated-fields.metrics.value-source-hint' | translate }}">
{{ 'calculated-fields.metrics.value-source' | translate }}
</div>
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="type">
@for (inputType of AggInputTypes; track inputType) {

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html

@ -16,7 +16,9 @@
-->
<div class="tb-form-panel" [formGroup]="outputForm">
<div class="tb-form-panel-title">{{ 'calculated-fields.output' | translate }}</div>
<div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'calculated-fields.output-hint' | translate }}">
{{ 'calculated-fields.output' | translate }}
</div>
<div [class]=containerInputClass>
<div class="flex gap-3 xs:flex-col">
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/related-entities-aggregation-configuration/related-entities-aggregation-component.component.html

@ -63,10 +63,10 @@
<tb-time-unit-input required
sameWidthInputs
appearance="outline"
subscriptSizing="dynamic"
labelText="{{ 'calculated-fields.deduplication-interval' | translate }}"
requiredText="{{ 'calculated-fields.deduplication-interval-required' | translate }}"
minErrorText="{{ 'calculated-fields.deduplication-interval-min' | translate: {sec: minAllowedDeduplicationIntervalInSecForCF} }}"
hintText="{{ 'calculated-fields.deduplication-interval-hint' | translate }}"
[minTime]="minAllowedDeduplicationIntervalInSecForCF"
formControlName="deduplicationIntervalInSec">
</tb-time-unit-input>

10
ui-ngx/src/app/modules/home/components/calculated-fields/components/simple-configuration/simple-configuration.component.html

@ -17,7 +17,10 @@
-->
<div [formGroup]="simpleConfiguration" class="tb-form-panel no-border no-padding">
<div class="tb-form-panel">
<div class="tb-form-panel-title tb-required">{{ 'calculated-fields.arguments' | translate }}</div>
<div class="tb-form-panel-title tb-required"
tb-hint-tooltip-icon="{{ (isScript ? 'calculated-fields.hint.script-arguments' : 'calculated-fields.hint.simple-arguments') | translate }}">
{{ 'calculated-fields.arguments' | translate }}
</div>
<tb-calculated-field-arguments-table formControlName="arguments"
[entityId]="entityId"
[tenantId]="tenantId"
@ -27,7 +30,10 @@
[isScript]="isScript" />
</div>
<div class="tb-form-panel no-gap">
<div class="tb-form-panel-title tb-required">{{ (isScript ? 'calculated-fields.type.script' : 'calculated-fields.expression') | translate }}</div>
<div class="tb-form-panel-title tb-required"
tb-hint-tooltip-icon="{{ (isScript ? 'calculated-fields.hint.script-title' : 'calculated-fields.hint.simple-expression-title') | translate }}">
{{ (isScript ? 'calculated-fields.type.script' : 'calculated-fields.expression') | translate }}
</div>
<mat-form-field class="mt-3" appearance="outline" subscriptSizing="dynamic" [class.hidden]="isScript">
<input matInput formControlName="expressionSIMPLE" maxlength="255" [placeholder]="'(temperature - 32) / 1.8'"
required>

12
ui-ngx/src/app/shared/models/calculated-field.models.ts

@ -99,16 +99,20 @@ interface CalculatedFieldTypeTranslate {
export const CalculatedFieldTypeTranslations = new Map<CalculatedFieldType, CalculatedFieldTypeTranslate>(
[
[CalculatedFieldType.SIMPLE, {
name: 'calculated-fields.type.simple'
name: 'calculated-fields.type.simple',
hint: 'calculated-fields.type.simple-hint',
}],
[CalculatedFieldType.SCRIPT, {
name: 'calculated-fields.type.script'
name: 'calculated-fields.type.script',
hint: 'calculated-fields.type.script-hint',
}],
[CalculatedFieldType.GEOFENCING, {
name: 'calculated-fields.type.geofencing'
name: 'calculated-fields.type.geofencing',
hint: 'calculated-fields.type.geofencing-hint',
}],
[CalculatedFieldType.PROPAGATION, {
name: 'calculated-fields.type.propagation'
name: 'calculated-fields.type.propagation',
hint: 'calculated-fields.type.propagation-hint',
}],
[CalculatedFieldType.RELATED_ENTITIES_AGGREGATION, {
name: 'calculated-fields.type.related-entities-aggregation',

25
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -1104,11 +1104,15 @@
"selected-fields": "{ count, plural, =1 {1 calculated field} other {# calculated fields} } selected",
"type": {
"simple": "Simple",
"simple-hint": "Simple arithmetic calculation based on input arguments.",
"script": "Script",
"script-hint": "Calculation over defined arguments using a TBEL script.",
"geofencing" : "Geofencing",
"geofencing-hint" : "Evaluation of entity GPS position and transitions against configured geofencing zone groups.",
"propagation": "Propagation",
"propagation-hint": "Propagation of data to parent or child entities based on relation direction and type.",
"related-entities-aggregation": "Related entities aggregation",
"related-entities-aggregation-hint": "Aggregation of data from related entities.",
"related-entities-aggregation-hint": "Aggregation of latest data from related entities.",
"time-series-data-aggregation": "Time series data aggregation",
"time-series-data-aggregation-hint": "Aggregation of historical data from a current entity."
},
@ -1151,6 +1155,7 @@
"asset-name": "Asset name",
"timeseries": "Time series",
"output": "Output",
"output-hint": "Defines how output is processed.",
"create": "Create new calculated field",
"file": "Calculated field file",
"invalid-file-error": "Invalid file format. Please make sure the file is a valid JSON file.",
@ -1217,6 +1222,7 @@
"aggregation-path-related-entities": "Aggregation path to related entities",
"deduplication-interval": "Deduplication interval",
"deduplication-interval-min": "Deduplication interval should be at least {{ sec }} seconds.",
"deduplication-interval-hint": "Minimum time between telemetry aggregations.",
"deduplication-interval-required": "Deduplication interval is required.",
"calculated-field-filter-title": "Calculated field filter",
"filter-title": "Filter",
@ -1245,6 +1251,7 @@
},
"filtered": "Filtered",
"value-source": "Value source",
"value-source-hint": "Defines how the value for aggregation is obtained.",
"value-source-type": {
"key": "Key",
"function": "Function"
@ -1306,9 +1313,10 @@
"aggregate-period-hint-offset-and-so-on": "Your aggregation interval will be: {{ interval }} and so on.",
"entity-aggregation": {
"argument-hint": "Data will be fetched from current entity.",
"argument-title-hint": "Defines the input arguments used for aggregation.",
"argument-setting-hint": "Latest telemetry is the only available argument type for this calculated field.",
"aggregation-interval": "Aggregation interval",
"aggregation-interval-hint": "Defines how often to perform aggregation. Example: every 1 hour aggregates data at 00:00, 01:00, 02:00, etc.",
"aggregation-interval-hint": "Defines how often aggregation is performed. Example: every 1 hour aggregates data at 00:00, 01:00, 02:00, etc. Aggregation results are stored with the timestamp corresponding to the start of the aggregation interval.",
"apply-offset": "Apply offset to aggregation interval",
"apply-offset-hint": "Defines how much to shift the start of each aggregation period (e.g., +10 minutes - 00:10, 01:10).",
"offset-value": "Offset value",
@ -1372,11 +1380,16 @@
"zone-group-refresh-interval-min": "Zone group refresh interval should be at least {{ min }} seconds.",
"propagation-path-related-entities": "Defines a direct, single-level path to a related entity based on the selected direction and relation type.",
"data-propagate": "Defines the data to be propagated from the arguments configured below. 'Arguments only' uses the retrieved data directly, while 'Expression result' calculates a new value from that data.",
"aggregation-path-related-entities": "Defines a single-level aggregation path via direct relations with parent or child entities based on direction and relation type. Only relations between device, asset, customer, and tenant entities are supported.",
"arguments-aggregation": "Defines input parameters used for filtering and aggregation.",
"aggregation-path-related-entities": "Defines a single-level aggregation path via direct relations with parent or child entities, based on direction and relation type. Only relations between device, asset, customer, and tenant entities are supported.",
"arguments-aggregation": "Defines the input arguments used for filtering and aggregation.",
"setting-arguments-aggregation": "Data will be fetched from related entities configured in aggregation path.",
"metrics": "Defines metrics aggregated based on the configured arguments.",
"import-invalid-calculated-field-type": "Unable to import calculated field: Invalid calculated field structure."
"metrics": "Defines metrics aggregated based on configured arguments.",
"entity-aggregation-metrics": "Defines metrics aggregated based on configured arguments over the specified time intervals.",
"import-invalid-calculated-field-type": "Unable to import calculated field: Invalid calculated field structure.",
"simple-expression-title": "Arithmetic expression that defines how the calculated value is computed.",
"script-title": "TBEL script that defines the calculation logic and output values.",
"simple-arguments": "Arithmetic expression that defines how the calculated value is computed.",
"script-arguments": "Defines the input arguments available to the script."
}
},
"alarm-rule": {

Loading…
Cancel
Save