[Infrastructure UI] Hosts View: Filtering by metadata functionality

[jennypavlova]

📓 Summary

This issue is a follow-up to the metadata view implementation in #150893. The user should be possible to filter his hosts based on the selected host metadata. A search bar should be added allowing the user to search for metadata field/value (see design) ⬇

🎨 Design

Figma

👨‍💻 Implementation hints

There are different ways to implement it but we should consider some main arias, I am adding some points I find useful for the solution:

• In order to filter by metadata we need the meta and query values from the filter type. There is an addFilters method in the FilterManager which can be useful in this case.
• As we are relying on the URL state to load the existing filters and query we should have the option to persist the new filters to the URL state as well. This is currently done using a reducer to persist the current query/filters state.
• We should keep in mind that we have the option to save the query (in this case if we have the filters added to the global filter saving the query should work).

✔️ Acceptance criteria

• The selected host should have the metadata displayed (implemented in [Infrastructure UI] Show metadata for a single host on the host UI  #150893) and support filter by different metadata values.
• The metadata can be searched using a search bar ( [Infrastructure UI] Hosts View: Flyout Metadata Search #154347 )
• The user should be able to add combinations of several metadata filters applied at the same time and remove some/all of the filters.
• The selected filter should be applied and displayed next to the other filters (if any) displayed in the unified search filters bar without overriding existing query/filters/controls selections.
• The selected filter should be persisted in the URL.
• The selected filter should be saved as part of the saved query functionality and applied together with the other saved values when the saved query is loaded.

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[roshan-elastic]

Hey @kkurstak (@jennypavlova),

FYI we'd like to make a bit of a change to the filtering here as the current local build Jen didn't seem immediately obvious that you could filter values.

The main thing is its positioning on the right-hand side and also that you don't see you can filter it unless you hover over the 'actions' column.

We preferred the filtering in the Logs UI and would like to steal that (with a tiny change to improve it):

Link to logs filtering on demo cluster

Default for value

On hover of non-filtered value

Filtered value

On hover of filtered value - to remove

Not 100% sure on the colours but it seems more obvious to me that it is there and how it works.

Jen will post an update with the updated version on her local build - let us know what you think...

[jennypavlova]

Hey @kkurstak,
I am sending a quick screen recording - So in Logs we don't have the remove action so in our case it will turn blue when you add the filter and when the filter is added it will be gray (stays gray with hover effect when the action is "remove filter") :

Screen.Recording.2023-04-17.at.17.47.33.mov

What do you think about that?
cc: @roshan-elastic

[roshan-elastic]

Wow @jennypavlova - that looks really good!

@kkurstak - Be good to hear your thoughts...

[kkurstak]

So I see here that we basically want to ditch the designs and do as in logs ;)

I see the problem with the icons being hidden on the "Action" column. We could simply leave it this way (filters to the right) and show the filter actions.

The question now @roshan-elastic is whether you'd like to add the "pin" option in the future - there is a "pin" icon in front of each row - I thought it was a really cool option in the context of our general task - improving filtering options. Depending on the user's needs, one could always pin X metadata label to the top and have it always there to quickly filter by it.

If we go with the "pin", I would strongly recommend leaving the "Actions" column on the right - So we have a "pin" option on the left and all other (current and future) options on the right. We can show the icons at all times, so the actions are not to be lost on the UI. There are flyouts with this kind of design on Discover I believe - they hide the icons in the "action" column, as there are 4 or 5 different options at all times - repeating the icons is noise. But I see your point, one icon is not a lot and it could stay always visible.

If we decide we don't want to add the "pin" option - or any other actions in the future - then I see no reason why we can't do it like in logs. I personally prefer having data on one side and actions on the other side, separated, but there is a point of keeping things consistent, even if it's not the perfect solution. I understand the logic behind those designs was to add the filter icon next to the label - but it is common pattern in tables where labels are on top and the content is below. Here we have everything aligned horizontally - thus my suggestion to do it differently.

All in all - Roshan, it all depends on how we see this flyout in the semi-long/long run.

Attached a quick example of how it would look like with the "pin" option and the right "action" column with all filter icons visible.

[kkurstak]

All in all - great job @jennypavlova, I dont see a reason why we should not go with what you've created. Depending on Roshan's decision - we can always go back to the extra options in the future. Thank you for adding the proper toast messaging!

[roshan-elastic]

Hey @kkurstak - thanks for your feedback! Glad I asked you.

I love the pins and would like to do in the future - we just ran out of time for 8.8.

Having it on the right but with the icons showing definitely helps. For me, when I see the 'Actions' I think it's not quite as intuitive as being right next to the value (it makes me think that this may open a menu of more options) but I'll trust your design skills on this one :) - having the icons definitely makes a difference.

@jennypavlova you okay reverting to the right-hand side under the Actions column header but keep the same styling for the filter buttons as you have now?

[kkurstak]

I love the pins as well! Hope to see them as soon as we get the time. Thank you for your feedback and letting me add my 2 cents here - whatever we do now, it's important for me to explain the designs. On this I'm really flexible.- there are situations where details are everything, here it is not as obvious even to me, as we have those filters on other parts of the interface in a different position. I'll be happy with the filters just working as they should be working!

[jennypavlova]

Hey @roshan-elastic and @kkurstak,
Thank you both for the feedback 🙂 I will go back to the "Actions" column to the right.

Regarding the pins I will add a separate issue for it, just have a couple of questions there:
Do we want to persist the pinned table data in the order they are pinned ( from top to bottom) - by moving the row?
Or do we want to keep the table row order as it is and just want to show the blue pin?
Do we have euiTable with pins design or that's the first use case? Should the pins be something like a Pinnable list group?
Do we want to persist the order of the pins (in case they change the table order) in the url and make it sharable?

[roshan-elastic]

Thank you both for the feedback 🙂 I will go back to the "Actions" column to the right.

Great @jennypavlova

Do we want to persist the pinned table data in the order they are pinned ( from top to bottom) - by moving the row?
@kkurstak - what do you think? I think moving to the top makes sense.

Do we have euiTable with pins design or that's the first use case? Should the pins be something like a Pinnable list group?

Do we want to persist the order of the pins (in case they change the table order) in the url and make it sharable?
Question : Would pinning be at a user-level or platform-level?

I assume it'll be stored in Local Storage? In which case, your question makes sense.

I think it shouldn't be in the URL (as we don't want it to override other users' settings if they're stored locally).

[jennypavlova]

@roshan-elastic Thank you, I added a new issue for the pins, feel free to update it or add comments there :)
cc: @kkurstak

[roshan-elastic]

Thanks @jennypavlova !