104 lines
3.6 KiB
Text
104 lines
3.6 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
current_organization={@current_organization}
|
|
active_page="devices"
|
|
timezone={@timezone}
|
|
>
|
|
<.header>
|
|
{@page_title}
|
|
<:subtitle>Monitor and manage all your network devices</:subtitle>
|
|
<:actions>
|
|
<.button
|
|
:if={@has_sites}
|
|
navigate={~p"/orgs/#{@current_organization.slug}/devices/new"}
|
|
variant="primary"
|
|
>
|
|
<.icon name="hero-plus" class="h-5 w-5" /> New Device
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<%= if !@has_sites do %>
|
|
<div class="text-center py-16">
|
|
<.icon
|
|
name="hero-building-office"
|
|
class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600"
|
|
/>
|
|
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
|
Create a site first
|
|
</h3>
|
|
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Before adding device, you need to create at least one site location.
|
|
</p>
|
|
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Sites help you organize your devices by physical location.
|
|
</p>
|
|
<div class="mt-6">
|
|
<.button navigate={~p"/orgs/#{@current_organization.slug}/sites/new"} variant="primary">
|
|
<.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%= if @device == [] do %>
|
|
<div class="text-center py-16">
|
|
<.icon name="hero-server" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
|
|
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No devices</h3>
|
|
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Get started by adding your first device.
|
|
</p>
|
|
<div class="mt-6">
|
|
<.button
|
|
navigate={~p"/orgs/#{@current_organization.slug}/devices/new"}
|
|
variant="primary"
|
|
>
|
|
<.icon name="hero-plus" class="h-5 w-5" /> New Device
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<.table
|
|
id="devices"
|
|
rows={@device}
|
|
row_click={
|
|
fn eq ->
|
|
JS.navigate(~p"/orgs/#{@current_organization.slug}/devices/#{eq.id}")
|
|
end
|
|
}
|
|
>
|
|
<:col :let={eq} label="Name">
|
|
<span class="font-medium">{eq.name}</span>
|
|
</:col>
|
|
<:col :let={eq} label="IP Address">
|
|
<span class="font-mono text-sm">{eq.ip_address}</span>
|
|
</:col>
|
|
<:col :let={eq} label="Site">
|
|
<.link
|
|
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{eq.site.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{eq.site.name}
|
|
</.link>
|
|
</:col>
|
|
<:col :let={eq} label="Status">
|
|
<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-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
|
|
]}>
|
|
{eq.status |> to_string() |> String.upcase()}
|
|
</span>
|
|
</:col>
|
|
<:col :let={eq} label="Last Checked">
|
|
<span class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{ToweropsWeb.TimeHelpers.format_datetime(eq.last_checked_at, @timezone)}
|
|
</span>
|
|
</:col>
|
|
</.table>
|
|
<% end %>
|
|
<% end %>
|
|
</Layouts.authenticated>
|