Rebuilding Date/Time Picker for more flexibility by kyleknighted · Pull Request #9569 · Graylog2/graylog2-server

kyleknighted · 2020-11-20T17:14:15Z

Description

Creating new Date & Time Range experience for the Search bar (Dashboard & Widgets included)

Motivation and Context

Allowing more flexibility in the date and time chosen by the User

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * temp -> tempTimeRange * Linting * Keyword output * All time ranges loading properly * react hook linting * lint weak objects * Error on TimeRangeDisplay default type

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * Rendering Live Preview * merge/rebase touchups

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * merge/rebase touchups * Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Flow Tests * Some Cleanup * Linting * Remove TimerangeSelector * Changing From time updates preview & saveable * Relative From Range working * Layout touchup and handle All Time uncheck * RelativeTimeRangeSelector tests * Clean up configuration of relative times * Disable All Time check if query limit defined * Wroking out a couple responsive issues, but needs more drastic code changes to fix other problems * merge/rebase touchups * lint * Updating some tests to get more passing * lint * reverting & commenting * update to newer function style

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * temp -> tempTimeRange * Linting * Keyword output * All time ranges loading properly * react hook linting * lint weak objects * Error on TimeRangeDisplay default type

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Flow Tests * Some Cleanup * Linting * Updating some tests to get more passing * TimeRangeLivePreview tests and flow typing * More tests & linting * failing tests & updated snaps * revert package * updating snaps

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * temp -> tempTimeRange * Linting * Keyword output * All time ranges loading properly * react hook linting * lint weak objects * Error on TimeRangeDisplay default type

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * Rendering Live Preview * merge/rebase touchups

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * merge/rebase touchups * Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Flow Tests * Some Cleanup * Linting * Remove TimerangeSelector * Changing From time updates preview & saveable * Relative From Range working * Layout touchup and handle All Time uncheck * RelativeTimeRangeSelector tests * Clean up configuration of relative times * Disable All Time check if query limit defined * Wroking out a couple responsive issues, but needs more drastic code changes to fix other problems * merge/rebase touchups * lint * Updating some tests to get more passing * lint * reverting & commenting * update to newer function style

…set in date time picker. (#9946)

kmerz

I have problem with the number input for relative timerange, but I will create an Issue for that.
I tested it on my machine and beside the already mentioned problem it is fine.
The only open think is the test which was commented out. Either delete the test if it is not relevant anymore, fix the test or add a comment why you cannot activate the test.

kmerz · 2021-02-04T09:40:40Z

+    //         to: '2019-10-10T12:26:31.146Z',
+    //       },
+    //     })));
+    // });


What is the problem with this?

edmundoa

I haven't looked at the code but clicked around. It all seemed to work and I like it a lot, it makes things way easier to understand in my opinion. Great job! 🎉

kmerz

LGTM 👍
Worked on my machine! ✔️

dennisoelkers

After merging target branch in, I am seeing styling glitches in the absolute time range section:

Also, one suggestion: can we open the date picker when a user clicks on the timerange summary next to it?

kyleknighted · 2021-02-05T16:54:59Z

@dennisoelkers this is actually broken in master and not on this branch

cc: @Gaya

Gaya · 2021-02-08T12:01:20Z

This should fix that problem in develop #10026, sorry for the inconvience

# Conflicts: # graylog2-web-interface/src/components/common/Select.tsx # graylog2-web-interface/src/views/components/DashboardSearchBar.tsx # graylog2-web-interface/src/views/components/SearchBar.tsx # graylog2-web-interface/src/views/components/widgets/EditWidgetFrame.tsx

dennisoelkers

All issues resolved, looks good and works fine! Happy to get this in! 🎉

kyleknighted added 30 commits November 11, 2020 10:56

DateTimePicker Live Preview (#9125)

43027c0

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * Rendering Live Preview * merge/rebase touchups

DateTimePicker Live Preview (#9125)

ebe3737

* Migrating original range options to Popover * Converting existing DateTimePicker to Popover * Styling TimeRangeDisplay * Flow Tests * Some Cleanup * Linting * Rendering Live Preview * merge/rebase touchups

Migrating original range options to Popover

84a518c

Converting existing DateTimePicker to Popover

c18f4c5

Styling TimeRangeDisplay

0b10f1b

Flow Tests

4763a48

Some Cleanup

62a53d3

Linting

cbe100d

Migrating original range options to Popover

4c1f9d7

Converting existing DateTimePicker to Popover

36ab618

Flow Tests

013f337

Some Cleanup

19be2db

Linting

b8a8bcd

Updating some tests to get more passing

41dcd8f

TimeRangeLivePreview tests and flow typing

642812b

More tests & linting

9c315e0

failing tests & updated snaps

fd87ab3

revert package

9eb1857

updating snaps

fe1fdc3

Migrating original range options to Popover

1c8df2e

Converting existing DateTimePicker to Popover

b89a2cd

Some Cleanup

4c591bc

Migrating original range options to Popover

7c490e9

Updating some tests to get more passing

1f982dc

linuspahl added 2 commits February 1, 2021 12:32

Submitting TimeRangeDropDown form on enter. (#9965)

08bd050

Enabling configuration of new relative time range type with range off…

a50f68e

…set in date time picker. (#9946)

kyleknighted added ready-for-review and removed in progress labels Feb 3, 2021

kyleknighted marked this pull request as ready for review February 3, 2021 13:29

kyleknighted requested review from danotorrey, dennisoelkers, edmundoa and kmerz February 3, 2021 13:29

kmerz requested changes Feb 4, 2021

View reviewed changes

kmerz mentioned this pull request Feb 4, 2021

Relative Timerange Input cannot be cleared #10016

Closed

edmundoa approved these changes Feb 4, 2021

View reviewed changes

kyleknighted added 3 commits February 4, 2021 13:08

Merge branch 'master' into feature/DateTimeRange

04293e8

test update

74c1f89

test update to pass lint

23d9d42

kyleknighted requested a review from kmerz February 4, 2021 22:00

kmerz approved these changes Feb 5, 2021

View reviewed changes

dennisoelkers requested changes Feb 5, 2021

View reviewed changes

Merge branch 'master' into feature/DateTimeRange

8584ff9

import css modules as global

67f405c

kyleknighted and others added 4 commits February 8, 2021 06:55

Merge branch 'prevent-generated-classnames' into feature/DateTimeRange

171af27

revert to using css options generate

8431499

Merge branch 'prevent-generated-classnames' into feature/DateTimeRange

4ba2b46

dennisoelkers approved these changes Feb 8, 2021

View reviewed changes

Gaya merged commit 6409181 into master Feb 8, 2021

Gaya deleted the feature/DateTimeRange branch February 8, 2021 16:01

dennisoelkers mentioned this pull request Jun 2, 2021

Query time range limit- does not show warning if time is out of limits #3263

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rebuilding Date/Time Picker for more flexibility#9569

Rebuilding Date/Time Picker for more flexibility#9569
Gaya merged 175 commits intomasterfrom
feature/DateTimeRange

kyleknighted commented Nov 20, 2020 •

edited

Loading

Uh oh!

kmerz left a comment •

edited

Loading

Uh oh!

kmerz Feb 4, 2021

Uh oh!

edmundoa left a comment

Uh oh!

kmerz left a comment

Uh oh!

dennisoelkers left a comment

Uh oh!

kyleknighted commented Feb 5, 2021 •

edited

Loading

Uh oh!

Gaya commented Feb 8, 2021 •

edited

Loading

Uh oh!

dennisoelkers left a comment •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

kyleknighted commented Nov 20, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

kmerz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kmerz Feb 4, 2021

Choose a reason for hiding this comment

Uh oh!

edmundoa left a comment

Choose a reason for hiding this comment

Uh oh!

kmerz left a comment

Choose a reason for hiding this comment

Uh oh!

dennisoelkers left a comment

Choose a reason for hiding this comment

Uh oh!

kyleknighted commented Feb 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gaya commented Feb 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dennisoelkers left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

kyleknighted commented Nov 20, 2020 •

edited

Loading

kmerz left a comment •

edited

Loading

kyleknighted commented Feb 5, 2021 •

edited

Loading

Gaya commented Feb 8, 2021 •

edited

Loading

dennisoelkers left a comment •

edited

Loading