From c503829cad8f5982e61a8e1d5f86e1ff2b4e947c Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Fri, 25 Oct 2024 16:18:21 +0200 Subject: [PATCH 1/8] Time range selector moved to shared-ui --- .../time-range-selector.component.html | 0 .../time-range-selector.component.scss | 2 -- .../time-range-selector.component.ts | 0 .../custom-time-range-selection.component.html | 0 .../custom-time-range-selection.component.scss | 0 .../custom-time-range-selection.component.ts | 0 .../time-selector-menu.component.html | 0 .../time-selector-menu.component.scss | 0 .../time-selector-menu.component.ts | 0 .../lib}/services/time-selection.service.ts | 0 .../shared-ui/src/lib/shared-ui.module.ts | 18 ++++++++++++++++++ .../streampipes/shared-ui/src/public-api.ts | 3 +++ .../data-explorer-dashboard-panel.component.ts | 2 +- .../data-explorer-data-view.component.ts | 2 +- ...data-explorer-dashboard-widget.component.ts | 2 +- .../base-data-explorer-widget.directive.ts | 2 +- .../app/data-explorer/data-explorer.module.ts | 13 ------------- 17 files changed, 25 insertions(+), 19 deletions(-) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-range-selector.component.html (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-range-selector.component.scss (97%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-range-selector.component.ts (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/time-selector-menu.component.html (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/time-selector-menu.component.scss (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/components/time-selector/time-selector-menu/time-selector-menu.component.ts (100%) rename ui/{src/app/data-explorer => projects/streampipes/shared-ui/src/lib}/services/time-selection.service.ts (100%) diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss similarity index 97% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss index aef8593a37..28deb3738b 100644 --- a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss @@ -16,8 +16,6 @@ * */ -@import '../../../../scss/variables'; - .start-date-margin { margin-right: 5px; } diff --git a/ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-range-selector.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.html rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.scss rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.scss diff --git a/ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts similarity index 100% rename from ui/src/app/data-explorer/components/time-selector/time-selector-menu/time-selector-menu.component.ts rename to ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts diff --git a/ui/src/app/data-explorer/services/time-selection.service.ts b/ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts similarity index 100% rename from ui/src/app/data-explorer/services/time-selection.service.ts rename to ui/projects/streampipes/shared-ui/src/lib/services/time-selection.service.ts diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts index d5b90cf68d..5a1b150843 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts @@ -17,7 +17,13 @@ */ import { NgModule } from '@angular/core'; +import { + DefaultMatCalendarRangeStrategy, + MatDatepickerModule, + MatRangeDateSelectionModel, +} from '@angular/material/datepicker'; import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; +import { MatCardModule } from '@angular/material/card'; import { PanelDialogComponent } from './dialog/panel-dialog/panel-dialog.component'; import { StandardDialogComponent } from './dialog/standard-dialog/standard-dialog.component'; import { CommonModule } from '@angular/common'; @@ -55,6 +61,9 @@ import { AssetBrowserFilterTypeComponent } from './components/asset-browser/asse import { AssetBrowserHierarchyComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-hierarchy.component'; import { AssetBrowserNodeComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-node/asset-browser-node.component'; import { AssetBrowserNodeInfoComponent } from './components/asset-browser/asset-browser-hierarchy/asset-browser-node/asset-browser-node-info/asset-browser-node-info.component'; +import { TimeRangeSelectorComponent } from './components/time-selector/time-range-selector.component'; +import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component'; +import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; import { MatSelectModule } from '@angular/material/select'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatMenuModule } from '@angular/material/menu'; @@ -74,6 +83,7 @@ import { MatTreeModule } from '@angular/material/tree'; AssetBrowserNodeInfoComponent, AssetBrowserToolbarComponent, ConfirmDialogComponent, + CustomTimeRangeSelectionComponent, PanelDialogComponent, StandardDialogComponent, SpBasicFieldDescriptionComponent, @@ -88,6 +98,8 @@ import { MatTreeModule } from '@angular/material/tree'; SpTableComponent, SplitSectionComponent, SpWarningBoxComponent, + TimeRangeSelectorComponent, + TimeRangeSelectorMenuComponent, ], imports: [ CommonModule, @@ -102,6 +114,8 @@ import { MatTreeModule } from '@angular/material/tree'; MatTabsModule, MatTooltipModule, MatTreeModule, + MatDatepickerModule, + MatCardModule, PortalModule, OverlayModule, MatDialogModule, @@ -109,6 +123,7 @@ import { MatTreeModule } from '@angular/material/tree'; MatPaginator, MatSort, ], + providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], exports: [ AssetBrowserComponent, ConfirmDialogComponent, @@ -126,6 +141,9 @@ import { MatTreeModule } from '@angular/material/tree'; SpTableComponent, SplitSectionComponent, SpWarningBoxComponent, + CustomTimeRangeSelectionComponent, + TimeRangeSelectorComponent, + TimeRangeSelectorMenuComponent, ], }) export class SharedUiModule {} diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts index a923f5abbc..67892b5dba 100644 --- a/ui/projects/streampipes/shared-ui/src/public-api.ts +++ b/ui/projects/streampipes/shared-ui/src/public-api.ts @@ -39,6 +39,8 @@ export * from './lib/components/sp-exception-message/exception-details/exception export * from './lib/components/sp-label/sp-label.component'; export * from './lib/components/sp-table/sp-table.component'; export * from './lib/components/warning-box/warning-box.component'; +export * from './lib/components/time-selector/time-range-selector.component'; +export * from './lib/components/time-selector/time-selector-menu/time-selector-menu.component'; export * from './lib/models/sp-navigation.model'; @@ -47,4 +49,5 @@ export * from './lib/services/jwt-token-storage.service'; export * from './lib/services/current-user.service'; export * from './lib/services/echarts-toolbox.service'; export * from './lib/services/colorization.service'; +export * from './lib/services/time-selection.service'; export * from './lib/components/asset-browser/asset-browser.service'; diff --git a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts index 7a28ff025d..016a22eb5d 100644 --- a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts @@ -28,7 +28,6 @@ import { TimeSelectionId, TimeSettings, } from '@streampipes/platform-services'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { AuthService } from '../../../services/auth.service'; import { UserPrivilege } from '../../../_enums/user-privilege.enum'; import { @@ -48,6 +47,7 @@ import { SpDataExplorerRoutes } from '../../data-explorer.routes'; import { DataExplorerRoutingService } from '../../services/data-explorer-routing.service'; import { DataExplorerDetectChangesService } from '../../services/data-explorer-detect-changes.service'; import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.model'; +import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; @Component({ selector: 'sp-data-explorer-dashboard-panel', diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts index 202946c582..4ff02c6095 100644 --- a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts @@ -30,7 +30,6 @@ import { RouterStateSnapshot, } from '@angular/router'; import { ConfirmDialogComponent } from '@streampipes/shared-ui'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { DataExplorerRoutingService } from '../../services/data-explorer-routing.service'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; import { DataExplorerDetectChangesService } from '../../services/data-explorer-detect-changes.service'; @@ -38,6 +37,7 @@ import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.mod import { Observable, of } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { map } from 'rxjs/operators'; +import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; @Component({ selector: 'sp-data-explorer-data-view', 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 21e5170c0e..4293f1460d 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 @@ -47,8 +47,8 @@ import { UserPrivilege } from '../../../_enums/user-privilege.enum'; import { CurrentUserService } from '@streampipes/shared-ui'; import { BaseWidgetData } from '../../models/dataview-dashboard.model'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; -import { TimeSelectionService } from '../../services/time-selection.service'; import { MatMenuTrigger } from '@angular/material/menu'; +import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; @Component({ selector: 'sp-data-explorer-dashboard-widget', diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts index 5df627e9e7..adf7653af0 100644 --- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts +++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts @@ -45,10 +45,10 @@ import { } from '../../../models/dataview-dashboard.model'; import { Observable, Subject, Subscription, zip } from 'rxjs'; import { DataExplorerFieldProviderService } from '../../../services/data-explorer-field-provider-service'; -import { TimeSelectionService } from '../../../services/time-selection.service'; import { catchError, switchMap } from 'rxjs/operators'; import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry'; import { SpFieldUpdateService } from '../../../services/field-update.service'; +import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; @Directive() export abstract class BaseDataExplorerWidgetDirective< diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts index c3070b45b5..5c5e6790b3 100644 --- a/ui/src/app/data-explorer/data-explorer.module.ts +++ b/ui/src/app/data-explorer/data-explorer.module.ts @@ -23,11 +23,6 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatChipsModule } from '@angular/material/chips'; import { MatNativeDateModule } from '@angular/material/core'; -import { - DefaultMatCalendarRangeStrategy, - MatDatepickerModule, - MatRangeDateSelectionModel, -} from '@angular/material/datepicker'; import { MatGridListModule } from '@angular/material/grid-list'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSliderModule } from '@angular/material/slider'; @@ -43,7 +38,6 @@ import { CoreUiModule } from '../core-ui/core-ui.module'; import { DataExplorerDashboardGridComponent } from './components/widget-view/grid-view/data-explorer-dashboard-grid.component'; import { DataExplorerOverviewComponent } from './components/overview/data-explorer-overview.component'; import { DataExplorerDashboardPanelComponent } from './components/dashboard/data-explorer-dashboard-panel.component'; -import { TimeRangeSelectorComponent } from './components/time-selector/time-range-selector.component'; import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component'; import { ImageWidgetComponent } from './components/widgets/image/image-widget.component'; import { TrafficLightWidgetComponent } from './components/widgets/traffic-light/traffic-light-widget.component'; @@ -129,8 +123,6 @@ import { DataExplorerDataViewSelectionComponent } from './components/dashboard/d import { DataExplorerDashboardWidgetSelectionPanelComponent } from './components/dashboard/dashboard-widget-selection-panel/dashboard-widget-selection-panel.component'; import { DataExplorerDataViewPreviewComponent } from './components/dashboard/dashboard-widget-selection-panel/data-view-selection/data-view-preview/data-view-preview.component'; import { DataExplorerDashboardToolbarComponent } from './components/dashboard/dashboard-toolbar/dashboard-toolbar.component'; -import { TimeRangeSelectorMenuComponent } from './components/time-selector/time-selector-menu/time-selector-menu.component'; -import { CustomTimeRangeSelectionComponent } from './components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; import { DataExplorerRefreshIntervalSettingsComponent } from './components/dashboard/dashboard-toolbar/refresh-interval-settings/refresh-interval-settings.component'; import { OrderSelectionPanelComponent } from './components/data-view/data-view-designer-panel/data-settings/order-selection-panel/order-selection-panel.component'; import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/gauge-widget-config.component'; @@ -174,7 +166,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga MatProgressSpinnerModule, ReactiveFormsModule, CoreUiModule, - MatDatepickerModule, MatNativeDateModule, MatSliderModule, MatSlideToggleModule, @@ -215,7 +206,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga ], declarations: [ AggregateConfigurationComponent, - CustomTimeRangeSelectionComponent, DataExplorerDashboardGridComponent, DataExplorerOverviewComponent, DataExplorerDashboardPanelComponent, @@ -259,8 +249,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga MapWidgetComponent, HeatmapWidgetConfigComponent, ImageViewerComponent, - TimeRangeSelectorComponent, - TimeRangeSelectorMenuComponent, DataExplorerVisualisationSettingsComponent, GroupSelectionPanelComponent, DataExplorerVisualisationSettingsComponent, @@ -283,7 +271,6 @@ import { GaugeWidgetConfigComponent } from './components/widgets/gauge/config/ga SpTimeSeriesAppearanceConfigComponent, SpDataZoomConfigComponent, ], - providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel], exports: [], }) export class DataExplorerModule { From 48058391c2b31fe632049fae29555aa63c7cd903 Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Mon, 28 Oct 2024 09:27:06 +0100 Subject: [PATCH 2/8] Changed imports for time selection serivce --- .../dashboard/data-explorer-dashboard-panel.component.ts | 2 +- .../components/data-view/data-explorer-data-view.component.ts | 2 +- .../widget/data-explorer-dashboard-widget.component.ts | 2 +- .../widgets/base/base-data-explorer-widget.directive.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts index 016a22eb5d..28bb0097bd 100644 --- a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts @@ -47,7 +47,7 @@ import { SpDataExplorerRoutes } from '../../data-explorer.routes'; import { DataExplorerRoutingService } from '../../services/data-explorer-routing.service'; import { DataExplorerDetectChangesService } from '../../services/data-explorer-detect-changes.service'; import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.model'; -import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-dashboard-panel', diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts index 4ff02c6095..6ede8d66cb 100644 --- a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts @@ -37,7 +37,7 @@ import { SupportsUnsavedChangeDialog } from '../../models/dataview-dashboard.mod import { Observable, of } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { map } from 'rxjs/operators'; -import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-data-view', 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 4293f1460d..51dee8acda 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 @@ -48,7 +48,7 @@ import { CurrentUserService } from '@streampipes/shared-ui'; import { BaseWidgetData } from '../../models/dataview-dashboard.model'; import { DataExplorerDashboardService } from '../../services/data-explorer-dashboard.service'; import { MatMenuTrigger } from '@angular/material/menu'; -import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Component({ selector: 'sp-data-explorer-dashboard-widget', diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts index adf7653af0..b28d5ac40a 100644 --- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts +++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts @@ -48,7 +48,7 @@ import { DataExplorerFieldProviderService } from '../../../services/data-explore import { catchError, switchMap } from 'rxjs/operators'; import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry'; import { SpFieldUpdateService } from '../../../services/field-update.service'; -import { TimeSelectionService } from 'projects/streampipes/shared-ui/src/lib/services/time-selection.service'; +import { TimeSelectionService } from '@streampipes/shared-ui'; @Directive() export abstract class BaseDataExplorerWidgetDirective< From 4f76a69c13c434917e823e4bb57b6688e3f7d51f Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Mon, 28 Oct 2024 09:59:00 +0100 Subject: [PATCH 3/8] Modify imports --- ui/projects/streampipes/shared-ui/package.json | 3 ++- ui/projects/streampipes/shared-ui/src/public-api.ts | 1 + ui/projects/streampipes/shared-ui/tsconfig.lib.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/package.json b/ui/projects/streampipes/shared-ui/package.json index f2f8f4d9b5..6f8f27f9ef 100644 --- a/ui/projects/streampipes/shared-ui/package.json +++ b/ui/projects/streampipes/shared-ui/package.json @@ -10,7 +10,8 @@ "@angular/material": "^17.3.3", "@angular/router": "^17.3.3", "@streampipes/platform-services": "0.0.1", - "rxjs": "^7.5.7" + "rxjs": "^7.5.7", + "date-fns": "^3.6.0" }, "dependencies": { "tslib": "^2.6.2" diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts index 67892b5dba..40fe20fa0a 100644 --- a/ui/projects/streampipes/shared-ui/src/public-api.ts +++ b/ui/projects/streampipes/shared-ui/src/public-api.ts @@ -41,6 +41,7 @@ export * from './lib/components/sp-table/sp-table.component'; export * from './lib/components/warning-box/warning-box.component'; export * from './lib/components/time-selector/time-range-selector.component'; export * from './lib/components/time-selector/time-selector-menu/time-selector-menu.component'; +export * from './lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component'; export * from './lib/models/sp-navigation.model'; diff --git a/ui/projects/streampipes/shared-ui/tsconfig.lib.json b/ui/projects/streampipes/shared-ui/tsconfig.lib.json index e2c590dbbf..0b34959311 100644 --- a/ui/projects/streampipes/shared-ui/tsconfig.lib.json +++ b/ui/projects/streampipes/shared-ui/tsconfig.lib.json @@ -8,7 +8,7 @@ "declarationMap": true, "inlineSources": true, "types": [], - "lib": ["dom", "es2018"] + "lib": ["dom", "es2020"] }, "exclude": ["src/test.ts", "**/*.spec.ts"] } From 43e4eb7f6a1965fd0b30c546f5e33e22b07ef355 Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Thu, 31 Oct 2024 15:34:39 +0100 Subject: [PATCH 4/8] Added option to customize date range quick selections --- .../src/lib/model/datalake/DateRange.ts | 47 ++++++- .../time-range-selector.component.html | 1 + .../time-range-selector.component.ts | 15 ++- ...custom-time-range-selection.component.html | 5 +- .../custom-time-range-selection.component.ts | 32 ++++- .../time-selector-menu.component.ts | 1 + .../lib/services/time-selection.service.ts | 127 +++++++++++++----- ...data-explorer-dashboard-panel.component.ts | 4 +- ...ata-explorer-dashboard-widget.component.ts | 2 +- .../data-explorer-detect-changes.service.ts | 2 +- 10 files changed, 187 insertions(+), 49 deletions(-) diff --git a/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts b/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts index 9f3cff7d29..b3b417bb54 100644 --- a/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts +++ b/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts @@ -21,7 +21,50 @@ export interface TimeSettings { endTime: number; // deprecated dynamicSelection?: 15 | 60 | 1440 | 10080 | 43800 | 525600 | -1; - timeSelectionId?: TimeSelectionId; + timeSelectionId?: string; +} + +export class TimeSelectionConstants { + static CUSTOM = 'custom'; + static LAST_15_MINUTES = 'last-15-minutes'; + static LAST_HOUR = 'last-hour'; + static CURRENT_HOUR = 'current-hour'; + static LAST_DAY = 'last-day'; + static CURRENT_DAY = 'current-day'; + static LAST_WEEK = 'last-week'; + static CURRENT_WEEK = 'current-week'; + static LAST_MONTH = 'last-month'; + static CURRENT_MONTH = 'current-month'; + static LAST_YEAR = 'last-year'; + static CURRENT_YEAR = 'current-year'; + + static getLegacyTimeSelectionID(legacyID: number) { + if (legacyID === 0) { + return TimeSelectionConstants.CUSTOM; + } else if (legacyID === 1) { + return TimeSelectionConstants.LAST_15_MINUTES; + } else if (legacyID === 2) { + return TimeSelectionConstants.LAST_HOUR; + } else if (legacyID === 3) { + return TimeSelectionConstants.CURRENT_HOUR; + } else if (legacyID === 4) { + return TimeSelectionConstants.LAST_DAY; + } else if (legacyID === 5) { + return TimeSelectionConstants.CURRENT_DAY; + } else if (legacyID === 6) { + return TimeSelectionConstants.LAST_WEEK; + } else if (legacyID === 7) { + return TimeSelectionConstants.CURRENT_WEEK; + } else if (legacyID === 8) { + return TimeSelectionConstants.LAST_MONTH; + } else if (legacyID === 9) { + return TimeSelectionConstants.CURRENT_MONTH; + } else if (legacyID === 10) { + return TimeSelectionConstants.LAST_YEAR; + } else if (legacyID === 11) { + return TimeSelectionConstants.CURRENT_YEAR; + } + } } export interface WidgetTimeSettings { @@ -53,7 +96,7 @@ export enum TimeSelectionId { export interface QuickTimeSelection { label: string; - timeSelectionId: TimeSelectionId; + timeSelectionId: string; startTime: (now: Date) => Date; endTime: (now: Date) => Date; addDividerAfter?: boolean; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index eb51825326..4e515e0694 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -64,6 +64,7 @@ #timeSelectorMenu [timeSettings]="timeSettings" (timeSettingsEmitter)="applyCurrentDateRange($event)" + [quickSelections]="quickSelections" class="w-100" > 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 a2b663d5b3..7f992c4803 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 @@ -28,7 +28,8 @@ import { ViewEncapsulation, } from '@angular/core'; import { - TimeSelectionId, + QuickTimeSelection, + TimeSelectionConstants, TimeSettings, TimeString, } from '@streampipes/platform-services'; @@ -55,6 +56,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { @Input() showTimeSelector = true; + @Input() + quickSelections: QuickTimeSelection[] = []; + simpleTimeString: string = ''; timeString: TimeString; timeStringMode: 'simple' | 'advanced' = 'simple'; @@ -62,6 +66,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { constructor(private timeSelectionService: TimeSelectionService) {} ngOnInit() { + this.timeSelectionService.initializeQuickTimeSelection( + this.quickSelections, + ); this.createDateString(); } @@ -112,7 +119,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { this.timeSettings.startTime = newStartTime; this.timeSettings.endTime = newEndTime; - this.timeSettings.timeSelectionId = TimeSelectionId.CUSTOM; + this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM; this.timeSelectorMenu.triggerDisplayUpdate(); this.createDateString(); this.reloadData(); @@ -126,7 +133,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { } createDateString(): void { - if (this.timeSettings.timeSelectionId !== TimeSelectionId.CUSTOM) { + if ( + this.timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM + ) { this.simpleTimeString = this.timeSelectionService.getTimeSelection( this.timeSettings.timeSelectionId, ).label; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html index 1564d9b5dc..fb9d54b368 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html @@ -26,7 +26,7 @@ -
+
+
+ {{ dateRangeString }} +
@@ -48,7 +48,9 @@
{{ timeString.endDate }}  - {{ timeString.endTime }} + {{ + timeString.endTime + }}
@@ -63,8 +65,10 @@ 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 7f992c4803..7e6b95b9b5 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 @@ -36,6 +36,7 @@ import { import { MatMenuTrigger } from '@angular/material/menu'; import { TimeSelectionService } from '../../services/time-selection.service'; import { TimeRangeSelectorMenuComponent } from './time-selector-menu/time-selector-menu.component'; +import { TimeSelectorLabel } from './time-selector.model'; @Component({ selector: 'sp-time-range-selector', @@ -56,9 +57,21 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { @Input() showTimeSelector = true; + @Input() + enableTimeChange = true; + @Input() 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', + }; + simpleTimeString: string = ''; timeString: TimeString; timeStringMode: 'simple' | 'advanced' = 'simple'; @@ -69,6 +82,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { this.timeSelectionService.initializeQuickTimeSelection( this.quickSelections, ); + this.quickSelections = this.timeSelectionService.quickTimeSelections; this.createDateString(); } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html index fb9d54b368..38fba4f86d 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.html @@ -26,7 +26,7 @@ -
+
-
+
{{ dateRangeString }}
+
+ {{ + labels.maxDayRangeErrorLabel.replace( + '${this.maxDayRange}', + maxDayRange.toString() + ) + }} +
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss index ce53cf59ea..d181ae05dd 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.scss @@ -20,3 +20,8 @@ font-family: inherit; font-size: 11pt; } + +.max-date-range-error { + font-size: 9pt; + color: var(--color-warn); +} diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index 4bd548828c..f6f1f1d395 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts @@ -26,6 +26,8 @@ import { DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel, } from '@angular/material/datepicker'; +import { differenceInDays } from 'date-fns'; +import { TimeSelectorLabel } from '../../time-selector.model'; @Component({ selector: 'sp-custom-time-range-selection', @@ -35,8 +37,16 @@ import { export class CustomTimeRangeSelectionComponent implements OnInit { @Input() timeSettings: TimeSettings; + @Input() labels: TimeSelectorLabel; + + @Input() + enableTimeChange = true; + @Input() - showTimeSelection: boolean = false; + enableMaxDayRange: boolean = true; + + @Input() + maxDayRange = 0; @Output() timeSettingsEmitter = new EventEmitter(); @@ -48,6 +58,8 @@ export class CustomTimeRangeSelectionComponent implements OnInit { dateSelectionComplete = false; dateRangeString: string; + maxDateRangeError = false; + constructor( private readonly selectionModel: MatRangeDateSelectionModel, private readonly selectionStrategy: DefaultMatCalendarRangeStrategy, @@ -87,7 +99,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { } formatDate(date: Date): string { - if (this.showTimeSelection === true) { + if (this.enableTimeChange === true) { return date?.toLocaleDateString() || '-'; } else { return date?.toLocaleDateString() || ' '; @@ -95,6 +107,7 @@ export class CustomTimeRangeSelectionComponent implements OnInit { } onDateChange(selectedDate: Date): void { + this.maxDateRangeError = false; const newSelection = this.selectionStrategy.selectionFinished( selectedDate, this.selectionModel.selection, @@ -104,12 +117,23 @@ export class CustomTimeRangeSelectionComponent implements OnInit { newSelection.start, newSelection.end, ); - this.dateSelectionComplete = this.selectionModel.isComplete(); this.updateDateStrings(); + const daysDiff = differenceInDays(newSelection.end, newSelection.start); + if (this.selectionModel.isComplete()) { + if (this.maxDayRange === 0 || daysDiff + 1 <= this.maxDayRange) { + this.dateSelectionComplete = true; + if (!this.enableTimeChange) { + this.saveSelection(); + } + } else { + this.maxDateRangeError = true; + this.dateSelectionComplete = false; + } + } } saveSelection(): void { - if (this.showTimeSelection === true) { + if (this.enableTimeChange === true) { this.updateDateTime( this.currentDateRange.start, this.currentStartTime, diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html index e53550aa43..3306fb770f 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html @@ -16,11 +16,13 @@ ~ --> -
+
-
Quick selection
+
+ {{ labels.quickSelectionLabel }} +
-
Custom
+
{{ labels.customLabel }}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts index 4ad9a187fc..14faaee3ca 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts @@ -30,6 +30,7 @@ import { } from '@streampipes/platform-services'; import { TimeSelectionService } from '../../../services/time-selection.service'; import { CustomTimeRangeSelectionComponent } from './custom-time-range-selection/custom-time-range-selection.component'; +import { TimeSelectorLabel } from '../time-selector.model'; @Component({ selector: 'sp-time-selector-menu', @@ -40,21 +41,25 @@ export class TimeRangeSelectorMenuComponent implements OnInit { @Input() timeSettings: TimeSettings; + @Input() + labels: TimeSelectorLabel; + + @Input() + enableTimeChange = true; + @Output() timeSettingsEmitter: EventEmitter = new EventEmitter(); @Input() - quickSelections: QuickTimeSelection[] = []; + quickSelections: QuickTimeSelection[]; @ViewChild('timeRangeSelection') timeRangeSelection: CustomTimeRangeSelectionComponent; constructor(private timeSelectionService: TimeSelectionService) {} - ngOnInit(): void { - this.quickSelections = this.timeSelectionService.quickTimeSelections; - } + ngOnInit(): void {} applyQuickSelection(quickSelection: QuickTimeSelection): void { const selectedDateRange = diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts new file mode 100644 index 0000000000..48daed463a --- /dev/null +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts @@ -0,0 +1,6 @@ +export interface TimeSelectorLabel { + quickSelectionLabel: string; + customLabel: string; + maxDayRangeErrorLabel: string; + timeRangeSelectorTooltip: string; +} From 230340cab917ed361ce27bfe785a862588772930 Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Tue, 5 Nov 2024 09:55:02 +0100 Subject: [PATCH 6/8] Add license header for time-selector-model --- .../time-selector/time-selector.model.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts index 48daed463a..7905f9ff09 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector.model.ts @@ -1,3 +1,21 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + export interface TimeSelectorLabel { quickSelectionLabel: string; customLabel: string; From 45903cc9ae67d084b6e8f7eb63af79a303f2764b Mon Sep 17 00:00:00 2001 From: Marcelfrueh <78954450+Marcelfrueh@users.noreply.github.com> Date: Tue, 5 Nov 2024 13:10:18 +0100 Subject: [PATCH 7/8] Add feature to set date format to local settings --- .../time-range-selector.component.html | 28 +++++++++---------- .../time-range-selector.component.scss | 3 +- .../time-range-selector.component.ts | 20 +++++++++++-- .../custom-time-range-selection.component.ts | 7 ++--- .../time-selector-menu.component.html | 1 + .../time-selector-menu.component.ts | 5 +++- 6 files changed, 41 insertions(+), 23 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index 9b9a3bc6e9..4254f77e19 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -34,24 +34,23 @@ data-cy="time-selector-menu" (menuClosed)="menuTrigger.closeMenu()" > -
-
- {{ - timeString.startDate - }}  - {{ +
+ {{ timeString.startDate }} + +  {{ timeString.startTime }} -
- - -
- {{ timeString.endDate }}  - {{ + +  -  + {{ timeString.endDate }} + +  {{ timeString.endTime }} -
+
{{ simpleTimeString }} @@ -69,6 +68,7 @@ (timeSettingsEmitter)="applyCurrentDateRange($event)" [quickSelections]="quickSelections" [enableTimeChange]="enableTimeChange" + [maxDayRange]="maxDayRange" class="w-100" > diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss index 28deb3738b..19107dc1c1 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.scss @@ -63,8 +63,9 @@ } .formatted-datetime { - display: inline; + display: inline-flex; background: var(--color-bg-2); border-radius: 5px; padding: 5px; + white-space: nowrap; } 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 7e6b95b9b5..7641185dc1 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 @@ -60,6 +60,9 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { @Input() enableTimeChange = true; + @Input() + maxDayRange = 0; + @Input() quickSelections: QuickTimeSelection[] = []; @@ -75,6 +78,12 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { simpleTimeString: string = ''; timeString: TimeString; timeStringMode: 'simple' | 'advanced' = 'simple'; + dateFormat: Intl.DateTimeFormatOptions = { + weekday: 'short', + year: 'numeric', + month: 'numeric', + day: 'numeric', + }; constructor(private timeSelectionService: TimeSelectionService) {} @@ -158,12 +167,19 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { const startDate = new Date(this.timeSettings.startTime); const endDate = new Date(this.timeSettings.endTime); this.timeString = { - startDate: startDate.toLocaleDateString(), - endDate: endDate.toLocaleDateString(), + startDate: this.formatDate(startDate), + endDate: this.formatDate(endDate), startTime: startDate.toLocaleTimeString(), endTime: endDate.toLocaleTimeString(), }; + this.timeStringMode = 'advanced'; } } + + private formatDate(date: Date): string { + return this.enableTimeChange + ? date.toLocaleDateString() + : date.toLocaleDateString(navigator.language, this.dateFormat); + } } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index f6f1f1d395..ae1422e066 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts @@ -40,13 +40,10 @@ export class CustomTimeRangeSelectionComponent implements OnInit { @Input() labels: TimeSelectorLabel; @Input() - enableTimeChange = true; + enableTimeChange: boolean; @Input() - enableMaxDayRange: boolean = true; - - @Input() - maxDayRange = 0; + maxDayRange: number; @Output() timeSettingsEmitter = new EventEmitter(); diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html index 3306fb770f..2bfda05f10 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.html @@ -48,6 +48,7 @@ [labels]="labels" (timeSettingsEmitter)="timeSettingsEmitter.emit($event)" [enableTimeChange]="enableTimeChange" + [maxDayRange]="maxDayRange" class="w-100" > diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts index 14faaee3ca..a2748d9a47 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts @@ -45,7 +45,10 @@ export class TimeRangeSelectorMenuComponent implements OnInit { labels: TimeSelectorLabel; @Input() - enableTimeChange = true; + enableTimeChange: boolean; + + @Input() + maxDayRange: number; @Output() timeSettingsEmitter: EventEmitter = From e5a00b145ed0d72da0cca02dd81b5870770259d3 Mon Sep 17 00:00:00 2001 From: Dominik Riemer Date: Mon, 18 Nov 2024 13:30:23 +0100 Subject: [PATCH 8/8] Fix time selection --- .../src/lib/model/datalake/DateRange.ts | 1 + .../time-range-selector.component.html | 20 +++-- .../time-range-selector.component.ts | 27 ++++-- .../custom-time-range-selection.component.ts | 14 ++-- .../lib/services/time-selection.service.ts | 83 ++++++------------- ...data-explorer-dashboard-panel.component.ts | 2 + .../data-explorer-data-view.component.ts | 1 + .../base-data-explorer-widget.directive.ts | 2 + 8 files changed, 69 insertions(+), 81 deletions(-) diff --git a/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts b/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts index b3b417bb54..f061e5daff 100644 --- a/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts +++ b/ui/projects/streampipes/platform-services/src/lib/model/datalake/DateRange.ts @@ -77,6 +77,7 @@ export interface TimeString { startTime: string; endDate: string; endTime: string; + sameDay: boolean; } export enum TimeSelectionId { diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html index 4254f77e19..a959404dca 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.html @@ -44,13 +44,15 @@ timeString.startTime }} -  -  - {{ timeString.endDate }} - -  {{ - timeString.endTime - }} - +
+  -  + {{ timeString.endDate }} + +  {{ + timeString.endTime + }} + +
{{ simpleTimeString }} @@ -76,12 +78,12 @@
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 7641185dc1..ad8ef22523 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 @@ -37,6 +37,7 @@ import { MatMenuTrigger } from '@angular/material/menu'; import { TimeSelectionService } from '../../services/time-selection.service'; import { TimeRangeSelectorMenuComponent } from './time-selector-menu/time-selector-menu.component'; import { TimeSelectorLabel } from './time-selector.model'; +import { differenceInMilliseconds, isSameDay } from 'date-fns'; @Component({ selector: 'sp-time-range-selector', @@ -64,7 +65,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { maxDayRange = 0; @Input() - quickSelections: QuickTimeSelection[] = []; + quickSelections: QuickTimeSelection[]; @Input() labels: TimeSelectorLabel = { @@ -88,10 +89,10 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { constructor(private timeSelectionService: TimeSelectionService) {} ngOnInit() { - this.timeSelectionService.initializeQuickTimeSelection( - this.quickSelections, - ); - this.quickSelections = this.timeSelectionService.quickTimeSelections; + if (!this.quickSelections) { + this.quickSelections = + this.timeSelectionService.defaultQuickTimeSelections; + } this.createDateString(); } @@ -125,6 +126,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { updateTimeSettingsAndReload() { this.timeSelectionService.updateTimeSettings( + this.quickSelections, this.timeSettings, new Date(), ); @@ -135,10 +137,15 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { } private changeTimeByInterval(func: (a: number, b: number) => number) { - const difference = - this.timeSettings.endTime - this.timeSettings.startTime; - const newStartTime = func(this.timeSettings.startTime, difference); - const newEndTime = func(this.timeSettings.endTime, difference); + const timeDiff = + (differenceInMilliseconds( + this.timeSettings.startTime, + this.timeSettings.endTime, + ) - + 1) * + -1; + const newStartTime = func(this.timeSettings.startTime, timeDiff); + const newEndTime = func(this.timeSettings.endTime, timeDiff); this.timeSettings.startTime = newStartTime; this.timeSettings.endTime = newEndTime; @@ -160,6 +167,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { this.timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM ) { this.simpleTimeString = this.timeSelectionService.getTimeSelection( + this.quickSelections, this.timeSettings.timeSelectionId, ).label; this.timeStringMode = 'simple'; @@ -171,6 +179,7 @@ export class TimeRangeSelectorComponent implements OnInit, OnChanges { endDate: this.formatDate(endDate), startTime: startDate.toLocaleTimeString(), endTime: endDate.toLocaleTimeString(), + sameDay: isSameDay(startDate, endDate), }; this.timeStringMode = 'advanced'; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index ae1422e066..5843f03a68 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts @@ -26,7 +26,7 @@ import { DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel, } from '@angular/material/datepicker'; -import { differenceInDays } from 'date-fns'; +import { differenceInDays, endOfDay, startOfDay } from 'date-fns'; import { TimeSelectorLabel } from '../../time-selector.model'; @Component({ @@ -136,13 +136,17 @@ export class CustomTimeRangeSelectionComponent implements OnInit { this.currentStartTime, ); this.updateDateTime(this.currentDateRange.end, this.currentEndTime); + this.timeSettings.startTime = this.currentDateRange.start.getTime(); + this.timeSettings.endTime = this.currentDateRange.end.getTime(); } else { - this.updateDateTime(this.currentDateRange.start, '00:00:00'); - this.updateDateTime(this.currentDateRange.end, '23:59:59'); + this.timeSettings.startTime = startOfDay( + this.currentDateRange.start, + ).getTime(); + this.timeSettings.endTime = endOfDay( + this.currentDateRange.end, + ).getTime(); } - this.timeSettings.startTime = this.currentDateRange.start.getTime(); - this.timeSettings.endTime = this.currentDateRange.end.getTime(); this.timeSettings.timeSelectionId = TimeSelectionConstants.CUSTOM; this.timeSettingsEmitter.emit(this.timeSettings); } 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 d44d641a88..a635ab1c54 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 @@ -27,7 +27,6 @@ import { } from '@streampipes/platform-services'; import { startOfDay, - endOfDay, startOfHour, startOfMonth, startOfWeek, @@ -120,54 +119,6 @@ export class TimeSelectionService { }, ]; - quickTimeSelections: QuickTimeSelection[] = - this.defaultQuickTimeSelections.map(selection => ({ - ...selection, - })); - - public initializeQuickTimeSelection( - quickSelection: QuickTimeSelection[], - ): void { - const isDifferentFromCurrent = !this.areSelectionsEqual( - this.quickTimeSelections, - quickSelection, - ); - const isDifferentFromDefault = !this.areSelectionsEqual( - this.defaultQuickTimeSelections, - quickSelection, - ); - - if (isDifferentFromCurrent && quickSelection.length !== 0) { - this.quickTimeSelections = quickSelection.map(selection => ({ - ...selection, - })); - } else if (!isDifferentFromDefault) { - this.quickTimeSelections = this.defaultQuickTimeSelections.map( - selection => ({ - ...selection, - }), - ); - } - } - - public areSelectionsEqual( - defaultQuickTimeSelections: QuickTimeSelection[], - newQuickTimeSelections: QuickTimeSelection[], - ): boolean { - if (defaultQuickTimeSelections.length !== newQuickTimeSelections.length) - return false; - - return defaultQuickTimeSelections.every((itemA, index) => { - const itemB = newQuickTimeSelections[index]; - return ( - itemA.label === itemB.label && - itemA.timeSelectionId === itemB.timeSelectionId && - itemA.startTime.toString() === itemB.startTime.toString() && - itemA.endTime.toString() === itemB.endTime.toString() - ); - }); - } - public getDateRange(quickSelection: QuickTimeSelection): DateRange { const now = new Date(); return { @@ -178,13 +129,21 @@ export class TimeSelectionService { public getDefaultTimeSettings(): TimeSettings { return this.getTimeSettings( - this.quickTimeSelections[0].timeSelectionId, + this.defaultQuickTimeSelections, + this.defaultQuickTimeSelections[0].timeSelectionId, new Date(), ); } - public getTimeSettings(timeSelectionId: string, now: Date): TimeSettings { - const selection = this.getTimeSelection(timeSelectionId); + public getTimeSettings( + quickTimeSelections: QuickTimeSelection[], + timeSelectionId: string, + now: Date, + ): TimeSettings { + const selection = this.getTimeSelection( + quickTimeSelections, + timeSelectionId, + ); return { startTime: selection.startTime(now).getTime(), endTime: selection.endTime(now).getTime(), @@ -193,7 +152,11 @@ export class TimeSelectionService { }; } - public updateTimeSettings(timeSettings: TimeSettings, now: Date): void { + public updateTimeSettings( + quickTimeSelections: QuickTimeSelection[], + timeSettings: TimeSettings, + now: Date, + ): void { // for backwards compatibility if (timeSettings.timeSelectionId === undefined) { timeSettings.timeSelectionId = @@ -206,14 +169,15 @@ export class TimeSelectionService { } if (timeSettings.timeSelectionId !== TimeSelectionConstants.CUSTOM) { if ( - this.quickTimeSelections.find( + quickTimeSelections.find( s => s.timeSelectionId === timeSettings.timeSelectionId, ) === undefined ) { timeSettings.timeSelectionId = - this.quickTimeSelections[0].timeSelectionId; + quickTimeSelections[0].timeSelectionId; } const updatedTimeSettings = this.getTimeSettings( + quickTimeSelections, timeSettings.timeSelectionId, now, ); @@ -222,11 +186,14 @@ export class TimeSelectionService { } } - public getTimeSelection(timeSelectionId: string): QuickTimeSelection { + public getTimeSelection( + quickTimeSelections: QuickTimeSelection[], + timeSelectionId: string, + ): QuickTimeSelection { return ( - this.quickTimeSelections.find( + quickTimeSelections.find( s => s.timeSelectionId === timeSelectionId, - ) || this.quickTimeSelections[0] + ) || quickTimeSelections[0] ); } diff --git a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts index 5a64071cb0..ab3715cefc 100644 --- a/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts +++ b/ui/src/app/data-explorer/components/dashboard/data-explorer-dashboard-panel.component.ts @@ -224,6 +224,7 @@ export class DataExplorerDashboardPanelComponent this.timeSelectionService.getDefaultTimeSettings(); } else { this.timeSelectionService.updateTimeSettings( + this.timeSelectionService.defaultQuickTimeSelections, this.dashboard.dashboardTimeSettings, new Date(), ); @@ -301,6 +302,7 @@ export class DataExplorerDashboardPanelComponent .pipe( switchMap(() => { this.timeSelectionService.updateTimeSettings( + this.timeSelectionService.defaultQuickTimeSelections, this.timeSettings, new Date(), ); diff --git a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts index 6ede8d66cb..f78329f924 100644 --- a/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts +++ b/ui/src/app/data-explorer/components/data-view/data-explorer-data-view.component.ts @@ -90,6 +90,7 @@ export class DataExplorerDataViewComponent this.timeSettings = this.makeDefaultTimeSettings(); } else { this.timeSelectionService.updateTimeSettings( + this.timeSelectionService.defaultQuickTimeSelections, this.dataView.timeSettings as TimeSettings, new Date(), ); diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts index b28d5ac40a..3d5c8b5d17 100644 --- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts +++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.directive.ts @@ -205,6 +205,8 @@ export abstract class BaseDataExplorerWidgetDirective< this.timeSettings = widgetTimeSettings.timeSettings; } else { this.timeSelectionService.updateTimeSettings( + this.timeSelectionService + .defaultQuickTimeSelections, this.timeSettings, new Date(), );