[ENHANCEMENT] Add support for sub-rows, fuzzy filtering and column filtering

[adrianSepiol]

Description

This change is needed to allow to implement folder structure for perses/perses#183. It introduces a way to filter table, filter visible column and a way to display tree-like structure.

Screenshots

Check perses/perses#183

In Table Plugin:

Screencast.from.07-04-26.14.34.05.webm

No toolbar:

With columns filter:

With search:

With Column filter and search:

Flamechart plugin:

No toolbar:

With columns filter:

With search:

With Column filter and search:

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.
  See e2e docs for more details. Common issues include:
  • Is the data inconsistent? You need to mock API requests.
  • Does the time change? You need to use consistent time values or mock time utilities.
  • Does it have loading states? You need to wait for loading to complete.

[Nexucis]

shared package are more related to anything around plugins and component required to develop plugins.

Since folders are only here for the application itself, I believe these PR can be merged with the one in perses/perses. That will simplify the whole process also.

[Nexucis]

ah wait you are modifying the table as well. mmm @jgbernalp since the Table is widely used for the plugins, do you think these modifications are fine ?

[jgbernalp]

Yes, this will be an improvement. We want to build a feature-rich table and re use it across the plugins.

But we need to make sure it works correctly with the plugins. @adrianSepiol can you attach some screenshots? I think we are adding a toolbar to the top of the table, but this might affect how tables are rendered in plugins. We can control this through a table options prop, so plugins can decide if they want to show the toolbar or not and by default will be disabled for backwards compatibility.

[adrianSepiol]

Yes, this will be an improvement. We want to build a feature-rich table and re use it across the plugins.

But we need to make sure it works correctly with the plugins. @adrianSepiol can you attach some screenshots? I think we are adding a toolbar to the top of the table, but this might affect how tables are rendered in plugins. We can control this through a table options prop, so plugins can decide if they want to show the toolbar or not and by default will be disabled for backwards compatibility.

I've added screenshots for Table and Flamechart plugins, In both cases we would need some additional changes to make this look nicely. As you said this is by default disabled so it should not affect current look. For the Table plugin there is this mechanism that allows to filter values in each column, to be able to migrate to this toolbar I would probably need implement similar filtering on Table component level. I could try to add it here if you think this would also be useful.

[jgbernalp]

I think we should minimize the changes on a single PR. The filtering is definitely useful, but maybe we should focus on the search and columns first. We already have a UX pattern for this, that might be useful. The search input fills the horizontal space and we have the columns icon at the end.

I'll go further and remove the columns text as it might be redundant. WDYT?

cc @Gladorme @shahrokni

[adrianSepiol]

I think we should minimize the changes on a single PR. The filtering is definitely useful, but maybe we should focus on the search and columns first. We already have a UX pattern for this, that might be useful. The search input fills the horizontal space and we have the columns icon at the end.

I'll go further and remove the columns text as it might be redundant. WDYT?

cc @Gladorme @shahrokni
I've updated the look. Let me know what you think.