Dashboard (#13)

Add a live dashboard that allows users to view registered errors and
mark them as resolved or unresolved.

Author: crbelaus

.credo.exs

@@ -121,7 +121,6 @@
           #
           {Credo.Check.Refactor.Apply, []},
           {Credo.Check.Refactor.CondStatements, []},
-          {Credo.Check.Refactor.CyclomaticComplexity, []},
           {Credo.Check.Refactor.FilterCount, []},
           {Credo.Check.Refactor.FilterFilter, []},
           {Credo.Check.Refactor.FunctionArity, []},
@@ -189,6 +188,7 @@
           {Credo.Check.Readability.WithCustomTaggedTuple, []},
           {Credo.Check.Refactor.ABCSize, []},
           {Credo.Check.Refactor.AppendSingleItem, []},
+          {Credo.Check.Refactor.CyclomaticComplexity, []},
           {Credo.Check.Refactor.DoubleBooleanNegation, []},
           {Credo.Check.Refactor.FilterReject, []},
           {Credo.Check.Refactor.IoPuts, []},

lib/error_tracker.ex

@@ -8,30 +8,36 @@ defmodule ErrorTracker do
   """
   @type context :: %{String.t() => any()}
 
+  alias ErrorTracker.Error
+  alias ErrorTracker.Repo
+
   def report(exception, stacktrace, given_context \\ %{}) do
     {:ok, stacktrace} = ErrorTracker.Stacktrace.new(stacktrace)
-    {:ok, error} = ErrorTracker.Error.new(exception, stacktrace)
+    {:ok, error} = Error.new(exception, stacktrace)
 
     context = Map.merge(get_context(), given_context)
 
     error =
-      repo().insert!(error,
-        on_conflict: [set: [status: :unresolved]],
-        conflict_target: :fingerprint,
-        prefix: prefix()
+      Repo.insert!(error,
+        on_conflict: [set: [status: :unresolved, last_occurrence_at: DateTime.utc_now()]],
+        conflict_target: :fingerprint
       )
 
     error
     |> Ecto.build_assoc(:occurrences, stacktrace: stacktrace, context: context)
-    |> repo().insert!(prefix: prefix())
+    |> Repo.insert!()
   end
 
-  def repo do
-    Application.fetch_env!(:error_tracker, :repo)
+  def resolve(error = %Error{status: :unresolved}) do
+    changeset = Ecto.Changeset.change(error, status: :resolved)
+
+    Repo.update(changeset)
   end
 
-  def prefix do
-    Application.get_env(:error_tracker, :prefix, "public")
+  def unresolve(error = %Error{status: :resolved}) do
+    changeset = Ecto.Changeset.change(error, status: :unresolved)
+
+    Repo.update(changeset)
   end
 
   @spec set_context(context()) :: context()

lib/error_tracker/migrations.ex

@@ -116,7 +116,7 @@ defmodule ErrorTracker.Migration do
   end
 
   defp migrator do
-    case ErrorTracker.repo().__adapter__() do
+    case ErrorTracker.Repo.__adapter__() do
       Ecto.Adapters.Postgres -> ErrorTracker.Migrations.Postgres
       adapter -> raise "ErrorTracker does not support #{adapter}"
     end

lib/error_tracker/migrations/postgres/v01.ex

@@ -13,6 +13,7 @@ defmodule ErrorTracker.Migrations.Postgres.V01 do
       add :source_function, :text, null: false
       add :status, :string, null: false
       add :fingerprint, :string, null: false
+      add :last_occurrence_at, :utc_datetime_usec, null: false
 
       timestamps(type: :utc_datetime_usec)
     end

lib/error_tracker/repo.ex

@@ -0,0 +1,41 @@
+defmodule ErrorTracker.Repo do
+  @moduledoc """
+  Wraps Ecto.Repo calls and applies default options.
+  """
+  def insert!(struct_or_changeset, opts \\ []) do
+    dispatch(:insert!, [struct_or_changeset], opts)
+  end
+
+  def update(changeset, opts \\ []) do
+    dispatch(:update, [changeset], opts)
+  end
+
+  def get(queryable, id, opts \\ []) do
+    dispatch(:get, [queryable, id], opts)
+  end
+
+  def get!(queryable, id, opts \\ []) do
+    dispatch(:get!, [queryable, id], opts)
+  end
+
+  def all(queryable, opts \\ []) do
+    dispatch(:all, [queryable], opts)
+  end
+
+  def aggregate(queryable, aggregate, opts \\ []) do
+    dispatch(:aggregate, [queryable, aggregate], opts)
+  end
+
+  def __adapter__, do: repo().__adapter__()
+
+  defp dispatch(action, args, opts) do
+    defaults = [prefix: Application.get_env(:error_tracker, :prefix, "public")]
+    opts_w_defaults = Keyword.merge(defaults, opts)
+
+    apply(repo(), action, args ++ [opts_w_defaults])
+  end
+
+  defp repo do
+    Application.fetch_env!(:error_tracker, :repo)
+  end
+end

lib/error_tracker/schemas/error.ex

@@ -15,6 +15,7 @@ defmodule ErrorTracker.Error do
     field :source_function, :string
     field :status, Ecto.Enum, values: [:resolved, :unresolved], default: :unresolved
     field :fingerprint, :binary
+    field :last_occurrence_at, :utc_datetime_usec
 
     has_many :occurrences, ErrorTracker.Occurrence
 
@@ -48,6 +49,7 @@ defmodule ErrorTracker.Error do
     %__MODULE__{}
     |> Ecto.Changeset.change(params)
     |> Ecto.Changeset.put_change(:fingerprint, Base.encode16(fingerprint))
+    |> Ecto.Changeset.put_change(:last_occurrence_at, DateTime.utc_now())
     |> Ecto.Changeset.apply_action(:new)
   end
 end

lib/error_tracker/web.ex

@@ -73,6 +73,10 @@ defmodule ErrorTracker.Web do
       import Phoenix.HTML
       import Phoenix.LiveView.Helpers
 
+      import ErrorTracker.Web.CoreComponents
+      import ErrorTracker.Web.Helpers
+      import ErrorTracker.Web.Router.Routes
+
       alias Phoenix.LiveView.JS
     end
   end

lib/error_tracker/web/components/core_components.ex

@@ -0,0 +1,127 @@
+defmodule ErrorTracker.Web.CoreComponents do
+  @moduledoc false
+  use Phoenix.Component
+
+  @doc """
+  Renders a button.
+
+  ## Examples
+
+      <.button>Send!</.button>
+      <.button phx-click="go" class="ml-2">Send!</.button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value href patch navigate)
+
+  slot :inner_block, required: true
+
+  def button(assigns = %{type: "link"}) do
+    ~H"""
+    <.link
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-[11.5px] px-3",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </.link>
+    """
+  end
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-600 hover:bg-zinc-400 py-2 px-3",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a badge.
+
+  ## Examples
+
+      <.badge>Info</.badge>
+      <.badge color={:red}>Error</.badge>
+  """
+  attr :color, :atom, default: :blue
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def badge(assigns) do
+    color_class =
+      case assigns.color do
+        :blue -> "bg-blue-900 text-blue-300"
+        :gray -> "bg-gray-700 text-gray-300"
+        :red -> "bg-red-900 text-red-300"
+        :green -> "bg-green-900 text-green-300"
+        :yellow -> "bg-yellow-900 text-yellow-300"
+        :indigo -> "bg-indigo-900 text-indigo-300"
+        :purple -> "bg-purple-900 text-purple-300"
+        :pink -> "bg-pink-900 text-pink-300"
+      end
+
+    assigns = Map.put(assigns, :color_class, color_class)
+
+    ~H"""
+    <span class={["text-sm font-medium me-2 px-2.5 py-1.5 rounded", @color_class]} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </span>
+    """
+  end
+
+  attr :page, :integer, required: true
+  attr :total_pages, :integer, required: true
+  attr :event_previous, :string, default: "prev-page"
+  attr :event_next, :string, default: "next-page"
+
+  def pagination(assigns) do
+    ~H"""
+    <div class="mt-10 w-full flex">
+      <button
+        :if={@page > 1}
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        phx-click={@event_previous}
+      >
+        Previous page
+      </button>
+      <button
+        :if={@page < @total_pages}
+        class="flex items-center justify-center px-4 h-10 text-base font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white"
+        phx-click={@event_next}
+      >
+        Next page
+      </button>
+    </div>
+    """
+  end
+
+  attr :title, :string
+  attr :title_class, :string, default: nil
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def section(assigns) do
+    ~H"""
+    <div>
+      <h2 :if={assigns[:title]} class={["text-sm font-bold mb-2 uppercase", @title_class]}>
+        <%= @title %>
+      </h2>
+      <%= render_slot(@inner_block) %>
+    </div>
+    """
+  end
+end

lib/error_tracker/web/components/layouts.ex

@@ -1,6 +1,8 @@
 defmodule ErrorTracker.Web.Layouts do
   use ErrorTracker.Web, :html
 
+  alias ErrorTracker.Web.Layouts.Navbar
+
   @css_path :code.priv_dir(:error_tracker) |> Path.join("static/app.css")
   @js_path :code.priv_dir(:error_tracker) |> Path.join("static/app.js")
 

lib/error_tracker/web/components/layouts/live.html.heex

@@ -1,3 +1,4 @@
-<main>
+<.live_component module={Navbar} id="navbar" {assigns} />
+<main class="container px-4 mx-auto mt-4 mb-4">
   <%= @inner_content %>
 </main>