docs: add integrations and org settings sections to in-app help page
This commit is contained in:
parent
397271ce03
commit
b897330a7e
1 changed files with 432 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue