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

Pages: Breakdown routes #477

Merged
merged 31 commits into from
Jul 2, 2024
Merged

Conversation

gtk-grafana
Copy link
Contributor

@gtk-grafana gtk-grafana commented Jun 20, 2024

Fixes: #351
Fixes: #462

Adding routes for the breakdown pages:

Services index: /a/grafana-lokiexplore-app/explore
Breakdown: /a/grafana-lokiexplore-app/explore/service/:service/:breakdownSlug

e.g.:

Service Index: /a/grafana-lokiexplore-app/explore/
Logs: /a/grafana-lokiexplore-app/explore/service/tempo-distributor/logs
Labels: /a/grafana-lokiexplore-app/explore/service/tempo-distributor/labels
Fields: /a/grafana-lokiexplore-app/explore/service/tempo-distributor/fields
Patterns: /a/grafana-lokiexplore-app/explore/service/tempo-distributor/patterns

This PR will allow users to use the browser history to go back or forward to breakdown or index pages, instead of the whole app having essentially a single entry in the browser history.

Breadcrumbs should remain unchanged, functionality should be mostly unchanged as well.
This includes clearing the filters when removing the service. It might be possible to keep filters cached, so when users removing a service, and then add it again, the previous filters are applied, but the breakdown pages cache filters individually, so when a filter was removed from a single breakdown, and then the service removed, and then re-added, each breakdown would have different filters cached, although they weren't in the URL, so weren't being applied to the query, which was buggy. If we could figure out how to have a single cache for all filters in breakdown routes, users might not need to go back in the browser history as much, as filters would be cached to the service slug.

Functionality that did change:

  • Adding loading spinner to breakdown tabs when the service scene is loading
  • We update the tab counts more often, for detected fields this might be jarring since if the range is relative, these numbers will update on tab navigation, and patterns can update every time the pattern query is run since those are a somewhat random sampling
  • Removing mode and actionView url params

Notes:

  • The selected service in currently in the url path and the url params.
    • Currently only the url param is functional, the service name in the path is mostly cosmetic
    • Probably be a good idea to pull the service from the path if the url params are not defined to make sharing links easier

Follow ups (in another PR):

  • Find a way to push history when variables change, so browser back will undo last added filter. Currently only changes to the page slugs are added in browser history (tab navigation, removing service and redirecting back to service selection)
  • Add label/field name to url routes so users can navigate back to the breakdown of a specific field/label, instead of always being routed to the Label/Field: All view.
  • Redirecting invalid breakdown slugs to logs instead of service index

@gtk-grafana

This comment was marked as outdated.

@gtk-grafana

This comment was marked as outdated.

@gtk-grafana gtk-grafana changed the title Pages: Switch to useSceneApp Pages: Breakdown routes Jun 27, 2024
Copy link
Contributor

@matyax matyax left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works perfectly for me, amazing job! Left mostly minor comments and suggestions.

src/Components/IndexScene/IndexScene.tsx Show resolved Hide resolved
src/Components/IndexScene/IndexScene.tsx Show resolved Hide resolved
src/Components/Pages.tsx Show resolved Hide resolved
src/Components/Pages.tsx Outdated Show resolved Hide resolved
src/Components/ServiceScene/ServiceScene.tsx Outdated Show resolved Hide resolved
src/Components/Pages.tsx Outdated Show resolved Hide resolved
src/services/routing.ts Show resolved Hide resolved
@gtk-grafana gtk-grafana merged commit 5777b59 into main Jul 2, 2024
3 checks passed
@gtk-grafana gtk-grafana deleted the gtk-grafana/issues/351/location-history branch July 2, 2024 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Papercut: switching services removes all filters papercut: back button
3 participants