Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(17451): add date filtering on the Event Log #191

Merged
merged 30 commits into from
Nov 15, 2023

Conversation

vanch3d
Copy link
Contributor

@vanch3d vanch3d commented Nov 10, 2023

See https://hivemq.kanbanize.com/ctrl_board/57/cards/17451/details/

This PR is the initial step of an evolutionary component for filtering a timestamped table by date and time.

Design

It aims at replicating the pattern that is now common in many timestamped systems like DataDog or Sentry by creating a modular component that provides three levels of user interaction:

  • a simple context-based list of predefined time/date filters (e.g. past 5 minutes)
  • access to a full date/time picker for fine-tuned data entry
  • a template-based open-text component allowing fine tuning and locale-based time range definition (e.g. "yesterday" or "past 12 minutes).

1014514dEFLZu0L

Implementation

In the Event Log:

  • the component is deployed in the paginated table as a single filter in the Created column, controlling a "from now to ..." pattern.
  • the component is based on the same select component, ensuring consistency across the filters
  • only the predefined list of time ranges is implemented in the PR
  • the choice of the listed patterns is context-based and depends on the minimum and maximum values of the table (e.g. if the presented data only covers the past hour, no "the past week" option will be accessible)
  • The filter is faceted with the other filters (text-based)

Out-of-scope

  • the full date/time picker will be part of a subsequent ticket
  • the open-text component will be part of a subsequent ticket
  • any provision for a "between ... and ..." range pattern will be part of a subsequent ticket

Before

screenshot-localhost_3000-2023 11 10-12_51_24

After

screenshot-localhost_3000-2023 11 10-12_53_30

screenshot-localhost_3000-2023 11 10-12_54_37

screenshot-localhost_3000-2023 11 10-12_55_10

screenshot-localhost_3000-2023 11 10-12_55_39

screenshot-localhost_3000-2023 11 10-12_56_12

@vanch3d vanch3d self-assigned this Nov 10, 2023
@cla-bot cla-bot bot added the cla-signed label Nov 10, 2023
@vanch3d vanch3d marked this pull request as ready for review November 13, 2023 09:20
@vanch3d vanch3d force-pushed the feat/17451/date-filter-paginated-table branch from 8f677ec to 20caf65 Compare November 14, 2023 10:47
@vanch3d vanch3d force-pushed the feat/17451/date-filter-paginated-table branch from 20caf65 to 72370c9 Compare November 15, 2023 15:43
const diff = max.diff(min, ['months', 'weeks', 'days', 'hours', 'minutes']).toObject()
const options: RangeOption[] = []

if (diff['months']) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it would make senses to split that function into smaller ones?

@vanch3d vanch3d merged commit e83c1c8 into master Nov 15, 2023
9 checks passed
@vanch3d vanch3d deleted the feat/17451/date-filter-paginated-table branch November 15, 2023 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants