501 lines
22 KiB
Text
501 lines
22 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="alerts"
|
|
unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
|
|
>
|
|
<%!-- Compact header --%>
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div class="flex items-center gap-3">
|
|
<h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("Alerts")}</h1>
|
|
<span class="rounded px-2 py-0.5 text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400">
|
|
{t("Experimental")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
|
{t("Monitor and triage network alerts, grouped by site with subscriber impact.")}
|
|
</p>
|
|
|
|
<%!-- Filter pills --%>
|
|
<div class="flex items-center gap-2 mb-3 flex-wrap">
|
|
<.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")}
|
|
<span class={[
|
|
"rounded-full px-1.5 py-0.5 text-xs",
|
|
@filter == "unresolved" && "bg-white/20 dark:bg-gray-900/30",
|
|
@filter != "unresolved" && "bg-gray-200 dark:bg-gray-700"
|
|
]}>
|
|
{@counts.unresolved}
|
|
</span>
|
|
</.link>
|
|
<.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")}
|
|
<span class={[
|
|
"rounded-full px-1.5 py-0.5 text-xs",
|
|
@filter == "critical" && "bg-white/20",
|
|
@filter != "critical" && "bg-red-100 dark:bg-red-900/40"
|
|
]}>
|
|
{@counts.critical}
|
|
</span>
|
|
</.link>
|
|
<.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")}
|
|
<span class={[
|
|
"rounded-full px-1.5 py-0.5 text-xs",
|
|
@filter == "all" && "bg-white/20 dark:bg-gray-900/30",
|
|
@filter != "all" && "bg-gray-200 dark:bg-gray-700"
|
|
]}>
|
|
{@counts.all}
|
|
</span>
|
|
</.link>
|
|
<.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")}
|
|
<span class={[
|
|
"rounded-full px-1.5 py-0.5 text-xs",
|
|
@filter == "resolved" && "bg-white/20 dark:bg-gray-900/30",
|
|
@filter != "resolved" && "bg-gray-200 dark:bg-gray-700"
|
|
]}>
|
|
{@counts.resolved}
|
|
</span>
|
|
</.link>
|
|
|
|
<span class="text-gray-300 dark:text-gray-600 mx-1">|</span>
|
|
|
|
<%!-- Sort controls --%>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">{t("Sort")}:</span>
|
|
<.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>
|
|
<.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>
|
|
<.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")}
|
|
</.link>
|
|
</div>
|
|
|
|
<%!-- Bulk actions bar --%>
|
|
<div
|
|
:if={MapSet.size(@selected_alerts) > 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"
|
|
>
|
|
<span class="text-xs font-medium text-blue-800 dark:text-blue-300">
|
|
{MapSet.size(@selected_alerts)} {t("selected")}
|
|
</span>
|
|
<.button type="button" phx-click="bulk_acknowledge" variant="primary">
|
|
<.icon name="hero-check" class="h-3.5 w-3.5" /> {t("Ack Selected")}
|
|
</.button>
|
|
<.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")}
|
|
</.button>
|
|
<button
|
|
type="button"
|
|
phx-click="select_none"
|
|
class="text-xs text-blue-600 dark:text-blue-400 hover:underline ml-auto"
|
|
>
|
|
{t("Clear selection")}
|
|
</button>
|
|
</div>
|
|
|
|
<%= if Enum.empty?(@alerts) do %>
|
|
<div class="flex items-center justify-center py-16">
|
|
<div class="text-center">
|
|
<div class="inline-flex items-center justify-center rounded-full bg-green-100 dark:bg-green-900/40 p-4 mb-4">
|
|
<.icon
|
|
name="hero-check-circle-solid"
|
|
class="h-12 w-12 text-green-500 dark:text-green-400"
|
|
/>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-green-700 dark:text-green-400">
|
|
{t("All Clear!")}
|
|
</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-sm">
|
|
<%= 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 %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%!-- Alert table --%>
|
|
<div class="flow-root">
|
|
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
|
<table class="min-w-full">
|
|
<thead class="bg-gray-50 dark:bg-gray-800/50">
|
|
<tr>
|
|
<th scope="col" class="py-2 pl-4 pr-2 w-8">
|
|
<button
|
|
type="button"
|
|
phx-click="select_all"
|
|
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
title={t("Select all")}
|
|
>
|
|
<.icon name="hero-check-circle" class="h-4 w-4" />
|
|
</button>
|
|
</th>
|
|
<th scope="col" class="w-1 px-0 py-2"></th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Device")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Site")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Message")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Duration")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Impact")}
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
|
>
|
|
{t("Actions")}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-white/5">
|
|
<%= for alert <- @alerts do %>
|
|
<tr
|
|
class={[
|
|
"hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer",
|
|
MapSet.member?(@selected_alerts, alert.id) &&
|
|
"bg-blue-50/50 dark:bg-blue-900/10",
|
|
rem(Enum.find_index(@alerts, &(&1.id == alert.id)) || 0, 2) == 1 &&
|
|
"bg-gray-50/40 dark:bg-gray-800/20"
|
|
]}
|
|
phx-click="toggle_alert"
|
|
phx-value-id={alert.id}
|
|
>
|
|
<%!-- Checkbox --%>
|
|
<td class="py-2 pl-4 pr-2" phx-click="toggle_select" phx-value-id={alert.id}>
|
|
<div class={[
|
|
"h-4 w-4 rounded border flex items-center justify-center transition-colors",
|
|
MapSet.member?(@selected_alerts, alert.id) && "bg-blue-500 border-blue-500",
|
|
!MapSet.member?(@selected_alerts, alert.id) &&
|
|
"border-gray-300 dark:border-gray-600"
|
|
]}>
|
|
<.icon
|
|
:if={MapSet.member?(@selected_alerts, alert.id)}
|
|
name="hero-check"
|
|
class="h-3 w-3 text-white"
|
|
/>
|
|
</div>
|
|
</td>
|
|
|
|
<%!-- Severity bar --%>
|
|
<td class="px-0 py-0 w-1">
|
|
<div class={"h-full w-1 min-h-[2.5rem] #{severity_badge_class(alert)} rounded-sm"} />
|
|
</td>
|
|
|
|
<%!-- Device --%>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<div class="flex items-center gap-2">
|
|
<span class={[
|
|
"inline-flex items-center gap-1 text-xs font-medium px-1.5 py-0.5 rounded",
|
|
alert.alert_type == "device_down" && is_nil(alert.resolved_at) &&
|
|
"bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
|
|
alert.alert_type == "device_down" && alert.resolved_at &&
|
|
"bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
|
|
alert.alert_type == "device_up" &&
|
|
"bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300"
|
|
]}>
|
|
<%= 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 %>
|
|
</span>
|
|
<.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}
|
|
</.link>
|
|
<span class="text-xs font-mono text-gray-500 dark:text-gray-400">
|
|
{alert.device.ip_address}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<%!-- Site --%>
|
|
<td class="px-3 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-400">
|
|
<%= 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}
|
|
</.link>
|
|
<% else %>
|
|
<span class="text-gray-400 dark:text-gray-600">—</span>
|
|
<% end %>
|
|
</td>
|
|
|
|
<%!-- Message --%>
|
|
<td
|
|
class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate"
|
|
title={alert.message}
|
|
>
|
|
{alert.message || "—"}
|
|
</td>
|
|
|
|
<%!-- Duration --%>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<span class={[
|
|
"text-xs font-mono",
|
|
severity_color(alert) == "red" &&
|
|
"text-red-600 dark:text-red-400 font-medium",
|
|
severity_color(alert) == "orange" && "text-orange-600 dark:text-orange-400",
|
|
severity_color(alert) not in ["red", "orange"] &&
|
|
"text-gray-600 dark:text-gray-400"
|
|
]}>
|
|
{duration_text(alert)}
|
|
</span>
|
|
</td>
|
|
|
|
<%!-- Impact --%>
|
|
<td class="px-3 py-2 whitespace-nowrap">
|
|
<%= if impact = impact_text(alert, @site_subscribers) do %>
|
|
<span class="inline-flex items-center gap-1 text-xs text-amber-700 dark:text-amber-400">
|
|
<.icon name="hero-users" class="h-3 w-3" />
|
|
{impact}
|
|
</span>
|
|
<% else %>
|
|
<span class="text-xs text-gray-300 dark:text-gray-600">—</span>
|
|
<% end %>
|
|
</td>
|
|
|
|
<%!-- Actions --%>
|
|
<td class="px-3 py-2 whitespace-nowrap text-right">
|
|
<div class="flex items-center justify-end gap-1">
|
|
<%= if alert.acknowledged_at && is_nil(alert.resolved_at) do %>
|
|
<span class="text-xs text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20">
|
|
Ack'd
|
|
</span>
|
|
<% end %>
|
|
<%= if alert.resolved_at do %>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800">
|
|
{t("Resolved")}
|
|
</span>
|
|
<% end %>
|
|
<%= if alert.alert_type == "device_down" && is_nil(alert.acknowledged_at) && is_nil(alert.resolved_at) do %>
|
|
<button
|
|
type="button"
|
|
phx-click="acknowledge"
|
|
phx-value-id={alert.id}
|
|
class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 transition-colors"
|
|
>
|
|
Ack
|
|
</button>
|
|
<% end %>
|
|
<%= if is_nil(alert.resolved_at) do %>
|
|
<button
|
|
type="button"
|
|
phx-click="resolve"
|
|
phx-value-id={alert.id}
|
|
data-confirm={t("Resolve this alert?")}
|
|
class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
Resolve
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<%!-- Expanded alert detail --%>
|
|
<%= if @expanded_alert == alert.id do %>
|
|
<tr class="bg-gray-50 dark:bg-gray-800/40">
|
|
<td colspan="8" class="px-4 py-3">
|
|
<div class="flex gap-8 text-xs">
|
|
<%!-- Timeline --%>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
|
|
{t("Timeline")}
|
|
</h4>
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-block h-2 w-2 rounded-full bg-red-500 flex-shrink-0"></span>
|
|
<span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
|
|
{t("Triggered")}
|
|
</span>
|
|
<span class="font-mono text-gray-900 dark:text-white">
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(
|
|
alert.triggered_at,
|
|
@timezone
|
|
)}
|
|
</span>
|
|
</div>
|
|
<%= if alert.acknowledged_at do %>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-block h-2 w-2 rounded-full bg-blue-500 flex-shrink-0"></span>
|
|
<span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
|
|
{t("Ack'd")}
|
|
</span>
|
|
<span class="font-mono text-gray-900 dark:text-white">
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(
|
|
alert.acknowledged_at,
|
|
@timezone
|
|
)}
|
|
</span>
|
|
<%= if alert.acknowledged_by do %>
|
|
<span class="text-gray-500 dark:text-gray-400">
|
|
by {alert.acknowledged_by.email}
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<%= if alert.resolved_at do %>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-block h-2 w-2 rounded-full bg-green-500 flex-shrink-0"></span>
|
|
<span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
|
|
{t("Resolved")}
|
|
</span>
|
|
<span class="font-mono text-gray-900 dark:text-white">
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(
|
|
alert.resolved_at,
|
|
@timezone
|
|
)}
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Impact details --%>
|
|
<%= if alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] && alert.gaiia_impact["total_subscribers"] > 0 do %>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
|
|
{t("Impact")}
|
|
</h4>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-users" class="h-3.5 w-3.5 text-amber-500" />
|
|
<span class="text-gray-900 dark:text-white font-medium">
|
|
{format_number(alert.gaiia_impact["total_subscribers"])} subscribers affected
|
|
</span>
|
|
</div>
|
|
<%!-- Financial data: role-gated --%>
|
|
<%= if @can_view_financials && alert.gaiia_impact["total_mrr"] && alert.gaiia_impact["total_mrr"] != "0" do %>
|
|
<div class="flex items-center gap-2">
|
|
<.icon
|
|
name="hero-currency-dollar"
|
|
class="h-3.5 w-3.5 text-amber-500"
|
|
/>
|
|
<span class="text-gray-900 dark:text-white font-medium">
|
|
${alert.gaiia_impact["total_mrr"]}/mo at risk
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%!-- Message --%>
|
|
<%= if alert.message do %>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
|
|
{t("Details")}
|
|
</h4>
|
|
<p class="text-gray-600 dark:text-gray-400">{alert.message}</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</Layouts.authenticated>
|