Improvements to the 'updating' header on the deployments summary tab (#1868)

All devices up to date:

<img width="1512" alt="Screenshot 2025-02-03 at 5 59 49 PM"
src="https://github.com/user-attachments/assets/796ed39c-afb4-428b-ac6f-702a46e423ca"
/>

Updating:

<img width="1512" alt="Screenshot 2025-02-03 at 6 00 52 PM"
src="https://github.com/user-attachments/assets/4f065886-56a7-4cb7-a28e-11bf9b078137"
/>

Author: joshk

lib/nerves_hub/devices.ex

@@ -901,6 +901,14 @@ defmodule NervesHub.Devices do
     |> Repo.aggregate(:count)
   end
 
+  @spec updating_count(Deployment.t()) :: term() | nil
+  def updating_count(%Deployment{id: id}) do
+    InflightUpdate
+    |> where([ifu], ifu.deployment_id == ^id)
+    |> Repo.aggregate(:count)
+  end
+
+  @spec waiting_for_update_count(Deployment.t()) :: term() | nil
   def waiting_for_update_count(%Deployment{} = deployment) do
     Device
     |> where([d], d.deployment_id == ^deployment.id)

lib/nerves_hub_web/components/deployment_page/summary.ex

@@ -12,6 +12,7 @@ defmodule NervesHubWeb.Components.DeploymentPage.Summary do
     |> assign(:inflight_updates, inflight_updates)
     |> assign(:up_to_date_count, Devices.up_to_date_count(deployment))
     |> assign(:waiting_for_update_count, Devices.waiting_for_update_count(deployment))
+    |> assign(:updating_count, Devices.updating_count(deployment))
     |> ok()
   end
 
@@ -24,18 +25,19 @@ defmodule NervesHubWeb.Components.DeploymentPage.Summary do
   def render(assigns) do
     ~H"""
     <div class="h-full flex flex-col items-start gap-4 p-6">
-      <div :if={@waiting_for_update_count == 0} class="w-full flex p-4 items-center justify-center rounded border border-zinc-700 bg-zinc-900">
-        <div class="text-neutral-50 font-medium leading-6">All devices are up to date!</div>
+      <div :if={@waiting_for_update_count == 0} class="w-full p-4 items-center justify-center rounded border border-zinc-700 bg-zinc-900">
+        <div class="flex text-xl text-neutral-50 font-medium leading-6 h-10 justify-center items-center">All devices are up to date!</div>
       </div>
 
-      <div :if={@waiting_for_update_count > 0} class="w-full box-content flex items-center justify-center rounded border border-zinc-700 bg-zinc-900">
+      <div :if={@waiting_for_update_count > 0} class="w-full h-24 box-content flex items-center justify-center rounded border border-zinc-700 bg-zinc-900">
         <div class="relative sticky top-0 w-full items-center justify-center rounded overflow-visible z-20">
           <div class="z-40 absolute -top-px border-t rounded-tl border-success-500" role="progressbar" style={"width: #{deployment_percentage(@up_to_date_count, @deployment)}%"}>
             <div class="animate-pulse bg-progress-glow w-full h-16" />
           </div>
 
-          <div class="flex items-center justify-center my-1 py-2 px-2 bg-base-900/20 text-sm font-medium">
-            {deployment_percentage(@up_to_date_count, @deployment)}% of devices updated - {@waiting_for_update_count} device(s) waiting to be updated
+          <div class="flex flex-col gap-1 items-center justify-center my-1 py-2 px-2 bg-base-900/20 text-sm font-medium">
+            <div class="text-base">{deployment_percentage(@up_to_date_count, @deployment)}% of devices updated</div>
+            <div>{@updating_count} device(s) updating - {@waiting_for_update_count} device(s) waiting</div>
           </div>
         </div>
       </div>

lib/nerves_hub_web/live/deployments/show-new.html.heex

@@ -96,6 +96,7 @@
     inflight_updates={@inflight_updates}
     up_to_date_count={@up_to_date_count}
     waiting_for_update_count={@waiting_for_update_count}
+    updating_count={@updating_count}
     product={@product}
     org={@org}
     org_user={@org_user}

lib/nerves_hub_web/live/deployments/show.ex

@@ -37,6 +37,7 @@ defmodule NervesHubWeb.Live.Deployments.Show do
 
     inflight_updates = Devices.inflight_updates_for(deployment)
     current_device_count = Deployments.get_device_count(deployment)
+    updating_count = Devices.updating_count(deployment)
 
     socket
     |> page_title("Deployment - #{deployment.name} - #{product.name}")
@@ -45,6 +46,7 @@ defmodule NervesHubWeb.Live.Deployments.Show do
     |> assign(:deployment, deployment)
     |> assign(:up_to_date_count, Devices.up_to_date_count(deployment))
     |> assign(:waiting_for_update_count, Devices.waiting_for_update_count(deployment))
+    |> assign(:updating_count, updating_count)
     |> assign(:audit_logs, logs)
     |> assign(:audit_pager, audit_pager)
     |> assign(:inflight_updates, inflight_updates)
@@ -118,6 +120,7 @@ defmodule NervesHubWeb.Live.Deployments.Show do
     |> assign(:inflight_updates, inflight_updates)
     |> assign(:up_to_date_count, Devices.up_to_date_count(deployment))
     |> assign(:waiting_for_update_count, Devices.waiting_for_update_count(deployment))
+    |> assign(:updating_count, Devices.updating_count(deployment))
     |> noreply()
   end