Pages: Breakdown routes

[gtk-grafana]

Fixes: https://github.com/grafana/explore-logs/issues/351 Fixes: https://github.com/grafana/explore-logs/issues/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 is currently in a somewhat working state. Caveats are browser back button can now take you back to the index page, but filters are not cleared (but they don't exist in the URL):

And breadcrumbs are a bit buggy:

Hopefully we can fix these bugs and merge this in before refactoring the code to support new routes.

[gtk-grafana]

Stuff to think about:

• Do we need a variable for service now that it's stored in the url slug? Removing it might help us simplify a lot of edge case code.
• • But then we can't include multiple...
• Variables appear to get cached in the breakdown views, e.g. a pattern is removed, and then the user removes the service from the patterns view. If they come back to the service, which defaults to the logs view, the logs view still has the pattern cached.
• • Can we route users to the last slug they interacted with instead of defaulting to logs?
• • The cached variables are not in the URL, so we'll still need to find a way to bust the cache
• Labels and detected field counts appear to be 0 a lot more then usual