badpackets formatting

This commit is contained in:
Graham McIntire 2025-07-12 08:02:51 -05:00
parent d88adf4293
commit 628495fc76
No known key found for this signature in database
3 changed files with 166 additions and 82 deletions

View file

@ -1,88 +1,91 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-8"> <div class="container mx-auto px-4 py-8">
<div class="mb-8"> <div class="card bg-base-100 shadow-xl">
<!-- Remove the <.header /> component from this template --> <div class="card-body">
</div> <div class="flex items-center justify-between mb-4">
<span class="text-sm text-base-content/70">
{gettext("Auto-refreshes every 5 seconds")}
</span>
<%= if @loading do %>
<span class="flex items-center gap-2 text-sm text-primary">
<span class="loading loading-spinner loading-xs"></span>
{gettext("Updating...")}
</span>
<% end %>
</div>
<div class="mt-6 bg-white shadow-sm rounded-lg overflow-hidden"> <div class="overflow-x-auto">
<div class="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between"> <table class="table table-zebra">
<span class="text-xs text-gray-500"> <thead>
{gettext("Auto-refreshes every 5 seconds")} <tr>
</span> <th>{gettext("Attempted At")}</th>
<%= if @loading do %> <th>{gettext("Error Type")}</th>
<span class="flex items-center text-xs text-blue-600"> <th>{gettext("Error Message")}</th>
<svg <th>{gettext("Raw Packet")}</th>
class="animate-spin -ml-1 mr-1 h-3 w-3" </tr>
xmlns="http://www.w3.org/2000/svg" </thead>
fill="none" <tbody>
viewBox="0 0 24 24" <%= for bad_packet <- @bad_packets do %>
> <tr>
<circle <td>
class="opacity-25" <span class="text-sm">
cx="12" {Calendar.strftime(
cy="12" bad_packet.attempted_at || bad_packet.inserted_at,
r="10" "%Y-%m-%d %H:%M:%S UTC"
stroke="currentColor" )}
stroke-width="4" </span>
> </td>
</circle> <td>
<path <div class="badge badge-error badge-sm">
class="opacity-75" {bad_packet.error_type || gettext("Unknown")}
fill="currentColor" </div>
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" </td>
> <td>
</path> <span class="text-sm text-error font-mono">
</svg> {bad_packet.error_message || gettext("No error message")}
{gettext("Updating...")} </span>
</span> </td>
<% end %> <td>
</div> <div class="max-w-md">
<.table id="bad_packets" rows={@bad_packets}> <div class="text-xs font-mono text-base-content/80 break-all">
<:col :let={bad_packet} label={gettext("Attempted At")}> <%= if is_binary(bad_packet.raw_packet) do %>
<span class="text-sm text-gray-900"> {Aprsme.EncodingUtils.sanitize_string(bad_packet.raw_packet)}
{Calendar.strftime( <% else %>
bad_packet.attempted_at || bad_packet.inserted_at, {bad_packet.raw_packet}
"%Y-%m-%d %H:%M:%S UTC" <% end %>
)} </div>
</span> </div>
</:col> </td>
<:col :let={bad_packet} label={gettext("Error Type")}> </tr>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
{bad_packet.error_type || gettext("Unknown")}
</span>
</:col>
<:col :let={bad_packet} label={gettext("Error Message")}>
<span class="text-sm text-red-600 font-mono">
{bad_packet.error_message || gettext("No error message")}
</span>
</:col>
<:col :let={bad_packet} label={gettext("Raw Packet")}>
<div class="max-w-md">
<div class="text-xs font-mono text-gray-700 break-all">
<%= if is_binary(bad_packet.raw_packet) do %>
{Aprsme.EncodingUtils.sanitize_string(bad_packet.raw_packet)}
<% else %>
{bad_packet.raw_packet}
<% end %> <% end %>
</div> </tbody>
</div> </table>
</:col> </div>
</.table> </div>
</div> </div>
<%= if length(@bad_packets) == 0 do %> <%= if length(@bad_packets) == 0 do %>
<div class="mt-8 text-center"> <div class="card bg-base-100 shadow-xl mt-8">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100"> <div class="card-body text-center">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <div class="flex justify-center mb-4">
<path <div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center">
stroke-linecap="round" <svg
stroke-linejoin="round" class="w-8 h-8 text-success"
stroke-width="2" fill="none"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor"
/> viewBox="0 0 24 24"
</svg> >
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
<h3 class="text-lg font-semibold">{gettext("No bad packets")}</h3>
<p class="text-base-content/70">{gettext("All packets are parsing successfully!")}</p>
</div> </div>
<h3 class="mt-2 text-sm font-medium text-gray-900">{gettext("No bad packets")}</h3>
<p class="mt-1 text-sm text-gray-500">{gettext("All packets are parsing successfully!")}</p>
</div> </div>
<% end %> <% end %>
</div> </div>

