feat(recordings): UI improvements for recording filters

[tthvo]

Welcome to Cryostat! 👋

Before contributing, make sure you have:

• Read the contributing guidelines
• Linked a relevant issue which this PR resolves
• Linked any other relevant issues, PR's, or documentation, if any
• Resolved all conflicts, if any
• Rebased your branch PR on top of the latest upstream main branch
• Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
• Signed all commits using a GPG signature

To recreate commits with GPG signature git fetch upstream && git rebase --force --gpg-sign upstream/main

---

Related to #1303
Depends on #1334

Description of the change:

• Implemented some ideas to improve filter toolbar in Recording table.
• Fixed the typeahead toggle's focus. In PF5, first list item is focused by default, which causes the text input to lose focus, thus typing does not register any characters.

Minor changes

Changes	Description	Screenshot
Use "read" style for count badge (i.e. grey background)	Following PF5 examples. Mostly, to avoid potential misunderstanding for an unread action

Major changes

Changes	Description	Screenshot
Duration Filter should allow range selection and have a search button for confirmation. "Enter" key is still supported	Range selection allows more flexible filter options. Also, it was previously hard to figure out the "Enter" key is for confirmation. The continuous checkout is moved down to make space & it seems similar to that in the Recording Create Form
Combined view for date and time picker. 24-hr mode switch is now replaced with a toggle group (to represent modes, for example, YAML/JSON view). Some border is fixed to match PF styles	A single view reduces the steps required to select a datetime (i.e. avoid switching tabs back and forth)

[github-actions]

This PR/issue depends on:

• chore(pf5): revamp general table styles and upgrade archive/events views to PF5 #1334
  By Dependent Issues (🤖). Happy coding!

[andrewazores]

Awesome work on the filter redesign here, these look and feel great to use!

One behaviour I think might be worth changing:

To me, it "feels" like a Continuous recording should be included in a "duration longer than X" filter, because Continuous ~= "Infinity".

I can get the result I want here by putting in the "duration longer than X" filter plus ticking the Continuous checkbox, but somehow this doesn't feel quite intuitive to me.

[andrewazores]

I can get the result I want here by putting in the "duration longer than X" filter plus ticking the Continuous checkbox, but somehow this doesn't feel quite intuitive to me.

Maybe hitting Enter/clicking Search with only a duration lower bound should auto-tick the Continuous checkbox?

[tthvo]

Maybe hitting Enter/clicking Search with only a duration lower bound should auto-tick the Continuous checkbox?

I think this idea make sense. Just that we have a filter value of "Continuous", which that checkbox handles. If this above idea is implemented, when uncheck the box will now also remove the filters without upper bound? Maybe that would not be okay?

[tthvo]

Maybe hitting Enter/clicking Search with only a duration lower bound should auto-tick the Continuous checkbox?

I think this idea make sense. Just that we have a filter value of "Continuous", which that checkbox handles. If this above idea is implemented, when uncheck the box will now also remove the filters without upper bound? Maybe that would not be okay?

The latest commit should have this behaviour. The checkbox is stucked when there is a filter without an upper bound...

[andrewazores]

I think something about the LocalStorage/Redux changes may have gone wrong. This happens after clearing site data or using a private browsing window (Firefox).

[tthvo]

I think something about the LocalStorage/Redux changes may have gone wrong. This happens after clearing site data or using a private browsing window (Firefox).

Oh hmmm, I don't see that on my side....Is there anything on the console that might give some insights? It does look like something with webpack when it builds the web assets?

[tthvo]

Maybe hitting Enter/clicking Search with only a duration lower bound should auto-tick the Continuous checkbox?

I think this idea make sense. Just that we have a filter value of "Continuous", which that checkbox handles. If this above idea is implemented, when uncheck the box will now also remove the filters without upper bound? Maybe that would not be okay?

The latest commit should have this behaviour. The checkbox is stucked when there is a filter without an upper bound...

For this, the filtering behaviour is as intended. But maybe leave out the visual part where the Continuous checkbox is auto-tick?

[andrewazores]

Whoops, my bad. Ignore me. I forgot to update dependencies again after switching back to testing this branch! It's all good once I make sure I'm actually building with pf5 haha.

[andrewazores]

The latest commit should have this behaviour. The checkbox is stucked when there is a filter without an upper bound...

For this, the filtering behaviour is as intended. But maybe leave out the visual part where the Continuous checkbox is auto-tick?

Hmm. Yes, it's working the way my intuition likes it now, but it does feel like a bug that the box can't be unticked. Maybe disabling it and adding a hover tooltip to explain... ?

[tthvo]

Hmm. Yes, it's working the way my intuition likes it now, but it does feel like a bug that the box can't be unticked. Maybe disabling it and adding a hover tooltip to explain... ?

Actually, that sounds good! How about now?