Improve web dashboard navigation (#141)

This commit contains three improvements to the web dashboard
navigation:
- Current filters are persisted when navigating between the error list
and detail pages
- In the error detail page there are new navigation links to the prev
and next occurrence
- Navigating back to the dashboard page now happens over the existing
websocket connection instead of doing a full page reload

Author: crbelaus

lib/error_tracker/web/components/core_components.ex

@@ -131,7 +131,7 @@ defmodule ErrorTracker.Web.CoreComponents do
     """
   end
 
-  attr :name, :string, values: ~w[bell bell-slash]
+  attr :name, :string, values: ~w[bell bell-slash arrow-left arrow-right]
 
   def icon(assigns = %{name: "bell"}) do
     ~H"""
@@ -167,4 +167,38 @@ defmodule ErrorTracker.Web.CoreComponents do
     </svg>
     """
   end
+
+  def icon(assigns = %{name: "arrow-left"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M14 8a.75.75 0 0 1-.75.75H4.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L4.56 7.25h8.69A.75.75 0 0 1 14 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+
+  def icon(assigns = %{name: "arrow-right"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
 end

lib/error_tracker/web/live/dashboard.ex

@@ -7,24 +7,28 @@ defmodule ErrorTracker.Web.Live.Dashboard do
 
   alias ErrorTracker.Error
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @per_page 10
 
   @impl Phoenix.LiveView
   def handle_params(params, uri, socket) do
-    {search, search_form} = search_terms(params)
-
     path = struct(URI, uri |> URI.parse() |> Map.take([:path, :query]))
 
     {:noreply,
      socket
-     |> assign(path: path, search: search, page: 1, search_form: search_form)
+     |> assign(
+       path: path,
+       search: Search.from_params(params),
+       page: 1,
+       search_form: Search.to_form(params)
+     )
      |> paginate_errors()}
   end
 
   @impl Phoenix.LiveView
   def handle_event("search", params, socket) do
-    {search, _search_form} = search_terms(params["search"] || %{})
+    search = Search.from_params(params["search"] || %{})
 
     path_w_filters = %URI{socket.assigns.path | query: URI.encode_query(search)}
 
@@ -109,15 +113,6 @@ defmodule ErrorTracker.Web.Live.Dashboard do
     )
   end
 
-  defp search_terms(params) do
-    data = %{}
-    types = %{reason: :string, source_line: :string, source_function: :string, status: :string}
-
-    changeset = Ecto.Changeset.cast({data, types}, params, Map.keys(types))
-
-    {Ecto.Changeset.apply_changes(changeset), to_form(changeset, as: :search)}
-  end
-
   defp filter(query, search) do
     Enum.reduce(search, query, &do_filter/2)
   end

lib/error_tracker/web/live/dashboard.html.heex

@@ -63,7 +63,7 @@
         class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
       >
         <td scope="row" class="px-4 py-4 font-medium text-white relative">
-          <.link navigate={error_path(@socket, error)} class="absolute inset-1">
+          <.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
             <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
           <p class="whitespace-nowrap text-ellipsis overflow-hidden">

lib/error_tracker/web/live/show.ex

@@ -7,52 +7,55 @@ defmodule ErrorTracker.Web.Live.Show do
   alias ErrorTracker.Error
   alias ErrorTracker.Occurrence
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @occurrences_to_navigate 50
 
   @impl Phoenix.LiveView
-  def mount(%{"id" => id}, _session, socket) do
+  def mount(params = %{"id" => id}, _session, socket) do
     error = Repo.get!(Error, id)
-    {:ok, assign(socket, error: error, app: Application.fetch_env!(:error_tracker, :otp_app))}
+
+    {:ok,
+     assign(socket,
+       error: error,
+       app: Application.fetch_env!(:error_tracker, :otp_app),
+       search: Search.from_params(params)
+     )}
   end
 
   @impl Phoenix.LiveView
-  def handle_params(%{"occurrence_id" => occurrence_id}, _uri, socket) do
+  def handle_params(params, _uri, socket) do
     occurrence =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> Repo.get!(occurrence_id)
-
-    socket =
-      socket
-      |> assign(:occurrence, occurrence)
-      |> load_related_occurrences()
-
-    {:noreply, socket}
-  end
-
-  def handle_params(_, _uri, socket) do
-    [occurrence] =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> order_by([o], desc: o.id)
-      |> limit(1)
-      |> Repo.all()
+      if occurrence_id = params["occurrence_id"] do
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> Repo.get!(occurrence_id)
+      else
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> order_by([o], desc: o.id)
+        |> limit(1)
+        |> Repo.one()
+      end
 
     socket =
       socket
-      |> assign(:occurrence, occurrence)
+      |> assign(occurrence: occurrence)
       |> load_related_occurrences()
 
     {:noreply, socket}
   end
 
   @impl Phoenix.LiveView
   def handle_event("occurrence_navigation", %{"occurrence_id" => id}, socket) do
-    {:noreply,
-     push_patch(socket,
-       to: occurrence_path(socket, %Occurrence{error_id: socket.assigns.error.id, id: id})
-     )}
+    occurrence_path =
+      occurrence_path(
+        socket,
+        %Occurrence{error_id: socket.assigns.error.id, id: id},
+        socket.assigns.search
+      )
+
+    {:noreply, push_patch(socket, to: occurrence_path)}
   end
 
   @impl Phoenix.LiveView
@@ -123,9 +126,27 @@ defmodule ErrorTracker.Web.Live.Show do
       |> Ecto.assoc(:occurrences)
       |> Repo.aggregate(:count)
 
+    next_occurrence =
+      base_query
+      |> where([o], o.id > ^current_occurrence.id)
+      |> order_by([o], asc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
+    prev_occurrence =
+      base_query
+      |> where([o], o.id < ^current_occurrence.id)
+      |> order_by([o], desc: o.id)
+      |> limit(1)
+      |> select([:id, :error_id, :inserted_at])
+      |> Repo.one()
+
     socket
     |> assign(:occurrences, occurrences)
     |> assign(:total_occurrences, total_occurrences)
+    |> assign(:next, next_occurrence)
+    |> assign(:prev, prev_occurrence)
   end
 
   defp related_occurrences(query, num_results) do

lib/error_tracker/web/live/show.html.heex

@@ -1,5 +1,7 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket)}>« Back to the dashboard</.button>
+  <.link navigate={dashboard_path(@socket, @search)}>
+    <.icon name="arrow-left" /> Back to the dashboard
+  </.link>
 </div>
 
 <div id="header">
@@ -97,6 +99,19 @@
           </option>
         </select>
       </form>
+
+      <nav class="grid grid-cols-2 gap-2 mt-2">
+        <div class="text-left">
+          <.link :if={@prev} patch={occurrence_path(@socket, @prev, @search)}>
+            <.icon name="arrow-left" /> Prev
+          </.link>
+        </div>
+        <div class="text-right">
+          <.link :if={@next} patch={occurrence_path(@socket, @next, @search)}>
+            Next <.icon name="arrow-right" />
+          </.link>
+        </div>
+      </nav>
     </.section>
 
     <.section title="Error kind">

lib/error_tracker/web/router/routes.ex

@@ -8,21 +8,36 @@ defmodule ErrorTracker.Web.Router.Routes do
   @doc """
   Returns the dashboard path
   """
-  def dashboard_path(socket = %Socket{}) do
-    socket.private[:dashboard_path]
+  def dashboard_path(socket = %Socket{}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an error
   """
-  def error_path(socket = %Socket{}, %Error{id: id}) do
-    dashboard_path(socket) <> "/#{id}"
+  def error_path(socket = %Socket{}, %Error{id: id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{id}")
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an occurrence
   """
-  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}) do
-    dashboard_path(socket) <> "/#{error_id}/#{id}"
+  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{error_id}/#{id}")
+    |> URI.to_string()
+  end
+
+  defp dashboard_uri(socket = %Socket{}, params) do
+    %URI{
+      path: socket.private[:dashboard_path],
+      query: if(Enum.any?(params), do: URI.encode_query(params))
+    }
   end
 end

lib/error_tracker/web/search.ex

@@ -0,0 +1,24 @@
+defmodule ErrorTracker.Web.Search do
+  @moduledoc false
+
+  @types %{
+    reason: :string,
+    source_line: :string,
+    source_function: :string,
+    status: :string
+  }
+
+  defp changeset(params) do
+    Ecto.Changeset.cast({%{}, @types}, params, Map.keys(@types))
+  end
+
+  @spec from_params(map()) :: %{atom() => String.t()}
+  def from_params(params) do
+    params |> changeset() |> Ecto.Changeset.apply_changes()
+  end
+
+  @spec to_form(map()) :: Phoenix.HTML.Form.t()
+  def to_form(params) do
+    params |> changeset() |> Phoenix.Component.to_form(as: :search)
+  end
+end

priv/static/app.css

@@ -766,6 +766,10 @@ select {
   border-width: 0;
 }
 
+.static {
+  position: static;
+}
+
 .absolute {
   position: absolute;
 }
@@ -841,6 +845,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -873,6 +881,11 @@ select {
   display: none;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .\!h-4 {
   height: 1rem !important;
 }
@@ -925,6 +938,10 @@ select {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }