diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index 4be96f5fdd..eeb835e63f 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -21,7 +21,8 @@ import { Component, ElementRef, EventEmitter, - Input, NgZone, + Input, + NgZone, OnChanges, OnDestroy, OnInit, @@ -59,7 +60,7 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models'; import { DialogService } from '@core/services/dialog.service'; import { AddEntityDialogComponent } from './add-entity-dialog.component'; import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models'; -import { calculateIntervalStartEndTime, HistoryWindowType, Timewindow } from '@shared/models/time/time.models'; +import { getTimePageLinkInterval, Timewindow } from '@shared/models/time/time.models'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { TbAnchorComponent } from '@shared/components/tb-anchor.component'; import { isDefined, isEqual, isNotEmptyStr, isUndefined } from '@core/utils'; @@ -259,7 +260,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa if (this.entitiesTableConfig.useTimePageLink) { this.timewindow = this.entitiesTableConfig.defaultTimewindowInterval; - const interval = this.getTimePageLinkInterval(); + const interval = getTimePageLinkInterval(this.timewindow); this.pageLink = new TimePageLink(10, 0, null, sortOrder, interval.startTime, interval.endTime); } else { @@ -424,7 +425,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } if (this.entitiesTableConfig.useTimePageLink) { const timePageLink = this.pageLink as TimePageLink; - const interval = this.getTimePageLinkInterval(); + const interval = getTimePageLinkInterval(this.timewindow); timePageLink.startTime = interval.startTime; timePageLink.endTime = interval.endTime; } @@ -434,31 +435,6 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa } } - private getTimePageLinkInterval(): {startTime?: number; endTime?: number} { - const interval: {startTime?: number; endTime?: number} = {}; - switch (this.timewindow.history.historyType) { - case HistoryWindowType.LAST_INTERVAL: - const currentTime = Date.now(); - interval.startTime = currentTime - this.timewindow.history.timewindowMs; - interval.endTime = currentTime; - break; - case HistoryWindowType.FIXED: - interval.startTime = this.timewindow.history.fixedTimewindow.startTimeMs; - interval.endTime = this.timewindow.history.fixedTimewindow.endTimeMs; - break; - case HistoryWindowType.INTERVAL: - const startEndTime = calculateIntervalStartEndTime(this.timewindow.history.quickInterval); - interval.startTime = startEndTime[0]; - interval.endTime = startEndTime[1]; - break; - case HistoryWindowType.FOR_ALL_TIME: - interval.startTime = null; - interval.endTime = null; - break; - } - return interval; - } - private dataLoaded(col?: number, row?: number) { if (isFinite(col) && isFinite(row)) { this.clearCellCache(col, row); diff --git a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html index 1701e8d754..39c2da9c2f 100644 --- a/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html +++ b/ui-ngx/src/app/shared/components/entity/entity-list-select.component.html @@ -17,16 +17,20 @@ -->
{ }; + private propagateChange = (_v: any) => { }; - constructor(private store: Store, - private entityService: EntityService, - public translate: TranslateService, + constructor(private entityService: EntityService, private fb: UntypedFormBuilder, private destroyRef: DestroyRef) { @@ -96,7 +94,7 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit, this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } ngOnInit() { @@ -114,9 +112,9 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit, this.updateView(this.modelValue.entityType, values); } ); - } - - ngAfterViewInit(): void { + if (isDefinedAndNotNull(this.predefinedEntityType)) { + this.defaultEntityType = this.predefinedEntityType; + } } setDisabledState(isDisabled: boolean): void { @@ -145,7 +143,7 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit, this.entityListSelectFormGroup.get('entityIds').patchValue([...this.modelValue.ids], {emitEvent: true}); } - updateView(entityType: EntityType | AliasEntityType | null, entityIds: Array | null) { + private updateView(entityType: EntityType | AliasEntityType | null, entityIds: Array | null) { if (this.modelValue.entityType !== entityType || !this.compareIds(this.modelValue.ids, entityIds)) { this.modelValue = { @@ -156,7 +154,7 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit, } } - compareIds(ids1: Array | null, ids2: Array | null): boolean { + private compareIds(ids1: Array | null, ids2: Array | null): boolean { if (ids1 !== null && ids2 !== null) { return JSON.stringify(ids1) === JSON.stringify(ids2); } else { @@ -164,7 +162,7 @@ export class EntityListSelectComponent implements ControlValueAccessor, OnInit, } } - toEntityIds(modelValue: EntityListSelectModel): Array { + private toEntityIds(modelValue: EntityListSelectModel): Array { if (modelValue !== null && modelValue.entityType && modelValue.ids && modelValue.ids.length > 0) { const entityType = modelValue.entityType; return modelValue.ids.map(id => ({entityType, id})); diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-list.component.html index fc0cfa9586..e1b951b40b 100644 --- a/ui-ngx/src/app/shared/components/entity/entity-list.component.html +++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.html @@ -15,8 +15,13 @@ limitations under the License. --> - - {{ labelText }} + + {{ labelText }} {{ labelText }} - {{ translate.get('entity.no-entities-matching', {entity: searchText}) | async }} + {{ 'entity.no-entities-matching' | translate: {entity: searchText} }}
- + {{ hint }} - + {{ requiredText }}
diff --git a/ui-ngx/src/app/shared/components/entity/entity-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-list.component.ts index 5cd19156a5..552c4f1f71 100644 --- a/ui-ngx/src/app/shared/components/entity/entity-list.component.ts +++ b/ui-ngx/src/app/shared/components/entity/entity-list.component.ts @@ -14,17 +14,7 @@ /// limitations under the License. /// -import { - AfterViewInit, - Component, - ElementRef, - forwardRef, - Input, - OnChanges, - OnInit, - SimpleChanges, - ViewChild -} from '@angular/core'; +import { Component, ElementRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; import { ControlValueAccessor, NG_VALIDATORS, @@ -65,7 +55,7 @@ import { isArray } from 'lodash'; } ] }) -export class EntityListComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges { +export class EntityListComponent implements ControlValueAccessor, OnInit, OnChanges { entityListFormGroup: UntypedFormGroup; @@ -115,6 +105,10 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV @coerceBoolean() syncIdsWithDB = false; + @Input() + @coerceBoolean() + inlineField: boolean; + @ViewChild('entityInput') entityInput: ElementRef; @ViewChild('entityAutocomplete') matAutocomplete: MatAutocomplete; @ViewChild('chipList', {static: true}) chipList: MatChipGrid; @@ -126,9 +120,9 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV private dirty = false; - private propagateChange = (v: any) => { }; + private propagateChange = (_v: any) => { }; - constructor(public translate: TranslateService, + constructor(private translate: TranslateService, private entityService: EntityService, private fb: UntypedFormBuilder) { this.entityListFormGroup = this.fb.group({ @@ -146,7 +140,7 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } ngOnInit() { @@ -178,9 +172,6 @@ export class EntityListComponent implements ControlValueAccessor, OnInit, AfterV } } - ngAfterViewInit(): void { - } - setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; if (isDisabled) { diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html index b21734cfdd..6506d233b0 100644 --- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html +++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.html @@ -15,14 +15,16 @@ limitations under the License. --> - - {{ 'entity.type' | translate }} + + {{ label }} {{ displayEntityTypeFn(type) }} - + {{ 'entity.type-required' | translate }} diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts index ce599a0c08..f8a4f49a82 100644 --- a/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts +++ b/ui-ngx/src/app/shared/components/entity/entity-type-select.component.ts @@ -52,6 +52,9 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit, @coerceBoolean() showLabel: boolean; + @Input() + label = this.translate.instant('entity.type'); + @Input() @coerceBoolean() required: boolean; @@ -65,12 +68,16 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit, @Input() appearance: MatFormFieldAppearance = 'fill'; + @Input() + @coerceBoolean() + inlineField: boolean; + entityTypes: Array; - private propagateChange = (v: any) => { }; + private propagateChange = (_v: any) => { }; constructor(private entityService: EntityService, - public translate: TranslateService, + private translate: TranslateService, private fb: UntypedFormBuilder, private destroyRef: DestroyRef) { this.entityTypeFormGroup = this.fb.group({ @@ -82,7 +89,7 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit, this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } ngOnInit() { @@ -97,7 +104,7 @@ export class EntityTypeSelectComponent implements ControlValueAccessor, OnInit, takeUntilDestroyed(this.destroyRef) ).subscribe( (value) => { - let modelValue; + let modelValue: EntityType | AliasEntityType; if (!value || value === '') { modelValue = null; } else { diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html index 042d94087c..fbb3c1d2f6 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html @@ -27,7 +27,7 @@
-
+
- -
+ +
- - -
{{ computedTimewindowStyle.icon }}
+ diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index ea3f49cf9f..a52e3eb091 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -17,6 +17,7 @@ import { ChangeDetectorRef, Component, + DestroyRef, ElementRef, forwardRef, HostBinding, @@ -26,6 +27,7 @@ import { OnInit, SimpleChanges, StaticProvider, + ViewChild, ViewContainerRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -63,6 +65,7 @@ import { } from '@shared/models/widget-settings.models'; import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models'; import { fromEvent } from 'rxjs'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; // @dynamic @Component({ @@ -79,6 +82,8 @@ import { fromEvent } from 'rxjs'; }) export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChanges { + @ViewChild('panelContainer', { read: ViewContainerRef, static: true }) panelContainer: ViewContainerRef; + historyOnlyValue = false; @Input() @@ -180,6 +185,10 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan @coerceBoolean() disabled: boolean; + @Input() + @coerceBoolean() + panelMode = true; + innerValue: Timewindow; timewindowDisabled: boolean; @@ -197,7 +206,8 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan private datePipe: DatePipe, private cd: ChangeDetectorRef, private nativeElement: ElementRef, - public viewContainerRef: ViewContainerRef) { + private viewContainerRef: ViewContainerRef, + private destroyRef: DestroyRef) { } ngOnInit() { @@ -249,7 +259,8 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan quickIntervalOnly: this.quickIntervalOnly, aggregation: this.aggregation, timezone: this.timezone, - isEdit: this.isEdit + isEdit: this.isEdit, + panelMode: this.panelMode, } as TimewindowPanelData }, { @@ -317,6 +328,9 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan } else { this.updateDisplayValue(); } + if (!this.panelMode) { + this.createPanel(); + } } notifyChanged() { @@ -328,6 +342,9 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan } updateDisplayValue() { + if (!this.panelMode) { + return + } if (this.innerValue.selectedTab === TimewindowType.REALTIME && !this.historyOnly) { this.innerValue.displayValue = this.displayTypePrefix ? (this.translate.instant('timewindow.realtime') + ' - ') : ''; if (this.innerValue.realtime.realtimeType === RealtimeWindowType.INTERVAL) { @@ -373,4 +390,29 @@ export class TimewindowComponent implements ControlValueAccessor, OnInit, OnChan ))); } + private createPanel() { + this.panelContainer.clear(); + const panelData = { + timewindow: deepClone(this.innerValue), + historyOnly: this.historyOnly, + forAllTimeEnabled: this.forAllTimeEnabled, + quickIntervalOnly: this.quickIntervalOnly, + aggregation: this.aggregation, + timezone: this.timezone, + isEdit: this.isEdit, + panelMode: this.panelMode, + } + const injector = Injector.create({ + providers: [{ provide: TIMEWINDOW_PANEL_DATA, useValue: panelData }], + parent: this.viewContainerRef.injector + }); + const componentRef = this.panelContainer.createComponent(TimewindowPanelComponent, {index: 0, injector}); + componentRef.instance.changeTimewindow.pipe( + takeUntilDestroyed(this.destroyRef) + ).subscribe(value => { + this.innerValue = value; + this.timewindowDisabled = this.isTimewindowDisabled(); + this.notifyChanged(); + }) + } } diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts index c63bd8da52..acb62d9d2a 100644 --- a/ui-ngx/src/app/shared/models/time/time.models.ts +++ b/ui-ngx/src/app/shared/models/time/time.models.ts @@ -1406,3 +1406,28 @@ export const calculateInterval = (startTime: number, endTime: number, export const getCurrentTimeForComparison = (timeForComparison: moment_.unitOfTime.DurationConstructor, tz?: string): moment_.Moment => getCurrentTime(tz).subtract(1, timeForComparison); + +export const getTimePageLinkInterval = (timewindow: Timewindow): {startTime?: number; endTime?: number} => { + const interval: {startTime?: number; endTime?: number} = {}; + switch (timewindow.history.historyType) { + case HistoryWindowType.LAST_INTERVAL: + const currentTime = Date.now(); + interval.startTime = currentTime - timewindow.history.timewindowMs; + interval.endTime = currentTime; + break; + case HistoryWindowType.FIXED: + interval.startTime = timewindow.history.fixedTimewindow.startTimeMs; + interval.endTime = timewindow.history.fixedTimewindow.endTimeMs; + break; + case HistoryWindowType.INTERVAL: + const startEndTime = calculateIntervalStartEndTime(timewindow.history.quickInterval); + interval.startTime = startEndTime[0]; + interval.endTime = startEndTime[1]; + break; + case HistoryWindowType.FOR_ALL_TIME: + interval.startTime = null; + interval.endTime = null; + break; + } + return interval; +}