<.header>
{@page_title}
<:subtitle>Monitor and manage all your network devices
<% percent =
if @device_quota.limit != :unlimited and @device_quota.limit > 0 do
(@device_quota.current / @device_quota.limit * 100) |> trunc()
else
0
end %>
<% badge_class =
cond do
@current_scope.user.is_superuser ->
"bg-blue-50 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
@device_quota.limit != :unlimited and @device_quota.current >= @device_quota.limit ->
"bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800"
percent >= 90 ->
"bg-orange-50 text-orange-800 border-orange-200 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-800"
percent >= 75 ->
"bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800"
@device_quota.limit == :unlimited ->
"bg-blue-50 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
true ->
"bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800"
end %>
<%= cond do %>
<% @current_scope.user.is_superuser -> %>
{@device_quota.current} devices
<% @device_quota.limit == :unlimited -> %>
{@device_quota.current} devices
<% true -> %>
{@device_quota.current}/{@device_quota.limit} devices
<% end %>
<%= if @device != [] do %>
<%= if @reorder_mode do %>
<.button
type="button"
phx-click="reset_order"
data-confirm="Reset all sites and devices to alphabetical order?"
>
<.icon name="hero-arrow-path" class="h-4 w-4" /> Reset Order
<.button
type="button"
phx-click="toggle_reorder_mode"
variant="primary"
>
<.icon name="hero-check" class="h-4 w-4" /> Done
<% else %>
<.button
type="button"
phx-click="toggle_reorder_mode"
>
<.icon name="hero-bars-3" class="h-4 w-4" /> Reorder
<% end %>
<% end %>
<.button
:if={@has_sites}
navigate={~p"/devices/new"}
variant="primary"
>
<.icon name="hero-plus" class="h-5 w-5" /> New Device
<%= if @device != [] and not @reorder_mode do %>
<.button
type="button"
phx-click="force_rediscover_all"
data-confirm="This will trigger SNMP discovery for all SNMP-enabled devices. Continue?"
>
<.icon name="hero-magnifying-glass" class="h-4 w-4" /> Force Rediscover All
<% end %>
<%= case @active_tab do %>
<% "existing" -> %>
<%= if !@has_sites do %>
<.icon
name="hero-building-office"
class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
/>
Create a site first
Before adding device, you need to create at least one site location.
Sites help you organize your devices by physical location.
<.button navigate={~p"/sites/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
<.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
No devices
Get started by adding your first device.
<.button navigate={~p"/devices/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> New Device
|
Drag handle
|
Name
|
IP Address
|
Status
|
Last Checked
|
<%= for {{site, devices, stats}, index} <- Enum.with_index(@grouped_devices) do %>
|
|
<.link
navigate={~p"/sites/#{site.id}"}
class="text-sm font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400"
>
{site.name}
ยท
{stats.total} {if stats.total == 1, do: "device", else: "devices"}
0}
class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
>
{stats.up} up
0}
class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
>
{stats.down} down
<.icon name="hero-map-pin" class="inline h-3 w-3" /> {site.location}
|
<%= for {device, device_index} <- Enum.with_index(devices) do %>
|
|
{device.name}
|
{device.ip_address}
|
{device.status |> to_string() |> String.upcase()}
|
<.timestamp datetime={device.last_checked_at} timezone={@timezone} />
|
<% end %>
<% end %>
<% end %>
<% end %>
<% "discovered" -> %>
<%= if @discovered_devices == [] do %>
<.icon
name="hero-magnifying-glass"
class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
/>
No discovered devices
Devices will appear here as they are discovered via LLDP/CDP.
MAC
{discovered.identifier.value}
<% :ip -> %>
IP
{discovered.identifier.value}
<% :hostname -> %>
HOST
{discovered.identifier.value}
<% _ -> %>
Unknown
<% end %>
<:col :let={discovered} label="Hostname">
<%= if discovered.hostname do %>
{discovered.hostname}
<% else %>
-
<% end %>
<:col :let={discovered} label="Type">
<.icon
name={device_type_icon(discovered.device_type)}
class="h-4 w-4 text-gray-500"
/>
{device_type_label(discovered.device_type)}
<:col :let={discovered} label="Manufacturer">
<%= if discovered.manufacturer do %>
{discovered.manufacturer}
<% else %>
-
<% end %>
<:col :let={discovered} label="Discovered By">
<%= if length(discovered.discovered_by) == 1 do %>
<% [first] = discovered.discovered_by %>
<.link
navigate={~p"/devices/#{first.device_id}"}
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
>
{first.device_name}
({first.interface})
<% else %>
{length(discovered.discovered_by)} devices
<% end %>
<:col :let={discovered} label="Last Seen">
<.timestamp
datetime={discovered.last_seen}
class="text-sm text-gray-600 dark:text-gray-400"
/>
<:col :let={discovered} label="Actions">
<.button
phx-click="add_discovered_device"
phx-value-identifier={Jason.encode!(discovered.identifier)}
variant="primary"
>
<.icon name="hero-plus" class="h-3 w-3" /> Add Device
<% end %>
<% end %>