From b6abe234938166c650edbad4c175892753264e7b Mon Sep 17 00:00:00 2001 From: Graham McIntire Date: Mon, 5 Jan 2026 13:38:07 -0600 Subject: [PATCH] Format traffic values in Mbps/Gbps and fix column layout --- assets/js/app.js | 22 ++ .../live/equipment_live/show.html.heex | 251 +++++++++--------- 2 files changed, 150 insertions(+), 123 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index ec90a1de..653f4308 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -76,11 +76,27 @@ const SensorChart = { pointHoverRadius: 4, })) + // Format bits per second into human-readable units + const formatBps = (bps) => { + if (bps >= 1_000_000_000) { + return (bps / 1_000_000_000).toFixed(2) + ' Gbps' + } else if (bps >= 1_000_000) { + return (bps / 1_000_000).toFixed(2) + ' Mbps' + } else if (bps >= 1_000) { + return (bps / 1_000).toFixed(2) + ' Kbps' + } else { + return bps.toFixed(2) + ' bps' + } + } + // Y-axis configuration const yAxisConfig = autoScale ? { beginAtZero: showZeroLine, ticks: { callback: function(value) { + if (unit === 'bps') { + return formatBps(value) + } return value + unit } }, @@ -105,6 +121,9 @@ const SensorChart = { max: 100, ticks: { callback: function(value) { + if (unit === 'bps') { + return formatBps(value) + } return value + unit } }, @@ -145,6 +164,9 @@ const SensorChart = { }) }, label: function(context) { + if (unit === 'bps') { + return context.dataset.label + ': ' + formatBps(context.parsed.y) + } return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + unit } } diff --git a/lib/towerops_web/live/equipment_live/show.html.heex b/lib/towerops_web/live/equipment_live/show.html.heex index da4c2a1f..1630717d 100644 --- a/lib/towerops_web/live/equipment_live/show.html.heex +++ b/lib/towerops_web/live/equipment_live/show.html.heex @@ -71,141 +71,146 @@ <%= case @active_tab do %> <% "overview" -> %>
- -
-
-

- Device Information -

-
-
-
- <%= if @snmp_device do %> + +
+ +
+
+

+ Device Information +

+
+
+
+ <%= if @snmp_device do %> +
+
System Name
+
+ {@snmp_device.sys_name || @equipment.name} +
+
+ +
+
Resolved IP
+
+ {@equipment.ip_address} +
+
+ +
+
Hardware
+
+ {@snmp_device.model || "N/A"} +
+
+ +
+
Operating System
+
+ {if @snmp_device.manufacturer && @snmp_device.firmware_version do + "#{@snmp_device.manufacturer} #{@snmp_device.firmware_version}" + else + @snmp_device.sys_descr || "N/A" + end} +
+
+ +
+
Object ID
+
+ {@snmp_device.sys_object_id || "N/A"} +
+
+ +
+
Contact
+
+ {@snmp_device.sys_contact || "N/A"} +
+
+ +
+
Location
+
+ {@snmp_device.sys_location || "N/A"} +
+
+ +
+
Uptime
+
+ {format_uptime(@snmp_device.sys_uptime)} +
+
+ <% else %> +
+
Name
+
+ {@equipment.name} +
+
+ +
+
IP Address
+
+ {@equipment.ip_address} +
+
+ <% end %> +
-
System Name
+
Device Added
- {@snmp_device.sys_name || @equipment.name} + {format_device_age(@equipment.inserted_at)}
-
-
Resolved IP
-
- {@equipment.ip_address} -
-
- -
-
Hardware
+
+
Last Discovered
- {@snmp_device.model || "N/A"} -
-
- -
-
Operating System
-
- {if @snmp_device.manufacturer && @snmp_device.firmware_version do - "#{@snmp_device.manufacturer} #{@snmp_device.firmware_version}" + {if @equipment.last_discovery_at do + format_device_age(@equipment.last_discovery_at) else - @snmp_device.sys_descr || "N/A" + "Never" end}
- -
-
Object ID
-
- {@snmp_device.sys_object_id || "N/A"} -
-
- -
-
Contact
-
- {@snmp_device.sys_contact || "N/A"} -
-
- -
-
Location
-
- {@snmp_device.sys_location || "N/A"} -
-
- -
-
Uptime
-
- {format_uptime(@snmp_device.sys_uptime)} -
-
- <% else %> -
-
Name
-
- {@equipment.name} -
-
- -
-
IP Address
-
- {@equipment.ip_address} -
-
- <% end %> - -
-
Device Added
-
- {format_device_age(@equipment.inserted_at)} -
-
- -
-
Last Discovered
-
- {if @equipment.last_discovery_at do - format_device_age(@equipment.last_discovery_at) - else - "Never" - end} -
-
-
-
-
- - <%= if @traffic_chart_data do %> -
- <.link - navigate={ - ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/traffic" - } - 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" - > -
-

- Overall Traffic (24 Hours) -

- <.icon name="hero-arrow-right" class="h-4 w-4 text-zinc-400" /> -
- -
-
- -
+
- <% end %> - + + <%= if @traffic_chart_data do %> +
+ <.link + navigate={ + ~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/graph/traffic" + } + 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" + > +
+

+ Overall Traffic (24 Hours) +

+ <.icon name="hero-arrow-right" class="h-4 w-4 text-zinc-400" /> +
+ +
+
+ +
+
+
+ <% end %> +
+
<%= if @cpu_chart_data do %>