This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch
2411-replace-angular-datetime-picker-with-alternative
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/2411-replace-angular-datetime-picker-with-alternative by this push:
new 1f6fea543 refactor(#2411): Remove angular-datetime-picker and add new
date input
1f6fea543 is described below
commit 1f6fea543211b394678d171721561ee37e6124b3
Author: Philipp Zehnder <[email protected]>
AuthorDate: Tue Jan 9 17:29:44 2024 +0100
refactor(#2411): Remove angular-datetime-picker and add new date input
---
ui/cypress/support/utils/datalake/DataLakeUtils.ts | 19 +----
ui/package-lock.json | 91 ++++++++++++----------
ui/package.json | 2 +-
.../date-input/date-input.component.html | 24 ++++++
.../date-input.component.scss} | 49 +-----------
.../date-input.component.ts} | 74 +++++++-----------
.../time-selector/timeRangeSelector.component.html | 43 ++++------
.../time-selector/timeRangeSelector.component.scss | 10 +--
ui/src/app/data-explorer/data-explorer.module.ts | 2 +
9 files changed, 122 insertions(+), 192 deletions(-)
diff --git a/ui/cypress/support/utils/datalake/DataLakeUtils.ts
b/ui/cypress/support/utils/datalake/DataLakeUtils.ts
index 619e5dd62..f3abd1ecd 100644
--- a/ui/cypress/support/utils/datalake/DataLakeUtils.ts
+++ b/ui/cypress/support/utils/datalake/DataLakeUtils.ts
@@ -316,30 +316,15 @@ export class DataLakeUtils {
public static selectTimeRange(from: Date, to: Date) {
DataLakeUtils.setTimeInput('time-range-from', from);
- DataLakeUtils.clickCancelTime();
DataLakeUtils.setTimeInput('time-range-to', to);
- DataLakeUtils.clickCancelTime();
}
public static setTimeInput(field: string, date: Date) {
- cy.dataCy(field)
- .clear({ force: true })
- .type(DataLakeUtils.makeTimeString(date), { force: true });
- }
-
- public static clickCancelTime() {
- cy.get('.owl-dt-container-buttons > button:nth-child(1)').click();
- cy.wait(1000);
+ cy.dataCy(field).type(DataLakeUtils.makeTimeString(date));
}
public static makeTimeString(date: Date) {
- return date.toLocaleString('en-US', {
- month: 'numeric',
- day: 'numeric',
- year: 'numeric',
- hour: 'numeric',
- minute: 'numeric',
- });
+ return date.toISOString().slice(0, 16);
}
public static getFutureDate() {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 67e3ecf9c..2699d910e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -42,6 +42,7 @@
"dagre": "0.8.5",
"datatables.net": "^1.13.1",
"datatables.net-dt": "^1.13.1",
+ "date-fns": "^2.30.0",
"echarts": "^5.4.3",
"echarts-simple-transform": "^1.0.0",
"echarts-wordcloud": "^2.1.0",
@@ -3450,11 +3451,11 @@
"dev": true
},
"node_modules/@babel/runtime": {
- "version": "7.20.13",
- "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz";,
- "integrity":
"sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+ "version": "7.23.8",
+ "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz";,
+ "integrity":
"sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
"dependencies": {
- "regenerator-runtime": "^0.13.11"
+ "regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
@@ -3477,6 +3478,11 @@
"resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz";,
"integrity":
"sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
},
+ "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+ "version": "0.14.1",
+ "resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz";,
+ "integrity":
"sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+ },
"node_modules/@babel/template": {
"version": "7.22.5",
"resolved":
"https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz";,
@@ -3717,18 +3723,6 @@
"@babel/core": "^7.0.0-0"
}
},
-
"node_modules/@cypress/webpack-batteries-included-preprocessor/node_modules/@babel/runtime":
{
- "version": "7.23.7",
- "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz";,
- "integrity":
"sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
- "dev": true,
- "dependencies": {
- "regenerator-runtime": "^0.14.0"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/@cypress/webpack-batteries-included-preprocessor/node_modules/buffer":
{
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz";,
@@ -3753,12 +3747,6 @@
"ieee754": "^1.2.1"
}
},
-
"node_modules/@cypress/webpack-batteries-included-preprocessor/node_modules/regenerator-runtime":
{
- "version": "0.14.1",
- "resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz";,
- "integrity":
"sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
- "dev": true
- },
"node_modules/@cypress/webpack-batteries-included-preprocessor/node_modules/semver":
{
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz";,
@@ -11679,6 +11667,21 @@
"jquery": ">=1.7"
}
},
+ "node_modules/date-fns": {
+ "version": "2.30.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz";,
+ "integrity":
"sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+ "dependencies": {
+ "@babel/runtime": "^7.21.0"
+ },
+ "engines": {
+ "node": ">=0.11"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/date-fns";
+ }
+ },
"node_modules/date-format": {
"version": "4.0.14",
"resolved":
"https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz";,
@@ -22537,7 +22540,8 @@
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz";,
- "integrity":
"sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+ "integrity":
"sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+ "dev": true
},
"node_modules/regenerator-transform": {
"version": "0.15.2",
@@ -29317,11 +29321,18 @@
"dev": true
},
"@babel/runtime": {
- "version": "7.20.13",
- "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz";,
- "integrity":
"sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+ "version": "7.23.8",
+ "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz";,
+ "integrity":
"sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
"requires": {
- "regenerator-runtime": "^0.13.11"
+ "regenerator-runtime": "^0.14.0"
+ },
+ "dependencies": {
+ "regenerator-runtime": {
+ "version": "0.14.1",
+ "resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz";,
+ "integrity":
"sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+ }
}
},
"@babel/runtime-corejs3": {
@@ -29545,15 +29556,6 @@
"semver": "^6.3.1"
}
},
- "@babel/runtime": {
- "version": "7.23.7",
- "resolved":
"https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz";,
- "integrity":
"sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
- "dev": true,
- "requires": {
- "regenerator-runtime": "^0.14.0"
- }
- },
"buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz";,
@@ -29564,12 +29566,6 @@
"ieee754": "^1.2.1"
}
},
- "regenerator-runtime": {
- "version": "0.14.1",
- "resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz";,
- "integrity":
"sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
- "dev": true
- },
"semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz";,
@@ -35870,6 +35866,14 @@
"jquery": ">=1.7"
}
},
+ "date-fns": {
+ "version": "2.30.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz";,
+ "integrity":
"sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+ "requires": {
+ "@babel/runtime": "^7.21.0"
+ }
+ },
"date-format": {
"version": "4.0.14",
"resolved":
"https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz";,
@@ -44069,7 +44073,8 @@
"regenerator-runtime": {
"version": "0.13.11",
"resolved":
"https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz";,
- "integrity":
"sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+ "integrity":
"sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+ "dev": true
},
"regenerator-transform": {
"version": "0.15.2",
diff --git a/ui/package.json b/ui/package.json
index c3eaa6a39..95470d808 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -47,7 +47,6 @@
"@auth0/angular-jwt": "^5.2.0",
"@ali-hm/angular-tree-component": "12.0.5",
"@ctrl/ngx-codemirror": "6.1.0",
- "@danielmoncada/angular-datetime-picker": "^16.1.0",
"@fortawesome/fontawesome-free": "6.5.1",
"@jsplumb/browser-ui": "^6.2.10",
"@ngx-loading-bar/core": "6.0.2",
@@ -64,6 +63,7 @@
"dagre": "0.8.5",
"datatables.net": "^1.13.1",
"datatables.net-dt": "^1.13.1",
+ "date-fns": "^2.30.0",
"echarts": "^5.4.3",
"echarts-wordcloud": "^2.1.0",
"echarts-simple-transform": "^1.0.0",
diff --git
a/ui/src/app/data-explorer/components/date-input/date-input.component.html
b/ui/src/app/data-explorer/components/date-input/date-input.component.html
new file mode 100644
index 000000000..32146d509
--- /dev/null
+++ b/ui/src/app/data-explorer/components/date-input/date-input.component.html
@@ -0,0 +1,24 @@
+<!--
+ ~ 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.
+ ~
+ -->
+<input
+ class="sp-date-input"
+ type="datetime-local"
+ [value]="formattedDate"
+ (blur)="onDateChange($event.target.value)"
+ step="1"
+/>
diff --git
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
b/ui/src/app/data-explorer/components/date-input/date-input.component.scss
similarity index 51%
copy from
ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
copy to ui/src/app/data-explorer/components/date-input/date-input.component.scss
index 4be03f05f..d0cc66e7f 100644
---
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
+++ b/ui/src/app/data-explorer/components/date-input/date-input.component.scss
@@ -16,50 +16,7 @@
*
*/
-@import '../../../../scss/variables';
-
-.start-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.end-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.button-margin {
- border-radius: 0 !important;
- padding-left: 0 !important;
- padding-right: 0 !important;
- margin: 0;
- border-right: 1px solid #cccccc !important;
-}
-
-.button-margin:last-of-type {
- border-right: 0 !important;
-}
-
-.time-range-wrapper {
- border: 1px solid var(--color-accent);
- //background: var(--color-accent);
-}
-
-.time-wrapper {
- border: 1px solid var(--color-accent);
- background: var(--color-bg-0);
-}
-
-.mr--15 {
- margin-right: -15px;
-}
-
-.ml--5 {
- margin-left: -5px;
-}
-
-.mr--5 {
- margin-right: -5px;
+.sp-date-input {
+ font-family: Roboto-Regular;
+ font-size: small;
}
diff --git
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
b/ui/src/app/data-explorer/components/date-input/date-input.component.ts
similarity index 51%
copy from
ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
copy to ui/src/app/data-explorer/components/date-input/date-input.component.ts
index 4be03f05f..9409b0a4f 100644
---
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
+++ b/ui/src/app/data-explorer/components/date-input/date-input.component.ts
@@ -16,50 +16,32 @@
*
*/
-@import '../../../../scss/variables';
-
-.start-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.end-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.button-margin {
- border-radius: 0 !important;
- padding-left: 0 !important;
- padding-right: 0 !important;
- margin: 0;
- border-right: 1px solid #cccccc !important;
-}
-
-.button-margin:last-of-type {
- border-right: 0 !important;
-}
-
-.time-range-wrapper {
- border: 1px solid var(--color-accent);
- //background: var(--color-accent);
-}
-
-.time-wrapper {
- border: 1px solid var(--color-accent);
- background: var(--color-bg-0);
-}
-
-.mr--15 {
- margin-right: -15px;
-}
-
-.ml--5 {
- margin-left: -5px;
-}
-
-.mr--5 {
- margin-right: -5px;
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { format } from 'date-fns';
+
+@Component({
+ selector: 'sp-date-input',
+ templateUrl: './date-input.component.html',
+ styleUrls: ['./date-input.component.scss'],
+})
+export class DateInputComponent {
+ @Input()
+ date: Date;
+
+ @Output()
+ dateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+ @Output()
+ dateChanged = new EventEmitter<void>();
+
+ get formattedDate(): string {
+ return this.date ? format(this.date, "yyyy-MM-dd'T'HH:mm") : '';
+ }
+
+ onDateChange(value: string): void {
+ const updatedDate = new Date(value);
+ this.date = updatedDate;
+ this.dateChange.emit(updatedDate);
+ this.dateChanged.emit();
+ }
}
diff --git
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
index 1ce4b2df1..09f921afe 100644
---
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
+++
b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
@@ -38,38 +38,21 @@
>
<mat-icon (click)="decreaseTime()">navigate_before</mat-icon>
</button>
- <mat-form-field
- fxLayoutAlign="center center"
- class="start-date form-field-margin smaller-font-size
form-field-smaller"
- color="accent"
- appearance="outline"
+ <sp-date-input
+ class="start-date-margin"
+ [(date)]="startDate"
+ (dateChanged)="changeCustomDateRange()"
+ data-cy="time-range-from"
>
- <input
- matInput
- data-cy="time-range-from"
- [owlDateTime]="dt1"
- [owlDateTimeTrigger]="dt1"
- [(ngModel)]="startDate"
- (dateTimeChange)="changeCustomDateRange()"
- />
- <owl-date-time #dt1></owl-date-time>
- </mat-form-field>
- <mat-form-field
- fxLayoutAlign="center center"
- class="end-date form-field-margin form-field-smaller"
- color="accent"
- appearance="outline"
+ </sp-date-input>
+
+ <sp-date-input
+ [(date)]="endDate"
+ (dateChanged)="changeCustomDateRange()"
+ data-cy="time-range-to"
>
- <input
- matInput
- data-cy="time-range-to"
- [owlDateTime]="dt2"
- [owlDateTimeTrigger]="dt2"
- [(ngModel)]="endDate"
- (dateTimeChange)="changeCustomDateRange()"
- />
- <owl-date-time #dt2></owl-date-time>
- </mat-form-field>
+ </sp-date-input>
+
<button
mat-button
class="button-icon icon-button-font-size ml--5 mr--5"
diff --git
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
index 4be03f05f..fb24a7dc6 100644
---
a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
+++
b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
@@ -18,15 +18,7 @@
@import '../../../../scss/variables';
-.start-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.end-date {
- width: 130px;
- margin-left: 5px;
+.start-date-margin {
margin-right: 5px;
}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts
b/ui/src/app/data-explorer/data-explorer.module.ts
index 767478890..78f4b8e78 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -104,6 +104,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
import { ImageViewerComponent } from
'./components/widgets/image/image-viewer/image-viewer.component';
import { ImageBarComponent } from
'./components/widgets/image/image-bar/image-bar.component';
import { ImageBarPreviewComponent } from
'./components/widgets/image/image-bar/image-bar-preview/image-bar-preview.component';
+import { DateInputComponent } from
'./components/date-input/date-input.component';
export const MY_NATIVE_FORMATS = {
fullPickerInput: {
@@ -227,6 +228,7 @@ export const MY_NATIVE_FORMATS = {
DataExplorerVisualisationSettingsComponent,
WidgetDirective,
TooMuchDataComponent,
+ DateInputComponent,
],
providers: [
DatalakeRestService,
