Graham McIntire
03f364a956
Adds an optional plain-language summary and recommended action to every active insight. A new Oban cron worker runs every 5 minutes, picks up unenriched insights, and asks the configured LLM to restate the finding and suggest one specific action grounded in the structured metadata. - Migration: adds llm_summary, recommended_action, llm_model, llm_enriched_at columns to preseem_insights - Towerops.LLM context with swappable behaviour; real client uses Req with the standard Req.Test plug for test isolation - MockClient + InsightPrompt module (builds chat messages, parses JSON with code-fence stripping and a raw-text fallback) - Worker logs and skips on rate limits / missing key / parse errors so insights still render without an AI summary when the LLM is unavailable - Optional towerops-llm k8s secret with example template; deployment.yaml references it as optional in both init and main containers - UI renders summary + recommended action callout on /insights and on the org-level insights page
321 lines
12 KiB
Text
321 lines
12 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
>
|
|
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
|
|
<.breadcrumb items={[
|
|
%{label: "Dashboard", navigate: ~p"/dashboard"},
|
|
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
|
|
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
|
|
%{label: "Preseem"}
|
|
]} />
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
|
{t("Network Insights")}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
{t("Proactive network health observations generated from Preseem data analysis.")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Filter bar --%>
|
|
<div class="mt-6 flex flex-wrap items-center gap-4 border-b border-gray-200 pb-4 dark:border-white/10">
|
|
<%!-- Status filter tabs --%>
|
|
<nav class="flex space-x-4">
|
|
<.link
|
|
id="filter-active"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?status=active"
|
|
}
|
|
class={[
|
|
"rounded-md px-3 py-1.5 text-sm font-medium",
|
|
if(@filter_status == "active",
|
|
do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
|
|
else:
|
|
"text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
|
|
)
|
|
]}
|
|
>
|
|
{t("Active")}
|
|
</.link>
|
|
<.link
|
|
id="filter-dismissed"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?status=dismissed"
|
|
}
|
|
class={[
|
|
"rounded-md px-3 py-1.5 text-sm font-medium",
|
|
if(@filter_status == "dismissed",
|
|
do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
|
|
else:
|
|
"text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
|
|
)
|
|
]}
|
|
>
|
|
{t("Dismissed")}
|
|
</.link>
|
|
</nav>
|
|
|
|
<%!-- Urgency filter --%>
|
|
<div class="flex items-center gap-2 border-l border-gray-200 pl-4 dark:border-white/10">
|
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Urgency:</span>
|
|
<.link
|
|
id="filter-urgency-all"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?#{%{status: @filter_status}}"
|
|
}
|
|
class={[
|
|
"rounded-md px-2 py-1 text-xs font-medium",
|
|
if(is_nil(@filter_urgency),
|
|
do: "bg-gray-200 text-gray-800 dark:bg-white/20 dark:text-white",
|
|
else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
|
|
)
|
|
]}
|
|
>
|
|
{t("All")}
|
|
</.link>
|
|
<.link
|
|
id="filter-urgency-critical"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?#{%{status: @filter_status, urgency: "critical"}}"
|
|
}
|
|
class={[
|
|
"rounded-md px-2 py-1 text-xs font-medium",
|
|
if(@filter_urgency == "critical",
|
|
do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
|
|
else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
|
|
)
|
|
]}
|
|
>
|
|
{t("Critical")}
|
|
</.link>
|
|
<.link
|
|
id="filter-urgency-warning"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?#{%{status: @filter_status, urgency: "warning"}}"
|
|
}
|
|
class={[
|
|
"rounded-md px-2 py-1 text-xs font-medium",
|
|
if(@filter_urgency == "warning",
|
|
do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
|
|
else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
|
|
)
|
|
]}
|
|
>
|
|
{t("Warning")}
|
|
</.link>
|
|
<.link
|
|
id="filter-urgency-info"
|
|
patch={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/insights?#{%{status: @filter_status, urgency: "info"}}"
|
|
}
|
|
class={[
|
|
"rounded-md px-2 py-1 text-xs font-medium",
|
|
if(@filter_urgency == "info",
|
|
do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
|
|
else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
|
|
)
|
|
]}
|
|
>
|
|
{t("Info")}
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Bulk actions bar --%>
|
|
<%= if any_selected?(@selected_ids) do %>
|
|
<div
|
|
id="bulk-actions"
|
|
class="mt-4 flex items-center gap-3 rounded-lg bg-indigo-50 px-4 py-3 dark:bg-indigo-900/20"
|
|
>
|
|
<span class="text-sm font-medium text-indigo-700 dark:text-indigo-300">
|
|
{MapSet.size(@selected_ids)} selected
|
|
</span>
|
|
<button
|
|
type="button"
|
|
id="deselect-all-btn"
|
|
phx-click="deselect_all"
|
|
class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
{t("Deselect All")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="bulk-dismiss-btn"
|
|
phx-click="bulk_dismiss"
|
|
class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
|
|
>
|
|
{t("Dismiss Selected")}
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%!-- Insights list --%>
|
|
<div class="mt-6" id="insights-list">
|
|
<%= if @insights == [] do %>
|
|
<div
|
|
id="empty-state"
|
|
class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center dark:border-gray-700"
|
|
>
|
|
<.icon
|
|
name="hero-light-bulb"
|
|
class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
|
|
/>
|
|
<h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
{t("No insights found")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
<%= cond do %>
|
|
<% @filter_status == "dismissed" -> %>
|
|
{t("No dismissed insights.")}
|
|
<% @filter_urgency != nil -> %>
|
|
No {@filter_urgency} insights right now.
|
|
<% true -> %>
|
|
{t("No active insights. Your network is looking healthy!")}
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<%!-- Select all bar --%>
|
|
<div class="mb-3 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
id="select-all-btn"
|
|
phx-click="select_all"
|
|
class="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
|
>
|
|
{t("Select All")}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div
|
|
:for={insight <- @insights}
|
|
id={"insight-#{insight.id}"}
|
|
class={[
|
|
"rounded-lg border bg-white p-4 transition-shadow hover:shadow-md dark:bg-gray-800/50",
|
|
if(selected?(@selected_ids, insight.id),
|
|
do:
|
|
"border-indigo-300 ring-1 ring-indigo-200 dark:border-indigo-600 dark:ring-indigo-800",
|
|
else: "border-gray-200 dark:border-white/10"
|
|
)
|
|
]}
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex items-start gap-3">
|
|
<%!-- Checkbox --%>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_select"
|
|
phx-value-id={insight.id}
|
|
class="mt-0.5 flex-shrink-0"
|
|
>
|
|
<div class={[
|
|
"flex h-5 w-5 items-center justify-center rounded border",
|
|
if(selected?(@selected_ids, insight.id),
|
|
do:
|
|
"border-indigo-600 bg-indigo-600 dark:border-indigo-500 dark:bg-indigo-500",
|
|
else: "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700"
|
|
)
|
|
]}>
|
|
<%= if selected?(@selected_ids, insight.id) do %>
|
|
<.icon name="hero-check" class="h-3.5 w-3.5 text-white" />
|
|
<% end %>
|
|
</div>
|
|
</button>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<%!-- Urgency badge --%>
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
|
|
urgency_classes(insight.urgency)
|
|
]}>
|
|
{insight.urgency}
|
|
</span>
|
|
|
|
<%!-- Type badge --%>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
|
{String.replace(insight.type, "_", " ")}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
|
|
{insight.title}
|
|
</h3>
|
|
|
|
<%= if insight.description do %>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
{insight.description}
|
|
</p>
|
|
<% end %>
|
|
|
|
<%= if insight.llm_summary do %>
|
|
<div class="mt-2 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-900 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-100">
|
|
<p class="font-medium">{t("Summary")}</p>
|
|
<p>{insight.llm_summary}</p>
|
|
<%= if insight.recommended_action do %>
|
|
<p class="mt-1">
|
|
<span class="font-semibold">{t("Recommended action:")}</span>
|
|
{insight.recommended_action}
|
|
</p>
|
|
<% end %>
|
|
<p class="mt-1 text-xs text-blue-700 dark:text-blue-300">
|
|
AI-generated{if insight.llm_model, do: " · " <> insight.llm_model, else: ""}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
|
|
<%!-- Access point --%>
|
|
<%= if insight.preseem_access_point do %>
|
|
<span class="flex items-center gap-1">
|
|
<.icon name="hero-signal" class="h-3.5 w-3.5" />
|
|
{insight.preseem_access_point.name}
|
|
</span>
|
|
<% end %>
|
|
|
|
<%!-- Linked device --%>
|
|
<%= if insight.device do %>
|
|
<.link
|
|
navigate={~p"/devices/#{insight.device.id}"}
|
|
class="flex items-center gap-1 text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
<.icon name="hero-server" class="h-3.5 w-3.5" />
|
|
{insight.device.name || "Device"}
|
|
</.link>
|
|
<% end %>
|
|
|
|
<%!-- Timestamp --%>
|
|
<span class="flex items-center gap-1">
|
|
<.icon name="hero-clock" class="h-3.5 w-3.5" />
|
|
{ToweropsWeb.TimeHelpers.format_datetime(
|
|
insight.inserted_at,
|
|
@current_scope.timezone,
|
|
@current_scope.time_format
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Dismiss button --%>
|
|
<%= if insight.status == "active" do %>
|
|
<button
|
|
type="button"
|
|
phx-click="dismiss"
|
|
phx-value-id={insight.id}
|
|
class="flex-shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
|
|
>
|
|
{t("Dismiss")}
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.authenticated>
|