Graham McIntire
c4e301a84c
Fixed 5 critical issues from code review: 1. **GlobalSearchTrigger hook listener leak** - Added destroyed() callback to remove click listener - Prevents memory leak on LiveView unmount 2. **NetworkMap/WeathermapViewer hook listener leaks** - Store zoom/fit button handlers as properties - Remove DOM event listeners in destroyed() callback - Fixes leak on every LiveView remount 3. **SitesMap uses undocumented window.liveSocket.execJS** - Changed to proper LiveView pattern using pushEvent - Attach listener via Leaflet's popupopen event 4. **handle_info(:refresh_data) double DB fetch** - Removed redundant Devices.get_device call - Reuse device from assign_base_data 5. **Redundant DB queries in DeviceLive.Show overview** - Changed load_sensor_chart_data to accept snmp_device - Changed load_overall_traffic_chart_data to accept snmp_device - Eliminated 4 redundant Snmp.get_device_with_associations calls Also removed unused functions: - load_equipment_data/2 - reload_active_tab_data/1 - assign_subscriber_impact/1 Note: DeviceLive.Show module size (2252 lines) is acknowledged but deferred as it requires larger architectural refactoring. Reviewed-on: graham/towerops-web#192
195 lines
8.3 KiB
Elixir
195 lines
8.3 KiB
Elixir
defmodule ToweropsWeb.DeviceLive.Components.WirelessTab do
|
|
@moduledoc """
|
|
LiveComponent for the device wireless clients tab.
|
|
|
|
Displays wireless clients connected to the device with optional
|
|
subscriber matching from Gaiia integration.
|
|
"""
|
|
use ToweropsWeb, :live_component
|
|
|
|
alias ToweropsWeb.DeviceLive.Helpers.DataLoaders
|
|
|
|
@impl true
|
|
def update(assigns, socket) do
|
|
{:ok,
|
|
socket
|
|
|> assign(assigns)
|
|
|> load_wireless_data()}
|
|
end
|
|
|
|
defp load_wireless_data(socket) do
|
|
device_id = socket.assigns.device.id
|
|
wireless_data = DataLoaders.load_wireless_data(device_id)
|
|
|
|
socket
|
|
|> assign(:wireless_clients, wireless_data.wireless_clients)
|
|
|> assign(:wireless_client_subscribers, wireless_data.wireless_client_subscribers)
|
|
|> assign(:wireless_client_count, wireless_data.wireless_client_count)
|
|
|> assign(:wireless_matched_count, wireless_data.wireless_matched_count)
|
|
|> assign(:wireless_last_updated, wireless_data.wireless_last_updated)
|
|
|> assign(:wireless_clients_available, wireless_data.wireless_clients_available)
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<div id="wireless-tab">
|
|
<%= if @wireless_clients && length(@wireless_clients) > 0 do %>
|
|
<div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
|
|
<div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
{t("Connected Wireless Clients")}
|
|
</h3>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
|
{length(@wireless_clients)} clients — {@wireless_matched_count} subscribers matched
|
|
<%= if @wireless_last_updated do %>
|
|
· Last updated {format_relative_time(@wireless_last_updated)}
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
|
|
<thead class="bg-gray-50 dark:bg-gray-800/75">
|
|
<tr class="text-xs text-gray-600 dark:text-gray-400">
|
|
<th class="px-3 py-2 text-left font-medium">MAC Address</th>
|
|
<th class="px-3 py-2 text-left font-medium">IP Address</th>
|
|
<th class="px-3 py-2 text-left font-medium">Subscriber</th>
|
|
<th class="px-3 py-2 text-left font-medium">Signal</th>
|
|
<th class="px-3 py-2 text-left font-medium">SNR</th>
|
|
<th class="px-3 py-2 text-right font-medium">Distance</th>
|
|
<th class="px-3 py-2 text-right font-medium">TX Rate</th>
|
|
<th class="px-3 py-2 text-right font-medium">RX Rate</th>
|
|
<th class="px-3 py-2 text-right font-medium">Uptime</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-white/10">
|
|
<%= for client <- @wireless_clients do %>
|
|
<% subscriber_link =
|
|
Map.get(@wireless_client_subscribers, String.downcase(client.mac_address)) %>
|
|
<tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
|
<td class="px-3 py-2 font-mono text-xs">
|
|
<span
|
|
class="cursor-pointer group/mac text-gray-900 dark:text-white"
|
|
phx-click={JS.dispatch("phx:copy", detail: %{text: client.mac_address})}
|
|
title={t("Click to copy")}
|
|
>
|
|
{client.mac_address}
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-gray-400"
|
|
/>
|
|
</span>
|
|
</td>
|
|
<td class="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
|
|
<%= if client.ip_address do %>
|
|
<span
|
|
class="cursor-pointer group/ip"
|
|
phx-click={JS.dispatch("phx:copy", detail: %{text: client.ip_address})}
|
|
title={t("Click to copy")}
|
|
>
|
|
{client.ip_address}
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-gray-400"
|
|
/>
|
|
</span>
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 text-xs">
|
|
<%= if subscriber_link && subscriber_link.gaiia_account do %>
|
|
<span class="text-gray-900 dark:text-white font-medium">
|
|
{subscriber_link.gaiia_account.account_name}
|
|
</span>
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 text-xs">
|
|
<%= if client.signal_strength do %>
|
|
<.signal_badge value={client.signal_strength} />
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 text-xs">
|
|
<%= if client.snr do %>
|
|
<.snr_badge value={client.snr} />
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
|
|
<%= if client.distance do %>
|
|
{client.distance}m
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
|
|
{format_rate(client.tx_rate)}
|
|
</td>
|
|
<td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
|
|
{format_rate(client.rx_rate)}
|
|
</td>
|
|
<td class="px-3 py-2 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
|
|
<%= if client.uptime_seconds do %>
|
|
{format_uptime(client.uptime_seconds * 100)}
|
|
<% else %>
|
|
<span class="text-gray-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center py-12">
|
|
<.icon
|
|
name="hero-signal"
|
|
class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600"
|
|
/>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
|
|
{t("No wireless clients")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
{t("No clients are currently connected to this access point.")}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
# Helper functions
|
|
defp format_relative_time(datetime) do
|
|
ToweropsWeb.TimeHelpers.format_time_ago(datetime)
|
|
end
|
|
|
|
defp format_rate(nil), do: "—"
|
|
|
|
defp format_rate(kbps) when is_integer(kbps) do
|
|
mbps = kbps / 1000
|
|
"#{Float.round(mbps, 1)} Mbps"
|
|
end
|
|
|
|
defp format_uptime(timeticks) when is_integer(timeticks) do
|
|
seconds = div(timeticks, 100)
|
|
hours = div(seconds, 3600)
|
|
remainder = rem(seconds, 3600)
|
|
minutes = div(remainder, 60)
|
|
|
|
cond do
|
|
hours > 0 -> "#{hours}h #{minutes}m"
|
|
minutes > 0 -> "#{minutes}m"
|
|
true -> "<1m"
|
|
end
|
|
end
|
|
|
|
defp format_uptime(_), do: "—"
|
|
end
|