View file

@ -88,12 +88,17 @@ defmodule AprsmeWeb.Plugs.IPGeolocation do
# Fall back to remote_ip # Fall back to remote_ip
ip_from_remote = ip_from_remote =
case conn.remote_ip do case conn.remote_ip do
{a, b, c, d} -> "#{a}.#{b}.#{c}.#{d}" {a, b, c, d} ->
"#{a}.#{b}.#{c}.#{d}"
{a, b, c, d, e, f, g, h} -> {a, b, c, d, e, f, g, h} ->
# Convert IPv6 tuple to proper IPv6 format # Convert IPv6 tuple to proper IPv6 format
:inet.ntoa({a, b, c, d, e, f, g, h}) {a, b, c, d, e, f, g, h}
|> :inet.ntoa()
|> to_string() |> to_string()
_ -> nil
_ ->
nil
end end
if ip_from_remote do if ip_from_remote do

View file

@ -0,0 +1,76 @@
defmodule AprsmeWeb.BadPacketsLiveTest do
use AprsmeWeb.ConnCase
import Phoenix.LiveViewTest
alias Aprsme.BadPacket
alias Aprsme.Repo
describe "Index" do
test "renders bad packets page with DaisyUI card", %{conn: conn} do
{:ok, _index_live, html} = live(conn, ~p"/badpackets")
assert html =~ "card"
assert html =~ "bg-base-100"
assert html =~ "shadow-xl"
end
test "lists all bad packets with DaisyUI table", %{conn: conn} do
bad_packet =
Repo.insert!(%BadPacket{
raw_packet: "KD9PDP>APRS:Invalid packet data",
error_message: "Failed to parse APRS data",
error_type: "parse_error",
attempted_at: DateTime.utc_now()
})
{:ok, _index_live, html} = live(conn, ~p"/badpackets")
assert html =~ bad_packet.error_message
assert html =~ bad_packet.error_type
assert html =~ "table"
assert html =~ "badge"
end
test "displays empty state with DaisyUI components when no bad packets", %{conn: conn} do
{:ok, _index_live, html} = live(conn, ~p"/badpackets")
assert html =~ "No bad packets"
assert html =~ "All packets are parsing successfully!"
assert html =~ "text-success"
end
test "updates in real-time when new bad packet is created", %{conn: conn} do
{:ok, index_live, _html} = live(conn, ~p"/badpackets")
# Create a bad packet after the live view is loaded
bad_packet =
Repo.insert!(%BadPacket{
raw_packet: "KD9PDP>APRS:New invalid packet",
error_message: "New parse error",
error_type: "validation_error",
attempted_at: DateTime.utc_now()
})
# The LiveView listens to postgres notifications, so we need to trigger a refresh
# by sending the :do_refresh message directly
send(index_live.pid, :do_refresh)
# Wait for the async update
:timer.sleep(100)
html = render(index_live)
assert html =~ bad_packet.error_message
assert html =~ bad_packet.error_type
end
test "works correctly in dark mode", %{conn: conn} do
{:ok, _index_live, html} = live(conn, ~p"/badpackets")
# DaisyUI uses data-theme for theming
# The components should work with both light and dark themes
assert html =~ "bg-base-100"
assert html =~ "text-base-content"
end
end
end