diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts index 5bf8a69018..465ae91373 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts @@ -75,13 +75,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { quickSelections: QuickTimeSelection[]; @Input() - labels: TimeSelectorLabel = { - quickSelectionLabel: 'Quick Selection', - customLabel: 'Custom', - maxDayRangeErrorLabel: - 'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.', - timeRangeSelectorTooltip: 'Modify time range', - }; + labels: TimeSelectorLabel; simpleTimeString: string = ''; timeString: TimeString; @@ -96,15 +90,14 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { constructor(private timeSelectionService: TimeSelectionService) {} ngOnInit() { - if (!this.quickSelections) { - this.quickSelections = - this.timeSelectionService.defaultQuickTimeSelections; - } + this.quickSelections ??= + this.timeSelectionService.defaultQuickTimeSelections; + this.labels ??= this.timeSelectionService.defaultLabels; this.createDateString(); } ngOnChanges(changes: SimpleChanges) { - if (changes.timeSettings) { + if (changes.timeSettings && this.quickSelections !== undefined) { this.createDateString(); } } diff --git a/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts index a635ab1c54..bc23977e7f 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts @@ -38,6 +38,7 @@ import { subWeeks, subYears, } from 'date-fns'; +import { TimeSelectorLabel } from '../components/time-selector/time-selector.model'; @Injectable({ providedIn: 'root' }) export class TimeSelectionService { @@ -50,6 +51,14 @@ export class TimeSelectionService { 525600: TimeSelectionConstants.LAST_YEAR, }; + defaultLabels: TimeSelectorLabel = { + quickSelectionLabel: 'Quick Selection', + customLabel: 'Custom', + maxDayRangeErrorLabel: + 'Maximum of ${this.maxDayRange} days can be displayed. Please select a smaller range.', + timeRangeSelectorTooltip: 'Modify time range', + }; + defaultQuickTimeSelections: QuickTimeSelection[] = [ { label: 'Last 15 min', diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html index ea476a9846..54e23fe4f9 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html @@ -126,7 +126,10 @@ diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts index 32c1d53801..f9e4ea6ec1 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts @@ -34,6 +34,7 @@ import { DashboardItem, DataExplorerWidgetModel, DataLakeMeasure, + QuickTimeSelection, SpLogMessage, TimeSettings, } from '@streampipes/platform-services'; @@ -49,6 +50,7 @@ import { BaseWidgetData } from '../../models/dataview-dashboard.model'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; import { MatMenuTrigger } from '@angular/material/menu'; import { TimeSelectionService } from '@streampipes/shared-ui'; +import { TimeSelectorLabel } from 'projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model'; @Component({ selector: 'sp-data-explorer-dashboard-widget', @@ -104,6 +106,8 @@ export class DataExplorerDashboardWidgetComponent timerActive = false; loadingTime = 0; + quickSelections: QuickTimeSelection[]; + labels: TimeSelectorLabel; clonedTimeSettings: TimeSettings; timeSettingsModified: boolean = false; @@ -137,6 +141,9 @@ export class DataExplorerDashboardWidgetComponent } ngOnInit(): void { + this.quickSelections = + this.timeSelectionService.defaultQuickTimeSelections; + this.labels = this.timeSelectionService.defaultLabels; this.authSubscription = this.currentUserService.user$.subscribe( user => { this.hasDataExplorerWritePrivileges = this.authService.hasRole( @@ -225,7 +232,10 @@ export class DataExplorerDashboardWidgetComponent getTimeSettings(): TimeSettings { if (this.globalTimeEnabled) { return this.timeSettings; - } else if (this.dashboardItem.timeSettings !== undefined) { + } else if ( + this.dashboardItem.timeSettings !== undefined && + this.dashboardItem.timeSettings !== null + ) { return this.dashboardItem.timeSettings as TimeSettings; } else { return this.configuredWidget.timeSettings as TimeSettings;