towerops/lib/towerops_web/live/help_live/sections/integrations.ex
Graham McInitre 9d4a5f6d81 refactor: comprehensive simplification and functional programming improvements
- help_live/index.ex: 2,642→173 lines, 15 section modules + sidebar extracted
  MikroTik now real section, dead if false removed
- agent_channel.ex: 2,506→1,751 lines, 3 helper modules extracted
  (heartbeat/subscriptions/job_builder), decode_and_process/4 eliminates
  8 repeated handle_in patterns, guard-based size checks
- antenna_catalog.ex: 1,174→47 lines, 107 specs → priv/antennas/catalog.json
- topology.ex: unbounded query → batched loading (100/batch),
  all guard errors fixed, zero if/case/cond conditionals
- proto: decoder_macros.ex + field_specs.ex infrastructure for
  macro-generated protobuf decoders
2026-07-21 17:03:47 -05:00

338 lines
14 KiB
Elixir

defmodule ToweropsWeb.HelpLive.Sections.Integrations do
@moduledoc false
use ToweropsWeb, :html
import ToweropsWeb.HelpLive.Sections.Helpers
def render(assigns) do
~H"""
<div class="p-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Integrations</h2>
<div class="prose prose-sm dark:prose-invert max-w-none">
<p class="text-gray-600 dark:text-gray-400">
Integrations allow you to connect Towerops with third-party services to enrich your
monitoring data, sync subscriber information, and streamline your workflow. Configure
integrations from
<.code>Organization Settings</.code>
<.code>Integrations</.code>
tab.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Preseem</h3>
<p class="text-gray-600 dark:text-gray-400">
<a
href="https://preseem.com"
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
Preseem
</a>
is a Quality of Experience (QoE) monitoring platform designed for WISPs and broadband providers.
The Preseem integration syncs subscriber and access point QoE data into Towerops, giving you
a unified view of network health alongside device monitoring.
</p>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">What It Syncs</h4>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
<li>Subscriber QoE scores and metrics</li>
<li>Access point performance data</li>
<li>Latency, jitter, and packet loss statistics</li>
</ul>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>
<div class="space-y-4">
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
1
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Get Your Preseem API Key
</h4>
<p class="text-gray-600 dark:text-gray-400">
Log in to your Preseem dashboard and generate an API key from your account settings.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
2
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Add the Integration
</h4>
<p class="text-gray-600 dark:text-gray-400">
Navigate to
<.code>Organization Settings</.code>
<.code>Integrations</.code>
tab.
Enter your Preseem API key and configure the sync interval.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
3
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Test the Connection
</h4>
<p class="text-gray-600 dark:text-gray-400">
Use the <strong class="text-gray-900 dark:text-white">Test Connection</strong> button
to verify your API key is valid and Towerops can reach the Preseem API.
</p>
</div>
</div>
</div>
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
<div class="flex gap-3">
<.icon
name="hero-information-circle"
class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
/>
<div>
<h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
Sync Schedule
</h4>
<p class="text-sm text-blue-800 dark:text-blue-300">
Preseem data is synced automatically on a periodic schedule based on your configured
sync interval. You can also trigger a manual sync at any time from the integration settings.
</p>
</div>
</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">Gaiia</h3>
<p class="text-gray-600 dark:text-gray-400">
<a
href="https://gaiia.com"
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
Gaiia
</a>
is a billing and subscriber management platform. The Gaiia integration syncs subscriber data,
service plans, and entity mappings into Towerops, enabling you to correlate network issues with
specific customers and services.
</p>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">What It Syncs</h4>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
<li>Subscriber accounts and contact information</li>
<li>Service plans and subscription status</li>
<li>Entity mappings between Gaiia and Towerops devices</li>
</ul>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>
<div class="space-y-4">
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
1
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Configure Gaiia Credentials
</h4>
<p class="text-gray-600 dark:text-gray-400">
Navigate to
<.code>Organization Settings</.code>
<.code>Integrations</.code>
tab
and enter your Gaiia API credentials.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
2
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Set Up Webhooks
</h4>
<p class="text-gray-600 dark:text-gray-400">
Configure a webhook in your Gaiia account pointing to the webhook URL provided
in the integration settings. Webhooks enable real-time updates when subscriber
data changes in Gaiia.
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
3
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Entity Mapping & Reconciliation
</h4>
<p class="text-gray-600 dark:text-gray-400">
After the initial sync, review the entity mapping to ensure Gaiia subscribers are
correctly matched to Towerops devices. Use the reconciliation tools to resolve
any mismatches.
</p>
</div>
</div>
</div>
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
<div class="flex gap-3">
<.icon
name="hero-information-circle"
class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
/>
<div>
<h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
Sync Schedule
</h4>
<p class="text-sm text-blue-800 dark:text-blue-300">
Gaiia data is synced through two mechanisms: automatic periodic syncs pull the full
dataset on a schedule, while real-time webhooks push individual changes as they happen
in Gaiia. This ensures your data stays current without excessive API calls.
</p>
</div>
</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">PagerDuty</h3>
<p class="text-gray-600 dark:text-gray-400">
<a
href="https://www.pagerduty.com"
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
PagerDuty
</a>
is an incident management and on-call alerting platform. The PagerDuty integration provides
2-way alert sync — when a device goes down in Towerops, a PagerDuty incident is automatically
triggered. Acknowledging or resolving the alert in Towerops updates the PagerDuty incident as well.
</p>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">How It Works</h4>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
<li>Device goes down → PagerDuty incident triggered (critical severity)</li>
<li>Alert acknowledged in Towerops → PagerDuty incident acknowledged</li>
<li>Device recovers / alert resolved → PagerDuty incident resolved</li>
</ul>
<h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>
<div class="space-y-4">
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
1
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Create an Events API v2 Integration in PagerDuty
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
In PagerDuty, go to
<.code>Services</.code>
→ select your service →
<.code>Integrations</.code>
tab →
<.code>Add Integration</.code>
→ choose <.code>Events API v2</.code>. Copy the
<.code>Integration Key</.code>
(routing key).
</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
2
</div>
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Configure in Towerops
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Navigate to
<.code>Organization Settings</.code>
<.code>Integrations</.code>
tab → click
<.code>Configure</.code>
on PagerDuty. Paste your integration key and test the connection.
</p>
</div>
</div>
</div>
<div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
<div class="flex gap-3">
<.icon
name="hero-information-circle"
class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
/>
<div>
<h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
Event-Driven
</h4>
<p class="text-sm text-blue-800 dark:text-blue-300">
Unlike other integrations, PagerDuty is event-driven — there is no periodic sync.
Alerts are sent to PagerDuty in real time as they occur. No polling or sync interval is needed.
</p>
</div>
</div>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
General Integration Features
</h3>
<div class="mt-4 space-y-3">
<div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Test Connection</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Every integration includes a Test Connection button that validates your credentials
and confirms Towerops can communicate with the external service before saving.
</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Sync Status</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
The Integrations tab shows the last sync time, sync status, and any errors for
each configured integration.
</p>
</div>
</div>
</div>
</div>
"""
end
end