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
This commit is contained in:
Graham McIntire 2026-01-05 14:08:00 -06:00
parent bf301aa5fc
commit d5905cea73
No known key found for this signature in database
2 changed files with 38 additions and 24 deletions

View file

@ -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

View file

@ -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 %>