Move alarm indication to navigation bar

assets/css/_custom.scss

@@ -255,19 +255,28 @@
   }
 }
 
-.device-limit-indicator {
-  background-image: url("/images/icons/device.svg");
-  background-position: right center;
+.navbar-indicator {
+  background-position: left center;
   background-repeat: no-repeat;
   background-size: 1.5rem;
-  padding-right: 2rem;
-  letter-spacing: 4px;
+  padding-left: 1.8rem;
+  letter-spacing: 2px;
 
   @media(max-width: 860px) {
     display: none;
   }
 }
 
+.device-limit-indicator {
+  background-image: url("/images/icons/device.svg");
+}
+
+.alarms-indicator {
+  background-image: url("/images/icons/bell.svg");
+  margin-left: 1.3rem;
+  font-weight: 400;
+}
+
 html {
   .btn-group>form:not(:first-child) .btn {
     margin-left: -1px;
@@ -356,6 +365,7 @@ html {
   cursor: pointer;
   display: flex;
   gap: 4px;
+
   label {
     font-size: 14px;
     border-radius: 3.2px;
@@ -371,6 +381,7 @@ html {
     padding-right: 8px;
     justify-content: center;
     flex-grow: 1;
+
     input[type=radio] {
       appearance: none;
     }

assets/css/_form.scss

@@ -267,7 +267,7 @@ html {
   .filter-form {
     &.device-filters {
       display: grid;
-      grid-template-columns: 3fr 3fr 3fr 2fr 3fr;
+      grid-template-columns: 2fr 2fr 2fr 2fr 3fr;
       grid-column-gap: 1rem;
 
       @media (max-width: 860px) {

lib/nerves_hub/devices/alarms.ex

@@ -48,7 +48,7 @@ defmodule NervesHub.Devices.Alarms do
     end)
     |> List.flatten()
     |> Enum.uniq()
-    |> Enum.map(&prettier_alarm/1)
+    |> Enum.map(&String.trim_leading(&1, "Elixir."))
   end
 
   @doc """
@@ -87,10 +87,4 @@ defmodule NervesHub.Devices.Alarms do
     |> select([:id])
     |> where(product_id: ^product_id)
   end
-
-  defp prettier_alarm(alarm) do
-    alarm
-    |> String.split(".")
-    |> List.last()
-  end
 end

lib/nerves_hub_web/components/navigation.ex

@@ -2,6 +2,7 @@ defmodule NervesHubWeb.Components.Navigation do
   use NervesHubWeb, :component
 
   alias NervesHub.Devices
+  alias NervesHub.Devices.Alarms
   alias NervesHub.Products.Product
 
   import NervesHubWeb.Components.SimpleActiveLink
@@ -115,6 +116,7 @@ defmodule NervesHubWeb.Components.Navigation do
 
     if Enum.any?(links) do
       assigns = %{
+        org: assigns.org,
         product: assigns.product,
         links: links
       }
@@ -129,8 +131,19 @@ defmodule NervesHubWeb.Components.Navigation do
               </.link>
             </li>
           </ul>
-          <div :if={device_count = device_count(@product)} class="device-limit-indicator" title="Device total" aria-label="Device total">
-            <%= device_count %>
+          <div class="flex-row align-items-center justify-content-between">
+            <div :if={device_count = device_count(@product)} class="navbar-indicator device-limit-indicator" title="Device total" aria-label="Device total">
+              <%= device_count %>
+            </div>
+            <.link
+              :if={alarms_count = alarms_count(@product)}
+              navigate={~p"/org/#{@org.name}/#{@product.name}/devices?alarm_status=with"}
+              class="navbar-indicator alarms-indicator"
+              title="Devices alarming"
+              aria-label="Devices alarming"
+            >
+              <%= alarms_count %>
+            </.link>
           </div>
         </nav>
       </div>
@@ -308,4 +321,7 @@ defmodule NervesHubWeb.Components.Navigation do
   def device_count(_conn) do
     nil
   end
+
+  def alarms_count(%Product{} = product), do: Alarms.current_alarms_count(product.id)
+  def alarms_count(_conn), do: nil
 end

lib/nerves_hub_web/live/dashboard/index.ex

@@ -2,7 +2,6 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
   use NervesHubWeb, :updated_live_view
 
   alias NervesHub.Devices
-  alias NervesHub.Devices.Alarms
   alias NervesHub.Devices.Device
   alias NervesHub.Deployments
 
@@ -23,7 +22,6 @@ defmodule NervesHubWeb.Live.Dashboard.Index do
     |> assign(:mode, "updated")
     |> assign(:device_count, 0)
     |> assign(:marker_count, 0)
-    |> assign(:alarms_count, Alarms.current_alarms_count(product.id))
     |> refresh_after(1)
     |> ok()
   end

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

@@ -1,9 +1,4 @@
 <div class="relative">
-  <div :if={@alarms_count > 0} class="alarms-banner">
-    <.link navigate={~p"/org/#{@org.name}/#{@product.name}/devices?alarm_status=with"} class="p-small">
-      <%= @alarms_count %> device<%= if @alarms_count > 1, do: "s", else: "" %> alarming.
-    </.link>
-  </div>
   <%= if @device_count == 0 and not @loading? do %>
     <div class="no-results-blowup-wrapper">
       <img src="/images/device.svg" alt="No devices" />