Add devices online/offline to org and product views (#2402)

This is primarily to help people doing development or with few devices
but a couple of orgs set up. It helps for figuring out where your active
devices actually are. I've had this issue a hilarious number of times.

The loading is deferred so it won't stop someone from navigating if it
becomes slow. There are only two queries made so it shouldn't be
particularly impactful in performance and the information isn't
live-updated.

It might also indicate when something is really wrong or weird I
suppose. But mostly it helps indicate which orgs and products are
actually in use. Especially since the development seed produces a bunch
of them.

---------

Co-authored-by: Josh Kalderimis <[email protected]>

Author: lawik

lib/nerves_hub/devices/connections.ex

@@ -20,6 +20,76 @@ defmodule NervesHub.Devices.Connections do
     |> Repo.all()
   end
 
+  @doc """
+  Get device connection information for Orgs.
+  """
+  @spec get_connection_status_by_orgs(org_ids :: [non_neg_integer()]) :: %{
+          non_neg_integer() => %{online: non_neg_integer(), offline: non_neg_integer()}
+        }
+  def get_connection_status_by_orgs(org_ids) when is_list(org_ids) do
+    q =
+      DeviceConnection
+      |> join(:inner, [d], p in assoc(d, :product))
+      |> select([d, p], [p.org_id, count(d.id)])
+      |> where([_, p], p.org_id in ^org_ids)
+      |> group_by([_, p], p.org_id)
+
+    online =
+      q
+      |> where([d], d.status == :connected)
+      |> Repo.all()
+
+    offline =
+      q
+      |> where([d], d.status != :connected)
+      |> Repo.all()
+
+    for org_id <- org_ids, into: %{} do
+      {org_id, %{online: 0, offline: 0}}
+    end
+    |> to_connection_status(online, :online)
+    |> to_connection_status(offline, :offline)
+  end
+
+  @doc """
+  Get device connection information for Products.
+  """
+  @spec get_connection_status_by_products(product_ids :: [non_neg_integer()]) :: %{
+          non_neg_integer() => %{online: non_neg_integer(), offline: non_neg_integer()}
+        }
+  def get_connection_status_by_products(product_ids) when is_list(product_ids) do
+    q =
+      DeviceConnection
+      |> join(:inner, [d], p in assoc(d, :product))
+      |> select([d, p], [p.id, count(d.id)])
+      |> where([_, p], p.id in ^product_ids)
+      |> group_by([_, p], p.id)
+
+    online =
+      q
+      |> where([d], d.status == :connected)
+      |> Repo.all()
+
+    offline =
+      q
+      |> where([d], d.status != :connected)
+      |> Repo.all()
+
+    for product_id <- product_ids, into: %{} do
+      {product_id, %{online: 0, offline: 0}}
+    end
+    |> to_connection_status(online, :online)
+    |> to_connection_status(offline, :offline)
+  end
+
+  defp to_connection_status(start, counts, status) do
+    counts
+    |> Enum.reduce(start, fn [id, count], acc ->
+      current = Map.get(acc, id, %{})
+      Map.put(acc, id, Map.put(current, status, count))
+    end)
+  end
+
   @doc """
   Get latest inserted connection for a device.
   """

lib/nerves_hub_web/live/org/show.ex

@@ -1,6 +1,7 @@
 defmodule NervesHubWeb.Live.Org.Show do
   use NervesHubWeb, :updated_live_view
 
+  alias NervesHub.Devices.Connections
   alias NervesHub.Products
 
   @impl Phoenix.LiveView
@@ -11,10 +12,21 @@ defmodule NervesHubWeb.Live.Org.Show do
       socket
       |> page_title("Products - #{socket.assigns.org.name}")
       |> assign(:products, products)
+      |> assign(:device_info, %{})
+
+    if connected?(socket), do: send(self(), :load_extras)
 
     {:ok, socket}
   end
 
+  @impl Phoenix.LiveView
+  def handle_info(:load_extras, socket) do
+    statuses =
+      Connections.get_connection_status_by_products(Enum.map(socket.assigns.products, & &1.id))
+
+    {:noreply, assign(socket, :device_info, statuses)}
+  end
+
   def fade_in(selector) do
     JS.show(
       to: selector,

lib/nerves_hub_web/live/org/show.html.heex

@@ -22,6 +22,19 @@
     <%= for product <- @products do %>
       <.link navigate={~p"/org/#{@org}/#{product}/devices"} class="grid-item">
         <h3>{product.name}</h3>
+        <div class="flex-row">
+          <div class="flex-grow-1">
+            <div class="help-text mt-2">Devices</div>
+            <div class="flex flex-row mt-1 align-items-center justify-content-between">
+              <div>
+                <p>{get_in(@device_info, [product.id, :online]) || "-"} online</p>
+              </div>
+              <div>
+                <p>{get_in(@device_info, [product.id, :offline]) || "-"} offline</p>
+              </div>
+            </div>
+          </div>
+        </div>
       </.link>
     <% end %>
   </div>

lib/nerves_hub_web/live/orgs/index.ex

@@ -2,6 +2,7 @@ defmodule NervesHubWeb.Live.Orgs.Index do
   use NervesHubWeb, :updated_live_view
 
   alias NervesHub.Devices
+  alias NervesHub.Devices.Connections
   alias NervesHub.Tracker
   # alias NervesHubWeb.Components.PinnedDevices
 
@@ -10,6 +11,7 @@ defmodule NervesHubWeb.Live.Orgs.Index do
 
   @pinned_devices_limit 5
 
+  @impl Phoenix.LiveView
   def mount(_params, _session, %{assigns: %{user: user}} = socket) do
     pinned_devices = Devices.get_pinned_devices(user.id)
 
@@ -18,22 +20,35 @@ defmodule NervesHubWeb.Live.Orgs.Index do
         {device.identifier, Tracker.connection_status(device)}
       end)
 
-    socket
-    |> assign(:page_title, "Organizations")
-    |> assign(:show_all_pinned?, false)
-    |> assign(:pinned_devices, Devices.get_pinned_devices(user.id))
-    |> assign(:device_statuses, statuses)
-    |> assign(:device_limit, @pinned_devices_limit)
-    |> subscribe()
-    |> ok()
+    socket =
+      socket
+      |> assign(:page_title, "Organizations")
+      |> assign(:show_all_pinned?, false)
+      |> assign(:device_info, %{})
+      |> assign(:pinned_devices, Devices.get_pinned_devices(user.id))
+      |> assign(:device_statuses, statuses)
+      |> assign(:device_limit, @pinned_devices_limit)
+      |> subscribe()
+
+    if connected?(socket), do: send(self(), :load_extras)
+    {:ok, socket}
   end
 
+  @impl Phoenix.LiveView
   def handle_event("toggle-expand-devices", _, %{assigns: %{show_all_pinned?: show_all?}} = socket) do
     socket
     |> assign(:show_all_pinned?, !show_all?)
     |> noreply()
   end
 
+  @impl true
+  def handle_info(:load_extras, socket) do
+    statuses =
+      Connections.get_connection_status_by_orgs(Enum.map(socket.assigns.user.orgs, & &1.id))
+
+    {:noreply, assign(socket, :device_info, statuses)}
+  end
+
   def handle_info(%Broadcast{event: "connection:status", payload: payload}, socket) do
     update_device_statuses(socket, payload)
   end

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

@@ -16,11 +16,21 @@
       <.link navigate={~p"/org/#{org}"} class="grid-item">
         <h3>{org.name}</h3>
         <div class="flex-row">
-          <div>
-            <div class="help-text">Total Products</div>
-            <div class="flex-row mt-1 align-items-center">
+          <div class="flex-grow-1 mt-1">
+            <div class="help-text">Products</div>
+            <div class="mt-1">
               <img src="/images/icons/product.svg" alt="products" class="mr-1" style="margin-top: -1px" />
-              <p>{Enum.count(org.products)}</p>
+              <span>{Enum.count(org.products)}</span>
+            </div>
+
+            <div class="help-text mt-2">Devices</div>
+            <div class="flex flex-row mt-1 align-items-center justify-content-between">
+              <div>
+                <p>{get_in(@device_info, [org.id, :online]) || "-"} online</p>
+              </div>
+              <div>
+                <p>{get_in(@device_info, [org.id, :offline]) || "-"} offline</p>
+              </div>
             </div>
           </div>
         </div>