<.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 Equipment
Add network devices (routers, switches, servers) to your sites
3
Monitor & Receive Alerts
Towerops will automatically monitor your equipment and alert you of issues
<.button navigate={~p"/orgs/#{@current_organization.slug}/sites/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
<.link
navigate={~p"/orgs/#{@current_organization.slug}/sites"}
class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
>
Sites
{@sites_count}
Total sites
<.link
navigate={~p"/orgs/#{@current_organization.slug}/equipment"}
class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
>
Equipment
{@equipment_count}
{@equipment_up} Up
{@equipment_down} Down
{@equipment_unknown} Unknown
<.link
navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
>
Active Alerts
0 && "text-red-600 dark:text-red-500") ||
"text-zinc-900 dark:text-zinc-100"
]}>
{length(@active_alerts)}
Requires attention
System Status
<%= if @equipment_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" />
{@equipment_down} Equipment 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"/orgs/#{@current_organization.slug}/equipment/#{alert.equipment.id}"
}
class="hover:text-blue-600 hover:underline dark:hover:text-blue-400"
>
{alert.equipment.name}
{alert.message}
{Calendar.strftime(alert.triggered_at, "%H:%M")}
<% end %>
<%= if length(@active_alerts) > 5 do %>
+ {length(@active_alerts) - 5} more alerts
<% end %>
<% end %>
Quick Actions
<.link
navigate={~p"/orgs/#{@current_organization.slug}/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"/orgs/#{@current_organization.slug}/equipment"}
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 Equipment
<.link
navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm font-semibold text-zinc-700 shadow-sm hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
>
<.icon name="hero-bell" class="h-5 w-5" />
View Alerts
<% end %>