Graham McIntire
d209b3295a
Added a new 'danger' button variant to the button component for destructive actions like deleting equipment or sites. Changes: - Added 'danger' variant to button component (red background/hover) - Updated equipment delete button to use variant="danger" - Updated site delete button to use variant="danger" - Removed custom red color classes in favor of standardized variant This provides consistent styling for all delete/destructive actions across the application while maintaining proper button base styles (padding, rounded corners, shadow, focus ring, etc).
119 lines
4 KiB
Text
119 lines
4 KiB
Text
<Layouts.authenticated flash={@flash} current_organization={@organization}>
|
|
<.header>
|
|
{@page_title}
|
|
<:subtitle>
|
|
{if @live_action == :new,
|
|
do: "Add new equipment to monitor",
|
|
else: "Update equipment details"}
|
|
</:subtitle>
|
|
</.header>
|
|
|
|
<div class="max-w-2xl">
|
|
<.form for={@form} id="equipment-form" phx-change="validate" phx-submit="save">
|
|
<.input field={@form[:name]} type="text" label="Equipment Name" required />
|
|
|
|
<.input field={@form[:ip_address]} type="text" label="IP Address" required />
|
|
|
|
<.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" />
|
|
|
|
<div class="mt-8 border-t pt-6">
|
|
<h3 class="text-lg font-medium mb-4">SNMP Configuration</h3>
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
Enable SNMP to discover device details, monitor sensors, and track interface statistics.
|
|
</p>
|
|
|
|
<.input field={@form[:snmp_enabled]} type="checkbox" label="Enable SNMP Monitoring" />
|
|
|
|
<div
|
|
:if={@form[:snmp_enabled].value}
|
|
class="mt-4 space-y-4 pl-6 border-l-2 border-blue-200"
|
|
>
|
|
<.input
|
|
field={@form[:snmp_version]}
|
|
type="select"
|
|
label="SNMP Version"
|
|
required
|
|
value={@form[:snmp_version].value || "2c"}
|
|
options={[{"SNMPv1", "1"}, {"SNMPv2c", "2c"}]}
|
|
/>
|
|
|
|
<.input
|
|
field={@form[:snmp_community]}
|
|
type="text"
|
|
label="Community String"
|
|
required
|
|
autocomplete="off"
|
|
/>
|
|
|
|
<.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>
|
|
|
|
<.button type="button" phx-click="test_snmp" phx-disable-with="Testing...">
|
|
Test SNMP Connection
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-6">
|
|
<.button phx-disable-with="Saving..." variant="primary">Save Equipment</.button>
|
|
<.button navigate={~p"/orgs/#{@organization.slug}/equipment"}>Cancel</.button>
|
|
</div>
|
|
</.form>
|
|
|
|
<%= if @live_action == :edit do %>
|
|
<div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
|
|
<h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">Danger Zone</h3>
|
|
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
|
|
Once you delete this equipment, 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 equipment? All monitoring history and alerts will be permanently deleted."
|
|
variant="danger"
|
|
>
|
|
<.icon name="hero-trash" class="h-4 w-4" /> Delete Equipment
|
|
</.button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</Layouts.authenticated>
|