116 lines
4.6 KiB
Text
116 lines
4.6 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="activity"
|
|
>
|
|
<.header>
|
|
Activity Feed
|
|
<:subtitle>Org-wide timeline of config changes, alerts, events, and syncs</:subtitle>
|
|
</.header>
|
|
|
|
<%!-- Filter Bar --%>
|
|
<div class="mt-6 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-colors",
|
|
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}
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%!-- Timeline --%>
|
|
<div class="mt-8">
|
|
<%= if @items == [] do %>
|
|
<div class="rounded-lg border border-gray-200 bg-white p-12 text-center dark:border-white/10 dark:bg-gray-800/50">
|
|
<.icon name="hero-clock" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No activity yet</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Events will appear here as they happen across your organization.
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="relative">
|
|
<%!-- Vertical timeline line --%>
|
|
<div class="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></div>
|
|
|
|
<div class="space-y-1">
|
|
<%= for item <- @items do %>
|
|
<div id={item.id} class="relative flex items-start gap-4 pl-12 py-3 group">
|
|
<%!-- Timeline dot --%>
|
|
<div class={[
|
|
"absolute left-3.5 top-4 h-3 w-3 rounded-full border-2 border-white dark:border-gray-900",
|
|
severity_dot_color(item.severity, item.type)
|
|
]}>
|
|
</div>
|
|
|
|
<%!-- Content --%>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<.icon name={item.icon} class={["h-4 w-4 flex-shrink-0", severity_icon_color(item.severity, item.type)]} />
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
<.timestamp datetime={item.timestamp} />
|
|
</span>
|
|
<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>
|
|
</div>
|
|
|
|
<p class={["mt-0.5 text-sm font-medium", 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">
|
|
{item.detail}
|
|
</p>
|
|
|
|
<div :if={item.site_name} class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
|
|
{item.site_name}
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Link arrow --%>
|
|
<div :if={item.link} class="flex-shrink-0 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>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Load More --%>
|
|
<div :if={@has_more} class="mt-6 text-center">
|
|
<button
|
|
type="button"
|
|
phx-click="load_more"
|
|
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
|
>
|
|
<.icon name="hero-arrow-down" class="h-4 w-4" />
|
|
Load more
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.authenticated>
|