show.html.heex

<div class="my-6">
  <.link navigate={dashboard_path(@socket, @search)}>
    <.icon name="arrow-left" /> Back to the dashboard
  </.link>
</div>

<div id="header">
  <p class="text-sm uppercase font-semibold text-gray-400">
    Error #{@error.id} @ {format_datetime(@occurrence.inserted_at)}
  </p>
  <h1 class="my-1 text-2xl w-full font-semibold whitespace-nowrap text-ellipsis overflow-hidden">
    ({sanitize_module(@error.kind)}) {@error.reason
    |> String.replace("\n", " ")
    |> String.trim()}
  </h1>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 md:space-x-3 mt-6 gap-2">
  <div class="md:col-span-3 md:border-r md:border-gray-600 space-y-8 pr-5">
    <.section title="Full message">
      <pre class="overflow-auto p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= @occurrence.reason %></pre>
    </.section>

    <.section :if={ErrorTracker.Error.has_source_info?(@error)} title="Source">
      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900">
        <%= sanitize_module(@error.source_function) %>
        <%= @error.source_line %></pre>
    </.section>

    <.section :if={@occurrence.breadcrumbs != []} title="Bread crumbs">
      <div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
        <table class="w-full text-sm text-gray-400 table-fixed">
          <tr
            :for={
              {breadcrumb, index} <-
                @occurrence.breadcrumbs |> Enum.reverse() |> Enum.with_index()
            }
            class="border-b bg-gray-400/10 border-gray-900 last:border-b-0"
          >
            <td class="w-11 pl-2 py-4 font-medium text-white relative text-right">
              {length(@occurrence.breadcrumbs) - index}.
            </td>
            <td class="px-2 py-4 font-medium text-white relative">{breadcrumb}</td>
          </tr>
        </table>
      </div>
    </.section>

    <.section :if={@occurrence.stacktrace.lines != []} title="Stacktrace">
      <div class="p-4 bg-gray-300/10 border border-gray-900 rounded-lg">
        <div class="w-full mb-4">
          <label class="flex justify-end">
            <input
              type="checkbox"
              id="show-app-frames"
              class="ml-2 mr-2 mb-1 mt-1 inline-block text-sky-600 rounded focus:ring-sky-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
              phx-click={JS.toggle(to: "#stacktrace tr:not([data-app=#{@app}])")}
            />
            <span class="text-md inline-block">
              Show only app frames
            </span>
          </label>
        </div>

        <div class="overflow-auto">
          <table class="w-100 text-sm" id="stacktrace">
            <tbody>
              <tr :for={line <- @occurrence.stacktrace.lines} data-app={line.application || @app}>
                <td class="px-2 align-top"><pre>(<%= line.application || @app %>)</pre></td>
                <td>
                  <pre><%= "#{sanitize_module(line.module)}.#{line.function}/#{line.arity}" %>
                <%= if line.line, do: "#{line.file}:#{line.line}", else: "(nofile)" %></pre>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </.section>

    <.section title="Context">
      <pre class="overflow-auto text-sm p-4 rounded-lg bg-gray-300/10 border border-gray-900"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
    </.section>
  </div>

  <div class="px-3 md:pl-0 space-y-8">
    <.section title={"Occurrence (#{@total_occurrences} total)"}>
      <form phx-change="occurrence_navigation">
        <select
          name="occurrence_id"
          class="w-full border text-sm rounded-lg block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
        >
          <option
            :for={occurrence <- @occurrences}
            value={occurrence.id}
            selected={occurrence.id == @occurrence.id}
          >
            {format_datetime(occurrence.inserted_at)}
          </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">
      <pre><%= sanitize_module(@error.kind) %></pre>
    </.section>

    <.section title="Last seen">
      <pre><%= format_datetime(@error.last_occurrence_at) %></pre>
    </.section>

    <.section title="First seen">
      <pre><%= format_datetime(@error.inserted_at) %></pre>
    </.section>

    <.section title="Status" title_class="mb-3">
      <.badge :if={@error.status == :resolved} color={:green}>Resolved</.badge>
      <.badge :if={@error.status == :unresolved} color={:red}>Unresolved</.badge>
    </.section>

    <.section>
      <div class="flex flex-col gap-y-4">
        <.button :if={@error.status == :unresolved} phx-click="resolve">
          Mark as resolved
        </.button>

        <.button :if={@error.status == :resolved} phx-click="unresolve">
          Mark as unresolved
        </.button>

        <.button :if={!@error.muted} phx-click="mute" type="link">
          <.icon name="bell-slash" /> Mute
        </.button>

        <.button :if={@error.muted} phx-click="unmute" type="link">
          <.icon name="bell" /> Unmute
        </.button>
      </div>
    </.section>
  </div>
</div>