<%= if not @fullscreen do %> <.header> <.icon name="hero-signal" class="h-6 w-6 text-green-600" /> {t("Network Weathermap")} {t("Live")} <:subtitle>{t("Real-time network utilization visualization")} <:actions>
60s refresh
<% else %>
<.icon name="hero-signal" class="h-6 w-6 text-green-600" />

Network Weathermap

Live
60s refresh
<% end %>
<%= if @loading do %>
<.icon name="hero-arrow-path" class="h-12 w-12 text-gray-400 animate-spin mx-auto" />

Loading network weathermap...

<% else %>
<.icon name="hero-server" class="h-5 w-5 text-gray-400" />
{t("Devices")}
{@topology.stats.total_devices}
<.icon name="hero-link" class="h-5 w-5 text-blue-400" />
{t("Links")}
{@topology.stats.total_links}
{t("Low (0-30%)")}
{@topology.stats.low_utilization_links || 0}
{t("Medium (30-60%)")}
{@topology.stats.medium_utilization_links || 0}
{t("High (60-80%)")}
{@topology.stats.high_utilization_links || 0}
{t("Critical (80%+)")}
{@topology.stats.overutilized_links || 0}
<.icon name="hero-magnifying-glass" class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
<%= if @topology[:has_geo] do %>
<% end %>

Link Utilization

0-30% (Good)
30-60% (Moderate)
60-80% (High)
80%+ (Critical)
No capacity data
Last updated: <.timestamp datetime={@topology.last_updated} timezone={@timezone} />
<%= if @selected_node_detail do %>

{t("Node Details")}

{@selected_node_detail.name}

<%= if @selected_node_detail.type == :discovered do %> {t("Discovered")} <% end %>
<%= if @selected_node_detail.ip_address do %>
<.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.ip_address}
<% end %> <%= if @selected_node_detail.site_name do %>
<.icon name="hero-map-pin" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.site_name}
<% end %> <%= if @selected_node_detail.manufacturer do %>
<.icon name="hero-building-office" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.manufacturer}
<% end %>
<.icon name="hero-tag" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.role}
<%= if @selected_node_detail.status && @selected_node_detail.status != :unknown do %>
{@selected_node_detail.status}
<% end %>
<%= if @selected_node_detail[:utilization_stats] do %>

Interface Utilization

<%= for stat <- @selected_node_detail.utilization_stats do %>
{stat.interface_name}
"text-green-600 dark:text-green-400" :medium -> "text-yellow-600 dark:text-yellow-400" :high -> "text-orange-600 dark:text-orange-400" :critical -> "text-red-600 dark:text-red-400" _ -> "text-gray-500 dark:text-gray-400" end ]}> {stat.utilization_pct}%
{stat.throughput_text} / {stat.capacity_text}
<% end %>
<% end %> <%= if length(@selected_node_detail.connections) > 0 do %>

{t("Connections")} ({length(@selected_node_detail.connections)})

<%= for conn <- @selected_node_detail.connections do %>

{conn.device_name}

<%= if conn.interface do %>

{conn.interface}

<% end %> <%= if conn[:utilization_text] do %>

{conn.utilization_text}

<% end %>
{conn.link_type} 0.9 -> "text-green-600 dark:text-green-400" conn.confidence >= 0.5 -> "text-yellow-600 dark:text-yellow-400" true -> "text-gray-500 dark:text-gray-400" end ]}> {trunc(conn.confidence * 100)}%
<% end %>
<% end %> <%= if @selected_node_detail.type == :managed do %>
<.link navigate={~p"/devices/#{@selected_node_detail.id}"} class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10 rounded-md hover:bg-blue-100 dark:hover:bg-blue-400/20" > <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4 mr-1.5" /> {t("View Device")}
<% end %>
<% end %>
<%= if @topology.stats.total_devices == 0 do %>
<.icon name="hero-signal" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />

{t("No network data available")}

{t( "Add devices with SNMP enabled and configure interface capacities to view utilization." )}

<.button navigate={~p"/devices/new"} variant="primary"> <.icon name="hero-plus" class="h-5 w-5" /> Add Your First Device
<% end %> <% end %>