Table: Add select/unselect all column values to table filter #79290

ahuarte47 · 2023-12-10T10:29:54Z

What is this feature?

This MR adds two buttons to easily select or unselect subset of columns values in Table panels:

New Select values button:
To select the subset of column values currently displayed.
New Unselect values button:
To unselect the subset of column values currently displayed.

Why do we need this feature?

When using big tables there is often a need to filter by values to select many entries. Then you use the filter you can find e.g. 100 of values and there is no possibility to select them all with one click, you need to check them one by one, that is not feasible with such a large number of entries.

Who is this feature for?

Users filtetring large list of values in tables.

Which issue(s) does this PR fix?:

Fixes #79371

Special notes for your reviewer:

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

CLAassistant · 2023-12-10T10:30:01Z

All committers have signed the CLA.

imatwawana

Thanks for the contribution! I'm just reviewing the documentation updates, so there will still need to be a technical review. I've made a couple grammar edits but mostly tried to simplify some of the language. I think we probably also need to think about changing the names of the buttons, but I'd need to see the implementation first (hopefully when all the checks pass, the system will provide a preview).

docs/sources/panels-visualizations/visualizations/table/index.md

ahuarte47 · 2023-12-11T15:49:01Z

thank you very much @imatwawana for you review and help.

oscarkilhed

Hey, thank you for your contribution!

