docs: add integrations and org settings sections to in-app help page

This commit is contained in:
Graham McIntire 2026-02-14 10:28:20 -06:00
parent 397271ce03
commit b897330a7e

View file

@ -178,6 +178,21 @@ defmodule ToweropsWeb.HelpLive.Index do
Getting Started
</.link>
</li>
<li>
<.link
patch={~p"/help?section=settings"}
class={[
"block px-3 py-2 rounded-md text-sm font-medium transition-colors",
if @active_section == "settings" do
"bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
else
"text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
end
]}
>
Organization Settings
</.link>
</li>
<li>
<.link
patch={~p"/help?section=sites"}
@ -223,6 +238,21 @@ defmodule ToweropsWeb.HelpLive.Index do
Remote Pollers
</.link>
</li>
<li>
<.link
patch={~p"/help?section=integrations"}
class={[
"block px-3 py-2 rounded-md text-sm font-medium transition-colors",
if @active_section == "integrations" do
"bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
else
"text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
end
]}
>
Integrations
</.link>
</li>
<li>
<.link
patch={~p"/help?section=mikrotik"}
@ -379,11 +409,12 @@ defmodule ToweropsWeb.HelpLive.Index do
</div>
<div class="flex-1">
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
Create a Site
Create a Site (Optional)
</h4>
<p class="text-gray-600 dark:text-gray-400">
Sites represent physical or logical locations where your network devices are located.
Start by creating a site for your office, data center, or any location where you have equipment.
If you manage multiple locations, start by creating a site for your office, data center,
or any location where you have equipment.
</p>
<p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
Navigate to
@ -391,6 +422,16 @@ defmodule ToweropsWeb.HelpLive.Index do
<.code>Add Site</.code>
</p>
<p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
Sites are disabled by default and can be enabled later in
<.link
patch={~p"/help?section=settings"}
class="underline hover:text-gray-700 dark:hover:text-gray-300"
>
Organization Settings
</.link>
General tab.
</p>
</div>
</div>
@ -1321,6 +1362,393 @@ defmodule ToweropsWeb.HelpLive.Index do
</div>
</div>
</div>
<% "settings" -> %>
<div class="p-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
Organization Settings
</h2>
<div class="prose prose-sm dark:prose-invert max-w-none">
<p class="text-gray-600 dark:text-gray-400">
Organization Settings is the central hub for configuring your Towerops organization. Access it
from the main navigation under <.code>Organization Settings</.code>. The settings page uses a
tabbed interface to organize different configuration areas.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
General Tab
</h3>
<p class="text-gray-600 dark:text-gray-400">
The General tab lets you manage basic organization properties:
</p>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
<li>
<strong class="text-gray-900 dark:text-white">Organization Name</strong>
The display name for your organization
</li>
<li>
<strong class="text-gray-900 dark:text-white">Default Organization</strong>
Set this as the default org when logging in
</li>
<li>
<strong class="text-gray-900 dark:text-white">Sites Toggle</strong>
Enable or disable site-based device organization (see the
<.link
patch={~p"/help?section=sites"}
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
Sites
</.link>
section for details)
</li>
</ul>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
SNMP Tab
</h3>
<p class="text-gray-600 dark:text-gray-400">
Configure organization-wide SNMP defaults used for device polling:
</p>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
<li>
<strong class="text-gray-900 dark:text-white">SNMP Version</strong>
Choose between v1, v2c, or v3
</li>
<li>
<strong class="text-gray-900 dark:text-white">Community String</strong>
The SNMP community string for v1/v2c
</li>
<li>
<strong class="text-gray-900 dark:text-white">SNMPv3 Credentials</strong>
Username, auth protocol, auth passphrase, privacy protocol, and privacy passphrase
</li>
<li>
<strong class="text-gray-900 dark:text-white">Port</strong>
SNMP port (default: 161)
</li>
</ul>
<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">
Credential Hierarchy
</h4>
<p class="text-sm text-blue-800 dark:text-blue-300">
SNMP credentials follow a hierarchy: <strong>Device > Site > Organization</strong>.
Device-level settings take the highest priority, followed by site-level, then
organization-level defaults. This lets you set sensible defaults while overriding
for specific locations or devices.
</p>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 mt-4">
Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong> button to push
the organization's SNMP settings to all devices, overriding any device or site-level
customizations.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
MikroTik Tab
</h3>
<p class="text-gray-600 dark:text-gray-400">
Configure organization-wide SSH credentials for MikroTik device monitoring. This tab is
only accessible to superusers. See the
<.link
patch={~p"/help?section=mikrotik"}
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
MikroTik
</.link>
section for detailed setup instructions.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
Agents Tab
</h3>
<p class="text-gray-600 dark:text-gray-400">
Manage remote poller (agent) assignments for your organization:
</p>
<ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
<li>
<strong class="text-gray-900 dark:text-white">Default Agent</strong>
Set a default remote poller for all devices in the organization
</li>
<li>
<strong class="text-gray-900 dark:text-white">Assignment Breakdown</strong>
View how devices are distributed across pollers (cloud vs. remote agents)
</li>
</ul>
<p class="text-gray-600 dark:text-gray-400 mt-4">
Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong> button to push
the default agent assignment to all devices, overriding any device or site-level agent
selections.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
Integrations Tab
</h3>
<p class="text-gray-600 dark:text-gray-400">
Connect Towerops with third-party services. See the
<.link
patch={~p"/help?section=integrations"}
class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
>
Integrations
</.link>
section for full details on available integrations and how to configure them.
</p>
</div>
</div>
<% "integrations" -> %>
<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">
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>
<% "mikrotik" -> %>
<div class="p-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
@ -1596,9 +2024,9 @@ defmodule ToweropsWeb.HelpLive.Index do
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Navigate to
<.code>Settings</.code>
<.code>Organization Settings</.code>
<.code>Organization</.code>
<.code>MikroTik tab</.code>
to set default
SSH credentials for all MikroTik devices in your organization.
</p>