Make device list refresh in a live but safe way (#2260)

For the purpose of making it possible to watch live updates more
information should refresh on connection changes. But it should be
throttled in a responsible way.

We can even let fwup_progress events indicate that things should refresh
if the pace is safe.

One big addition to making this safe is to determine which tabs are not
being watched and if they are not watche we don't update them.

This improves on the 10 second timer updater.

---------

Co-authored-by: Nate Shoemaker <[email protected]>

Author: lawik

assets/ui-rework/app.js

@@ -16,6 +16,7 @@ import HighlightCode from "./hooks/highlightCode.js"
 import LocalShell from "./hooks/localShell.js"
 import LocalTime from "./hooks/localTime.js"
 import LogLineLocalTime from "./hooks/logLineLocalTime.js"
+import PageVisible from "./hooks/pageVisible.js"
 import SharedSecretClipboardClick from "./hooks/sharedSecretClipboardClick.js"
 import SimpleDate from "./hooks/simpleDate.js"
 import SupportScriptOutput from "./hooks/supportScriptOutput.js"
@@ -48,6 +49,7 @@ let liveSocket = new LiveSocket("/live", Socket, {
     LocalShell,
     LocalTime,
     LogLineLocalTime,
+    PageVisible,
     SharedSecretClipboardClick,
     SimpleDate,
     SupportScriptOutput,

assets/ui-rework/hooks/pageVisible.js

@@ -0,0 +1,12 @@
+export default {
+  mounted() {
+    this.init()
+  },
+  init() {
+    document.addEventListener("visibilitychange", () => {
+      this.pushEvent("page_visibility_change", {
+        visible: document.visibilityState === "visible"
+      })
+    })
+  }
+}

lib/nerves_hub_web/live/devices/index.ex

@@ -25,6 +25,8 @@ defmodule NervesHubWeb.Live.Devices.Index do
   alias NervesHubWeb.LayoutView.DateTimeFormat
 
   @list_refresh_time 10_000
+  # Delay frequent refresh triggers to this interval
+  @refresh_delay 1000
 
   @default_filters %{
     connection: "",
@@ -107,6 +109,10 @@ defmodule NervesHubWeb.Live.Devices.Index do
     |> assign(:valid_tags, true)
     |> assign(:device_tags, "")
     |> assign(:total_entries, 0)
+    |> assign(:visible?, true)
+    |> assign(:live_refresh_timer, nil)
+    |> assign(:live_refresh_pending?, false)
+    |> assign(:received_connection_change_identifiers, [])
     |> assign(:current_alarms, [])
     |> assign(:metrics_keys, [])
     |> assign(:deployment_groups, [])
@@ -415,42 +421,83 @@ defmodule NervesHubWeb.Live.Devices.Index do
     |> noreply()
   end
 
+  def handle_event("page_visibility_change", %{"visible" => visible?}, socket) do
+    socket
+    |> then(fn socket ->
+      # refresh if switching to visible from non-visible
+      if not socket.assigns.visible? and visible? do
+        safe_refresh(socket)
+      else
+        socket
+      end
+    end)
+    |> assign(visible?: visible?)
+    |> noreply()
+  end
+
   def handle_info(%Broadcast{event: "connection:status", payload: payload}, socket) do
-    update_device_statuses(socket, payload)
+    socket
+    |> assign(:received_connection_change_identifiers, [payload | socket.assigns.received_connection_change_identifiers])
+    |> safe_refresh()
+    |> update_device_statuses(payload)
   end
 
   def handle_info(%Broadcast{event: "connection:change", payload: payload}, socket) do
-    update_device_statuses(socket, payload)
+    socket
+    |> assign(:received_connection_change_identifiers, [payload | socket.assigns.received_connection_change_identifiers])
+    |> safe_refresh()
+    |> update_device_statuses(payload)
   end
 
   def handle_info(%Broadcast{event: "fwup_progress", payload: %{device_id: device_id, percent: percent}}, socket)
       when percent > 99 do
     socket
     |> assign(:progress, Map.delete(socket.assigns.progress, device_id))
+    |> safe_refresh()
     |> noreply()
   end
 
   def handle_info(%Broadcast{event: "fwup_progress", payload: %{device_id: device_id, percent: percent}}, socket) do
     socket
     |> assign(:progress, Map.put(socket.assigns.progress, device_id, percent))
+    |> safe_refresh()
     |> noreply()
   end
 
   # Unknown broadcasts get ignored, likely from the device:id:internal channel
   def handle_info(%Broadcast{}, socket) do
-    {:noreply, socket}
+    socket
+    |> safe_refresh()
+    |> noreply()
   end
 
   def handle_info(:refresh_device_list, socket) do
-    Tracer.with_span "NervesHubWeb.Live.Devices.Index.refresh_device_list" do
-      Process.send_after(self(), :refresh_device_list, @list_refresh_time)
+    if socket.assigns.visible? do
+      Tracer.with_span "NervesHubWeb.Live.Devices.Index.refresh_device_list" do
+        Process.send_after(self(), :refresh_device_list, @list_refresh_time)
 
-      if socket.assigns.paginate_opts.total_pages == 1 do
-        {:noreply, assign_display_devices(socket)}
-      else
-        {:noreply, socket}
+        socket
+        |> safe_refresh()
+        |> noreply()
+      end
+
+      socket
+      |> noreply()
+    end
+  end
+
+  def handle_info(:live_refresh, socket) do
+    if socket.assigns.visible? and socket.assigns.live_refresh_pending? do
+      Tracer.with_span "NervesHubWeb.Live.Devices.Index.live_refresh_device_list" do
+        socket
+        |> assign_display_devices()
       end
+    else
+      socket
     end
+    |> assign(:live_refresh_timer, nil)
+    |> assign(:live_refresh_pending?, false)
+    |> noreply()
   end
 
   defp assign_filter_data(%{assigns: %{product: product}} = socket) do
@@ -490,12 +537,22 @@ defmodule NervesHubWeb.Live.Devices.Index do
       Map.new(updated_devices, fn device ->
         socket.endpoint.subscribe("device:#{device.identifier}:internal")
 
-        {device.identifier, Tracker.connection_status(device)}
+        payload =
+          Enum.find(socket.assigns.received_connection_change_identifiers, fn %{device_id: identifier} ->
+            identifier == device.identifier
+          end)
+
+        if payload do
+          {payload.device_id, payload.status}
+        else
+          {device.identifier, Tracker.connection_status(device)}
+        end
       end)
 
     socket
     |> assign(:devices, AsyncResult.ok(old_devices, updated_devices))
     |> assign(:device_statuses, AsyncResult.ok(old_device_statuses, updated_device_statuses))
+    |> assign(:received_connection_change_identifiers, [])
     |> device_pagination_assigns(paginate_opts, pager)
     |> noreply()
   end
@@ -724,4 +781,17 @@ defmodule NervesHubWeb.Live.Devices.Index do
   defp has_results?(%AsyncResult{} = device_async, currently_filtering?) do
     device_async.ok? && (Enum.any?(device_async.result) || currently_filtering?)
   end
+
+  defp safe_refresh(socket) do
+    if is_nil(socket.assigns.live_refresh_timer) and socket.assigns.visible? do
+      # Nothing pending, we perform a refresh
+      socket
+      |> assign_display_devices()
+      |> assign(:live_refresh_timer, Process.send_after(self(), :live_refresh, @refresh_delay))
+    else
+      # a timer is already pending, we flag the pending request
+      socket
+      |> assign(:live_refresh_pending?, true)
+    end
+  end
 end

lib/nerves_hub_web/live/devices/index.html.heex

@@ -1,6 +1,19 @@
-<div class="h-[56px] flex justify-end bg-base-900 border-b border-base-700"></div>
+<div class="h-[56px] flex justify-end bg-base-900 border-b border-base-700">
+  <div class="h-full border-l flex items-center justify-center border-base-700 bg-base-900">
+    <a :if={Application.get_env(:nerves_hub, :new_ui)} href={"/ui/switch?return_to=#{@current_path}"} class="">
+      <svg class="box-content px-5 h-5 w-5 stroke-zinc-500 hover:stroke-indigo-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M21 14V19C21 20.1046 20.1046 21 19 21H16M3 16V19C3 20.1046 3.89543 21 5 21H16M3 16V5C3 3.89543 3.89543 3 5 3H11M3 16C4.40293 15.7662 6.63687 15.7073 8.94504 16.2427M16 21C14.2965 18.2317 11.5726 16.8522 8.94504 16.2427M8.94504 16.2427C9.87157 15.1698 11.1851 14.1585 13 13.3925M8.5 7C8 7 7 7.3 7 8.5C7 9.7 8 10 8.5 10C9 10 10 9.7 10 8.5C10 7.3 9 7 8.5 7ZM17.5 9.46262L14.7188 11L15.25 7.74377L13 5.43769L16.1094 4.96262L17.5 2L18.8906 4.96262L22 5.43769L19.75 7.74377L20.2812 11L17.5 9.46262Z"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
 
-<div class="h-0 flex-1 overflow-y-auto">
+<div id="device-container" class="h-0 flex-1 overflow-y-auto" phx-hook="PageVisible">
   <div class="flex items-center h-[90px] gap-4 px-6 py-7 border-b border-[#3F3F46] text-sm font-medium">
     <h1 :if={!@devices.ok?} class="text-xl leading-[30px] font-semibold text-neutral-50">Loading...</h1>
     <h1 :if={@devices.ok?} id="devices-header" class="text-xl leading-[30px] font-semibold text-neutral-50 hidden" phx-mounted={fade_in("#devices-header")}>