This is useful and the code looks good at first glance (I'll look closer soon). But I think we could improve the UI and the wording on these buttons. @catherineymgui, is this something to bring to one of the UX feedback sessions?

catherineymgui · 2023-12-12T13:54:54Z

Yes, please bring it to a UX feedback session!

ahuarte47 · 2023-12-13T18:04:55Z

Hi there, please, may I propose a new feature in this PR? I have added a new ListBox to alllow users to select what items are displayed using comparison expressions, not only using regex patterns.

It is useful when you need to filter values like numbers.

This new commit shows a list box (In order to do not alter the behavior in other panels, there is in the component a new showOperators flag disabled by default).

I still need to fix an issue with the Select component, I do not know why it closes its parent FilterPopup component when you click an item in the list of operators. Please, do you know why?

What do you think? It can be useful to include? If you disagree, I revert this change.
Thanks in advance

UPDATE:
The Contains operator is the current filter using regex, and it is the default operator.

tjanson · 2023-12-13T18:15:23Z

@ahuarte47 I'm merely a humble user, but I've been looking for this kind of feature for ages. It seems clearly outside the scope of this issue, but while we're at it:

For numeric values, it would be extremely useful to filter by ranges (score > 7, 3 < score < 7),
for text values a simple search would be useful (description contains "openssl"),
for timestamps, time ranges (date before 2022-02-02), and so on.

This can be extended further and further (why not auto-bucket numeric values? arbitrary regular expressions?), but what you propose would already be hugely beneficial.

ahuarte47 · 2023-12-13T18:42:13Z

@ahuarte47 I'm merely a humble user, but I've been looking for this kind of feature for ages. It seems clearly outside the scope of this issue, but while we're at it:
* For numeric values, it would be extremely useful to filter by ranges (`score > 7`, `3 < score < 7`),

* for text values a simple search would be useful (`description contains "openssl"`),

* for timestamps, time ranges (`date before 2022-02-02`), and so on.
This can be extended further and further (why not auto-bucket numeric values? arbitrary regular expressions?), but what you propose would already be hugely beneficial.

Hi @tjanson this extra filter could be implemented in new operator "expression" in this list, but I am not an expert grafana & react developer, any help would be great! I hope I haven't already made a mess in the code.

oscarkilhed · 2023-12-14T09:44:34Z

I think we should keep this PR to the original scope. Smaller incremental improvements are generally preferred.

I brought this change to the UX feedback session and the general consensus was that a UX similar to the github inbox would work better.

ahuarte47 · 2023-12-14T13:06:59Z

I think we should keep this PR to the original scope. Smaller incremental improvements are generally preferred.

OK, great! I remove that extra temporal commit.

reindlt · 2023-12-15T10:04:05Z

Hi, seems to be a similiar functionality as in #79072. If this one is accepted I think the other one could be omitted.

ahuarte47 · 2023-12-19T12:52:09Z

I brought this change to the UX feedback session and the general consensus was that a UX similar to the github inbox would work better.

Hi, I have refactorized this PR, now it is working with a three-state Checkbox:

oscarkilhed · 2023-12-20T08:52:02Z

@ahuarte47 Thank you, I will get back to this soon!

imatwawana · 2023-12-20T14:34:35Z

@ahuarte47 - After @oscarkilhed has completed his review and any changes are implemented, please request review from me again, so I can take another look at the docs with the updated UI. Just FYI, I'll be away until January 2nd after today, so it might be in a couple weeks. In the meantime I've added a label to keep the PR from going stale.

…hub inbox

ahuarte47 · 2023-12-21T14:53:44Z

@tjanson

@ahuarte47 I'm merely a humble user, but I've been looking for this kind of feature for ages. It seems clearly outside the scope of this issue, but while we're at it:
* For numeric values, it would be extremely useful to filter by ranges (`score > 7`, `3 < score < 7`),

* for text values a simple search would be useful (`description contains "openssl"`),

* for timestamps, time ranges (`date before 2022-02-02`), and so on.
This can be extended further and further (why not auto-bucket numeric values? arbitrary regular expressions?), but what you propose would already be hugely beneficial.

I have created a new feature-request issue: #79800 I will try to propose a PR soon.

oscarkilhed

I think this is close to mergable.

I've created a pull request (ahuarte47#1) to your branch to align the select all checkbox with the rest of the checkboxes.

I also removed the "Click to" bit in the checkbox label as I found it superfluous.

Align select all checkbox and fix wording

oscarkilhed

This looks good. When @imatwawana has gone over the docs we can merge this.

imatwawana

One quibble about where the box is located. If I'm wrong, please update my suggestion accordingly and commit to add the text formatting for the buttons.

docs/sources/panels-visualizations/visualizations/table/index.md

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

ahuarte47 · 2024-01-02T19:25:56Z

Thank you very much @imatwawana @oscarkilhed for your help!

ahuarte47 · 2024-01-04T19:10:16Z

Thanks @oscarkilhed @imatwawana for Your help!

imatwawana · 2024-01-04T19:11:53Z

Thanks for the contribution, @ahuarte47! I was literally wishing for the features you've added just a couple weeks ago!

* Add/Remove columns values to the filter using a UX similar to the github inbox * Align select all checkbox and fix wording * Update docs/sources/panels-visualizations/visualizations/table/index.md Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --------- Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com> Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

ahuarte47 requested a review from a team December 10, 2023 10:29

ahuarte47 requested a review from imatwawana as a code owner December 10, 2023 10:29

ahuarte47 requested review from oscarkilhed and baldm0mma and removed request for a team December 10, 2023 10:29

grafana-pr-automation bot added type/docs area/frontend pr/external This PR is from external contributor labels Dec 10, 2023

imatwawana added this to the 10.3.x milestone Dec 11, 2023

imatwawana added the no-backport Skip backport of PR label Dec 11, 2023

imatwawana reviewed Dec 11, 2023

View reviewed changes

ahuarte47 mentioned this pull request Dec 12, 2023

[FeatureRequest] Table column filter by values "check all" functionality #79371

Closed

oscarkilhed reviewed Dec 12, 2023

View reviewed changes

ahuarte47 force-pushed the main_table-select-unselect-values branch from dcb11b9 to 2061652 Compare December 13, 2023 18:34

ahuarte47 force-pushed the main_table-select-unselect-values branch 2 times, most recently from 1b65af9 to fecd54a Compare December 14, 2023 07:26

ahuarte47 force-pushed the main_table-select-unselect-values branch from fecd54a to 26f30b5 Compare December 14, 2023 13:08

ahuarte47 force-pushed the main_table-select-unselect-values branch from 26f30b5 to e4fe747 Compare December 19, 2023 12:50

reindlt mentioned this pull request Dec 20, 2023

TablePanel: Possibility to select all filtered values in the column filter #79065

Closed

imatwawana added the no stalebot exempt from stalebot label Dec 20, 2023

Add/Remove columns values to the filter using a UX similar to the git…

a0974c6

…hub inbox

ahuarte47 force-pushed the main_table-select-unselect-values branch from d5a22a5 to a0974c6 Compare December 21, 2023 07:12

ahuarte47 requested a review from oscarkilhed December 21, 2023 07:13

ahuarte47 mentioned this pull request Dec 25, 2023

Table Panel: Filter column values with operators or expressions #79853

Merged

3 tasks

Align select all checkbox and fix wording

7c18b57

oscarkilhed reviewed Jan 2, 2024

View reviewed changes

Merge pull request #1 from grafana/oscark/filter-list-style-update

c4fd8aa

Align select all checkbox and fix wording

oscarkilhed added the add to changelog label Jan 2, 2024

oscarkilhed changed the title ~~Add select/unselect column values buttons to table panel~~ Table: Add select/unselect column values buttons to table panel Jan 2, 2024

oscarkilhed changed the title ~~Table: Add select/unselect column values buttons to table panel~~ Table: Add select/unselect all column values to table filter Jan 2, 2024

oscarkilhed requested a review from imatwawana January 2, 2024 08:53

oscarkilhed approved these changes Jan 2, 2024

View reviewed changes

imatwawana approved these changes Jan 2, 2024

View reviewed changes

docs/sources/panels-visualizations/visualizations/table/index.md Outdated Show resolved Hide resolved

Update docs/sources/panels-visualizations/visualizations/table/index.md

75cbb46

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

oscarkilhed merged commit 40583ae into grafana:main Jan 4, 2024
17 checks passed

ahuarte47 deleted the main_table-select-unselect-values branch January 5, 2024 17:37

summerwollin modified the milestones: 10.3.x, 10.3.0 Jan 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table: Add select/unselect all column values to table filter #79290

Table: Add select/unselect all column values to table filter #79290

ahuarte47 commented Dec 10, 2023 •

edited

CLAassistant commented Dec 10, 2023 •

edited

imatwawana left a comment

ahuarte47 commented Dec 11, 2023

oscarkilhed left a comment

catherineymgui commented Dec 12, 2023

ahuarte47 commented Dec 13, 2023 •

edited

tjanson commented Dec 13, 2023

ahuarte47 commented Dec 13, 2023 •

edited

oscarkilhed commented Dec 14, 2023 •

edited

ahuarte47 commented Dec 14, 2023

reindlt commented Dec 15, 2023

ahuarte47 commented Dec 19, 2023

oscarkilhed commented Dec 20, 2023

imatwawana commented Dec 20, 2023 •

edited

ahuarte47 commented Dec 21, 2023 •

edited

oscarkilhed left a comment

oscarkilhed left a comment

imatwawana left a comment

ahuarte47 commented Jan 2, 2024

ahuarte47 commented Jan 4, 2024

imatwawana commented Jan 4, 2024 •

edited

Table: Add select/unselect all column values to table filter #79290

Table: Add select/unselect all column values to table filter #79290

Conversation

ahuarte47 commented Dec 10, 2023 • edited

CLAassistant commented Dec 10, 2023 • edited

imatwawana left a comment

Choose a reason for hiding this comment

ahuarte47 commented Dec 11, 2023

oscarkilhed left a comment

Choose a reason for hiding this comment

catherineymgui commented Dec 12, 2023

ahuarte47 commented Dec 13, 2023 • edited

tjanson commented Dec 13, 2023

ahuarte47 commented Dec 13, 2023 • edited

oscarkilhed commented Dec 14, 2023 • edited

ahuarte47 commented Dec 14, 2023

reindlt commented Dec 15, 2023

ahuarte47 commented Dec 19, 2023

oscarkilhed commented Dec 20, 2023

imatwawana commented Dec 20, 2023 • edited

ahuarte47 commented Dec 21, 2023 • edited

oscarkilhed left a comment

Choose a reason for hiding this comment

oscarkilhed left a comment

Choose a reason for hiding this comment

imatwawana left a comment

Choose a reason for hiding this comment

ahuarte47 commented Jan 2, 2024

ahuarte47 commented Jan 4, 2024

imatwawana commented Jan 4, 2024 • edited

ahuarte47 commented Dec 10, 2023 •

edited

CLAassistant commented Dec 10, 2023 •

edited

ahuarte47 commented Dec 13, 2023 •

edited

ahuarte47 commented Dec 13, 2023 •

edited

oscarkilhed commented Dec 14, 2023 •

edited

imatwawana commented Dec 20, 2023 •

edited

ahuarte47 commented Dec 21, 2023 •

edited

imatwawana commented Jan 4, 2024 •

edited