Add custom metrics to health display

lib/nerves_hub_web/components/device_page/details.ex

@@ -17,6 +17,18 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
 
   alias NervesHubWeb.Components.NewUI.DeviceLocation
 
+  @manual_metrics [
+    "cpu_temp",
+    "cpu_usage_percent",
+    "mem_used_mb",
+    "mem_size_mb",
+    "mem_used_percent",
+    "load_1min",
+    "load_5min",
+    "load_15min",
+    "timestamp"
+  ]
+
   def update(%{latest_metrics: latest_metrics}, socket) do
     socket
     |> assign(:latest_metrics, latest_metrics)
@@ -153,6 +165,10 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
                 <span class="text-xl leading-[30px] text-nerves-gray-500">Not reported</span>
               </div>
             </div>
+            <div :for={{key, value} <- custom_metrics(@latest_metrics)} class="grow flex flex-col h-16 py-2 px-3 rounded border-b border-neutral-500 bg-health-plain">
+              <span class="text-xs text-neutral-400 tracking-wide">{key_label(key)}</span>
+              <span class="text-xl leading-[30px] text-neutral-50">{nice_round(value)}</span>
+            </div>
           </div>
           <div class="px-4 pb-4">
             <.link class="text-xs font-normal text-zinc-400 hover:text-neutral-50" href="https://github.com/nerves-hub/nerves_hub_link?tab=readme-ov-file#configure-health">
@@ -603,4 +619,20 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
   defp has_description?(description) do
     is_binary(description) and byte_size(description) > 0
   end
+
+  defp custom_metrics(metrics) do
+    metrics
+    |> Enum.reject(fn {key, _value} ->
+      key in @manual_metrics
+    end)
+  end
+
+  defp nice_round(val) when is_float(val), do: Float.round(val, 1)
+  defp nice_round(val), do: val
+
+  defp key_label(key) do
+    key
+    |> String.replace("_", " ")
+    |> String.capitalize()
+  end
 end