Graham McIntire
9c2f08317f
- Created new on_mount hook :load_default_organization that automatically loads user's first organization - Moved sites and devices routes to root path (/ sites, /devices) instead of /orgs/:org_slug - Updated all navigation links and route references throughout the app - Dashboard, alerts, and agents still use org-specific routes (/orgs/:org_slug) - Users can still switch organizations via org selector for other pages
154 lines
6.2 KiB
Text
154 lines
6.2 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
current_organization={@current_organization}
|
|
active_page="alerts"
|
|
timezone={@timezone}
|
|
>
|
|
<.header>
|
|
Alerts
|
|
<:subtitle>Monitor and acknowledge system alerts</:subtitle>
|
|
</.header>
|
|
|
|
<div class="mb-6">
|
|
<div class="inline-flex rounded-lg border border-zinc-200 dark:border-zinc-800">
|
|
<.link
|
|
patch={~p"/orgs/#{@current_organization.slug}/alerts"}
|
|
class={[
|
|
"px-4 py-2 text-sm font-medium rounded-l-lg",
|
|
@filter == "active" &&
|
|
"bg-blue-600 text-white dark:bg-blue-500",
|
|
@filter != "active" &&
|
|
"bg-white text-zinc-700 hover:bg-zinc-50 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
|
|
]}
|
|
>
|
|
Active Alerts
|
|
</.link>
|
|
<.link
|
|
patch={~p"/orgs/#{@current_organization.slug}/alerts?filter=all"}
|
|
class={[
|
|
"px-4 py-2 text-sm font-medium rounded-r-lg border-l border-zinc-200 dark:border-zinc-800",
|
|
@filter == "all" &&
|
|
"bg-blue-600 text-white dark:bg-blue-500",
|
|
@filter != "all" &&
|
|
"bg-white text-zinc-700 hover:bg-zinc-50 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
|
|
]}
|
|
>
|
|
All Alerts
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if Enum.empty?(@alerts) do %>
|
|
<div class="text-center py-16">
|
|
<.icon name="hero-bell-slash" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
|
|
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No alerts</h3>
|
|
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<%= if @filter == "active" do %>
|
|
There are no active alerts for this organization.
|
|
<% else %>
|
|
No alerts have been triggered yet.
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="space-y-4">
|
|
<%= for alert <- @alerts do %>
|
|
<div class={[
|
|
"rounded-lg border p-6 shadow-sm",
|
|
alert.resolved_at && "opacity-60",
|
|
alert.alert_type == :device_down && is_nil(alert.resolved_at) &&
|
|
"border-l-4 border-red-500 bg-red-50 dark:bg-red-950 dark:border-red-700",
|
|
(alert.alert_type != :device_down || alert.resolved_at) &&
|
|
"border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
|
|
]}>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<span class={[
|
|
"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium",
|
|
alert.alert_type == :device_down &&
|
|
"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
|
alert.alert_type == :device_up &&
|
|
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
|
|
]}>
|
|
<%= case alert.alert_type do %>
|
|
<% :device_down -> %>
|
|
<.icon name="hero-exclamation-triangle" class="h-4 w-4" /> Device Down
|
|
<% :device_up -> %>
|
|
<.icon name="hero-check-circle" class="h-4 w-4" /> Device Recovered
|
|
<% end %>
|
|
</span>
|
|
|
|
<%= if alert.resolved_at do %>
|
|
<span class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
|
|
Resolved
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= if alert.acknowledged_at do %>
|
|
<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
|
Acknowledged
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
|
|
<h3 class="mt-3 font-semibold text-zinc-900 dark:text-zinc-100">
|
|
<.link
|
|
navigate={~p"/devices/#{alert.device.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{alert.device.name}
|
|
</.link>
|
|
</h3>
|
|
|
|
<p class="mt-1 text-sm text-zinc-700 dark:text-zinc-300">{alert.message}</p>
|
|
|
|
<div class="mt-3 space-y-1 text-xs text-zinc-600 dark:text-zinc-400">
|
|
<div>
|
|
<strong class="font-medium">Triggered:</strong>
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(alert.triggered_at, @timezone)}
|
|
</div>
|
|
|
|
<%= if alert.acknowledged_at do %>
|
|
<div>
|
|
<strong class="font-medium">Acknowledged:</strong>
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(alert.acknowledged_at, @timezone)}
|
|
<%= if alert.acknowledged_by do %>
|
|
by {alert.acknowledged_by.email}
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if alert.resolved_at do %>
|
|
<div>
|
|
<strong class="font-medium">Resolved:</strong>
|
|
{ToweropsWeb.TimeHelpers.format_iso8601(alert.resolved_at, @timezone)}
|
|
</div>
|
|
<% end %>
|
|
|
|
<div>
|
|
<strong class="font-medium">Site:</strong>
|
|
<.link
|
|
navigate={~p"/sites/#{alert.device.site.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{alert.device.site.name}
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-4">
|
|
<%= if alert.alert_type == :device_down && is_nil(alert.acknowledged_at) && is_nil(alert.resolved_at) do %>
|
|
<.button phx-click="acknowledge" phx-value-id={alert.id} variant="primary">
|
|
<.icon name="hero-check" class="h-4 w-4" /> Acknowledge
|
|
</.button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</Layouts.authenticated>
|