global-context/features/configuration/history-mode-configuration-controls/history-mode-configuration-controls.component.ts
Component for configuring history mode settings Stateless component that emits changes immediately
| changeDetection | ChangeDetectionStrategy.OnPush |
||||||||||||||||||
| selector | c8y-history-mode-configuration-controls |
||||||||||||||||||
| standalone | true |
||||||||||||||||||
| imports |
C8yTranslatePipe
TooltipModule
PopoverModule
|
||||||||||||||||||
| templateVariables |
|
||||||||||||||||||
| templateUrl | ./history-mode-configuration-controls.component.html |
C8yTranslatePipe
I18nModule
TooltipModule
ReactiveFormsModule
IconDirective
FormsModule
PopoverModule
FormGroupComponent
MessagesComponent
MessageDirective
DateTimePickerModule
NgClass
AggregationPickerComponent
@if (currentForm) {
@let SHOW_TIME_CONTEXT = settings.showTimeContext;
@let SHOW_AGGREGATION = settings.showAggregation;
<form [formGroup]="currentForm">
<div class="content-flex-100">
<div
class="col-4"
[ngClass]="{ 'm-b-8': !SHOW_AGGREGATION }"
>
@if (SHOW_TIME_CONTEXT) {
@let dateTimeContext = currentForm.get('dateTimeContext');
@let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;
@let tempDateToValue = dateTimeContext.get('dateTo')?.value;
@let fromErrors = dateFromErrors();
@let toErrors = dateToErrors();
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item time-context m-r-4">
<i
class=""
[c8yIcon]="'calendar'"
></i>
</div>
{{ 'Date & time range' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="TIME_RANGE_PICKER_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="content-flex-58 d-flex a-i-center m-b-0 p-t-16">
<c8y-form-group
[class.has-error]="fromErrors"
class="form-group-sm d-flex a-i-center col-5 flex-wrap"
>
<label
class="m-b-sm-0 m-r-8 text-nowrap"
style="min-width: 30px"
[title]="'From`date`' | translate"
for="dateFrom"
translate
>
From`date`
</label>
<c8y-date-time-picker
[class.has-error]="fromErrors"
id="dateFrom"
[maxDate]="tempDateToValue"
[placeholder]="'From`date`' | translate"
[formControl]="dateTimeContext.get('dateFrom')"
></c8y-date-time-picker>
<c8y-messages [show]="fromErrors">
<c8y-message
name="dateAfterRangeMax"
[text]="errorMessages.dateAfterRangeMax | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="invalidDateRange"
[text]="errorMessages.invalidDateRange | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group
[class.has-error]="toErrors"
class="form-group-sm d-flex col-7 a-i-center"
>
<label
class="m-b-sm-0 text-nowrap m-r-8"
style="min-width: 30px"
[title]="'To`date`' | translate"
for="dateTo"
translate
>
To`date`
</label>
<c8y-date-time-picker
[class.has-error]="toErrors"
id="dateTo"
[minDate]="tempDateFromValue"
[placeholder]="'To`date`' | translate"
[formControl]="dateTimeContext.get('dateTo')"
></c8y-date-time-picker>
<button
class="btn btn-sm btn-default m-l-4"
[title]="'Set to current time' | translate"
type="button"
(click)="setDateToNow()"
>
<i
class="m-r-4"
[c8yIcon]="'clock-o'"
></i>
{{ 'Now' | translate }}
</button>
<c8y-messages [show]="toErrors">
<c8y-message
name="dateBeforeRangeMin"
[text]="errorMessages.dateBeforeRangeMin | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</c8y-form-group>
</fieldset>
}
</div>
<div class="col-8">
@if (SHOW_AGGREGATION) {
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item aggregation m-r-4">
<i [c8yIcon]="'input'"></i>
</div>
{{ 'Aggregation' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="AGGREGATION_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="p-t-16 m-b-4 p-b-16">
<c8y-aggregation-picker
formControlName="aggregation"
[layout]="'radio'"
[resetToDefault]="true"
[showAutoMode]="isTimeSeriesMigrated()"
[autoModeActive]="isAutoModeActive()"
[autoModeDisabled]="autoModeDisabled()"
[disabledAggregations]="disabledAggregations()"
(autoModeChange)="onAutoModeChange($event)"
>
<div
class="d-flex a-i-center gap-16 flex-wrap"
autoAggregationOptions
>
<div class="d-flex a-i-center">
<label
class="m-b-0 m-r-8 text-nowrap"
for="autoAggregationDatapoints"
>
{{ 'Points per chart' | translate }}
</label>
@let datapointsRangeText =
'Enter a value between {{ min }} and {{ max }}.'
| translate
: {
min: AUTO_AGGREGATION_DATAPOINTS.MIN,
max: AUTO_AGGREGATION_DATAPOINTS.MAX
};
<c8y-form-group class="form-group-sm m-b-0">
<input
class="form-control input-sm"
style="width: 60px"
[attr.title]="datapointsRangeText"
[attr.aria-label]="'Points per chart' | translate"
id="autoAggregationDatapoints"
type="number"
[min]="AUTO_AGGREGATION_DATAPOINTS.MIN"
[max]="AUTO_AGGREGATION_DATAPOINTS.MAX"
[step]="AUTO_AGGREGATION_DATAPOINTS.STEP"
[formControl]="currentForm.controls.autoAggregationDatapoints"
(change)="clampDatapoints()"
data-cy="global-context--auto-aggregation-datapoints-input"
/>
@let datapointsErrors = currentForm.get('autoAggregationDatapoints')?.errors;
<c8y-messages
class="m-t-4"
[show]="datapointsErrors"
>
<c8y-message
name="min"
[text]="datapointsRangeText"
></c8y-message>
<c8y-message
name="max"
[text]="datapointsRangeText"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<label
class="c8y-switch m-b-0"
[title]="'Keep point count on zoom' | translate"
>
<input
type="checkbox"
[formControl]="currentForm.controls.autoAggregationKeepDataOnZoomIn"
data-cy="global-context--auto-aggregation-keep-data-on-zoom-in"
/>
<span></span>
<span>{{ 'Keep point count on zoom' | translate }}</span>
<button
class="btn-help btn-help--sm m-l-4"
[attr.aria-label]="'Help' | translate"
[popover]="KEEP_DATA_ON_ZOOM_IN_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</label>
</div>
</c8y-aggregation-picker>
</c8y-form-group>
</fieldset>
}
</div>
</div>
</form>
}