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

[Infrastructure UI] Hosts View: Flyout Metadata Search #154347

Closed
jennypavlova opened this issue Apr 4, 2023 · 1 comment · Fixed by #154556
Closed

[Infrastructure UI] Hosts View: Flyout Metadata Search #154347

jennypavlova opened this issue Apr 4, 2023 · 1 comment · Fixed by #154556
Assignees
Labels
beta Required for a feature to move to beta Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v8.8.0

Comments

@jennypavlova
Copy link
Member

📓 Summary

The metadata table inside the flyout should be searchable. This issue is part of #151010

image

🎨 Design

Figma

✔️ Acceptance criteria

  • The metadata can be searched using a search bar
@jennypavlova jennypavlova added Feature:Metrics UI Metrics UI feature Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services Feature:ObsHosts Hosts feature within Observability v8.8.0 beta Required for a feature to move to beta labels Apr 4, 2023
@jennypavlova jennypavlova self-assigned this Apr 4, 2023
@elasticmachine
Copy link
Contributor

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

jennypavlova added a commit that referenced this issue Apr 12, 2023
Closes #154347 

## Summary

This PR adds search functionality to the metadata tab.
In order to optimize the search I changed the table to
`EuiInMemoryTable` and handled the search there. One benefit is that
table filtering is the responsibility of the table and the cases to
handle errors/no data found are much easier.
<img width="2435" alt="Screenshot 2023-04-06 at 15 36 35"
src="https://user-images.githubusercontent.com/14139027/230400195-b77b7783-9c4d-48b0-85e6-cb38180a29d3.png">

<img width="2434" alt="Screenshot 2023-04-06 at 15 58 22"
src="https://user-images.githubusercontent.com/14139027/230400337-1013626c-c802-4b45-88f1-bff67f0ec37e.png">

This also helped to get rid of some of the callouts condition and leave
the table component to decide what to render based on the items and
loading state. That way the loading looks much smoother rather than
replacing the table with a loading component - also when loading and
there are no results the loading indicator is inside the table.

![image](https://user-images.githubusercontent.com/14139027/230401218-04871ce9-ceba-4803-8259-7978c4152ee9.png)

## Testing
1. Open the flyout for a single host
2. On the metadata tab start searching
    a. Try to search for field name/value - should get a result
b. Do a typo with an invalid character (or just enter only ```, `+`,
etc) - an error message should be displayed (and ⚠️ icon in the search
bar)
c. Try to search for something that it's not a field name/value - should
display the `No metadata found.` message in the table.
3. Copy a URL after searching for something and paste it into a new
browser tab/window - it should persist the search term. (In case of a
search error the search filter is not persisted)



https://user-images.githubusercontent.com/14139027/230400149-6ba4dc32-efaa-4068-8abb-24b6ae43de76.mov
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
beta Required for a feature to move to beta Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v8.8.0
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants