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

frontend: Add global search #2574

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

frontend: Add global search #2574

wants to merge 5 commits into from

Conversation

sniok
Copy link
Contributor

@sniok sniok commented Nov 15, 2024

Global search in top bar

Features:

  • Find resources
  • Find app pages
  • Find clusters
  • Custom actions (switching theme)
  • Remembers recently used results
  • Highlights query text in the output
  • Lazy loads component code and resources
  • Minimal performance impact when not used (when not used it will display just a placeholder input)

demo

search.mp4

testing done

  • a11y: axe and edge a11y quick checks
  • narrow screens
  • slow network

@sniok sniok changed the title frontend: Add Global search frontend: Add global search Nov 15, 2024
@joaquimrocha
Copy link
Collaborator

This looks and feels (I tested it) pretty awesome! Thanks for implementing it.
At KubeCon, Rene and I talked to some folks from the k8s sig-ui about how we implement things and they were surprised we hold most things in the frontend, and that for dealing with many resources + search, they would recommend having some backend caching. I am mentioning this so we keep it in mind for the search too.

A couple of things I noticed:

  1. The search suggests showing pages like the Pods (maybe I have been to them), even when we are at the home view (we need to turn those off if we are not in a cluster view)
  2. Changing routes takes too long (at least in dev mode) that it may feel like the jump was not activated. Maybe we could add a spinner to the search or somewhere else (besides speeding up the routes changes).
  3. No matching with the Home view (so we can go there without having to use the mouse)

In the future we should also make sure that the plugin defined routes are indexed; and add the ability to specify how to search resources (by doing the json-path matching, or an easier subset of it).

Good job!

Show contents after a little delay. Useful for displaying spinners that
don't need to be displayed right away but only for long running
operations

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
Like React's useState but for persisted in local storage

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
This hook is useful for keeping last used items, in this case for search

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
This component allows searching through resources, pages and custom
actions

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants