1725 lines
81 KiB
Text
1725 lines
81 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
>
|
|
<div class="pb-5">
|
|
<div class="mb-4">
|
|
<.link
|
|
navigate={~p"/dashboard"}
|
|
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" /> Back to Dashboard
|
|
</.link>
|
|
</div>
|
|
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
|
Organization Settings
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Manage organization defaults, integrations, and configuration
|
|
</p>
|
|
</div>
|
|
|
|
<header class="border-b border-gray-200 dark:border-white/5">
|
|
<nav class="flex overflow-x-auto py-4">
|
|
<ul
|
|
role="list"
|
|
class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-gray-500 sm:px-6 lg:px-8 dark:text-gray-400"
|
|
>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=general"}
|
|
class={
|
|
if @active_tab == "general", do: "text-indigo-600 dark:text-indigo-400", else: ""
|
|
}
|
|
>
|
|
General
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=snmp"}
|
|
class={if @active_tab == "snmp", do: "text-indigo-600 dark:text-indigo-400", else: ""}
|
|
>
|
|
SNMP
|
|
</.link>
|
|
</li>
|
|
<%= if @current_scope.user.is_superuser do %>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=mikrotik"}
|
|
class={
|
|
if @active_tab == "mikrotik", do: "text-indigo-600 dark:text-indigo-400", else: ""
|
|
}
|
|
>
|
|
MikroTik
|
|
</.link>
|
|
</li>
|
|
<% end %>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=agents"}
|
|
class={
|
|
if @active_tab == "agents", do: "text-indigo-600 dark:text-indigo-400", else: ""
|
|
}
|
|
>
|
|
Agents
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=members"}
|
|
class={
|
|
if @active_tab == "members", do: "text-indigo-600 dark:text-indigo-400", else: ""
|
|
}
|
|
>
|
|
Members
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link
|
|
patch={~p"/orgs/#{@organization.slug}/settings?tab=integrations"}
|
|
class={
|
|
if @active_tab == "integrations",
|
|
do: "text-indigo-600 dark:text-indigo-400",
|
|
else: ""
|
|
}
|
|
>
|
|
Integrations
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<%= if @active_tab not in ["integrations", "members"] do %>
|
|
<.form
|
|
for={@form}
|
|
id="organization-form"
|
|
phx-change="validate"
|
|
phx-submit="save"
|
|
data-1p-ignore
|
|
data-form-type="other"
|
|
>
|
|
<div class="divide-y divide-gray-200 dark:divide-white/10">
|
|
<%= if @active_tab == "general" do %>
|
|
<!-- Organization Name Section -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Organization Name
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Update the name of your organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.input
|
|
field={@form[:name]}
|
|
type="text"
|
|
label="Organization Name"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if @user_orgs_count > 1 do %>
|
|
<!-- Default Organization Section -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Default Organization
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Set this organization as your default. When you log in, you'll be directed to your default organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<%= if @membership.is_default do %>
|
|
<div class="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-4">
|
|
<div class="flex items-center">
|
|
<.icon
|
|
name="hero-check-circle"
|
|
class="h-5 w-5 text-green-600 dark:text-green-400"
|
|
/>
|
|
<p class="ml-3 text-sm text-green-800 dark:text-green-200">
|
|
This is your default organization
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_default_org"
|
|
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400"
|
|
>
|
|
<.icon name="hero-star" class="h-4 w-4 inline" /> Set as Default Organization
|
|
</button>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Click to make this your default organization
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Use Sites Section -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Site Organization
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Enable site organization to group devices into physical locations (offices, datacenters, etc.).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.input
|
|
field={@form[:use_sites]}
|
|
type="checkbox"
|
|
label="Use sites to organize devices"
|
|
/>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
When enabled, you can organize devices into sites. When disabled, all devices belong directly to the organization.
|
|
</p>
|
|
|
|
<%= if @organization.use_sites && @form[:use_sites].value == false do %>
|
|
<div class="mt-4 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
|
|
<div class="flex">
|
|
<div class="shrink-0">
|
|
<.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
|
|
Warning: Disabling Sites
|
|
</h3>
|
|
<div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
|
|
<p>
|
|
All devices will be removed from their current sites and assigned directly to the organization.
|
|
Site assignments will be lost, but devices will remain in the organization.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @active_tab == "snmp" do %>
|
|
<!-- SNMP Configuration Section -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
SNMP Configuration
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Set default SNMP settings for all devices in this organization. These can be overridden at the site or device level.
|
|
</p>
|
|
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
|
|
<.icon name="hero-information-circle" class="h-4 w-4 inline" />
|
|
Hierarchy: Device > Site > Organization
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.input
|
|
field={@form[:snmp_version]}
|
|
type="select"
|
|
label="SNMP Version"
|
|
prompt="Select SNMP version"
|
|
options={[{"v1", "1"}, {"v2c", "2c"}, {"v3", "3"}]}
|
|
/>
|
|
|
|
<!-- v1/v2c Community String -->
|
|
<%= if @form[:snmp_version].value in ["1", "2c"] do %>
|
|
<.input
|
|
field={@form[:snmp_community]}
|
|
type="text"
|
|
label="SNMP Community String"
|
|
placeholder="e.g., public"
|
|
/>
|
|
<% end %>
|
|
|
|
<!-- v3 Credentials -->
|
|
<%= if @form[:snmp_version].value == "3" do %>
|
|
<.input
|
|
field={@form[:snmpv3_security_level]}
|
|
type="select"
|
|
label="Security Level"
|
|
prompt="Select security level"
|
|
options={[
|
|
{"No Auth, No Priv", "noAuthNoPriv"},
|
|
{"Auth, No Priv", "authNoPriv"},
|
|
{"Auth, Priv", "authPriv"}
|
|
]}
|
|
/>
|
|
|
|
<.input
|
|
field={@form[:snmpv3_username]}
|
|
type="text"
|
|
label="Username"
|
|
placeholder="e.g., snmpuser"
|
|
/>
|
|
|
|
<!-- Auth fields (shown for authNoPriv and authPriv) -->
|
|
<%= if @form[:snmpv3_security_level].value in ["authNoPriv", "authPriv"] do %>
|
|
<.input
|
|
field={@form[:snmpv3_auth_protocol]}
|
|
type="select"
|
|
label="Auth Protocol"
|
|
prompt="Select protocol"
|
|
options={[
|
|
{"SHA-256 (recommended)", "SHA-256"},
|
|
{"SHA-512", "SHA-512"},
|
|
{"SHA-384", "SHA-384"},
|
|
{"SHA-224", "SHA-224"},
|
|
{"SHA (SHA-1)", "SHA"},
|
|
{"MD5", "MD5"}
|
|
]}
|
|
/>
|
|
|
|
<.input
|
|
field={@form[:snmpv3_auth_password]}
|
|
type="password"
|
|
label="Auth Password"
|
|
placeholder="Min 8 characters"
|
|
autocomplete="off"
|
|
/>
|
|
<% end %>
|
|
|
|
<!-- Priv fields (shown only for authPriv) -->
|
|
<%= if @form[:snmpv3_security_level].value == "authPriv" do %>
|
|
<.input
|
|
field={@form[:snmpv3_priv_protocol]}
|
|
type="select"
|
|
label="Privacy Protocol"
|
|
prompt="Select protocol"
|
|
options={[
|
|
{"AES-128 (recommended)", "AES"},
|
|
{"AES-256", "AES-256"},
|
|
{"AES-192", "AES-192"},
|
|
{"AES-256-C", "AES-256-C"},
|
|
{"DES (legacy)", "DES"}
|
|
]}
|
|
/>
|
|
|
|
<.input
|
|
field={@form[:snmpv3_priv_password]}
|
|
type="password"
|
|
label="Privacy Password"
|
|
placeholder="Min 8 characters"
|
|
autocomplete="off"
|
|
/>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<.input
|
|
field={@form[:snmp_port]}
|
|
type="number"
|
|
label="SNMP Port"
|
|
placeholder="161"
|
|
/>
|
|
|
|
<%= if @organization.snmp_community do %>
|
|
<div class="mt-6 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
|
|
<h3 class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
|
|
Force Apply to All Devices
|
|
</h3>
|
|
<p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
|
|
This will override SNMP settings for ALL devices across all sites in this organization.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
phx-click="apply_snmp_to_all"
|
|
data-confirm="This will replace SNMP settings for ALL devices in this organization. Are you sure?"
|
|
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400"
|
|
>
|
|
<.icon name="hero-arrow-path" class="h-4 w-4 inline" />
|
|
Apply SNMP Config to All Devices
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @active_tab == "mikrotik" && @current_scope.user.is_superuser do %>
|
|
<!-- MikroTik API Configuration Section -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
MikroTik API Configuration
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Set default MikroTik RouterOS API credentials for all devices in this organization. Only applies to devices detected as MikroTik.
|
|
</p>
|
|
<div class="mt-3 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
|
|
<p class="text-xs text-blue-700 dark:text-blue-300">
|
|
<.icon name="hero-beaker" class="h-4 w-4 inline" />
|
|
<strong>Experimental Feature:</strong>
|
|
MikroTik API integration is under active development.
|
|
</p>
|
|
</div>
|
|
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
|
|
<.icon name="hero-information-circle" class="h-4 w-4 inline" />
|
|
Hierarchy: Device > Site > Organization
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.input
|
|
field={@form[:mikrotik_enabled]}
|
|
type="checkbox"
|
|
label="Enable MikroTik API"
|
|
/>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"}"}>
|
|
<.input
|
|
field={@form[:mikrotik_username]}
|
|
type="text"
|
|
label="Username"
|
|
placeholder="e.g., admin"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"}"}>
|
|
<.input
|
|
field={@form[:mikrotik_password]}
|
|
type="password"
|
|
label="Password"
|
|
placeholder="RouterOS API password"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"}"}>
|
|
<.input
|
|
field={@form[:mikrotik_port]}
|
|
type="number"
|
|
label="API Port"
|
|
placeholder="8729"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"}"}>
|
|
<.input
|
|
field={@form[:mikrotik_use_ssl]}
|
|
type="checkbox"
|
|
label="Use SSL (API-SSL)"
|
|
/>
|
|
</div>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"} #{if @form[:mikrotik_use_ssl].value != false, do: "hidden"}"}>
|
|
<div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
|
|
<p class="text-sm text-red-700 dark:text-red-300">
|
|
<strong>Critical Security Warning:</strong>
|
|
Plain API (port 8728) sends credentials unencrypted over the network. This setting is
|
|
<strong>blocked for devices using cloud pollers</strong>
|
|
and should only be used with local agents on trusted networks.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"} #{if @form[:mikrotik_use_ssl].value == false, do: "hidden"}"}>
|
|
<div class="rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
|
|
<p class="text-sm text-yellow-700 dark:text-yellow-300">
|
|
<strong>Security Warning:</strong>
|
|
Plain API (port 8728) sends credentials unencrypted. Use SSL (port 8729) whenever possible.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @active_tab == "agents" do %>
|
|
<!-- Default Agent Section -->
|
|
<%= if @available_agents != [] do %>
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Default Agent
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Select a default agent for SNMP polling. This will be used for all devices in this organization unless overridden at the site or device level.
|
|
</p>
|
|
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
|
|
<.icon name="hero-information-circle" class="h-4 w-4 inline" />
|
|
Hierarchy: Device > Site > Organization
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.input
|
|
field={@form[:default_agent_token_id]}
|
|
type="select"
|
|
label="Default Remote Agent"
|
|
prompt="No default agent - cloud polling"
|
|
options={Enum.map(@available_agents, &{&1.name, &1.id})}
|
|
/>
|
|
|
|
<div class="rounded-md bg-gray-50 dark:bg-gray-800/50 p-4">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Current Device Assignment:
|
|
</p>
|
|
<div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-server" class="h-4 w-4" />
|
|
<span>
|
|
<strong>{@assignment_breakdown.direct}</strong> device-level override
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-building-office" class="h-4 w-4" />
|
|
<span>
|
|
<strong>{@assignment_breakdown.site}</strong> inherited from site
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-building-office-2" class="h-4 w-4" />
|
|
<span>
|
|
<strong>{@assignment_breakdown.organization}</strong>
|
|
inheriting organization default
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-cloud" class="h-4 w-4" />
|
|
<span>
|
|
<strong>{@assignment_breakdown.cloud}</strong> cloud polling (no agent)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if @organization.default_agent_token_id do %>
|
|
<div class="mt-6 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
|
|
<h3 class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
|
|
Force Apply to All Devices
|
|
</h3>
|
|
<p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
|
|
This will assign the default agent to ALL devices across all sites in this organization.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
phx-click="apply_agent_to_all"
|
|
data-confirm="This will replace agent assignments for ALL devices in this organization. Are you sure?"
|
|
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400"
|
|
>
|
|
<.icon name="hero-arrow-path" class="h-4 w-4 inline" />
|
|
Apply Default Agent to All Devices
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Default Agent
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
No agents configured yet.
|
|
<.link
|
|
navigate={~p"/agents"}
|
|
class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
|
|
>
|
|
Create an agent
|
|
</.link>
|
|
to enable remote polling.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<!-- Empty space for layout consistency -->
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Save Button at Bottom (not shown on integrations tab) -->
|
|
<div class="flex items-center justify-end gap-x-6 border-t border-gray-200 px-4 py-4 sm:px-6 lg:px-8 dark:border-white/10">
|
|
<.link
|
|
navigate={~p"/dashboard"}
|
|
class="text-sm font-semibold text-gray-900 dark:text-white"
|
|
>
|
|
Cancel
|
|
</.link>
|
|
<button
|
|
type="submit"
|
|
phx-disable-with="Saving..."
|
|
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</.form>
|
|
<% end %>
|
|
|
|
<%= if @active_tab == "members" do %>
|
|
<div class="divide-y divide-gray-200 dark:divide-white/10">
|
|
<!-- Invite form (owner/admin only) -->
|
|
<%= if @membership.role in [:owner, :admin] do %>
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Invite a Team Member
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Send an invitation email to add someone to this organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<.form for={@invite_form} id="invite-form" phx-submit="send_invitation">
|
|
<div class="grid gap-4 sm:grid-cols-[1fr_10rem_auto] sm:items-end">
|
|
<.input
|
|
field={@invite_form[:email]}
|
|
type="email"
|
|
label="Email address"
|
|
placeholder="colleague@example.com"
|
|
required
|
|
/>
|
|
<.input
|
|
field={@invite_form[:role]}
|
|
type="select"
|
|
label="Role"
|
|
options={[{"Admin", "admin"}, {"Member", "member"}, {"Viewer", "viewer"}]}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
phx-disable-with="Sending..."
|
|
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 h-[42px]"
|
|
>
|
|
Send Invite
|
|
</button>
|
|
</div>
|
|
</.form>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Pending invitations -->
|
|
<%= if @pending_invitations != [] do %>
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Pending Invitations
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
Invitations that haven't been accepted yet.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
|
|
<thead class="bg-gray-50 dark:bg-white/5">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Email
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Role
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Sent
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Expires
|
|
</th>
|
|
<%= if @membership.role in [:owner, :admin] do %>
|
|
<th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Actions
|
|
</th>
|
|
<% end %>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-transparent">
|
|
<tr :for={invitation <- @pending_invitations}>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
|
|
{invitation.email}
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm">
|
|
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
|
|
{invitation.role}
|
|
</span>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
|
<.timestamp
|
|
datetime={invitation.inserted_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
|
<.timestamp
|
|
datetime={invitation.expires_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</td>
|
|
<%= if @membership.role in [:owner, :admin] do %>
|
|
<td class="whitespace-nowrap px-4 py-3 text-right text-sm">
|
|
<button
|
|
type="button"
|
|
phx-click="cancel_invitation"
|
|
phx-value-id={invitation.id}
|
|
data-confirm="Cancel this invitation?"
|
|
class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</td>
|
|
<% end %>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Current members -->
|
|
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
|
|
<div>
|
|
<h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
|
|
Members
|
|
</h2>
|
|
<p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
|
|
People who have access to this organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
|
|
<thead class="bg-gray-50 dark:bg-white/5">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
User
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Role
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Joined
|
|
</th>
|
|
<%= if @membership.role in [:owner, :admin] do %>
|
|
<th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Actions
|
|
</th>
|
|
<% end %>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-transparent">
|
|
<tr :for={member <- @members}>
|
|
<td class="whitespace-nowrap px-4 py-3">
|
|
<div>
|
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
|
{member.user.email}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm">
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
case member.role do
|
|
:owner ->
|
|
"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
|
|
|
|
:admin ->
|
|
"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
|
|
|
|
:member ->
|
|
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
|
|
|
|
:viewer ->
|
|
"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400"
|
|
end
|
|
]}>
|
|
{member.role}
|
|
</span>
|
|
</td>
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
|
<.timestamp
|
|
datetime={member.inserted_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</td>
|
|
<%= if @membership.role in [:owner, :admin] do %>
|
|
<td class="whitespace-nowrap px-4 py-3 text-right text-sm">
|
|
<%= if member.role != :owner do %>
|
|
<div class="flex items-center justify-end gap-3">
|
|
<form phx-change="change_role" phx-value-user-id={member.user_id}>
|
|
<select
|
|
name="role"
|
|
class="rounded-md border-gray-300 py-1 pl-2 pr-8 text-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
>
|
|
<option value="admin" selected={member.role == :admin}>
|
|
Admin
|
|
</option>
|
|
<option value="member" selected={member.role == :member}>
|
|
Member
|
|
</option>
|
|
<option value="viewer" selected={member.role == :viewer}>
|
|
Viewer
|
|
</option>
|
|
</select>
|
|
</form>
|
|
<button
|
|
type="button"
|
|
phx-click="remove_member"
|
|
phx-value-user-id={member.user_id}
|
|
data-confirm="Remove this member from the organization?"
|
|
class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
</td>
|
|
<% end %>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @active_tab == "integrations" do %>
|
|
<div class="mt-8 space-y-5">
|
|
<div
|
|
:for={provider <- @providers}
|
|
class={[
|
|
"relative overflow-hidden rounded-xl border bg-white shadow-sm transition-all dark:bg-white/[0.03]",
|
|
cond do
|
|
@integrations[provider.id] && @integrations[provider.id].last_sync_status == "failed" ->
|
|
"border-red-200 dark:border-red-500/30"
|
|
|
|
@integrations[provider.id] && @integrations[provider.id].enabled ->
|
|
"border-green-200 dark:border-green-500/20"
|
|
|
|
true ->
|
|
"border-gray-200 dark:border-white/10"
|
|
end
|
|
]}
|
|
>
|
|
<%!-- Left status accent bar --%>
|
|
<div class={[
|
|
"absolute inset-y-0 left-0 w-1",
|
|
cond do
|
|
@integrations[provider.id] && @integrations[provider.id].last_sync_status == "failed" ->
|
|
"bg-red-500"
|
|
|
|
@integrations[provider.id] && @integrations[provider.id].enabled ->
|
|
"bg-green-500"
|
|
|
|
@integrations[provider.id] ->
|
|
"bg-gray-300 dark:bg-gray-600"
|
|
|
|
true ->
|
|
"bg-gray-200 dark:bg-gray-700"
|
|
end
|
|
]} />
|
|
|
|
<div class="pl-5 pr-6 py-5">
|
|
<%!-- === Header Row === --%>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class={[
|
|
"flex h-11 w-11 shrink-0 items-center justify-center rounded-full",
|
|
case provider.id do
|
|
"preseem" -> "bg-blue-100 dark:bg-blue-900/40"
|
|
"gaiia" -> "bg-purple-100 dark:bg-purple-900/40"
|
|
"pagerduty" -> "bg-emerald-100 dark:bg-emerald-900/40"
|
|
"netbox" -> "bg-orange-100 dark:bg-orange-900/40"
|
|
_ -> "bg-indigo-100 dark:bg-indigo-900/40"
|
|
end
|
|
]}>
|
|
<.icon
|
|
name={provider.icon}
|
|
class={[
|
|
"h-5 w-5",
|
|
case provider.id do
|
|
"preseem" -> "text-blue-600 dark:text-blue-400"
|
|
"gaiia" -> "text-purple-600 dark:text-purple-400"
|
|
"pagerduty" -> "text-emerald-600 dark:text-emerald-400"
|
|
"netbox" -> "text-orange-600 dark:text-orange-400"
|
|
_ -> "text-indigo-600 dark:text-indigo-400"
|
|
end
|
|
]}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-base font-semibold text-gray-900 dark:text-white">
|
|
{provider.name}
|
|
</h3>
|
|
<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
|
|
{provider.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- === Actions (top right) === --%>
|
|
<div class="flex items-center gap-4 shrink-0 ml-4">
|
|
<%= if integration = @integrations[provider.id] do %>
|
|
<div class="flex items-center gap-2">
|
|
<span class={[
|
|
"text-xs font-medium",
|
|
if(integration.enabled,
|
|
do: "text-green-700 dark:text-green-400",
|
|
else: "text-gray-500 dark:text-gray-400"
|
|
)
|
|
]}>
|
|
{if integration.enabled, do: "Enabled", else: "Disabled"}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_enabled"
|
|
phx-value-provider={provider.id}
|
|
class={[
|
|
"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
|
|
if(integration.enabled,
|
|
do: "bg-indigo-600",
|
|
else: "bg-gray-200 dark:bg-gray-700"
|
|
)
|
|
]}
|
|
>
|
|
<span class={[
|
|
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
|
|
if(integration.enabled, do: "translate-x-5", else: "translate-x-0")
|
|
]}>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<button
|
|
type="button"
|
|
id={"configure-#{provider.id}"}
|
|
phx-click="configure"
|
|
phx-value-provider={provider.id}
|
|
class={[
|
|
"rounded-lg px-4 py-2 text-sm font-semibold shadow-xs transition-colors",
|
|
if(@configuring == provider.id,
|
|
do:
|
|
"bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10",
|
|
else:
|
|
"bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
|
|
)
|
|
]}
|
|
>
|
|
{if @configuring == provider.id, do: "Close", else: "Configure"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- === Status Row (when configured) === --%>
|
|
<%= if integration = @integrations[provider.id] do %>
|
|
<%!-- Failed sync banner --%>
|
|
<%= if integration.last_sync_status == "failed" do %>
|
|
<div class="mt-4 flex items-start gap-3 rounded-lg bg-red-50 px-4 py-3 dark:bg-red-900/20">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="h-5 w-5 shrink-0 text-red-500 dark:text-red-400 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="text-sm font-medium text-red-800 dark:text-red-300">
|
|
Last sync failed
|
|
</p>
|
|
<%= if integration.last_sync_message && integration.last_sync_message != "" do %>
|
|
<p class="mt-0.5 text-sm text-red-700 dark:text-red-400">
|
|
{integration.last_sync_message}
|
|
</p>
|
|
<% end %>
|
|
<%= if integration.last_synced_at do %>
|
|
<p class="mt-1 text-xs text-red-600/70 dark:text-red-400/60">
|
|
<.timestamp
|
|
datetime={integration.last_synced_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2">
|
|
<%!-- Status dot + label --%>
|
|
<div class="flex items-center gap-2">
|
|
<span class={[
|
|
"inline-block h-2 w-2 rounded-full",
|
|
if(integration.enabled,
|
|
do: "bg-green-500",
|
|
else: "bg-gray-400 dark:bg-gray-500"
|
|
)
|
|
]} />
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
|
{if integration.enabled, do: "Connected", else: "Paused"}
|
|
</span>
|
|
</div>
|
|
|
|
<%!-- Last synced --%>
|
|
<%= if integration.last_synced_at do %>
|
|
<div class="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
|
|
<.icon name="hero-clock" class="h-3.5 w-3.5" />
|
|
<span>
|
|
Synced
|
|
<.timestamp
|
|
datetime={integration.last_synced_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<% else %>
|
|
<span class="text-sm italic text-gray-400 dark:text-gray-500">
|
|
Never synced
|
|
</span>
|
|
<% end %>
|
|
|
|
<%!-- Sync status badge (success/partial) --%>
|
|
<%= if integration.last_sync_status && integration.last_sync_status not in ["never", "failed"] do %>
|
|
<span class={[
|
|
"inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
case integration.last_sync_status do
|
|
"success" ->
|
|
"bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20"
|
|
|
|
"partial" ->
|
|
"bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-400 dark:ring-yellow-500/20"
|
|
|
|
_ ->
|
|
"bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-gray-500/10 dark:text-gray-400 dark:ring-gray-500/20"
|
|
end
|
|
]}>
|
|
<%= if integration.last_sync_status == "success" do %>
|
|
<.icon name="hero-check-circle-mini" class="h-3.5 w-3.5" />
|
|
<% end %>
|
|
{String.capitalize(integration.last_sync_status)}
|
|
</span>
|
|
<% end %>
|
|
|
|
<%!-- Sync message (success/partial) --%>
|
|
<%= if integration.last_sync_message && integration.last_sync_message != "" && integration.last_sync_status != "failed" do %>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">
|
|
{integration.last_sync_message}
|
|
</span>
|
|
<% end %>
|
|
|
|
<%!-- Next sync --%>
|
|
<%= if integration.last_synced_at && integration.enabled do %>
|
|
<span class="text-xs text-gray-400 dark:text-gray-500">
|
|
Next in ~{next_sync_minutes(
|
|
integration.last_synced_at,
|
|
integration.sync_interval_minutes
|
|
)}m
|
|
</span>
|
|
<% end %>
|
|
|
|
<%!-- Sync schedule note --%>
|
|
<%= if integration.enabled && provider.id == "pagerduty" do %>
|
|
<span class="text-xs text-gray-400 dark:text-gray-500">
|
|
· Event-driven (real-time)
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%!-- === Provider Links Row === --%>
|
|
<%= if provider.id == "preseem" || provider.id == "gaiia" do %>
|
|
<div class="mt-3 flex flex-wrap gap-3">
|
|
<%= if provider.id == "preseem" do %>
|
|
<.link
|
|
navigate={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"
|
|
}
|
|
class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
|
|
>
|
|
<.icon name="hero-cpu-chip" class="h-3.5 w-3.5" /> Manage Devices
|
|
</.link>
|
|
<.link
|
|
navigate={~p"/insights?source=preseem"}
|
|
class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
|
|
>
|
|
<.icon name="hero-chart-bar" class="h-3.5 w-3.5" /> Network Insights
|
|
</.link>
|
|
<% end %>
|
|
<%= if provider.id == "gaiia" do %>
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
|
|
class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
|
|
>
|
|
<.icon name="hero-arrows-right-left" class="h-3.5 w-3.5" /> Entity Mapping
|
|
</.link>
|
|
<.link
|
|
navigate={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
|
|
}
|
|
class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
|
|
>
|
|
<.icon name="hero-scale" class="h-3.5 w-3.5" /> Reconciliation
|
|
</.link>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%!-- === Configure Panel === --%>
|
|
<%= if @configuring == provider.id do %>
|
|
<div class="border-t border-gray-200 bg-gray-50/50 px-6 py-6 dark:border-white/10 dark:bg-white/[0.02]">
|
|
<%= if provider.id == "netbox" do %>
|
|
<.form
|
|
for={@integration_form}
|
|
id="netbox-form"
|
|
phx-change="validate_integration"
|
|
phx-submit="save_integration"
|
|
>
|
|
<div class="space-y-6">
|
|
<%!-- Connection Section --%>
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<.icon name="hero-link" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Connection
|
|
</h4>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
|
|
Your NetBox instance URL and API token. The token needs read permission at minimum.
|
|
Write permission is required if you want to push data to NetBox.
|
|
</p>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-white mb-1">
|
|
NetBox URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
name="integration[url]"
|
|
value={get_credential(@integrations["netbox"], "url")}
|
|
placeholder="https://netbox.example.com"
|
|
autocomplete="off"
|
|
class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-900 dark:text-white mb-1">
|
|
API Token
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="integration[api_token]"
|
|
value={get_credential(@integrations["netbox"], "api_token")}
|
|
placeholder="Enter your NetBox API token"
|
|
autocomplete="off"
|
|
class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 dark:border-white/10 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Sync Direction Section --%>
|
|
<div class="border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<.icon name="hero-arrows-right-left" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Sync Direction
|
|
</h4>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
|
|
Choose how data flows between TowerOps and NetBox. You can change this later.
|
|
</p>
|
|
<input
|
|
type="hidden"
|
|
name="integration[sync_direction]"
|
|
value={@netbox_config["sync_direction"] || "pull"}
|
|
/>
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
|
<div
|
|
phx-click="set_netbox_sync_direction"
|
|
phx-value-direction="pull"
|
|
class={[
|
|
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
|
|
if(
|
|
@netbox_config["sync_direction"] in ["pull", "", nil],
|
|
do:
|
|
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
|
|
else:
|
|
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
|
|
)
|
|
]}
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
|
|
<.icon name="hero-arrow-down-tray" class="h-4 w-4 text-indigo-600" />
|
|
NetBox → TowerOps
|
|
</span>
|
|
<span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
NetBox is the source of truth. Import devices, sites, and IPs from NetBox into TowerOps.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
phx-click="set_netbox_sync_direction"
|
|
phx-value-direction="push"
|
|
class={[
|
|
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
|
|
if(
|
|
@netbox_config["sync_direction"] == "push",
|
|
do:
|
|
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
|
|
else:
|
|
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
|
|
)
|
|
]}
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
|
|
<.icon name="hero-arrow-up-tray" class="h-4 w-4 text-orange-600" />
|
|
TowerOps → NetBox
|
|
</span>
|
|
<span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
TowerOps is the source of truth. Push discovered devices and monitoring data to NetBox.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
phx-click="set_netbox_sync_direction"
|
|
phx-value-direction="both"
|
|
class={[
|
|
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
|
|
if(
|
|
@netbox_config["sync_direction"] == "both",
|
|
do:
|
|
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
|
|
else:
|
|
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
|
|
)
|
|
]}
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
|
|
<.icon
|
|
name="hero-arrows-right-left"
|
|
class="h-4 w-4 text-green-600"
|
|
/> Bidirectional
|
|
</span>
|
|
<span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
Merge data from both systems. Conflicts resolved by most-recently-updated. Requires write token.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- What to Sync Section --%>
|
|
<div class="border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<.icon name="hero-circle-stack" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
What to Sync
|
|
</h4>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
|
|
Choose which NetBox objects participate in sync. Devices and sites are recommended at minimum.
|
|
</p>
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
|
|
<input
|
|
type="hidden"
|
|
name="integration[sync_devices]"
|
|
value="false"
|
|
/>
|
|
<input
|
|
type="checkbox"
|
|
name="integration[sync_devices]"
|
|
value="true"
|
|
checked={@netbox_config["sync_devices"]}
|
|
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
|
|
/>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Devices
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Name, IP, role, platform, status, serial number
|
|
</p>
|
|
</div>
|
|
</label>
|
|
<label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
|
|
<input
|
|
type="hidden"
|
|
name="integration[sync_sites]"
|
|
value="false"
|
|
/>
|
|
<input
|
|
type="checkbox"
|
|
name="integration[sync_sites]"
|
|
value="true"
|
|
checked={@netbox_config["sync_sites"]}
|
|
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
|
|
/>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Sites
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Site names, locations, addresses, and coordinates
|
|
</p>
|
|
</div>
|
|
</label>
|
|
<label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
|
|
<input
|
|
type="hidden"
|
|
name="integration[sync_ip_addresses]"
|
|
value="false"
|
|
/>
|
|
<input
|
|
type="checkbox"
|
|
name="integration[sync_ip_addresses]"
|
|
value="true"
|
|
checked={@netbox_config["sync_ip_addresses"]}
|
|
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
|
|
/>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
|
IP Addresses
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
IPAM data — assigned IPs, prefixes, VRFs
|
|
</p>
|
|
</div>
|
|
</label>
|
|
<label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
|
|
<input
|
|
type="hidden"
|
|
name="integration[sync_interfaces]"
|
|
value="false"
|
|
/>
|
|
<input
|
|
type="checkbox"
|
|
name="integration[sync_interfaces]"
|
|
value="true"
|
|
checked={@netbox_config["sync_interfaces"]}
|
|
class="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
|
|
/>
|
|
<div>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
|
Interfaces
|
|
</span>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
Physical and virtual interfaces, LAGs, connections
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Filtering Section --%>
|
|
<div class="border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<.icon name="hero-funnel" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Filters
|
|
</h4>
|
|
<span class="text-xs font-normal text-gray-400 dark:text-gray-500">
|
|
(optional)
|
|
</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
|
|
Narrow the sync scope. Leave blank to sync everything. Comma-separated for multiple values.
|
|
</p>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Device Role
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="integration[device_role_filter]"
|
|
value={@netbox_config["device_role_filter"]}
|
|
placeholder="e.g. access-point, router"
|
|
class="block w-full rounded-md border-gray-300 py-1.5 text-sm shadow-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Site
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="integration[site_filter]"
|
|
value={@netbox_config["site_filter"]}
|
|
placeholder="e.g. tower-north, main-pop"
|
|
class="block w-full rounded-md border-gray-300 py-1.5 text-sm shadow-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Tag
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="integration[tag_filter]"
|
|
value={@netbox_config["tag_filter"]}
|
|
placeholder="e.g. monitored, production"
|
|
class="block w-full rounded-md border-gray-300 py-1.5 text-sm shadow-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Sync Interval --%>
|
|
<div class="border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<div class="max-w-xs">
|
|
<.input
|
|
field={@integration_form[:sync_interval_minutes]}
|
|
type="number"
|
|
label="Sync interval (minutes)"
|
|
min="5"
|
|
value={
|
|
if(@integrations["netbox"],
|
|
do: @integrations["netbox"].sync_interval_minutes,
|
|
else: 30
|
|
)
|
|
}
|
|
/>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
How often TowerOps checks NetBox for changes. 30 minutes is recommended for most setups.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Test & Save --%>
|
|
<%= if @test_result do %>
|
|
<div class={[
|
|
"flex items-start gap-3 rounded-lg p-4",
|
|
case @test_result do
|
|
{:ok, _} -> "bg-green-50 dark:bg-green-900/20"
|
|
{:error, _} -> "bg-red-50 dark:bg-red-900/20"
|
|
end
|
|
]}>
|
|
<%= case @test_result do %>
|
|
<% {:ok, msg} -> %>
|
|
<.icon
|
|
name="hero-check-circle"
|
|
class="h-5 w-5 shrink-0 text-green-500 dark:text-green-400"
|
|
/>
|
|
<p class="text-sm font-medium text-green-800 dark:text-green-300">
|
|
{msg}
|
|
</p>
|
|
<% {:error, msg} -> %>
|
|
<.icon
|
|
name="hero-x-circle"
|
|
class="h-5 w-5 shrink-0 text-red-500 dark:text-red-400"
|
|
/>
|
|
<p class="text-sm font-medium text-red-800 dark:text-red-300">{msg}</p>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="flex items-center justify-end gap-x-3 border-t border-gray-200 pt-5 dark:border-white/10">
|
|
<button
|
|
type="button"
|
|
phx-click="test_connection"
|
|
class="rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
|
|
>
|
|
<.icon name="hero-signal" class="h-4 w-4 inline -mt-0.5" /> Test Connection
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
phx-disable-with="Saving..."
|
|
class="rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-xs transition-colors hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
|
|
>
|
|
Save Integration
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</.form>
|
|
<% else %>
|
|
<.form
|
|
for={@integration_form}
|
|
id={"#{provider.id}-form"}
|
|
phx-change="validate_integration"
|
|
phx-submit="save_integration"
|
|
>
|
|
<div class="space-y-5">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<.icon name="hero-key" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Connection Settings
|
|
</h4>
|
|
</div>
|
|
|
|
<.input
|
|
field={@integration_form[:api_key]}
|
|
type="password"
|
|
label={
|
|
if(provider.id == "pagerduty",
|
|
do: "Integration Key (Routing Key)",
|
|
else: "API Key"
|
|
)
|
|
}
|
|
placeholder={
|
|
if(provider.id == "pagerduty",
|
|
do: "Enter your PagerDuty integration key",
|
|
else: "Enter your #{provider.name} API key"
|
|
)
|
|
}
|
|
autocomplete="off"
|
|
value={get_credential(@integrations[provider.id], "api_key")}
|
|
/>
|
|
</div>
|
|
|
|
<%= if provider.id == "pagerduty" do %>
|
|
<div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50 p-4">
|
|
<h4 class="flex items-center gap-1.5 text-xs font-semibold text-blue-900 dark:text-blue-300 mb-2">
|
|
<.icon name="hero-information-circle" class="h-4 w-4" />
|
|
Where to find your Integration Key
|
|
</h4>
|
|
<ol class="list-decimal list-inside space-y-1 text-xs text-blue-800 dark:text-blue-300 ml-5">
|
|
<li>
|
|
In PagerDuty, go to <strong>Services</strong>
|
|
→ select your service (or create one)
|
|
</li>
|
|
<li>Click the <strong>Integrations</strong> tab</li>
|
|
<li>
|
|
Click <strong>Add Integration</strong>
|
|
→ select <strong>Events API v2</strong>
|
|
</li>
|
|
<li>Copy the <strong>Integration Key</strong> and paste it above</li>
|
|
</ol>
|
|
<p class="mt-2.5 text-xs text-blue-700 dark:text-blue-400 ml-5">
|
|
When connected, TowerOps will automatically trigger, acknowledge, and resolve PagerDuty incidents in sync with your alerts.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-200 pt-5 mt-5 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<.icon name="hero-arrow-path" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Two-Way Sync (Webhooks)
|
|
</h4>
|
|
</div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
|
When someone resolves or acknowledges an incident directly in PagerDuty,
|
|
TowerOps will automatically update the corresponding alert.
|
|
</p>
|
|
<div class="mb-3">
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Webhook URL
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<code class="text-xs bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-2.5 py-1.5 rounded-md break-all">
|
|
{ToweropsWeb.Endpoint.url()}/api/v1/webhooks/pagerduty/{@current_scope.organization.id}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
<.input
|
|
name="integration[webhook_secret]"
|
|
type="password"
|
|
label="Webhook Signing Secret"
|
|
value={
|
|
if(@integrations[provider.id],
|
|
do:
|
|
get_in(@integrations[provider.id].credentials, ["webhook_secret"]) ||
|
|
"",
|
|
else: ""
|
|
)
|
|
}
|
|
placeholder="Optional — paste from PagerDuty webhook extension"
|
|
/>
|
|
<div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50 p-3 mt-3">
|
|
<ol class="list-decimal list-inside space-y-1 text-xs text-blue-800 dark:text-blue-300 ml-1">
|
|
<li>
|
|
In PagerDuty, go to <strong>Integrations</strong>
|
|
→ <strong>Generic Webhooks (v3)</strong>
|
|
</li>
|
|
<li>
|
|
Add a subscription with the Webhook URL above
|
|
</li>
|
|
<li>
|
|
Select events: <strong>incident.resolved</strong>
|
|
and <strong>incident.acknowledged</strong>
|
|
</li>
|
|
<li>
|
|
Copy the <strong>Signing Secret</strong> and paste it above
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if provider.id != "pagerduty" do %>
|
|
<div class="border-t border-gray-200 pt-5 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<.icon name="hero-clock" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Sync Settings
|
|
</h4>
|
|
</div>
|
|
<div class="max-w-xs">
|
|
<.input
|
|
field={@integration_form[:sync_interval_minutes]}
|
|
type="number"
|
|
label="Sync interval (minutes)"
|
|
min="5"
|
|
value={
|
|
if(@integrations[provider.id],
|
|
do: @integrations[provider.id].sync_interval_minutes,
|
|
else: if(provider.id == "gaiia", do: 15, else: 10)
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @test_result do %>
|
|
<div class={[
|
|
"flex items-start gap-3 rounded-lg p-4",
|
|
case @test_result do
|
|
{:ok, _} -> "bg-green-50 dark:bg-green-900/20"
|
|
{:error, _} -> "bg-red-50 dark:bg-red-900/20"
|
|
end
|
|
]}>
|
|
<p class={[
|
|
"text-sm font-medium",
|
|
case @test_result do
|
|
{:ok, _} -> "text-green-800 dark:text-green-300"
|
|
{:error, _} -> "text-red-800 dark:text-red-300"
|
|
end
|
|
]}>
|
|
{elem(@test_result, 1)}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="flex items-center justify-between border-t border-gray-200 pt-5 dark:border-white/10">
|
|
<button
|
|
type="button"
|
|
id="test-connection"
|
|
phx-click="test_connection"
|
|
class="rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
|
|
>
|
|
<.icon name="hero-signal" class="h-4 w-4 inline -mt-0.5" /> Test Connection
|
|
</button>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
phx-click="close_config"
|
|
class="rounded-lg px-4 py-2.5 text-sm font-semibold text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
phx-disable-with="Saving..."
|
|
class="rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-xs transition-colors hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
|
|
>
|
|
Save Integration
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</.form>
|
|
<% end %>
|
|
|
|
<%!-- Gaiia Webhook Section --%>
|
|
<%= if provider.id == "gaiia" && @integrations["gaiia"] do %>
|
|
<div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400" />
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Webhook Configuration
|
|
</h4>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-6">
|
|
Receive real-time updates from Gaiia when accounts, subscriptions, or inventory items change.
|
|
</p>
|
|
|
|
<div class="mt-4 space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
Webhook URL
|
|
</label>
|
|
<div class="mt-1 flex items-center gap-2">
|
|
<input
|
|
id="gaiia-webhook-url"
|
|
type="text"
|
|
readonly
|
|
value={webhook_url(@organization.id)}
|
|
class="block w-full rounded-md border-gray-300 bg-gray-50 py-1.5 text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
phx-hook="CopyToClipboard"
|
|
data-target="#gaiia-webhook-url"
|
|
id="copy-webhook-url"
|
|
class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
|
|
>
|
|
<.icon name="hero-clipboard" class="h-3.5 w-3.5" /> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
Webhook Secret
|
|
</label>
|
|
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
|
|
Paste the secret key generated by Gaiia when you create the webhook.
|
|
</p>
|
|
<div class="mt-1 flex items-center gap-2">
|
|
<input
|
|
id="gaiia-webhook-secret"
|
|
type="password"
|
|
name="webhook_secret"
|
|
value={get_credential(@integrations["gaiia"], "webhook_secret")}
|
|
placeholder="Paste the secret from Gaiia"
|
|
phx-blur="save_webhook_secret"
|
|
class="block w-full rounded-md border-gray-300 py-1.5 font-mono text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50">
|
|
<h5 class="flex items-center gap-1.5 text-xs font-semibold text-blue-800 dark:text-blue-300">
|
|
<.icon name="hero-information-circle" class="h-4 w-4" /> Setup Instructions
|
|
</h5>
|
|
<ol class="mt-2 list-inside list-decimal space-y-1 text-xs text-blue-700 dark:text-blue-400 ml-5">
|
|
<li>In your Gaiia admin panel, go to Settings → Webhooks</li>
|
|
<li>Click "Add Webhook"</li>
|
|
<li>Paste the Webhook URL above</li>
|
|
<li>Under Events, select "All Events"</li>
|
|
<li>Gaiia will generate a secret key — copy it</li>
|
|
<li>Paste the secret key into the Webhook Secret field above</li>
|
|
<li>Save the webhook</li>
|
|
</ol>
|
|
<p class="mt-2.5 text-xs text-blue-600 dark:text-blue-400 ml-5">
|
|
Once configured, Towerops will receive real-time updates when accounts, subscriptions, or inventory items change in Gaiia.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</Layouts.authenticated>
|