Add fancy progress bar for devices list (#1791)

We were already receiving these events, might as well display the progress

lib/nerves_hub_web/channels/device_channel.ex

@@ -286,7 +286,10 @@ defmodule NervesHubWeb.DeviceChannel do
   end
 
   def handle_in("fwup_progress", %{"value" => percent}, %{assigns: %{device: device}} = socket) do
-    device_internal_broadcast!(socket, device, "fwup_progress", %{percent: percent})
+    device_internal_broadcast!(socket, device, "fwup_progress", %{
+      device_id: device.id,
+      percent: percent
+    })
 
     # if this is the first fwup we see, then mark it as an update attempt
     if socket.assigns[:update_started?] do

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

@@ -119,7 +119,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr :for={device <- @devices} class={["border-b border-zinc-800", device.id in @selected_devices && "selected-row"]}>
+          <tr :for={device <- @devices} class={["border-b border-zinc-800 relative", device.id in @selected_devices && "selected-row"]} style={progress_style(@progress[device.id])}>
             <td class="checkbox">
               <input
                 id={"checkbox-device-#{device.id}"}

lib/nerves_hub_web/live/devices/index.ex

@@ -92,6 +92,7 @@ defmodule NervesHubWeb.Live.Devices.Index do
     |> assign(:currently_filtering, false)
     |> assign(:selected_devices, [])
     |> assign(:target_product, nil)
+    |> assign(:progress, %{})
     |> assign(:valid_tags, true)
     |> assign(:device_tags, "")
     |> assign(:total_entries, 0)
@@ -113,6 +114,7 @@ defmodule NervesHubWeb.Live.Devices.Index do
     |> assign(:sort_direction, Map.get(unsigned_params, "sort_direction", "asc"))
     |> assign(:current_filters, filters)
     |> assign(:paginate_opts, pagination_opts)
+    |> assign(:progress, socket.assigns[:progress] || %{})
     |> assign(:currently_filtering, filters != @default_filters)
     |> assign(:params, unsigned_params)
     |> assign_display_devices()
@@ -402,6 +404,28 @@ defmodule NervesHubWeb.Live.Devices.Index do
     update_device_statuses(socket, 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))
+    |> 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))
+    |> noreply()
+  end
+
   # Unknown broadcasts get ignored, likely from the device:id:internal channel
   def handle_info(%Broadcast{}, socket) do
     {:noreply, socket}
@@ -651,4 +675,17 @@ defmodule NervesHubWeb.Live.Devices.Index do
         )
     end
   end
+
+  defp progress_style(nil) do
+    nil
+  end
+
+  defp progress_style(progress) do
+    """
+     background-repeat: no-repeat, no-repeat;
+     background-image: linear-gradient(90deg, rgba(16, 185, 129, 1.00) 0%, rgba(16, 185, 129, 1.0) 100%),
+                       radial-gradient(ellipse 80% 80% at 50% -10%, rgba(16, 185, 129, 0.3) 0, rgba(16, 185, 129, 0.0) 80%);
+     background-size: #{progress}% 1px, #{progress}% 100%;
+    """
+  end
 end