Graham McIntire
ab8039d59b
The sync schedule section referenced `integration` variable outside the if-block where it was assigned, causing compilation failure.
350 lines
15 KiB
Text
350 lines
15 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
>
|
|
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
|
|
<div class="mb-4">
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings"}
|
|
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 Settings
|
|
</.link>
|
|
</div>
|
|
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
|
|
Integrations
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
|
Connect third-party services to enhance your monitoring capabilities.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 space-y-6">
|
|
<div
|
|
:for={provider <- @providers}
|
|
class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start gap-4">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900/30">
|
|
<.icon name={provider.icon} class="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{provider.name}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
{provider.description}
|
|
</p>
|
|
|
|
<%= if integration = @integrations[provider.id] do %>
|
|
<div class="mt-3 flex items-center gap-4">
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
if(integration.enabled,
|
|
do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
|
|
else: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
|
|
)
|
|
]}>
|
|
{if integration.enabled, do: "Enabled", else: "Disabled"}
|
|
</span>
|
|
|
|
<%= if integration.last_synced_at do %>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
Last synced:
|
|
<.timestamp
|
|
datetime={integration.last_synced_at}
|
|
timezone={@timezone}
|
|
format="absolute"
|
|
/>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= if integration.last_sync_status && integration.last_sync_status != "never" do %>
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
|
|
case integration.last_sync_status do
|
|
"success" ->
|
|
"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
|
|
|
|
"partial" ->
|
|
"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
|
|
|
|
"failed" ->
|
|
"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
|
|
|
|
_ ->
|
|
"bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
|
|
end
|
|
]}>
|
|
{String.capitalize(integration.last_sync_status)}
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= if integration.last_synced_at do %>
|
|
<span class="text-xs text-gray-400 dark:text-gray-500">
|
|
· Next sync in ~{next_sync_minutes(integration.last_synced_at, integration.sync_interval_minutes)}m
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= if provider.id == "preseem" do %>
|
|
<.link
|
|
navigate={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"
|
|
}
|
|
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Manage Devices →
|
|
</.link>
|
|
<.link
|
|
navigate={~p"/insights?source=preseem"}
|
|
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Network Insights →
|
|
</.link>
|
|
<% end %>
|
|
<%= if provider.id == "gaiia" do %>
|
|
<.link
|
|
navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
|
|
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Entity Mapping →
|
|
</.link>
|
|
<.link
|
|
navigate={
|
|
~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
|
|
}
|
|
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Reconciliation →
|
|
</.link>
|
|
<% end %>
|
|
<%!-- Sync schedule info --%>
|
|
<%= if integration.enabled do %>
|
|
<div class="mt-3 rounded-md bg-gray-50 p-3 dark:bg-gray-800/50">
|
|
<h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300">
|
|
<.icon name="hero-clock" class="h-3.5 w-3.5 inline" /> Sync Schedule
|
|
</h4>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
<%= if provider.id == "preseem" do %>
|
|
Syncs every {integration.sync_interval_minutes} minutes. Baselines and fleet profiles computed nightly.
|
|
<% end %>
|
|
<%= if provider.id == "gaiia" do %>
|
|
Syncs every {integration.sync_interval_minutes} minutes. Reconciliation runs nightly. Also receives real-time webhook updates.
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<%= if integration = @integrations[provider.id] do %>
|
|
<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",
|
|
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>
|
|
<% end %>
|
|
|
|
<button
|
|
type="button"
|
|
id={"configure-#{provider.id}"}
|
|
phx-click="configure"
|
|
phx-value-provider={provider.id}
|
|
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs 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"
|
|
>
|
|
Configure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<%= if @configuring == provider.id do %>
|
|
<div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<.form
|
|
for={@form}
|
|
id={"#{provider.id}-form"}
|
|
phx-change="validate"
|
|
phx-submit="save"
|
|
>
|
|
<div class="space-y-4">
|
|
<.input
|
|
field={@form[:api_key]}
|
|
type="password"
|
|
label="API Key"
|
|
placeholder={"Enter your #{provider.name} API key"}
|
|
autocomplete="off"
|
|
value={get_credential(@integrations[provider.id], "api_key")}
|
|
/>
|
|
|
|
<.input
|
|
field={@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)
|
|
)
|
|
}
|
|
/>
|
|
|
|
<%= if @test_result do %>
|
|
<div class={[
|
|
"rounded-md 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",
|
|
case @test_result do
|
|
{:ok, _} -> "text-green-800 dark:text-green-200"
|
|
{:error, _} -> "text-red-800 dark:text-red-200"
|
|
end
|
|
]}>
|
|
{elem(@test_result, 1)}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="flex items-center justify-between pt-4">
|
|
<button
|
|
type="button"
|
|
id="test-connection"
|
|
phx-click="test_connection"
|
|
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs 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"
|
|
>
|
|
Test Connection
|
|
</button>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
phx-click="close_config"
|
|
class="text-sm font-semibold text-gray-900 dark:text-white"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<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 dark:bg-indigo-500 dark:hover:bg-indigo-400"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</.form>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if provider.id == "gaiia" && @integrations["gaiia"] do %>
|
|
<div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
Webhook Configuration
|
|
</h4>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
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>
|
|
<div class="mt-1 flex items-center gap-2">
|
|
<input
|
|
id="gaiia-webhook-secret"
|
|
type="text"
|
|
readonly
|
|
value={get_credential(@integrations["gaiia"], "webhook_secret")}
|
|
class="block w-full rounded-md border-gray-300 bg-gray-50 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"
|
|
/>
|
|
<button
|
|
type="button"
|
|
phx-hook="CopyToClipboard"
|
|
data-target="#gaiia-webhook-secret"
|
|
id="copy-webhook-secret"
|
|
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 class="mt-2">
|
|
<button
|
|
type="button"
|
|
id="regenerate-webhook-secret"
|
|
phx-click="regenerate_webhook_secret"
|
|
data-confirm="Are you sure? Any existing Gaiia webhook using the current secret will stop working."
|
|
class="text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
Regenerate Secret
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-blue-50 p-3 dark:bg-blue-900/20">
|
|
<h5 class="text-xs font-medium text-blue-800 dark:text-blue-300">
|
|
Setup Instructions
|
|
</h5>
|
|
<ol class="mt-2 list-inside list-decimal space-y-1 text-xs text-blue-700 dark:text-blue-400">
|
|
<li>In your Gaiia admin panel, go to Settings → Webhooks</li>
|
|
<li>Click "Add Webhook"</li>
|
|
<li>Paste the Webhook URL above</li>
|
|
<li>Paste the Webhook Secret above into the "Secret" field</li>
|
|
<li>Select events: Account, Billing Subscription, Inventory Item</li>
|
|
<li>Save the webhook</li>
|
|
</ol>
|
|
<p class="mt-2 text-xs text-blue-600 dark:text-blue-400">
|
|
Once configured, Towerops will receive real-time updates when accounts, subscriptions, or inventory items change in Gaiia.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</Layouts.authenticated>
|