@c8y/ngx-components 1023.10.1 → 1023.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/context-dashboard/index.d.ts +11 -2
- package/context-dashboard/index.d.ts.map +1 -1
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs +17 -5
- package/fesm2022/c8y-ngx-components-context-dashboard.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-global-context.mjs +1090 -38
- package/fesm2022/c8y-ngx-components-global-context.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs +3 -4
- package/fesm2022/c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components-widgets-implementations-alarms.mjs +86 -99
- package/fesm2022/c8y-ngx-components-widgets-implementations-alarms.mjs.map +1 -1
- package/fesm2022/c8y-ngx-components.mjs.map +1 -1
- package/global-context/index.d.ts +180 -4
- package/global-context/index.d.ts.map +1 -1
- package/index.d.ts +44 -0
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/widgets/definitions/alarms/alarm-list/index.d.ts +1 -2
- package/widgets/definitions/alarms/alarm-list/index.d.ts.map +1 -1
- package/widgets/implementations/alarms/index.d.ts +35 -28
- package/widgets/implementations/alarms/index.d.ts.map +1 -1
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { gettext } from '@c8y/ngx-components/gettext';
|
|
2
2
|
import { DynamicComponentErrorStrategy, DynamicManagedObjectResolver, hookWidget } from '@c8y/ngx-components';
|
|
3
3
|
import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';
|
|
4
|
+
import { PRESET_NAME } from '@c8y/ngx-components/global-context';
|
|
4
5
|
import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
|
|
5
6
|
import { importConfigWithDevice, exportConfigWithDevice } from '@c8y/ngx-components/widgets/import-export-config';
|
|
6
|
-
import { createAlarmListControls } from '@c8y/ngx-components/widgets/definitions/alarms/alarm-widget-controls.presets';
|
|
7
7
|
|
|
8
|
-
const ALARM_LIST_CONTROLS = createAlarmListControls();
|
|
9
8
|
const alarmListWidgetDefinition = {
|
|
10
9
|
id: defaultWidgetIds.ALARM_LIST,
|
|
11
10
|
label: gettext('Alarm list'),
|
|
@@ -36,7 +35,7 @@ const alarmListWidgetDefinition = {
|
|
|
36
35
|
}
|
|
37
36
|
}
|
|
38
37
|
},
|
|
39
|
-
|
|
38
|
+
controls: PRESET_NAME.ALARM_LIST_CONFIG,
|
|
40
39
|
displaySettings: {
|
|
41
40
|
globalTimeContext: true,
|
|
42
41
|
globalAutoRefreshContext: true
|
|
@@ -50,7 +49,7 @@ const alarmListWidgetProviders = [
|
|
|
50
49
|
priority: 10,
|
|
51
50
|
label: gettext('Time context'),
|
|
52
51
|
initialState: {
|
|
53
|
-
|
|
52
|
+
controls: PRESET_NAME.ALARM_LIST_CONFIG
|
|
54
53
|
},
|
|
55
54
|
loadComponent: () => import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)
|
|
56
55
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs","sources":["../../widgets/definitions/alarms/alarm-list/index.ts","../../widgets/definitions/alarms/alarm-list/c8y-ngx-components-widgets-definitions-alarms-alarm-list.ts"],"sourcesContent":["import { gettext } from '@c8y/ngx-components/gettext';\nimport {\n type DynamicWidgetDefinition,\n DynamicComponentErrorStrategy,\n DynamicManagedObjectResolver,\n hookWidget\n} from '@c8y/ngx-components';\nimport {\n GlobalContextSectionComponent,\n hookWidgetConfig\n} from '@c8y/ngx-components/context-dashboard';\nimport {
|
|
1
|
+
{"version":3,"file":"c8y-ngx-components-widgets-definitions-alarms-alarm-list.mjs","sources":["../../widgets/definitions/alarms/alarm-list/index.ts","../../widgets/definitions/alarms/alarm-list/c8y-ngx-components-widgets-definitions-alarms-alarm-list.ts"],"sourcesContent":["import { gettext } from '@c8y/ngx-components/gettext';\nimport {\n type DynamicWidgetDefinition,\n DynamicComponentErrorStrategy,\n DynamicManagedObjectResolver,\n hookWidget\n} from '@c8y/ngx-components';\nimport {\n GlobalContextSectionComponent,\n hookWidgetConfig\n} from '@c8y/ngx-components/context-dashboard';\nimport { PRESET_NAME } from '@c8y/ngx-components/global-context';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport {\n exportConfigWithDevice,\n importConfigWithDevice\n} from '@c8y/ngx-components/widgets/import-export-config';\n\nexport const alarmListWidgetDefinition = {\n id: defaultWidgetIds.ALARM_LIST,\n label: gettext('Alarm list'),\n description: gettext(`Displays a list of alarms filtered by object, severity, status and date`),\n loadComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/alarms').then(\n m => m.AlarmListWidgetComponent\n ),\n loadConfigComponent: () =>\n import('@c8y/ngx-components/widgets/implementations/alarms').then(\n m => m.AlarmListWidgetConfigComponent\n ),\n previewImage: 'c8y-style-assets/alarms/alarm-list-widget.png',\n resolve: {\n device: DynamicManagedObjectResolver\n },\n errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,\n data: {\n schema: () =>\n import(\n 'c8y-schema-loader?interfaceName=AlarmListWidgetConfig!@c8y/ngx-components/widgets/implementations/alarms'\n ),\n export: exportConfigWithDevice,\n import: importConfigWithDevice,\n settings: {\n alarmListWidget: true,\n noNewWidgets: false,\n widgetDefaults: {\n _width: 8,\n _height: 4\n },\n ng1: {\n options: {\n noDeviceTarget: false,\n groupsSelectable: true,\n deviceTargetNotRequired: true\n }\n }\n },\n controls: PRESET_NAME.ALARM_LIST_CONFIG,\n displaySettings: {\n globalTimeContext: true,\n globalAutoRefreshContext: true\n }\n }\n} satisfies DynamicWidgetDefinition;\n\nexport const alarmListWidgetProviders = [\n hookWidget(alarmListWidgetDefinition),\n hookWidgetConfig<GlobalContextSectionComponent>({\n widgetId: defaultWidgetIds.ALARM_LIST,\n priority: 10,\n label: gettext('Time context'),\n initialState: {\n controls: PRESET_NAME.ALARM_LIST_CONFIG\n },\n loadComponent: () =>\n import('@c8y/ngx-components/context-dashboard').then(m => m.GlobalContextSectionComponent)\n })\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,yBAAyB,GAAG;IACvC,EAAE,EAAE,gBAAgB,CAAC,UAAU;AAC/B,IAAA,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC;AAC5B,IAAA,WAAW,EAAE,OAAO,CAAC,CAAA,uEAAA,CAAyE,CAAC;AAC/F,IAAA,aAAa,EAAE,MACb,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,wBAAwB,CAChC;AACH,IAAA,mBAAmB,EAAE,MACnB,OAAO,oDAAoD,CAAC,CAAC,IAAI,CAC/D,CAAC,IAAI,CAAC,CAAC,8BAA8B,CACtC;AACH,IAAA,YAAY,EAAE,+CAA+C;AAC7D,IAAA,OAAO,EAAE;AACP,QAAA,MAAM,EAAE;AACT,KAAA;IACD,aAAa,EAAE,6BAA6B,CAAC,aAAa;AAC1D,IAAA,IAAI,EAAE;AACJ,QAAA,MAAM,EAAE,MACN,OACE,0GAA0G,CAC3G;AACH,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,MAAM,EAAE,sBAAsB;AAC9B,QAAA,QAAQ,EAAE;AACR,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,cAAc,EAAE;AACd,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,OAAO,EAAE;AACV,aAAA;AACD,YAAA,GAAG,EAAE;AACH,gBAAA,OAAO,EAAE;AACP,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,gBAAgB,EAAE,IAAI;AACtB,oBAAA,uBAAuB,EAAE;AAC1B;AACF;AACF,SAAA;QACD,QAAQ,EAAE,WAAW,CAAC,iBAAiB;AACvC,QAAA,eAAe,EAAE;AACf,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,wBAAwB,EAAE;AAC3B;AACF;;AAGI,MAAM,wBAAwB,GAAG;IACtC,UAAU,CAAC,yBAAyB,CAAC;AACrC,IAAA,gBAAgB,CAAgC;QAC9C,QAAQ,EAAE,gBAAgB,CAAC,UAAU;AACrC,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC;AAC9B,QAAA,YAAY,EAAE;YACZ,QAAQ,EAAE,WAAW,CAAC;AACvB,SAAA;AACD,QAAA,aAAa,EAAE,MACb,OAAO,uCAAuC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,6BAA6B;KAC5F;;;AC5EH;;AAEG;;;;"}
|
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NgClass, AsyncPipe, CommonModule as CommonModule$1 } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, Pipe, ViewChild, Input, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { Injectable, Pipe, ViewChild, Input, Component, inject, signal, NgModule } from '@angular/core';
|
|
4
4
|
import * as i5 from '@angular/forms';
|
|
5
5
|
import { FormControl, NgForm, ControlContainer, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
6
|
import * as i2 from '@c8y/client';
|
|
7
|
-
import { AlarmStatus, Severity, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
|
|
8
|
-
import * as
|
|
9
|
-
import { FormGroupComponent, RequiredInputPlaceholderDirective, IconDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, DismissAlertStrategy, DynamicComponentAlert, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
|
|
7
|
+
import { AlarmStatus, Severity, SEVERITY_LABELS, ALARM_STATUS_LABELS, AlarmService } from '@c8y/client';
|
|
8
|
+
import * as i4 from '@c8y/ngx-components';
|
|
9
|
+
import { FormGroupComponent, RequiredInputPlaceholderDirective, IconDirective, MessagesComponent, MessageDirective, C8yTranslatePipe, DashboardChildComponent, AlertService, DismissAlertStrategy, DynamicComponentAlert, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
|
|
10
10
|
import * as i1 from '@c8y/ngx-components/alarms';
|
|
11
11
|
import { ALARM_STATUS_ICON, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, AlarmsDateFilterComponent, AlarmsListComponent, AlarmsModule } from '@c8y/ngx-components/alarms';
|
|
12
12
|
import * as i6 from '@c8y/ngx-components/context-dashboard';
|
|
13
|
-
import
|
|
14
|
-
import { GlobalContextWidgetWrapperComponent, REFRESH_OPTION, TIME_INTERVAL, GlobalContextConfigComponent, GlobalContextInlineComponent, ConfigContextSelectorComponent } from '@c8y/ngx-components/global-context';
|
|
15
|
-
import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
|
|
16
|
-
import { resolveAlarmControls, createAlarmListControls } from '@c8y/ngx-components/widgets/definitions/alarms/alarm-widget-controls.presets';
|
|
13
|
+
import { PRESET_NAME, GLOBAL_CONTEXT_DISPLAY_MODE, LocalControlsComponent, WidgetConfigMigrationService, CONTEXT_FEATURE, REFRESH_OPTION, GlobalContextConnectorComponent, GlobalContextConfigComponent, GlobalContextInlineComponent, ConfigContextSelectorComponent, GlobalContextWidgetWrapperComponent } from '@c8y/ngx-components/global-context';
|
|
17
14
|
import { merge, isEmpty, isMatch } from 'lodash-es';
|
|
18
15
|
import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
|
|
19
16
|
import { BehaviorSubject, Subject, EMPTY, from } from 'rxjs';
|
|
20
|
-
import { filter, tap, takeUntil, shareReplay,
|
|
17
|
+
import { filter, tap, takeUntil, shareReplay, switchMap } from 'rxjs/operators';
|
|
21
18
|
import { gettext } from '@c8y/ngx-components/gettext';
|
|
19
|
+
import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
|
|
22
20
|
import { RouterModule } from '@angular/router';
|
|
23
21
|
import * as i1$1 from 'ngx-bootstrap/tooltip';
|
|
24
22
|
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
|
@@ -495,21 +493,27 @@ class AlarmListWidgetConfigComponent {
|
|
|
495
493
|
this.formGroup.patchValue(config, { emitEvent: false });
|
|
496
494
|
}
|
|
497
495
|
}), takeUntil(this.destroy$), shareReplay(1));
|
|
496
|
+
this.controls = PRESET_NAME.ALARM_LIST;
|
|
498
497
|
}
|
|
499
|
-
|
|
500
|
-
this.widgetControls = resolveAlarmControls(this.config?.widgetId ?? defaultWidgetIds.ALARM_LIST);
|
|
498
|
+
ngOnInit() {
|
|
501
499
|
this.config$
|
|
502
|
-
.pipe(takeUntil(this.destroy$),
|
|
500
|
+
.pipe(takeUntil(this.destroy$), filter(config => {
|
|
501
|
+
const displayMode = config?.displayMode ?? GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
|
|
502
|
+
if (displayMode === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
|
|
503
|
+
return !!config?.isGlobalContextReady;
|
|
504
|
+
}
|
|
505
|
+
return true;
|
|
506
|
+
}), switchMap(config => {
|
|
503
507
|
if ((config?.severities && this.alarmListWidgetService.allValuesFalse(config.severities)) ||
|
|
504
508
|
(config?.status && this.alarmListWidgetService.allValuesFalse(config.status))) {
|
|
505
509
|
this.alarms$.next({ data: [], res: null });
|
|
506
510
|
return EMPTY;
|
|
507
511
|
}
|
|
508
512
|
const isWidgetWithExistingConfig = config.order && config.severities && config.status;
|
|
509
|
-
const
|
|
510
|
-
?
|
|
513
|
+
const filterConfig = isWidgetWithExistingConfig
|
|
514
|
+
? config
|
|
511
515
|
: { ...this.formGroup.value, ...config };
|
|
512
|
-
return from(this.getAlarms(
|
|
516
|
+
return from(this.getAlarms(filterConfig));
|
|
513
517
|
}))
|
|
514
518
|
.subscribe();
|
|
515
519
|
}
|
|
@@ -612,8 +616,8 @@ class AlarmListWidgetConfigComponent {
|
|
|
612
616
|
typesControl.push(this.formBuilder.control(''));
|
|
613
617
|
}
|
|
614
618
|
}
|
|
615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token:
|
|
616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], ngImport: i0, template: "<div\n class=\"p-l-24 p-r-24\"\n [style.pointer-events]=\"'auto'\"\n [style.opacity]=\"1\"\n></div>\n\n<form\n class=\"row d-flex flex-wrap\"\n [formGroup]=\"formGroup\"\n *ngIf=\"formGroup\"\n>\n <div class=\"col-md-6\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <div\n class=\"d-flex p-b-8 p-t-4 a-i-center\"\n *ngFor=\"let order of orderList; let i = index\"\n data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n >\n <label\n class=\"c8y-radio gap-4\"\n title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n >\n <input\n type=\"radio\"\n [value]=\"order\"\n formControlName=\"order\"\n />\n <span class=\"a-s-center\"></span>\n <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n </label>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </div>\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"severities\"\n >\n <legend>{{ 'Severities' | translate }}</legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.severities.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.severities.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n >\n <ng-container *ngFor=\"let severityOption of severityList\">\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"severityOption\"\n [name]=\"severityOption\"\n />\n <span class=\"a-s-center\"></span>\n <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n <i\n class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n [c8yIcon]=\"severityIcon.result.c8yIcon\"\n ></i>\n </ng-container>\n <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n </label>\n </ng-container>\n <c8y-messages>\n <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n {{ 'Select at least one severity.' | translate }}\n </c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n <ng-container *ngIf=\"showDateFilter\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Date filter' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <c8y-alarms-date-filter\n [updateQueryParams]=\"false\"\n [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n formControlName=\"dateFilter\"\n (dateFilterChange)=\"onDateFilterChange($event)\"\n ></c8y-alarms-date-filter>\n </c8y-form-group>\n </fieldset>\n </ng-container>\n </div>\n\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"status\"\n >\n <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n {{ 'Status' | translate }}\n </legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.status.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.status.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n >\n <ng-container *ngFor=\"let statusOption of statusList\">\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"STATUS_LABELS[statusOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"statusOption\"\n [name]=\"statusOption\"\n />\n <span class=\"a-s-center\"></span>\n <i\n class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n [c8yIcon]=\"\n statusOption === CLEARED_STATUS_VALUE\n ? C8Y_ALERT_IDLE_ICON\n : statusOption === ACKNOWLEDGE_STATUS_VALUE\n ? BELL_SLASH_ICON\n : BELL_ICON\n \"\n ></i>\n <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n </label>\n </ng-container>\n <c8y-messages>\n <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n {{ 'Select at least one status.' | translate }}\n </c8y-message>\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n >\n <legend>{{ 'Child devices' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <label\n class=\"c8y-switch\"\n [title]=\"'Show alarms from child devices' | translate\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n >\n <input\n type=\"checkbox\"\n formControlName=\"showAlarmsForChildren\"\n data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n />\n <span></span>\n <span>{{ 'Show alarms' | translate }}</span>\n <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n </label>\n </c8y-form-group>\n </fieldset>\n </div>\n\n <div class=\"col-xs-12\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Types' | translate }}</legend>\n <c8y-form-group\n class=\"m-b-8\"\n formArrayName=\"types\"\n >\n <div\n class=\"input-group m-b-4\"\n *ngFor=\"let type of types.controls; let i = index\"\n data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n >\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n [formControlName]=\"i\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot btn-dot--danger m-l-auto\"\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeType(i)\"\n data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n [disabled]=\"types.controls?.length === 1 && !type.value\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n <div\n class=\"input-group-btn\"\n *ngIf=\"i === types.controls.length - 1\"\n >\n <button\n class=\"btn-dot btn-dot--primary m-l-auto\"\n [title]=\"'Add alarm type' | translate\"\n type=\"button\"\n (click)=\"addType()\"\n data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n </div>\n </c8y-form-group>\n </fieldset>\n </div>\n</form>\n\n<ng-template #alarmListPreview>\n <c8y-global-context-widget-wrapper\n [widgetControls]=\"widgetControls\"\n [displayMode]=\"'preview'\"\n [config]=\"config$ | async\"\n ></c8y-global-context-widget-wrapper>\n <c8y-alarms-list\n [alarms]=\"alarms$ | async\"\n [isInPreviewMode]=\"true\"\n [isInitialLoading]=\"isLoading\"\n [navigationOptions]=\"{\n allowNavigationToAlarmsView: false,\n alwaysNavigateToAllAlarms: false,\n includeClearedQueryParams: false,\n queryParamsHandling: 'merge'\n }\"\n data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: GlobalContextWidgetWrapperComponent, selector: "c8y-global-context-widget-wrapper", inputs: ["isLoading", "displayMode", "widgetControls", "controlLinks", "dashboardChildForLegacy", "config"], outputs: ["globalContextChange"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmListWidgetConfigComponent, isStandalone: true, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["alarmListPreview"], descendants: true }], ngImport: i0, template: "<div\n class=\"p-l-24 p-r-24\"\n [style.pointer-events]=\"'auto'\"\n [style.opacity]=\"1\"\n></div>\n\n@if (formGroup) {\n <form\n class=\"row d-flex flex-wrap\"\n [formGroup]=\"formGroup\"\n >\n <div class=\"col-md-6\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n @for (order of orderList; track order; let i = $index) {\n <div\n class=\"d-flex p-b-8 p-t-4 a-i-center\"\n data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n >\n <label\n class=\"c8y-radio gap-4\"\n title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n >\n <input\n type=\"radio\"\n [value]=\"order\"\n formControlName=\"order\"\n />\n <span class=\"a-s-center\"></span>\n <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n </label>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </div>\n }\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"severities\"\n >\n <legend>{{ 'Severities' | translate }}</legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.severities.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.severities.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n >\n @for (severityOption of severityList; track severityOption) {\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"severityOption\"\n [name]=\"severityOption\"\n />\n <span class=\"a-s-center\"></span>\n @let severityIcon = severityOption | severityIcon;\n <i\n class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n [c8yIcon]=\"severityIcon.c8yIcon\"\n ></i>\n <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n </label>\n }\n <c8y-messages>\n @if (formGroup.controls.severities.hasError('required')) {\n <c8y-message>\n {{ 'Select at least one severity.' | translate }}\n </c8y-message>\n }\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n @if (showDateFilter) {\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Date filter' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <c8y-alarms-date-filter\n [updateQueryParams]=\"false\"\n [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n formControlName=\"dateFilter\"\n (dateFilterChange)=\"onDateFilterChange($event)\"\n ></c8y-alarms-date-filter>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"status\"\n >\n <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n {{ 'Status' | translate }}\n </legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.status.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.status.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n >\n @for (statusOption of statusList; track statusOption) {\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"STATUS_LABELS[statusOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"statusOption\"\n [name]=\"statusOption\"\n />\n <span class=\"a-s-center\"></span>\n <i\n class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n [c8yIcon]=\"\n statusOption === CLEARED_STATUS_VALUE\n ? C8Y_ALERT_IDLE_ICON\n : statusOption === ACKNOWLEDGE_STATUS_VALUE\n ? BELL_SLASH_ICON\n : BELL_ICON\n \"\n ></i>\n <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n </label>\n }\n <c8y-messages>\n @if (formGroup.controls.status.hasError('required')) {\n <c8y-message>\n {{ 'Select at least one status.' | translate }}\n </c8y-message>\n }\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n >\n <legend>{{ 'Child devices' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <label\n class=\"c8y-switch\"\n [title]=\"'Show alarms from child devices' | translate\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n >\n <input\n type=\"checkbox\"\n formControlName=\"showAlarmsForChildren\"\n data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n />\n <span></span>\n <span>{{ 'Show alarms' | translate }}</span>\n <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n </label>\n </c8y-form-group>\n </fieldset>\n </div>\n\n <div class=\"col-xs-12\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Types' | translate }}</legend>\n <c8y-form-group\n class=\"m-b-8\"\n formArrayName=\"types\"\n >\n @for (type of types.controls; track type; let i = $index) {\n <div\n class=\"input-group m-b-4\"\n data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n >\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n [formControlName]=\"i\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot btn-dot--danger m-l-auto\"\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeType(i)\"\n data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n [disabled]=\"types.controls?.length === 1 && !type.value\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n @if (i === types.controls.length - 1) {\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot btn-dot--primary m-l-auto\"\n [title]=\"'Add alarm type' | translate\"\n type=\"button\"\n (click)=\"addType()\"\n data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n }\n </div>\n }\n </c8y-form-group>\n </fieldset>\n </div>\n </form>\n}\n\n<ng-template #alarmListPreview>\n @if ((config$ | async)?.displayMode !== 'dashboard') {\n <c8y-local-controls\n [controls]=\"controls\"\n [displayMode]=\"(config$ | async)?.displayMode\"\n [config]=\"config$ | async\"\n [disabled]=\"true\"\n ></c8y-local-controls>\n }\n <c8y-alarms-list\n [alarms]=\"alarms$ | async\"\n [isInPreviewMode]=\"true\"\n [isInitialLoading]=\"isLoading\"\n [navigationOptions]=\"{\n allowNavigationToAlarmsView: false,\n alwaysNavigateToAllAlarms: false,\n includeClearedQueryParams: false,\n queryParamsHandling: 'merge'\n }\"\n data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
617
621
|
}
|
|
618
622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
|
|
619
623
|
type: Component,
|
|
@@ -621,11 +625,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
621
625
|
FormsModule,
|
|
622
626
|
ReactiveFormsModule,
|
|
623
627
|
PopoverDirective,
|
|
624
|
-
NgIf,
|
|
625
628
|
FormGroupComponent,
|
|
626
629
|
AlarmsDateFilterComponent,
|
|
627
630
|
RequiredInputPlaceholderDirective,
|
|
628
|
-
NgFor,
|
|
629
631
|
NgClass,
|
|
630
632
|
IconDirective,
|
|
631
633
|
MessagesComponent,
|
|
@@ -635,46 +637,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
635
637
|
AsyncPipe,
|
|
636
638
|
SeverityIconPipe,
|
|
637
639
|
SortingDescriptionPopoverMessagePipe,
|
|
638
|
-
|
|
639
|
-
], template: "<div\n class=\"p-l-24 p-r-24\"\n [style.pointer-events]=\"'auto'\"\n [style.opacity]=\"1\"\n></div>\n\n<form\n
|
|
640
|
-
}], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type:
|
|
640
|
+
LocalControlsComponent
|
|
641
|
+
], template: "<div\n class=\"p-l-24 p-r-24\"\n [style.pointer-events]=\"'auto'\"\n [style.opacity]=\"1\"\n></div>\n\n@if (formGroup) {\n <form\n class=\"row d-flex flex-wrap\"\n [formGroup]=\"formGroup\"\n >\n <div class=\"col-md-6\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n @for (order of orderList; track order; let i = $index) {\n <div\n class=\"d-flex p-b-8 p-t-4 a-i-center\"\n data-cy=\"c8y-alarm-list-widget-config--order-elements\"\n >\n <label\n class=\"c8y-radio gap-4\"\n title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n >\n <input\n type=\"radio\"\n [value]=\"order\"\n formControlName=\"order\"\n />\n <span class=\"a-s-center\"></span>\n <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n </label>\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n [adaptivePosition]=\"true\"\n ></button>\n </div>\n }\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"severities\"\n >\n <legend>{{ 'Severities' | translate }}</legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.severities.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.severities.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--severities-elements\"\n >\n @for (severityOption of severityList; track severityOption) {\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"severityOption\"\n [name]=\"severityOption\"\n />\n <span class=\"a-s-center\"></span>\n @let severityIcon = severityOption | severityIcon;\n <i\n class=\"a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}\"\n [c8yIcon]=\"severityIcon.c8yIcon\"\n ></i>\n <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n </label>\n }\n <c8y-messages>\n @if (formGroup.controls.severities.hasError('required')) {\n <c8y-message>\n {{ 'Select at least one severity.' | translate }}\n </c8y-message>\n }\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n @if (showDateFilter) {\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Date filter' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <c8y-alarms-date-filter\n [updateQueryParams]=\"false\"\n [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n formControlName=\"dateFilter\"\n (dateFilterChange)=\"onDateFilterChange($event)\"\n ></c8y-alarms-date-filter>\n </c8y-form-group>\n </fieldset>\n }\n </div>\n\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n formGroupName=\"status\"\n >\n <legend data-cy=\"c8y-alarm-list-widget-config-status-label\">\n {{ 'Status' | translate }}\n </legend>\n <c8y-form-group\n [hasError]=\"formGroup.controls.status.hasError('required')\"\n [ngClass]=\"{\n 'm-b-8': !formGroup.controls.status.hasError('required')\n }\"\n data-cy=\"c8y-alarm-list-widget-config--status-elements\"\n >\n @for (statusOption of statusList; track statusOption) {\n <label\n class=\"c8y-checkbox m-t-0 gap-4\"\n [title]=\"STATUS_LABELS[statusOption] | translate\"\n >\n <input\n type=\"checkbox\"\n [formControlName]=\"statusOption\"\n [name]=\"statusOption\"\n />\n <span class=\"a-s-center\"></span>\n <i\n class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n [c8yIcon]=\"\n statusOption === CLEARED_STATUS_VALUE\n ? C8Y_ALERT_IDLE_ICON\n : statusOption === ACKNOWLEDGE_STATUS_VALUE\n ? BELL_SLASH_ICON\n : BELL_ICON\n \"\n ></i>\n <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n </label>\n }\n <c8y-messages>\n @if (formGroup.controls.status.hasError('required')) {\n <c8y-message>\n {{ 'Select at least one status.' | translate }}\n </c8y-message>\n }\n </c8y-messages>\n </c8y-form-group>\n </fieldset>\n </div>\n <div class=\"col-md-6 col-xs-12\">\n <fieldset\n class=\"c8y-fieldset\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-section\"\n >\n <legend>{{ 'Child devices' | translate }}</legend>\n <c8y-form-group class=\"m-b-8\">\n <label\n class=\"c8y-switch\"\n [title]=\"'Show alarms from child devices' | translate\"\n data-cy=\"c8y-alarm-list-widget-config--child-devices-label\"\n >\n <input\n type=\"checkbox\"\n formControlName=\"showAlarmsForChildren\"\n data-cy=\"c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox\"\n />\n <span></span>\n <span>{{ 'Show alarms' | translate }}</span>\n <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n </label>\n </c8y-form-group>\n </fieldset>\n </div>\n\n <div class=\"col-xs-12\">\n <fieldset class=\"c8y-fieldset\">\n <legend>{{ 'Types' | translate }}</legend>\n <c8y-form-group\n class=\"m-b-8\"\n formArrayName=\"types\"\n >\n @for (type of types.controls; track type; let i = $index) {\n <div\n class=\"input-group m-b-4\"\n data-cy=\"c8y-alarm-list-widget-config--types-elements\"\n >\n <input\n class=\"form-control\"\n type=\"text\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n [formControlName]=\"i\"\n />\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot btn-dot--danger m-l-auto\"\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeType(i)\"\n data-cy=\"c8y-alarm-list-widget-config--types-remove-type\"\n [disabled]=\"types.controls?.length === 1 && !type.value\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n @if (i === types.controls.length - 1) {\n <div class=\"input-group-btn\">\n <button\n class=\"btn-dot btn-dot--primary m-l-auto\"\n [title]=\"'Add alarm type' | translate\"\n type=\"button\"\n (click)=\"addType()\"\n data-cy=\"c8y-alarm-list-widget-config--types-add-type\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n </button>\n </div>\n }\n </div>\n }\n </c8y-form-group>\n </fieldset>\n </div>\n </form>\n}\n\n<ng-template #alarmListPreview>\n @if ((config$ | async)?.displayMode !== 'dashboard') {\n <c8y-local-controls\n [controls]=\"controls\"\n [displayMode]=\"(config$ | async)?.displayMode\"\n [config]=\"config$ | async\"\n [disabled]=\"true\"\n ></c8y-local-controls>\n }\n <c8y-alarms-list\n [alarms]=\"alarms$ | async\"\n [isInPreviewMode]=\"true\"\n [isInitialLoading]=\"isLoading\"\n [navigationOptions]=\"{\n allowNavigationToAlarmsView: false,\n alwaysNavigateToAllAlarms: false,\n includeClearedQueryParams: false,\n queryParamsHandling: 'merge'\n }\"\n data-cy=\"c8y-alarm-list-widget-config--preview-alarm-list\"\n ></c8y-alarms-list>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
|
|
642
|
+
}], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i4.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.WidgetConfigService }], propDecorators: { config: [{
|
|
641
643
|
type: Input
|
|
642
644
|
}], previewMapSet: [{
|
|
643
645
|
type: ViewChild,
|
|
644
646
|
args: ['alarmListPreview']
|
|
645
647
|
}] } });
|
|
646
648
|
|
|
647
|
-
/**
|
|
648
|
-
* To ensure backward compatibility, legacy widgets will be converted to the new implementation.
|
|
649
|
-
*/
|
|
650
649
|
class AlarmListWidgetComponent {
|
|
651
|
-
constructor(
|
|
652
|
-
this.alarmWidgetService =
|
|
653
|
-
this.alarmService =
|
|
654
|
-
this.dashboardChild =
|
|
655
|
-
this.alertService =
|
|
656
|
-
this.widgetConfigMigrationService =
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
650
|
+
constructor() {
|
|
651
|
+
this.alarmWidgetService = inject(AlarmWidgetService);
|
|
652
|
+
this.alarmService = inject(AlarmService);
|
|
653
|
+
this.dashboardChild = inject(DashboardChildComponent);
|
|
654
|
+
this.alertService = inject(AlertService);
|
|
655
|
+
this.widgetConfigMigrationService = inject(WidgetConfigMigrationService);
|
|
656
|
+
this.displayMode = signal(GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
|
|
657
|
+
this.contextConfig = signal({}, ...(ngDevMode ? [{ debugName: "contextConfig" }] : []));
|
|
658
|
+
this.isLinkedToGlobal = signal(undefined, ...(ngDevMode ? [{ debugName: "isLinkedToGlobal" }] : []));
|
|
660
659
|
this.alarms$ = new BehaviorSubject(null);
|
|
661
|
-
/**
|
|
662
|
-
* Current isLoading state. Based on it next countdown cycle is being started.
|
|
663
|
-
*/
|
|
664
660
|
this.isLoading$ = new BehaviorSubject(true);
|
|
665
|
-
this.widgetControls =
|
|
661
|
+
this.widgetControls = signal(PRESET_NAME.ALARM_LIST, ...(ngDevMode ? [{ debugName: "widgetControls" }] : []));
|
|
662
|
+
this.GLOBAL_CONTEXT_DISPLAY_MODE = GLOBAL_CONTEXT_DISPLAY_MODE;
|
|
663
|
+
this.CONTEXT_FEATURE = CONTEXT_FEATURE;
|
|
664
|
+
this.REFRESH_OPTION = REFRESH_OPTION;
|
|
665
|
+
this.PRESET_NAME = PRESET_NAME;
|
|
666
666
|
this.TIMEOUT_ERROR_TEXT = gettext('The request is taking longer than usual. We apologize for the inconvenience.');
|
|
667
667
|
this.SERVER_ERROR_TEXT = gettext('Server error occurred.');
|
|
668
668
|
this.unsubscribe$ = new Subject();
|
|
669
|
-
this.destroy$ = new Subject();
|
|
670
669
|
this.hasPermissions = true;
|
|
671
670
|
}
|
|
672
671
|
async ngOnInit() {
|
|
673
672
|
this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
|
|
674
|
-
const alarmsWidgetId = this.dashboardChild['data']?.componentId
|
|
675
|
-
|
|
676
|
-
: this.dashboardChild['data']?.name; //property is used in device management dashboards
|
|
677
|
-
// Check for legacy angularJS widget without proper configuration (critical or recent alarms)
|
|
673
|
+
const alarmsWidgetId = this.dashboardChild['data']?.componentId ?? this.dashboardChild['data']?.name;
|
|
674
|
+
// Check for legacy angularJS widget without proper configuration
|
|
678
675
|
const isLegacyWidgetWithoutConfiguration = (this.config?.widgetId ?? alarmsWidgetId) === defaultWidgetIds.ALL_CRITICAL_ALARMS ||
|
|
679
676
|
(this.config?.widgetId ?? alarmsWidgetId) === defaultWidgetIds.RECENT_ALARMS ||
|
|
680
677
|
isEmpty(this.config) ||
|
|
@@ -684,7 +681,6 @@ class AlarmListWidgetComponent {
|
|
|
684
681
|
!this.config.status &&
|
|
685
682
|
!this.config.severities);
|
|
686
683
|
if (isLegacyWidgetWithoutConfiguration) {
|
|
687
|
-
// We need to double check widgetId to ensure we are setting the correct configuration
|
|
688
684
|
let updatedId = alarmsWidgetId;
|
|
689
685
|
const assetAlarms = this.dashboardChild['data']?.title === 'Active, critical alarms' && 'Asset alarms';
|
|
690
686
|
const recentAlarms = this.dashboardChild['data']?.title === 'Recent alarms' && 'Recent alarms';
|
|
@@ -697,82 +693,76 @@ class AlarmListWidgetComponent {
|
|
|
697
693
|
this.setLegacyRecentOrCriticalAlarmWidgetConfig(updatedId);
|
|
698
694
|
this.config.widgetId = updatedId;
|
|
699
695
|
}
|
|
700
|
-
// Check for legacy angularJS alarm list widget
|
|
701
696
|
else if (this.alarmWidgetService.isOldAlarmConfigStructure(this.config)) {
|
|
702
697
|
const mappedConfig = this.alarmWidgetService.mapToNewConfigStructure(this.config);
|
|
703
698
|
Object.assign(this.config, mappedConfig);
|
|
704
699
|
}
|
|
700
|
+
if (this.config?.widgetId === RECENT_ALARMS_WIDGET_ID ||
|
|
701
|
+
this.config?.widgetId === ASSET_ALARMS_WIDGET_ID) {
|
|
702
|
+
this.widgetControls.set(PRESET_NAME.ALARM_LIST_LEGACY);
|
|
703
|
+
}
|
|
705
704
|
const migratedConfig = this.widgetConfigMigrationService.migrateWidgetConfig(this.config);
|
|
706
705
|
this.config = merge(this.config, migratedConfig);
|
|
707
706
|
const resolvedWidgetId = this.config?.widgetId ?? alarmsWidgetId ?? defaultWidgetIds.ALARM_LIST;
|
|
708
707
|
this.config.widgetId = resolvedWidgetId;
|
|
709
|
-
this.
|
|
708
|
+
const displayMode = this.config.displayMode || GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD;
|
|
709
|
+
this.displayMode.set(displayMode);
|
|
710
|
+
const initialContextConfig = {
|
|
711
|
+
dateTimeContext: this.config.dateTimeContext,
|
|
712
|
+
aggregation: this.config.aggregation,
|
|
713
|
+
isAutoRefreshEnabled: this.config.isAutoRefreshEnabled,
|
|
714
|
+
refreshInterval: this.config.refreshInterval,
|
|
715
|
+
refreshOption: this.config.refreshOption
|
|
716
|
+
};
|
|
717
|
+
this.contextConfig.set(initialContextConfig);
|
|
718
|
+
// In dashboard mode, wait for GlobalContextConnector to emit the first state
|
|
719
|
+
// In config modes, fetch immediately with widget config
|
|
720
|
+
if (displayMode !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
|
|
721
|
+
await this.fetchAlarms();
|
|
722
|
+
}
|
|
710
723
|
}
|
|
711
724
|
ngOnDestroy() {
|
|
712
725
|
if (this.config?.isRealtime) {
|
|
713
726
|
this.unsubscribe$.next();
|
|
714
727
|
this.unsubscribe$.complete();
|
|
715
728
|
}
|
|
716
|
-
this.destroy$.next();
|
|
717
|
-
this.destroy$.complete();
|
|
718
|
-
}
|
|
719
|
-
async onRefresh(dateTimeContext) {
|
|
720
|
-
if (this.config.isAutoRefreshEnabled === false) {
|
|
721
|
-
return;
|
|
722
|
-
}
|
|
723
|
-
if (dateTimeContext) {
|
|
724
|
-
this.config.dateTimeContext = dateTimeContext;
|
|
725
|
-
}
|
|
726
|
-
else {
|
|
727
|
-
this.updateDateFilter();
|
|
728
|
-
}
|
|
729
|
-
this.alarms$.next(await this.getAlarms());
|
|
730
729
|
}
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
this.alarms$.next(await this.getAlarms());
|
|
734
|
-
}
|
|
735
|
-
async onGlobalContextChange(event) {
|
|
736
|
-
const { context, diff } = event;
|
|
737
|
-
// Update local config with the new context, do not propagate it to the widget config
|
|
738
|
-
this.config = { ...this.config, ...context, dateTimeContext: { ...context.dateTimeContext } };
|
|
739
|
-
// Prevent fetching alarms after disableAutoRefresh handler was triggered
|
|
730
|
+
onContextChange(event) {
|
|
731
|
+
const { diff, context } = event;
|
|
740
732
|
if (diff.isAutoRefreshEnabled === false &&
|
|
741
733
|
Object.keys(diff).length === 1 &&
|
|
742
734
|
context.refreshOption === REFRESH_OPTION.LIVE) {
|
|
743
735
|
return;
|
|
744
736
|
}
|
|
745
|
-
|
|
737
|
+
this.contextConfig.set(event.context);
|
|
738
|
+
void this.fetchAlarms();
|
|
739
|
+
}
|
|
740
|
+
getDashboardChild() {
|
|
741
|
+
return this.dashboardChild;
|
|
742
|
+
}
|
|
743
|
+
onRefresh() {
|
|
744
|
+
void this.fetchAlarms();
|
|
746
745
|
}
|
|
747
746
|
onScrollingStateChange(isScrolling) {
|
|
748
|
-
|
|
747
|
+
const current = this.contextConfig();
|
|
748
|
+
if (current.refreshOption === REFRESH_OPTION.HISTORY) {
|
|
749
749
|
return;
|
|
750
750
|
}
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
return;
|
|
754
|
-
}
|
|
755
|
-
this.globalContextWidgetWrapperComponent.pauseAutoRefresh();
|
|
756
|
-
}
|
|
757
|
-
else {
|
|
758
|
-
this.globalContextWidgetWrapperComponent.resumeAutoRefresh();
|
|
759
|
-
}
|
|
751
|
+
this.contextConfig.set({ ...current, isAutoRefreshEnabled: !isScrolling });
|
|
752
|
+
this.isLinkedToGlobal.set(!isScrolling);
|
|
760
753
|
}
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
*/
|
|
765
|
-
updateDateFilter() {
|
|
766
|
-
if (this.config.dateTimeContext.interval === TIME_INTERVAL.CUSTOM) {
|
|
767
|
-
return;
|
|
768
|
-
}
|
|
769
|
-
const { dateFrom, dateTo } = this.config.dateTimeContext;
|
|
770
|
-
this.config.dateTimeContext = { ...this.config.dateTimeContext, dateFrom, dateTo };
|
|
754
|
+
async fetchAlarms() {
|
|
755
|
+
const alarms = await this.getAlarms();
|
|
756
|
+
this.alarms$.next(alarms);
|
|
771
757
|
}
|
|
772
758
|
async getAlarms() {
|
|
773
759
|
try {
|
|
774
760
|
this.isLoading$.next(true);
|
|
775
|
-
|
|
761
|
+
const effectiveConfig = {
|
|
762
|
+
...this.config,
|
|
763
|
+
...this.contextConfig()
|
|
764
|
+
};
|
|
765
|
+
return await this.alarmService.list(this.alarmWidgetService.mapConfigToQueryFilter(effectiveConfig));
|
|
776
766
|
}
|
|
777
767
|
catch (error) {
|
|
778
768
|
this.alerts.addAlerts(new DynamicComponentAlert({
|
|
@@ -802,16 +792,13 @@ class AlarmListWidgetComponent {
|
|
|
802
792
|
Object.assign(this.config, predefinedConfig);
|
|
803
793
|
}
|
|
804
794
|
}
|
|
805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, deps: [
|
|
806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
795
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmListWidgetComponent, isStandalone: true, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], ngImport: i0, template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n <c8y-global-context-connector\n [controls]=\"widgetControls()\"\n [config]=\"contextConfig()\"\n [isLoading]=\"isLoading$ | async\"\n [dashboardChild]=\"getDashboardChild()\"\n [linked]=\"isLinkedToGlobal()\"\n (configChange)=\"onContextChange($event)\"\n (refresh)=\"onRefresh()\"\n ></c8y-global-context-connector>\n} @else {\n <c8y-local-controls\n [controls]=\"widgetControls()\"\n [displayMode]=\"displayMode()\"\n [config]=\"contextConfig()\"\n [isLoading]=\"isLoading$ | async\"\n (configChange)=\"onContextChange($event)\"\n (refresh)=\"onRefresh()\"\n ></c8y-local-controls>\n}\n\n<c8y-alarms-list\n #list\n [alarms]=\"alarms$ | async\"\n [navigationOptions]=\"{\n alwaysNavigateToAllAlarms: !config.device,\n allowNavigationToAlarmsView: true,\n includeClearedQueryParams: true,\n queryParamsHandling: ''\n }\"\n [isInitialLoading]=\"isLoading$ | async\"\n [hasPermissions]=\"hasPermissions\"\n (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView", "isInPreviewMode"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: LocalControlsComponent, selector: "c8y-local-controls", inputs: ["controls", "displayMode", "config", "isLoading", "disabled"], outputs: ["configChange", "refresh"] }, { kind: "component", type: GlobalContextConnectorComponent, selector: "c8y-global-context-connector", inputs: ["controls", "config", "isLoading", "dashboardChild", "linked"], outputs: ["configChange", "refresh"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
807
797
|
}
|
|
808
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
|
|
809
799
|
type: Component,
|
|
810
|
-
args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [AlarmsListComponent, AsyncPipe,
|
|
811
|
-
}],
|
|
812
|
-
type: ViewChild,
|
|
813
|
-
args: [GlobalContextWidgetWrapperComponent]
|
|
814
|
-
}], config: [{
|
|
800
|
+
args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], imports: [AlarmsListComponent, AsyncPipe, LocalControlsComponent, GlobalContextConnectorComponent], template: "@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {\n <c8y-global-context-connector\n [controls]=\"widgetControls()\"\n [config]=\"contextConfig()\"\n [isLoading]=\"isLoading$ | async\"\n [dashboardChild]=\"getDashboardChild()\"\n [linked]=\"isLinkedToGlobal()\"\n (configChange)=\"onContextChange($event)\"\n (refresh)=\"onRefresh()\"\n ></c8y-global-context-connector>\n} @else {\n <c8y-local-controls\n [controls]=\"widgetControls()\"\n [displayMode]=\"displayMode()\"\n [config]=\"contextConfig()\"\n [isLoading]=\"isLoading$ | async\"\n (configChange)=\"onContextChange($event)\"\n (refresh)=\"onRefresh()\"\n ></c8y-local-controls>\n}\n\n<c8y-alarms-list\n #list\n [alarms]=\"alarms$ | async\"\n [navigationOptions]=\"{\n alwaysNavigateToAllAlarms: !config.device,\n allowNavigationToAlarmsView: true,\n includeClearedQueryParams: true,\n queryParamsHandling: ''\n }\"\n [isInitialLoading]=\"isLoading$ | async\"\n [hasPermissions]=\"hasPermissions\"\n (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n></c8y-alarms-list>\n" }]
|
|
801
|
+
}], propDecorators: { config: [{
|
|
815
802
|
type: Input
|
|
816
803
|
}] } });
|
|
817
804
|
|