295 lines
12 KiB
Text
295 lines
12 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="activity"
|
|
unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
|
|
>
|
|
<.header>
|
|
<div class="flex items-center gap-3">
|
|
<span class="relative flex h-3 w-3">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
|
|
</span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
|
</span>
|
|
{t("Activity Feed")}
|
|
</div>
|
|
<:subtitle>
|
|
{t("Real-time NOC operations log — config changes, alerts, events, and syncs")}
|
|
</:subtitle>
|
|
</.header>
|
|
|
|
<%!-- Search Bar --%>
|
|
<div class="mt-6">
|
|
<form phx-change="search" phx-submit="search" class="relative">
|
|
<div class="relative">
|
|
<.icon
|
|
name="hero-magnifying-glass"
|
|
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500"
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
value={@search}
|
|
placeholder={t("Search by device name, IP, site, or keyword...")}
|
|
phx-debounce="300"
|
|
class="w-full pl-10 pr-10 rounded-field border border-gray-300 bg-gray-50 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
|
|
/>
|
|
<button
|
|
:if={@search != ""}
|
|
type="button"
|
|
phx-click="clear_search"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<.icon name="hero-x-mark" class="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<%!-- Filter Chips with Counts --%>
|
|
<div class="mt-4 flex flex-wrap items-center gap-2">
|
|
<span class="text-sm font-medium text-gray-500 dark:text-gray-400 mr-1">Filter:</span>
|
|
<%= for {type, label, icon} <- filter_options() do %>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_type"
|
|
phx-value-type={type}
|
|
class={[
|
|
"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all",
|
|
if(type in @active_types,
|
|
do: filter_active_class(type),
|
|
else:
|
|
"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"
|
|
)
|
|
]}
|
|
>
|
|
<.icon name={icon} class="h-3.5 w-3.5" />
|
|
{label}
|
|
<span
|
|
:if={Map.get(@type_counts, type, 0) > 0}
|
|
class={[
|
|
"inline-flex items-center justify-center min-w-[18px] h-[18px] rounded-full px-1 text-[10px] font-bold",
|
|
if(type in @active_types,
|
|
do: "bg-white/30 dark:bg-black/20",
|
|
else: "bg-gray-200 dark:bg-gray-700"
|
|
)
|
|
]}
|
|
>
|
|
{Map.get(@type_counts, type, 0)}
|
|
</span>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%!-- Timeline --%>
|
|
<div class="mt-8">
|
|
<%= if @items == [] do %>
|
|
<div class="rounded-xl border-2 border-dashed border-gray-200 bg-white p-16 text-center dark:border-gray-700 dark:bg-gray-800/50">
|
|
<div class="mx-auto w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-4">
|
|
<.icon name="hero-signal-slash" class="h-8 w-8 text-gray-400 dark:text-gray-500" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
<%= if @search != "" do %>
|
|
No results for "{@search}"
|
|
<% else %>
|
|
{t("No activity yet")}
|
|
<% end %>
|
|
</h3>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-md mx-auto">
|
|
<%= if @search != "" do %>
|
|
{t("Try adjusting your search terms or clearing the filters.")}
|
|
<% else %>
|
|
{t(
|
|
"Your network operations log is empty. Events will appear here in real time as config changes, alerts, device events, and syncs happen across your organization."
|
|
)}
|
|
<% end %>
|
|
</p>
|
|
<div :if={@search != ""} class="mt-4">
|
|
<button
|
|
type="button"
|
|
phx-click="clear_search"
|
|
class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
|
|
>
|
|
<.icon name="hero-x-mark" class="h-4 w-4" /> Clear search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%!-- Item count summary --%>
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
Showing {length(@items)} events
|
|
<span :if={@search != ""}>
|
|
matching "<strong class="text-gray-700 dark:text-gray-300">{@search}</strong>"
|
|
</span>
|
|
</span>
|
|
<span class="text-xs text-gray-400 dark:text-gray-500 flex items-center gap-1">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
|
|
</span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
|
</span>
|
|
{t("Live")}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<table class="w-full text-sm border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80">
|
|
<th class="w-1 p-0"></th>
|
|
<th class="py-2 pl-3 pr-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 whitespace-nowrap w-28">
|
|
Time
|
|
</th>
|
|
<th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-28">
|
|
Type
|
|
</th>
|
|
<th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Event
|
|
</th>
|
|
<th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-48">
|
|
Device / Site
|
|
</th>
|
|
<th class="w-8 p-0"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
|
|
<%= for {period, period_items} <- @grouped_items do %>
|
|
<%!-- Period group header row --%>
|
|
<tr class="bg-gray-50/80 dark:bg-gray-800/40">
|
|
<td colspan="6" class="px-4 py-1.5">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
{period}
|
|
</span>
|
|
<span class="ml-1.5 text-xs text-gray-400 dark:text-gray-500">
|
|
({length(period_items)})
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<%= for item <- period_items do %>
|
|
<tr
|
|
id={item.id}
|
|
class={[
|
|
"group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50",
|
|
item.severity == :critical && "bg-red-50/50 dark:bg-red-900/10"
|
|
]}
|
|
>
|
|
<%!-- Severity bar --%>
|
|
<td class="w-1 p-0">
|
|
<div class={[
|
|
"w-1 h-full min-h-[2.5rem]",
|
|
severity_dot_color(item.severity, item.type)
|
|
]}>
|
|
</div>
|
|
</td>
|
|
|
|
<%!-- Time --%>
|
|
<td
|
|
class="py-2.5 pl-3 pr-4 whitespace-nowrap align-top"
|
|
title={Calendar.strftime(item.timestamp, "%Y-%m-%d %H:%M:%S UTC")}
|
|
>
|
|
<div class="flex items-center gap-1.5">
|
|
<.icon
|
|
name={item.icon}
|
|
class={[
|
|
"h-3.5 w-3.5 flex-shrink-0",
|
|
severity_icon_color(item.severity, item.type)
|
|
]}
|
|
/>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
|
|
{relative_time(item.timestamp, @now)}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<%!-- Type --%>
|
|
<td class="py-2.5 px-3 whitespace-nowrap align-top">
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium",
|
|
type_badge_class(item.type)
|
|
]}>
|
|
{type_label(item.type)}
|
|
</span>
|
|
</td>
|
|
|
|
<%!-- Event --%>
|
|
<td class="py-2.5 px-3 align-top">
|
|
<p class={[
|
|
"text-sm font-medium leading-snug",
|
|
severity_text_color(item.severity, item.type)
|
|
]}>
|
|
<%= if item.link do %>
|
|
<.link navigate={item.link} class="hover:underline">{item.summary}</.link>
|
|
<% else %>
|
|
{item.summary}
|
|
<% end %>
|
|
</p>
|
|
<p
|
|
:if={item.detail && item.detail != ""}
|
|
class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 leading-snug"
|
|
>
|
|
{item.detail}
|
|
</p>
|
|
</td>
|
|
|
|
<%!-- Device / Site --%>
|
|
<td class="py-2.5 px-3 align-top">
|
|
<.link
|
|
:if={item.device_name && item.link}
|
|
navigate={item.link}
|
|
class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 leading-snug"
|
|
>
|
|
<.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
|
|
{item.device_name}
|
|
</.link>
|
|
<span
|
|
:if={item.device_name && !item.link}
|
|
class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-300 leading-snug"
|
|
>
|
|
<.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
|
|
{item.device_name}
|
|
</span>
|
|
<div
|
|
:if={item.site_name}
|
|
class="mt-0.5 inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500"
|
|
>
|
|
<.icon name="hero-map-pin" class="h-3 w-3 flex-shrink-0" />
|
|
{item.site_name}
|
|
</div>
|
|
</td>
|
|
|
|
<%!-- Link arrow --%>
|
|
<td class="py-2.5 px-2 align-top">
|
|
<div
|
|
:if={item.link}
|
|
class="opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<.link
|
|
navigate={item.link}
|
|
class="text-gray-400 hover:text-blue-500 dark:text-gray-600 dark:hover:text-blue-400"
|
|
>
|
|
<.icon name="hero-arrow-right" class="h-4 w-4" />
|
|
</.link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<%!-- Load More --%>
|
|
<div :if={@has_more} class="mt-6 text-center">
|
|
<button
|
|
type="button"
|
|
phx-click="load_more"
|
|
class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-2"
|
|
>
|
|
<.icon name="hero-arrow-down" class="h-4 w-4" /> Load more events
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.authenticated>
|