206 lines
8.8 KiB
Text
206 lines
8.8 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="dashboard"
|
|
>
|
|
<.header>
|
|
Dashboard
|
|
<:subtitle>Welcome to {@current_scope.organization.name}</:subtitle>
|
|
</.header>
|
|
|
|
<%= if @device_count == 0 do %>
|
|
<div class="mt-8 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-12 text-center dark:border-white/20 dark:bg-gray-800/50">
|
|
<.icon
|
|
name="hero-light-bulb"
|
|
class="mx-auto h-16 w-16 text-blue-500 dark:text-blue-400"
|
|
/>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">
|
|
Let's get started!
|
|
</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
Follow these steps to set up your network monitoring:
|
|
</p>
|
|
<div class="mt-8 max-w-2xl mx-auto">
|
|
<div class="space-y-4 text-left">
|
|
<%= if @current_scope.organization.use_sites do %>
|
|
<div class="flex gap-4 items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold dark:bg-blue-900 dark:text-blue-300">
|
|
1
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900 dark:text-white">Create a Site</h4>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Sites represent your physical locations (offices, data centers, towers, etc.)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-600 font-semibold dark:bg-gray-700 dark:text-gray-400">
|
|
2
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900 dark:text-white">Add Devices</h4>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Add network devices (routers, switches, servers) to your sites
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex gap-4 items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold dark:bg-blue-900 dark:text-blue-300">
|
|
1
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900 dark:text-white">Add Devices</h4>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Add network devices (routers, switches, servers) to monitor
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<div class="flex gap-4 items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-600 font-semibold dark:bg-gray-700 dark:text-gray-400">
|
|
{if @current_scope.organization.use_sites, do: "3", else: "2"}
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900 dark:text-white">
|
|
Monitor & Receive Alerts
|
|
</h4>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Towerops will automatically monitor your devices and alert you of issues
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-8">
|
|
<%= if @current_scope.organization.use_sites do %>
|
|
<.button navigate={~p"/sites/new"} variant="primary">
|
|
<.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
|
|
</.button>
|
|
<% else %>
|
|
<.button navigate={~p"/devices/new"} variant="primary">
|
|
<.icon name="hero-plus" class="h-5 w-5" /> Add Your First Device
|
|
</.button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class={[
|
|
"mt-8 grid gap-6",
|
|
(@current_scope.organization.use_sites && "md:grid-cols-2 lg:grid-cols-4") ||
|
|
"md:grid-cols-3"
|
|
]}>
|
|
<%= if @current_scope.organization.use_sites do %>
|
|
<.link
|
|
navigate={~p"/sites"}
|
|
class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-white/10 dark:bg-gray-800/50"
|
|
>
|
|
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Sites</h3>
|
|
<p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{@sites_count}</p>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Total sites</p>
|
|
</.link>
|
|
<% end %>
|
|
|
|
<.link
|
|
navigate={~p"/devices"}
|
|
class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-white/10 dark:bg-gray-800/50"
|
|
>
|
|
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Device</h3>
|
|
<p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{@device_count}</p>
|
|
<div class="mt-3 space-y-1.5 text-sm">
|
|
<div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
|
|
<span class="h-2 w-2 rounded-full bg-green-500"></span>
|
|
{@device_up} Up
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
|
|
<span class="h-2 w-2 rounded-full bg-red-500"></span>
|
|
{@device_down} Down
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
|
|
<span class="h-2 w-2 rounded-full bg-gray-400"></span>
|
|
{@device_unknown} Unknown
|
|
</div>
|
|
</div>
|
|
</.link>
|
|
|
|
<.link
|
|
navigate={~p"/alerts"}
|
|
class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-white/10 dark:bg-gray-800/50"
|
|
>
|
|
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Alerts</h3>
|
|
<p class={[
|
|
"mt-2 text-3xl font-bold",
|
|
(length(@active_alerts) > 0 && "text-red-600 dark:text-red-500") ||
|
|
"text-gray-900 dark:text-white"
|
|
]}>
|
|
{length(@active_alerts)}
|
|
</p>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Requires attention</p>
|
|
</.link>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-gray-800/50">
|
|
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">System Status</h3>
|
|
<div class={[
|
|
"mt-3 flex items-center gap-2 text-sm font-semibold",
|
|
(@device_down == 0 && "text-green-600 dark:text-green-500") ||
|
|
"text-amber-600 dark:text-amber-500"
|
|
]}>
|
|
<%= if @device_down == 0 do %>
|
|
<.icon name="hero-check-circle" class="h-5 w-5" />
|
|
<span>All Systems Operational</span>
|
|
<% else %>
|
|
<.icon name="hero-exclamation-triangle" class="h-5 w-5" />
|
|
<span>{@device_down} Device Down</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if length(@active_alerts) > 0 do %>
|
|
<div class="mt-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Active Alerts</h2>
|
|
<.link
|
|
navigate={~p"/alerts"}
|
|
class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
|
|
>
|
|
View All Alerts →
|
|
</.link>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<%= for alert <- Enum.take(@active_alerts, 5) do %>
|
|
<div class="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900/50 dark:bg-red-950/30">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-500"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-semibold text-gray-900 dark:text-white">
|
|
<.link
|
|
navigate={~p"/devices/#{alert.device.id}"}
|
|
class="hover:text-blue-600 hover:underline dark:hover:text-blue-400"
|
|
>
|
|
{alert.device.name}
|
|
</.link>
|
|
</h3>
|
|
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-300">{alert.message}</p>
|
|
</div>
|
|
<.timestamp
|
|
datetime={alert.triggered_at}
|
|
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
|
|
/>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if length(@active_alerts) > 5 do %>
|
|
<div class="text-center text-sm text-gray-500 dark:text-gray-400">
|
|
+ {length(@active_alerts) - 5} more alerts
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</Layouts.authenticated>
|