From d5905cea73ad53e7731cddff5b11a5b801e4424d Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 5 Jan 2026 14:08:00 -0600
Subject: [PATCH] Change storage display from chart to sensor list

- Display storage sensors as a list similar to temperature/voltage
- Show individual disk/partition usage with current values
- Link to graph view from sensor names
- More consistent with other sensor displays
---
 lib/towerops_web/live/equipment_live/show.ex  |  5 +-
 .../live/equipment_live/show.html.heex        | 57 +++++++++++--------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/lib/towerops_web/live/equipment_live/show.ex b/lib/towerops_web/live/equipment_live/show.ex
index 77d1c613..0381140c 100644
--- a/lib/towerops_web/live/equipment_live/show.ex
+++ b/lib/towerops_web/live/equipment_live/show.ex
@@ -57,12 +57,14 @@ defmodule ToweropsWeb.EquipmentLive.Show do
     storage_chart_data = load_sensor_chart_data(equipment_id, ["disk_usage"])
     traffic_chart_data = load_overall_traffic_chart_data(equipment_id)
 
-    # Filter sensors by type for temperature and voltage
+    # Filter sensors by type for temperature, voltage, and storage
     temperature_sensors =
       Enum.filter(snmp_data.sensors, &(&1.sensor_type in ["temperature", "cpu_temperature", "celsius"]))
 
     voltage_sensors = Enum.filter(snmp_data.sensors, &(&1.sensor_type in ["voltage", "volts"]))
 
+    storage_sensors = Enum.filter(snmp_data.sensors, &(&1.sensor_type in ["disk_usage"]))
+
     # Calculate metrics for dashboard
     metrics = calculate_metrics(recent_checks, equipment)
 
@@ -81,6 +83,7 @@ defmodule ToweropsWeb.EquipmentLive.Show do
     |> assign(:traffic_chart_data, traffic_chart_data)
     |> assign(:temperature_sensors, temperature_sensors)
     |> assign(:voltage_sensors, voltage_sensors)
+    |> assign(:storage_sensors, storage_sensors)
   end
 
   defp calculate_metrics(checks, _equipment) do
diff --git a/lib/towerops_web/live/equipment_live/show.html.heex b/lib/towerops_web/live/equipment_live/show.html.heex
index b52ac4a5..d521df4a 100644
--- a/lib/towerops_web/live/equipment_live/show.html.heex
+++ b/lib/towerops_web/live/equipment_live/show.html.heex
@@ -268,31 +268,42 @@
                 </div>
               </div>
             <% end %>
-            <!-- Storage Usage Chart -->
-            <%= if @storage_chart_data do %>
+            <!-- Storage Usage -->
+            <%= if @storage_sensors && length(@storage_sensors) > 0 do %>
               <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
-                <.link
-                  navigate={
-                    ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/storage"
-                  }
-                  class="block px-4 py-3 border-b border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-750 transition-colors"
-                >
-                  <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
-                      Storage Usage
-                    </h3>
-                    <.icon name="hero-arrow-right" class="h-4 w-4 text-zinc-400" />
-                  </div>
-                </.link>
+                <div class="px-4 py-3 border-b border-zinc-200 dark:border-zinc-700">
+                  <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    Storage Usage
+                  </h3>
+                </div>
                 <div class="p-4">
-                  <div
-                    id="storage-chart"
-                    phx-hook="SensorChart"
-                    data-chart={@storage_chart_data}
-                    style="height: 300px;"
-                  >
-                    <canvas></canvas>
-                  </div>
+                  <dl class="space-y-3">
+                    <%= for sensor <- @storage_sensors do %>
+                      <div class="flex justify-between py-2 border-b border-zinc-100 dark:border-zinc-800">
+                        <dt class="text-sm text-zinc-600 dark:text-zinc-400">
+                          <.link
+                            navigate={
+                              ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/storage"
+                            }
+                            class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
+                          >
+                            {sensor.sensor_descr}
+                          </.link>
+                        </dt>
+                        <dd class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                          <%= if sensor.latest_reading do %>
+                            {format_sensor_value(
+                              sensor.latest_reading.value,
+                              sensor.sensor_divisor
+                            )}
+                            {sensor.sensor_unit}
+                          <% else %>
+                            N/A
+                          <% end %>
+                        </dd>
+                      </div>
+                    <% end %>
+                  </dl>
                 </div>
               </div>
             <% end %>