<.icon
name="hero-light-bulb"
class="mx-auto h-16 w-16 text-blue-500 dark:text-blue-400"
/>
Let's get started!
Follow these steps to set up your network monitoring:
1
Create a Site
Sites represent your physical locations (offices, data centers, towers, etc.)
2
Add Device
Add network devices (routers, switches, servers) to your sites
3
Monitor & Receive Alerts
Towerops will automatically monitor your devices and alert you of issues
<.button navigate={~p"/sites/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
<.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"
>
Sites
{@sites_count}
Total sites
<.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"
>
Device
{@device_count}
{@device_up} Up
{@device_down} Down
{@device_unknown} Unknown
<.link
navigate={~p"/orgs/#{@current_organization.slug}/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"
>
Active Alerts
0 && "text-red-600 dark:text-red-500") ||
"text-gray-900 dark:text-white"
]}>
{length(@active_alerts)}
Requires attention
System Status
<%= if @device_down == 0 do %>
<.icon name="hero-check-circle" class="h-5 w-5" />
All Systems Operational
<% else %>
<.icon name="hero-exclamation-triangle" class="h-5 w-5" />
{@device_down} Device Down
<% end %>
Active Alerts
<.link
navigate={~p"/orgs/#{@current_organization.slug}/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 →
<%= for alert <- Enum.take(@active_alerts, 5) do %>
<.icon
name="hero-exclamation-triangle"
class="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-500"
/>
<.link
navigate={~p"/devices/#{alert.device.id}"}
class="hover:text-blue-600 hover:underline dark:hover:text-blue-400"
>
{alert.device.name}
{alert.message}
<.timestamp
datetime={alert.triggered_at}
timezone={@timezone}
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
/>
<% end %>
<%= if length(@active_alerts) > 5 do %>
+ {length(@active_alerts) - 5} more alerts
<% end %>
<% end %>
Quick Actions
<.link
navigate={~p"/sites"}
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
>
<.icon name="hero-building-office" class="h-5 w-5" />
Manage Sites
<.link
navigate={~p"/devices"}
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
>
<.icon name="hero-server" class="h-5 w-5" />
Manage Device
<.link
navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:border-white/10 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
<.icon name="hero-bell" class="h-5 w-5" />
View Alerts
<% end %>