<%!-- Compact header --%>

{t("Alerts")}

{t("Experimental")}

{t("Monitor and triage network alerts, grouped by site with subscriber impact.")}

<%!-- Filter pills --%>
<.link patch={~p"/alerts?filter=unresolved&sort=#{@sort_by}"} class={[ "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors", @filter == "unresolved" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900", @filter != "unresolved" && "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" ]} > {t("Unresolved")} {@counts.unresolved} <.link patch={~p"/alerts?filter=critical&sort=#{@sort_by}"} class={[ "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors", @filter == "critical" && "bg-red-600 text-white", @filter != "critical" && "bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/20 dark:text-red-400 dark:hover:bg-red-900/40" ]} > {t("Critical")} {@counts.critical} <.link patch={~p"/alerts?filter=all&sort=#{@sort_by}"} class={[ "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors", @filter == "all" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900", @filter != "all" && "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" ]} > {t("All")} {@counts.all} <.link patch={~p"/alerts?filter=resolved&sort=#{@sort_by}"} class={[ "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors", @filter == "resolved" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900", @filter != "resolved" && "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" ]} > {t("Resolved")} {@counts.resolved} | <%!-- Sort controls --%> {t("Sort")}: <.link patch={~p"/alerts?filter=#{@filter}&sort=severity"} class={[ "text-xs px-2 py-1 rounded transition-colors", @sort_by == "severity" && "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium", @sort_by != "severity" && "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" ]} > {t("Severity")} <.link patch={~p"/alerts?filter=#{@filter}&sort=age"} class={[ "text-xs px-2 py-1 rounded transition-colors", @sort_by == "age" && "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium", @sort_by != "age" && "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" ]} > {t("Oldest")} <.link patch={~p"/alerts?filter=#{@filter}&sort=impact"} class={[ "text-xs px-2 py-1 rounded transition-colors", @sort_by == "impact" && "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium", @sort_by != "impact" && "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" ]} > {t("Impact")}
<%!-- Bulk actions bar --%>
0} class="flex items-center gap-3 mb-3 px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800" > {MapSet.size(@selected_alerts)} {t("selected")} <.button type="button" phx-click="bulk_acknowledge" variant="primary"> <.icon name="hero-check" class="h-3.5 w-3.5" /> {t("Ack Selected")} <.button type="button" phx-click="bulk_resolve" data-confirm={t("Resolve selected alerts?")}> <.icon name="hero-check-circle" class="h-3.5 w-3.5" /> {t("Resolve Selected")}
<%= if Enum.empty?(@alerts) do %>
<.icon name="hero-check-circle-solid" class="h-12 w-12 text-green-500 dark:text-green-400" />

{t("All Clear!")}

<%= case @filter do %> <% "unresolved" -> %> {t("No active alerts. Your network is looking good!")} <% "critical" -> %> {t("No critical alerts. Nice work keeping things healthy!")} <% "resolved" -> %> {t("No resolved alerts yet.")} <% _ -> %> {t("No active alerts. Your network is looking good!")} <% end %>

<% else %> <%!-- Alert table --%>
<%= for alert <- @alerts do %> <%!-- Checkbox --%> <%!-- Severity bar --%> <%!-- Device --%> <%!-- Site --%> <%!-- Message --%> <%!-- Duration --%> <%!-- Impact --%> <%!-- Actions --%> <%!-- Expanded alert detail --%> <%= if @expanded_alert == alert.id do %> <% end %> <% end %>
{t("Device")} {t("Site")} {t("Message")} {t("Duration")} {t("Impact")} {t("Actions")}
<.icon :if={MapSet.member?(@selected_alerts, alert.id)} name="hero-check" class="h-3 w-3 text-white" />
<%= if alert.alert_type == "device_down" do %> <.icon name="hero-arrow-down" class="h-3 w-3" /> DOWN <% else %> <.icon name="hero-arrow-up" class="h-3 w-3" /> UP <% end %> <.link navigate={~p"/devices/#{alert.device.id}"} class="text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" > {alert.device.name} {alert.device.ip_address}
<%= if alert.device.site do %> <.link navigate={~p"/sites/#{alert.device.site.id}"} class="hover:text-blue-600 dark:hover:text-blue-400" > {alert.device.site.name} <% else %> — <% end %> {alert.message || "—"} {duration_text(alert)} <%= if impact = impact_text(alert, @site_subscribers) do %> <.icon name="hero-users" class="h-3 w-3" /> {impact} <% else %> — <% end %>
<%= if alert.acknowledged_at && is_nil(alert.resolved_at) do %> Ack'd <% end %> <%= if alert.resolved_at do %> {t("Resolved")} <% end %> <%= if alert.alert_type == "device_down" && is_nil(alert.acknowledged_at) && is_nil(alert.resolved_at) do %> <% end %> <%= if is_nil(alert.resolved_at) do %> <% end %>
<%!-- Timeline --%>

{t("Timeline")}

{t("Triggered")} {ToweropsWeb.TimeHelpers.format_iso8601( alert.triggered_at, @timezone )}
<%= if alert.acknowledged_at do %>
{t("Ack'd")} {ToweropsWeb.TimeHelpers.format_iso8601( alert.acknowledged_at, @timezone )} <%= if alert.acknowledged_by do %> by {alert.acknowledged_by.email} <% end %>
<% end %> <%= if alert.resolved_at do %>
{t("Resolved")} {ToweropsWeb.TimeHelpers.format_iso8601( alert.resolved_at, @timezone )}
<% end %>
<%!-- Impact details --%> <%= if alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] && alert.gaiia_impact["total_subscribers"] > 0 do %>

{t("Impact")}

<.icon name="hero-users" class="h-3.5 w-3.5 text-amber-500" /> {format_number(alert.gaiia_impact["total_subscribers"])} subscribers affected
<%!-- Financial data: role-gated --%> <%= if @can_view_financials && alert.gaiia_impact["total_mrr"] && alert.gaiia_impact["total_mrr"] != "0" do %>
<.icon name="hero-currency-dollar" class="h-3.5 w-3.5 text-amber-500" /> ${alert.gaiia_impact["total_mrr"]}/mo at risk
<% end %>
<% end %> <%!-- Message --%> <%= if alert.message do %>

{t("Details")}

{alert.message}

<% end %>
<% end %>