391 lines
16 KiB
Text
391 lines
16 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
current_organization={@organization}
|
|
timezone={@timezone}
|
|
>
|
|
<div phx-hook="ScrollToTop" id="scroll-container">
|
|
<div class="mb-4">
|
|
<.link
|
|
navigate={
|
|
if @live_action == :edit,
|
|
do: ~p"/devices/#{@device.id}",
|
|
else: ~p"/devices"
|
|
}
|
|
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
|
>
|
|
<.icon name="hero-arrow-left" class="h-4 w-4" />
|
|
{if @live_action == :edit, do: "Back to Device", else: "Back to Device List"}
|
|
</.link>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<.header>
|
|
{@page_title}
|
|
<:subtitle>
|
|
{if @live_action == :new,
|
|
do: "Add new device to monitor",
|
|
else: "Update device details"}
|
|
</:subtitle>
|
|
</.header>
|
|
</div>
|
|
|
|
<%= if @live_action == :new do %>
|
|
<% 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.at_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 %>
|
|
|
|
<div class={"rounded-lg px-3 py-2 text-sm font-medium border #{badge_class}"}>
|
|
<%= 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 %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Warning banner when approaching limit -->
|
|
<%= if @live_action == :new and not @device_quota.at_limit and @device_quota.limit != :unlimited and not @current_scope.user.is_superuser do %>
|
|
<% remaining = @device_quota.limit - @device_quota.current %>
|
|
<%= if remaining <= 3 do %>
|
|
<div class="mb-6 rounded-lg bg-orange-50 dark:bg-orange-900/20 p-4 border border-orange-200 dark:border-orange-800">
|
|
<div class="flex">
|
|
<.icon name="hero-exclamation-triangle" class="h-5 w-5 text-orange-400" />
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-orange-800 dark:text-orange-400">
|
|
Approaching device limit
|
|
</h3>
|
|
<p class="mt-1 text-sm text-orange-700 dark:text-orange-300">
|
|
You have {remaining} {if remaining == 1, do: "slot", else: "slots"} remaining.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="max-w-2xl">
|
|
<.form for={@form} id="device-form" phx-change="validate" phx-submit="save">
|
|
<.input
|
|
field={@form[:name]}
|
|
type="text"
|
|
label="Device Name"
|
|
placeholder={
|
|
if @monitoring_mode == "snmp_and_icmp",
|
|
do: "Leave blank to automatically populate from SNMP device name (sysName)",
|
|
else: nil
|
|
}
|
|
required={@monitoring_mode == "icmp_only"}
|
|
/>
|
|
|
|
<.input field={@form[:ip_address]} type="text" label="IP Address" required />
|
|
|
|
<div
|
|
:if={@duplicate_device}
|
|
class="rounded-md bg-amber-50 dark:bg-amber-900/20 p-3 -mt-2 mb-4"
|
|
>
|
|
<div class="flex items-center gap-2 text-amber-800 dark:text-amber-200">
|
|
<.icon name="hero-exclamation-triangle" class="h-5 w-5 flex-shrink-0" />
|
|
<p class="text-sm">
|
|
A device with this IP address already exists:
|
|
<.link
|
|
navigate={~p"/devices/#{@duplicate_device.id}"}
|
|
class="font-medium underline hover:text-amber-900 dark:hover:text-amber-100"
|
|
>
|
|
{@duplicate_device.name || @duplicate_device.ip_address}
|
|
</.link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:if={@non_routable_ip_error}
|
|
class="rounded-md bg-red-50 dark:bg-red-900/20 p-3 -mt-2 mb-4"
|
|
>
|
|
<div class="flex items-start gap-2 text-red-800 dark:text-red-200">
|
|
<.icon name="hero-exclamation-circle" class="h-5 w-5 flex-shrink-0 mt-0.5" />
|
|
<div class="text-sm">
|
|
<p class="font-medium">Non-routable IP address detected</p>
|
|
<p class="mt-1">
|
|
This IP address (private network or CGNAT range) cannot be reached from the cloud.
|
|
To monitor this device, assign it to a
|
|
<.link
|
|
navigate={~p"/agents"}
|
|
class="font-medium underline"
|
|
>
|
|
remote agent
|
|
</.link>
|
|
deployed on the same network.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<.input
|
|
field={@form[:site_id]}
|
|
type="select"
|
|
label="Site"
|
|
required
|
|
prompt="Select a site"
|
|
options={Enum.map(@available_sites, &{&1.name, &1.id})}
|
|
/>
|
|
|
|
<.input field={@form[:description]} type="textarea" label="Description" />
|
|
|
|
<.input
|
|
field={@form[:check_interval_seconds]}
|
|
type="number"
|
|
label="Check Interval (seconds)"
|
|
min="30"
|
|
max="3600"
|
|
/>
|
|
|
|
<.input field={@form[:monitoring_enabled]} type="checkbox" label="Enable Monitoring" />
|
|
|
|
<%= if @available_agents != [] do %>
|
|
<.input
|
|
field={@form[:agent_token_id]}
|
|
type="select"
|
|
label="Remote Agent"
|
|
prompt="Inherit from site/organization"
|
|
options={
|
|
Enum.map(@available_agents, fn agent ->
|
|
label =
|
|
if agent.is_cloud_poller,
|
|
do: "#{agent.name} (Cloud Poller)",
|
|
else: agent.name
|
|
|
|
{label, agent.id}
|
|
end)
|
|
}
|
|
/>
|
|
<%= if @live_action == :edit and Map.has_key?(assigns, :agent_source) do %>
|
|
<%= case @agent_source do %>
|
|
<% :device -> %>
|
|
<p class="mt-1 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
|
|
<.icon name="hero-exclamation-triangle" class="h-4 w-4" />
|
|
<strong>Overriding</strong> site/organization defaults -
|
|
this device is explicitly assigned
|
|
</p>
|
|
<% :site -> %>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-building-office" class="h-4 w-4" /> Inherited from site:
|
|
<strong>{@effective_agent_name}</strong>
|
|
</p>
|
|
<% :organization -> %>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-building-office-2" class="h-4 w-4" />
|
|
Inherited from organization: <strong>{@effective_agent_name}</strong>
|
|
</p>
|
|
<% :global -> %>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-globe-alt" class="h-4 w-4" />
|
|
Using global default cloud poller: <strong>{@effective_agent_name}</strong>
|
|
</p>
|
|
<% :none -> %>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-cloud" class="h-4 w-4" /> No agent assigned - cloud polling
|
|
</p>
|
|
<% end %>
|
|
<% else %>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Assign this device to a remote agent for local SNMP polling. Leave empty to inherit from site or organization defaults.
|
|
</p>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="mt-8 border-t pt-6">
|
|
<h3 class="text-lg font-medium mb-4">Monitoring Configuration</h3>
|
|
|
|
<!-- Monitoring Mode Tabs -->
|
|
<div class="mb-6">
|
|
<div class="border-b border-gray-200 dark:border-white/10">
|
|
<nav class="-mb-px flex space-x-8" aria-label="Monitoring mode">
|
|
<button
|
|
type="button"
|
|
phx-click="switch_monitoring_mode"
|
|
phx-value-mode="snmp_and_icmp"
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
@monitoring_mode == "snmp_and_icmp" &&
|
|
"border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400",
|
|
@monitoring_mode != "snmp_and_icmp" &&
|
|
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
|
|
]}
|
|
>
|
|
SNMP & ICMP
|
|
</button>
|
|
<button
|
|
type="button"
|
|
phx-click="switch_monitoring_mode"
|
|
phx-value-mode="icmp_only"
|
|
class={[
|
|
"whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
|
|
@monitoring_mode == "icmp_only" &&
|
|
"border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400",
|
|
@monitoring_mode != "icmp_only" &&
|
|
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
|
|
]}
|
|
>
|
|
ICMP Only
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<%= if @monitoring_mode == "snmp_and_icmp" do %>
|
|
<p>
|
|
Monitor device availability with ICMP pings and collect detailed information via SNMP
|
|
(interfaces, sensors, system info).
|
|
</p>
|
|
<% else %>
|
|
<p>Monitor device availability with ICMP pings only (no SNMP discovery).</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:if={@monitoring_mode == "snmp_and_icmp"}
|
|
class="mt-4 space-y-4 pl-6 border-l-2 border-blue-200"
|
|
>
|
|
<.input
|
|
field={@form[:snmp_version]}
|
|
type="select"
|
|
label="SNMP Version"
|
|
prompt="Inherit from site/organization"
|
|
options={[{"SNMPv1", "1"}, {"SNMPv2c", "2c"}]}
|
|
/>
|
|
|
|
<.input
|
|
field={@form[:snmp_community]}
|
|
type="text"
|
|
label="Community String"
|
|
placeholder="Leave blank to inherit from site/organization"
|
|
autocomplete="off"
|
|
/>
|
|
|
|
<%= if @live_action == :edit and Map.has_key?(assigns, :snmp_config_source) do %>
|
|
<%= case @snmp_config_source do %>
|
|
<% :device -> %>
|
|
<p class="text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
|
|
<.icon name="hero-exclamation-triangle" class="h-4 w-4" />
|
|
<strong>Overriding</strong> site/organization SNMP defaults
|
|
</p>
|
|
<% :site -> %>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-building-office" class="h-4 w-4" />
|
|
Inherited from site (v{@effective_snmp_version}, community: {@effective_snmp_community})
|
|
</p>
|
|
<% :organization -> %>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-building-office-2" class="h-4 w-4" />
|
|
Inherited from organization (v{@effective_snmp_version}, community: {@effective_snmp_community})
|
|
</p>
|
|
<% :default -> %>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
|
|
<.icon name="hero-information-circle" class="h-4 w-4" />
|
|
Using default (v2c, no community set - configure at organization or site level)
|
|
</p>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<.input
|
|
field={@form[:snmp_port]}
|
|
type="number"
|
|
label="SNMP Port"
|
|
min="1"
|
|
max="65535"
|
|
value={@form[:snmp_port].value || 161}
|
|
/>
|
|
|
|
<div
|
|
:if={@snmp_test_result}
|
|
class="rounded-md p-3"
|
|
class={[
|
|
@snmp_test_result.success && "bg-green-50 text-green-800",
|
|
!@snmp_test_result.success && "bg-red-50 text-red-800"
|
|
]}
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<.icon :if={@snmp_test_result.success} name="hero-check-circle" class="w-5 h-5" />
|
|
<.icon :if={!@snmp_test_result.success} name="hero-x-circle" class="w-5 h-5" />
|
|
<span class="text-sm font-medium">{@snmp_test_result.message}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<.button type="button" phx-click="test_snmp" phx-disable-with="Testing...">
|
|
Test SNMP Connection
|
|
</.button>
|
|
|
|
<%= if @live_action == :edit do %>
|
|
<.button
|
|
type="button"
|
|
phx-click="trigger_discovery"
|
|
phx-disable-with="Discovering..."
|
|
>
|
|
<.icon name="hero-magnifying-glass" class="h-4 w-4" /> Rediscover Device
|
|
</.button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-6">
|
|
<.button
|
|
phx-disable-with="Saving..."
|
|
variant="primary"
|
|
disabled={@duplicate_device != nil or @non_routable_ip_error}
|
|
>
|
|
Save Device
|
|
</.button>
|
|
<.button navigate={~p"/devices"}>Cancel</.button>
|
|
</div>
|
|
</.form>
|
|
|
|
<%= if @live_action == :edit do %>
|
|
<div class="mt-12 pt-8 border-t border-gray-200 dark:border-white/10">
|
|
<h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">Danger Zone</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Once you delete this device, there is no going back. All monitoring history and alerts will be permanently deleted.
|
|
</p>
|
|
<.button
|
|
phx-click="delete"
|
|
data-confirm="Are you sure you want to delete this device? All monitoring history and alerts will be permanently deleted."
|
|
variant="danger"
|
|
>
|
|
<.icon name="hero-trash" class="h-4 w-4" /> Delete Device
|
|
</.button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</Layouts.authenticated>
|