Skip to content

Improve web dashboard navigation #141

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

Merged
merged 3 commits into from
Mar 28, 2025
Merged

Improve web dashboard navigation #141

merged 3 commits into from
Mar 28, 2025

Conversation

crbelaus
Copy link
Contributor

@crbelaus crbelaus commented Mar 27, 2025

This pull request contains three improvements to the web dashboard navigation:

To test this:

  1. Open the dev script with iex dev.exs
  2. Generate a few errors if you don't have any yet
  3. Open the web dashboard and apply some filters
  4. Navigate to an error detail page
  5. Navigate between error occurrences using the new links and the selector (notice the screenshot below)
  6. Navigate back to the dashboard
  7. Confirm that the filters are still applied

image

@crbelaus crbelaus requested a review from odarriba March 27, 2025 07:39
@crbelaus crbelaus self-assigned this Mar 27, 2025
@crbelaus crbelaus changed the title Propagate filters during navigation Improve web dashboard navigation Mar 27, 2025
Comment on lines +2 to +4
<.link navigate={dashboard_path(@socket, @search)}>
<.icon name="arrow-left" /> Back to the dashboard
</.link>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Previously we were triggering a full page reload when going back to the dashboard page. With this change we just do a LiveView navigation over the existing websocket connection.

This is faster and does not require negotiating a TLS handshake or reloading all static assets again.

When navigating from the dashboard to the error detail page we now
propagate the active filters so users can navigate back and fort without
losing them.
This commit adds next/prev navigation links between occurrences. This
can be used in addition to the occurrence selector which has been
present since the beginning.
Since both the dashboard and the error page are in the same live_session
we can navigate between them using LiveView navigation instead of
triggering a full page reload. This is more efficient as we don't need
to negotiate TLS and fetch assets again.
@crbelaus crbelaus force-pushed the propagate-filters branch from 071e8f7 to 55c6994 Compare March 27, 2025 15:30
Copy link
Contributor

@odarriba odarriba left a comment

Choose a reason for hiding this comment

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

I'm not sure if it is better to save the filters in the user session instead of prepagate it through all URLs (specially if we have more routes in the future). But as for now it looks good to me! 🚀 🤌

def error_path(socket = %Socket{}, %Error{id: id}, params \\ %{}) do
socket
|> dashboard_uri(params)
|> URI.append_path("/#{id}")
Copy link
Contributor

Choose a reason for hiding this comment

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

Much nicer solution ❤️

@crbelaus crbelaus merged commit e59a5ca into main Mar 28, 2025
4 checks passed
@crbelaus crbelaus deleted the propagate-filters branch March 28, 2025 08:02
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.

Quick navigation for bug occurrences Filter selection on index page is lost
2 participants