Fix Audit Logs pagination on Device pages (#2257)

Fix pagination functionality for Audit Logs on Device pages in both old
and new UI implementations.

### The Problem
- Pagination buttons were not working on device pages
- Old UI and new UI had different default page sizes causing incorrect
page counts
- URL parameters were not being read properly

### What was fixed
✅ **Old UI**: Fixed `handle_params` to read URL pagination parameters  
✅ **New UI**: Fixed `ActivityTab.tab_params` to extract pagination from
URL
✅ **Dynamic defaults**: `page_size=5` for old UI, `page_size=25` for new
UI
✅ **URL handling**: Pagination now stays on correct pages

### Impact
- Before: Pagination buttons did not work, always showed page 1
- After: Full pagination functionality with correct page counts for each
UI

---------

Co-authored-by: Taras Tyshko <[email protected]>

Author: taras-tyshko

lib/nerves_hub_web/components/device_page/activity_tab.ex

@@ -5,17 +5,20 @@ defmodule NervesHubWeb.Components.DevicePage.ActivityTab do
 
   alias NervesHubWeb.Components.Pager
 
-  def tab_params(_params, _uri, socket) do
+  def tab_params(params, _uri, socket) do
+    page_number = String.to_integer(Map.get(params, "page_number", "1"))
+    page_size = String.to_integer(Map.get(params, "page_size", "25"))
+
     socket
-    |> logs_and_pager_assigns()
+    |> logs_and_pager_assigns(page_number, page_size)
     |> cont()
   end
 
   def cleanup() do
     [:activity, :audit_pager]
   end
 
-  defp logs_and_pager_assigns(socket, page_number \\ 1, page_size \\ 25) do
+  defp logs_and_pager_assigns(socket, page_number, page_size) do
     {logs, audit_pager} =
       AuditLogs.logs_for_feed(socket.assigns.device, %{
         page: page_number,
@@ -96,7 +99,7 @@ defmodule NervesHubWeb.Components.DevicePage.ActivityTab do
   end
 
   def hooked_event("set-paginate-opts", %{"page-size" => page_size}, socket) do
-    params = %{"page_size" => page_size, "page_number" => 1}
+    params = %{"page_size" => page_size, "page_number" => "1"}
 
     %{org: org, product: product, device: device} = socket.assigns
 

lib/nerves_hub_web/live/devices/show.ex

@@ -63,18 +63,22 @@ defmodule NervesHubWeb.Live.Devices.Show do
     |> assign_metadata()
     |> schedule_health_check_timer()
     |> assign(:fwup_progress, nil)
-    |> assign(:page_number, 1)
-    |> assign(:page_size, 5)
     |> assign(:pinned?, Devices.device_pinned?(user.id, device.id))
-    |> audit_log_assigns()
     |> assign_deployment_groups()
     |> setup_presence_tracking()
     |> setup_tab_components(@tab_components)
     |> ok()
   end
 
-  def handle_params(_params, _uri, socket) do
+  def handle_params(params, _uri, socket) do
+    default_page_size = if socket.assigns[:new_ui], do: "25", else: "5"
+    page_number = String.to_integer(Map.get(params, "page_number", "1"))
+    page_size = String.to_integer(Map.get(params, "page_size", default_page_size))
+
     socket
+    |> assign(:page_number, page_number)
+    |> assign(:page_size, page_size)
+    |> audit_log_assigns()
     |> update_tab_component_hooks()
     |> noreply()
   end
@@ -283,12 +287,11 @@ defmodule NervesHubWeb.Live.Devices.Show do
     end
   end
 
-  def handle_event("paginate", %{"page" => page_num}, socket) do
-    params = %{"page_size" => socket.assigns.page_size, "page_number" => page_num}
-
+  def handle_event("paginate", %{"page" => page_number}, socket) do
+    params = %{"page_size" => socket.assigns.page_size, "page_number" => page_number}
     %{org: org, product: product, device: device} = socket.assigns
 
-    url = ~p"/org/#{org}/#{product}/devices/#{device}/activity?#{params}"
+    url = ~p"/org/#{org}/#{product}/devices/#{device}?#{params}"
 
     socket
     |> push_patch(to: url)
@@ -484,11 +487,10 @@ defmodule NervesHubWeb.Live.Devices.Show do
   end
 
   def handle_event("set-paginate-opts", %{"page-size" => page_size}, socket) do
-    params = %{"page_size" => page_size, "page_number" => 1}
-
+    params = %{"page_size" => page_size, "page_number" => "1"}
     %{org: org, product: product, device: device} = socket.assigns
 
-    url = ~p"/org/#{org}/#{product}/devices/#{device}/activity?#{params}"
+    url = ~p"/org/#{org}/#{product}/devices/#{device}?#{params}"
 
     socket
     |> push_patch(to: url)

test/nerves_hub_web/live/devices/show_test.exs

@@ -686,6 +686,62 @@ defmodule NervesHubWeb.Live.Devices.ShowTest do
     end
   end
 
+  describe "audit logs pagination" do
+    test "pagination works with URL parameters", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device,
+      user: user
+    } do
+      # Create multiple audit log entries for pagination testing
+      Enum.each(1..12, fn i ->
+        NervesHub.AuditLogs.audit!(user, device, "Test audit log entry #{i}")
+      end)
+
+      # Test page 1 with default page_size=5
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}")
+      |> assert_has("div.audit-log-item", count: 5)
+      |> assert_has("button[phx-value-page=\"2\"]")
+
+      # Test page 2 with page_size=5
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}?page_number=2&page_size=5")
+      # Still showing 5 per page
+      |> assert_has("div.audit-log-item", count: 5)
+      |> assert_has("button[phx-value-page=\"1\"]")
+
+      # Test custom page_size=10
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}?page_number=1&page_size=10")
+      |> assert_has("div.audit-log-item", count: 10)
+    end
+
+    test "pagination events work correctly", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device,
+      user: user
+    } do
+      # Create enough audit logs for pagination
+      Enum.each(1..8, fn i ->
+        NervesHub.AuditLogs.audit!(user, device, "Pagination test entry #{i}")
+      end)
+
+      {:ok, view, _html} = live(conn, ~p"/org/#{org}/#{product}/devices/#{device}")
+
+      # Test paginate event
+      view
+      |> element("button[phx-click=\"paginate\"][phx-value-page=\"2\"]", "2")
+      |> render_click()
+
+      # Should redirect to page 2 on same device page
+      assert_patch(view, ~p"/org/#{org}/#{product}/devices/#{device}?page_number=2&page_size=5")
+    end
+  end
+
   def device_show_path(%{device: device, org: org, product: product}) do
     ~p"/org/#{org}/#{product}/devices/#{device}"
   end

