Graham McIntire
20f5f48372
Transform the dashboard into a single-pane-of-glass command center that blends operational metrics with business context from Gaiia subscriber data. - Extend insight schema with multi-source support (snmp, gaiia, system) - Add Oban workers for automated insight generation (device health, system, gaiia) - New Dashboard context with health score computation and site summaries - Rewrite dashboard LiveView with health overview, alert/insight feeds, site grid - Add source filter pills for insights with URL state management - Add metrics bar to site detail pages (device count, alerts, subscribers, MRR) - Add subscriber/MRR context to alert list site links - Add subscriber badges to device list site headers - Real-time PubSub updates for alerts on dashboard
191 lines
7.8 KiB
Text
191 lines
7.8 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="sites"
|
|
>
|
|
<.header>
|
|
{@page_title}
|
|
<:subtitle>{@site.location}</:subtitle>
|
|
<:actions>
|
|
<%= if @device != [] do %>
|
|
<.button
|
|
type="button"
|
|
phx-click="force_rediscover_all"
|
|
data-confirm="This will trigger SNMP discovery for all devices at this site. Continue?"
|
|
>
|
|
<.icon name="hero-magnifying-glass" class="h-4 w-4" /> Force Rediscover All
|
|
</.button>
|
|
<% end %>
|
|
<.button navigate={~p"/sites/#{@site.id}/edit"}>
|
|
<.icon name="hero-pencil" class="h-4 w-4" /> Edit
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<%!-- Metrics Bar --%>
|
|
<div class="mt-6 flex flex-wrap items-center gap-3">
|
|
<span class="inline-flex items-center gap-1.5 rounded-md bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
|
|
<.icon name="hero-server" class="h-3.5 w-3.5" />
|
|
{@site_summary.device_count} {if @site_summary.device_count == 1,
|
|
do: "device",
|
|
else: "devices"}
|
|
</span>
|
|
<%= if @site_summary.devices_down > 0 do %>
|
|
<span class="inline-flex items-center gap-1.5 rounded-md bg-red-100 px-2.5 py-1 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
|
|
<span class="h-2 w-2 rounded-full bg-red-500"></span>
|
|
{@site_summary.devices_down} down
|
|
</span>
|
|
<% end %>
|
|
<%= if @site_summary.alert_count > 0 do %>
|
|
<span class="inline-flex items-center gap-1.5 rounded-md bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/20 dark:text-red-400 dark:ring-red-400/20">
|
|
<.icon name="hero-bell-alert" class="h-3.5 w-3.5" />
|
|
{@site_summary.alert_count} {if @site_summary.alert_count == 1,
|
|
do: "alert",
|
|
else: "alerts"}
|
|
</span>
|
|
<% end %>
|
|
<%= if @site_summary.subscribers do %>
|
|
<span class="inline-flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/20">
|
|
<.icon name="hero-users" class="h-3.5 w-3.5" />
|
|
{@site_summary.subscribers} subscribers
|
|
</span>
|
|
<%= if @site_summary.mrr do %>
|
|
<span class="inline-flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/20">
|
|
<.icon name="hero-currency-dollar" class="h-3.5 w-3.5" />
|
|
{format_mrr(@site_summary.mrr)}/mo MRR
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Site Details</h3>
|
|
<dl class="space-y-4">
|
|
<%= if @site.parent_site do %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Parent Site</dt>
|
|
<dd class="mt-1">
|
|
<.link
|
|
navigate={~p"/sites/#{@site.parent_site.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{@site.parent_site.name}
|
|
</.link>
|
|
</dd>
|
|
</div>
|
|
<% end %>
|
|
<%= if @site.location do %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Location</dt>
|
|
<dd class="mt-1 text-gray-900 dark:text-white">{@site.location}</dd>
|
|
</div>
|
|
<% end %>
|
|
<%= if @site.description do %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Description</dt>
|
|
<dd class="mt-1 text-gray-900 dark:text-white">{@site.description}</dd>
|
|
</div>
|
|
<% end %>
|
|
</dl>
|
|
|
|
<%= if @site.child_sites != [] do %>
|
|
<div class="mt-6">
|
|
<h4 class="text-sm font-semibold mb-3 text-gray-900 dark:text-white">Child Sites</h4>
|
|
<ul class="space-y-2">
|
|
<li :for={child <- @site.child_sites}>
|
|
<.link
|
|
navigate={~p"/sites/#{child.id}"}
|
|
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{child.name}
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Device</h3>
|
|
<.button
|
|
navigate={~p"/devices/new?site_id=#{@site.id}"}
|
|
variant="primary"
|
|
>
|
|
<.icon name="hero-plus" class="h-4 w-4" /> Add Device
|
|
</.button>
|
|
</div>
|
|
|
|
<%= if @device == [] do %>
|
|
<div class="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center dark:border-white/20 dark:bg-gray-800/50">
|
|
<.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
|
|
<h4 class="mt-4 text-base font-semibold text-gray-900 dark:text-white">
|
|
Add your first device
|
|
</h4>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
Start monitoring by adding network devices to this site.
|
|
</p>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
You can add routers, switches, servers, or any device with an IP address.
|
|
</p>
|
|
<div class="mt-6">
|
|
<.button
|
|
navigate={~p"/devices/new?site_id=#{@site.id}"}
|
|
variant="primary"
|
|
>
|
|
<.icon name="hero-plus" class="h-5 w-5" /> Add Device
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="space-y-3">
|
|
<.link
|
|
:for={eq <- @device}
|
|
navigate={~p"/devices/#{eq.id}"}
|
|
class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
|
|
>
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">{eq.name}</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">{eq.ip_address}</p>
|
|
</div>
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
eq.status == :up &&
|
|
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
|
eq.status == :down && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
|
eq.status == :unknown &&
|
|
"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
|
]}>
|
|
{eq.status |> to_string() |> String.upcase()}
|
|
</span>
|
|
</.link>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<!-- Latency Chart -->
|
|
<%= if @latency_chart_data do %>
|
|
<div class="mt-8">
|
|
<div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
|
|
<div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Site Latency - Last 24 Hours
|
|
</h3>
|
|
</div>
|
|
<div class="p-4">
|
|
<div
|
|
id="site-latency-chart"
|
|
phx-hook="SensorChart"
|
|
data-chart={@latency_chart_data}
|
|
data-unit="ms"
|
|
data-auto-scale="true"
|
|
style="height: 400px;"
|
|
>
|
|
<canvas></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</Layouts.authenticated>
|