error-tracker/lib/error_tracker/web/live/dashboard.html.heex at 4d3fc567efe70ce8d5554b5af8f95996877e6f4b · elixir-error-tracker/error-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<.form
  for={@search_form}
  id="search"
  class="mb-4 text-black grid md:grid-cols-4 grid-cols-2 gap-2"
  phx-change="search"
>
  <input
    name={@search_form[:reason].name}
    value={@search_form[:reason].value}
    type="text"
    placeholder="Error"
    class="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"
    phx-debounce
  />
  <input
    name={@search_form[:source_line].name}
    value={@search_form[:source_line].value}
    type="text"
    placeholder="Source line"
    class="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"
    phx-debounce
  />
  <input
    name={@search_form[:source_function].name}
    value={@search_form[:source_function].value}
    type="text"
    placeholder="Source function"
    class="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"
    phx-debounce
  />
  <select
    name={@search_form[:status].name}
    class="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 value="" selected={@search_form[:status].value == ""}>All</option>
    <option value="unresolved" selected={@search_form[:status].value == "unresolved"}>
      Unresolved
    </option>
    <option value="resolved" selected={@search_form[:status].value == "resolved"}>
      Resolved
    </option>
  </select>
</.form>

<div class="relative overflow-x-auto shadow-md sm:rounded-lg ring-1 ring-gray-900">
  <table class="w-full text-sm text-left rtl:text-right text-gray-400 table-fixed">
    <thead class="text-xs uppercase bg-gray-900">
      <tr>
        <th scope="col" class="px-4 pr-2 w-72">Error</th>
        <th scope="col" class="px-4 py-3 w-72">Occurrences</th>
        <th scope="col" class="px-4 py-3 w-28">Status</th>
        <th scope="col" class="px-4 py-3 w-28"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td :if={@errors == []} colspan="4" class="text-center py-8 font-extralight">
          No errors to show 🎉
        </td>
      </tr>
      <tr
        :for={error <- @errors}
        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, @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">
            ({sanitize_module(error.kind)}) {error.reason}
          </p>
          <p
            :if={ErrorTracker.Error.has_source_info?(error)}
            class="whitespace-nowrap text-ellipsis overflow-hidden font-normal text-gray-400"
          >
            {sanitize_module(error.source_function)}
            <br />
            {error.source_line}
          </p>
        </td>
        <td class="px-4 py-4">
          <p>Last: {format_datetime(error.last_occurrence_at)}</p>
          <p>Total: {@occurrences[error.id]}</p>
        </td>
        <td class="px-4 py-4">
          <.badge :if={error.status == :resolved} color={:green}>Resolved</.badge>
          <.badge :if={error.status == :unresolved} color={:red}>Unresolved</.badge>
        </td>
        <td class="px-4 py-4 text-center">
          <div class="flex justify-between">
            <.button
              :if={error.status == :unresolved}
              phx-click="resolve"
              phx-value-error_id={error.id}
            >
              Resolve
            </.button>

            <.button
              :if={error.status == :resolved}
              phx-click="unresolve"
              phx-value-error_id={error.id}
            >
              Unresolve
            </.button>

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

            <.button
              :if={error.muted}
              phx-click="unmute"
              type="link"
              phx-value-error_id={error.id}
            >
              <.icon name="bell" /> Unmute
            </.button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<.pagination page={@page} total_pages={@total_pages} />