test/nerves_hub_web/live/new_ui/devices/activity_tab_test.exs

@@ -14,7 +14,7 @@ defmodule NervesHubWeb.Live.NewUI.Devices.ActivityTabTest do
     device: device
   } do
     conn
-    |> visit("/org/#{org.name}/#{product.name}/devices/#{device.identifier}/activity")
+    |> visit(~p"/org/#{org}/#{product}/devices/#{device}/activity")
     |> assert_has("span", text: "No audit logs found for the device.")
   end
 
@@ -29,7 +29,94 @@ defmodule NervesHubWeb.Live.NewUI.Devices.ActivityTabTest do
     DeviceTemplates.audit_reboot(user, device)
 
     conn
-    |> visit("/org/#{org.name}/#{product.name}/devices/#{device.identifier}/activity")
+    |> visit(~p"/org/#{org}/#{product}/devices/#{device}/activity")
     |> assert_has("div", text: "User #{user.name} rebooted device #{device.identifier}")
   end
+
+  describe "pagination" do
+    test "pagination works with URL parameters", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device,
+      user: user
+    } do
+      # Create multiple audit log entries for pagination testing (30 entries)
+      Enum.each(1..30, fn i ->
+        NervesHub.AuditLogs.audit!(user, device, "New UI test audit log entry #{i}")
+      end)
+
+      # Test page 1 with default page_size=25
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}/activity")
+      |> assert_has("div.flex.items-center.gap-6", count: 25)
+      |> assert_has("button[phx-value-page=\"2\"]")
+
+      # Test page 2 with page_size=25
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}/activity?page_number=2&page_size=25")
+      # Remaining 5 entries
+      |> assert_has("div.flex.items-center.gap-6", count: 5)
+      |> assert_has("button[phx-value-page=\"1\"]")
+
+      # Test custom page_size=10
+      conn
+      |> visit(~p"/org/#{org}/#{product}/devices/#{device}/activity?page_number=1&page_size=10")
+      |> assert_has("div.flex.items-center.gap-6", count: 10)
+      |> assert_has("button[phx-value-page=\"2\"]")
+      |> assert_has("button[phx-value-page=\"3\"]")
+    end
+
+    test "pagination events work correctly", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device,
+      user: user
+    } do
+      # Create enough audit logs for pagination
+      Enum.each(1..30, fn i ->
+        NervesHub.AuditLogs.audit!(user, device, "New UI pagination test entry #{i}")
+      end)
+
+      {:ok, view, _html} = live(conn, ~p"/org/#{org}/#{product}/devices/#{device}/activity")
+
+      # Test paginate event
+      view
+      |> element("button[phx-click=\"paginate\"][phx-value-page=\"2\"]", "2")
+      |> render_click()
+
+      # Should redirect to page 2 on activity page
+      assert_patch(
+        view,
+        ~p"/org/#{org}/#{product}/devices/#{device}/activity?page_number=2&page_size=25"
+      )
+    end
+
+    test "page size selection works correctly", %{
+      conn: conn,
+      org: org,
+      product: product,
+      device: device,
+      user: user
+    } do
+      # Create 60 audit logs for testing page size changes
+      Enum.each(1..60, fn i ->
+        NervesHub.AuditLogs.audit!(user, device, "Page size test entry #{i}")
+      end)
+
+      {:ok, view, _html} = live(conn, ~p"/org/#{org}/#{product}/devices/#{device}/activity")
+
+      # Test changing page size to 50
+      view
+      |> element("button[phx-click=\"set-paginate-opts\"][phx-value-page-size=\"50\"]")
+      |> render_click()
+
+      # Should redirect to page 1 with page_size=50
+      assert_patch(
+        view,
+        ~p"/org/#{org}/#{product}/devices/#{device}/activity?page_number=1&page_size=50"
+      )
+    end
+  end
 end