feat(astrolabe): add webhook management UI to admin settings
Add admin interface for configuring real-time webhook sync with pre-configured presets for common scenarios. Changes: - Add webhook presets section to admin settings page - Shows available presets filtered by installed apps - Enable/disable presets with one click - Displays current webhook status - Add client secret configuration status display - Shows whether confidential client is configured - Provides setup instructions for optional client secret - Add adminSettings.js for webhook management - Load webhook presets via API - Enable/disable webhook presets - Handle search settings form submission - Update vite.config.js to build adminSettings entry point - Pass clientSecretConfigured flag to template UI Features: - Real-time preset status (enabled/disabled) - One-click enable/disable for webhook bundles - App-aware filtering (only shows presets for installed apps) - Clear instructions for requirements and setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris Coutinho
@@ -54,6 +54,8 @@ class Admin implements ISettings {
|
||||
// Get configuration from config.php
|
||||
$serverUrl = $this->config->getSystemValue('mcp_server_url', '');
|
||||
$apiKeyConfigured = !empty($this->config->getSystemValue('mcp_server_api_key', ''));
|
||||
$clientSecret = $this->config->getSystemValue('astroglobe_client_secret', '');
|
||||
$clientSecretConfigured = !empty($clientSecret);
|
||||
|
||||
// Check for server connection error
|
||||
if (isset($serverStatus['error'])) {
|
||||
@@ -110,6 +112,7 @@ class Admin implements ISettings {
|
||||
'vectorSyncStatus' => $vectorSyncStatus,
|
||||
'serverUrl' => $serverUrl,
|
||||
'apiKeyConfigured' => $apiKeyConfigured,
|
||||
'clientSecretConfigured' => $clientSecretConfigured,
|
||||
'vectorSyncEnabled' => $serverStatus['vector_sync_enabled'] ?? false,
|
||||
'searchSettings' => $searchSettings,
|
||||
];
|
||||
|
||||
+245
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* Admin settings page JavaScript for Astroglobe.
|
||||
*
|
||||
* Handles:
|
||||
* - Loading webhook presets
|
||||
* - Enabling/disabling webhook presets
|
||||
* - Search settings form submission
|
||||
*/
|
||||
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import axios from '@nextcloud/axios'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize search settings form
|
||||
initSearchSettingsForm()
|
||||
|
||||
// Initialize webhook management (only if webhook section exists)
|
||||
if (document.getElementById('webhook-presets')) {
|
||||
initWebhookManagement()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Initialize search settings form handling.
|
||||
*/
|
||||
function initSearchSettingsForm() {
|
||||
const form = document.getElementById('astroglobe-search-settings-form')
|
||||
if (!form) return
|
||||
|
||||
const scoreThresholdInput = document.getElementById('search-score-threshold')
|
||||
const scoreThresholdValue = document.getElementById('score-threshold-value')
|
||||
|
||||
// Update score threshold display when slider changes
|
||||
if (scoreThresholdInput && scoreThresholdValue) {
|
||||
scoreThresholdInput.addEventListener('input', (e) => {
|
||||
scoreThresholdValue.textContent = e.target.value + '%'
|
||||
})
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const formData = new FormData(form)
|
||||
const data = {
|
||||
algorithm: formData.get('algorithm'),
|
||||
fusion: formData.get('fusion'),
|
||||
scoreThreshold: parseInt(formData.get('scoreThreshold')),
|
||||
limit: parseInt(formData.get('limit')),
|
||||
}
|
||||
|
||||
const statusEl = document.getElementById('search-settings-status')
|
||||
if (statusEl) {
|
||||
statusEl.textContent = 'Saving...'
|
||||
statusEl.className = 'mcp-status-message'
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
generateUrl('/apps/astroglobe/api/admin/search-settings'),
|
||||
data,
|
||||
{ headers: { 'Content-Type': 'application/json' } }
|
||||
)
|
||||
|
||||
if (response.data.success) {
|
||||
if (statusEl) {
|
||||
statusEl.textContent = '✓ Settings saved'
|
||||
statusEl.className = 'mcp-status-message success'
|
||||
setTimeout(() => {
|
||||
statusEl.textContent = ''
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to save search settings:', error)
|
||||
if (statusEl) {
|
||||
statusEl.textContent = '✗ Failed to save'
|
||||
statusEl.className = 'mcp-status-message error'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize webhook management UI.
|
||||
*/
|
||||
async function initWebhookManagement() {
|
||||
const container = document.getElementById('webhook-presets-container')
|
||||
if (!container) return
|
||||
|
||||
try {
|
||||
// Load webhook presets from API
|
||||
const response = await axios.get(
|
||||
generateUrl('/apps/astroglobe/api/admin/webhooks/presets')
|
||||
)
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error(response.data.error || 'Failed to load presets')
|
||||
}
|
||||
|
||||
const presets = response.data.presets
|
||||
renderWebhookPresets(container, presets)
|
||||
} catch (error) {
|
||||
console.error('Failed to load webhook presets:', error)
|
||||
container.innerHTML = `
|
||||
<div class="notecard notecard-error">
|
||||
<p><strong>Error loading webhook presets:</strong></p>
|
||||
<p>${error.message || 'Unknown error'}</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render webhook preset cards.
|
||||
*
|
||||
* @param {HTMLElement} container Container element
|
||||
* @param {Object} presets Preset configurations
|
||||
*/
|
||||
function renderWebhookPresets(container, presets) {
|
||||
const presetIds = Object.keys(presets)
|
||||
|
||||
if (presetIds.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="notecard notecard-info">
|
||||
<p>No webhook presets available. Install supported apps (Notes, Calendar, Tables, Forms) to enable webhooks.</p>
|
||||
</div>
|
||||
`
|
||||
return
|
||||
}
|
||||
|
||||
// Create preset cards grid
|
||||
const grid = document.createElement('div')
|
||||
grid.className = 'mcp-preset-grid'
|
||||
|
||||
presetIds.forEach(presetId => {
|
||||
const preset = presets[presetId]
|
||||
const card = createPresetCard(presetId, preset)
|
||||
grid.appendChild(card)
|
||||
})
|
||||
|
||||
container.innerHTML = ''
|
||||
container.appendChild(grid)
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a webhook preset card.
|
||||
*
|
||||
* @param {string} presetId Preset ID
|
||||
* @param {Object} preset Preset configuration
|
||||
* @return {HTMLElement} Card element
|
||||
*/
|
||||
function createPresetCard(presetId, preset) {
|
||||
const card = document.createElement('div')
|
||||
card.className = 'mcp-preset-card'
|
||||
card.dataset.presetId = presetId
|
||||
|
||||
const statusClass = preset.enabled ? 'enabled' : 'disabled'
|
||||
const statusText = preset.enabled ? 'Enabled' : 'Disabled'
|
||||
const buttonText = preset.enabled ? 'Disable' : 'Enable'
|
||||
const buttonClass = preset.enabled ? 'secondary' : 'primary'
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="mcp-preset-header">
|
||||
<h4>${escapeHtml(preset.name)}</h4>
|
||||
<span class="mcp-preset-status mcp-status-${statusClass}">${statusText}</span>
|
||||
</div>
|
||||
<p class="mcp-preset-description">${escapeHtml(preset.description)}</p>
|
||||
<div class="mcp-preset-meta">
|
||||
<span class="mcp-preset-app">App: ${escapeHtml(preset.app)}</span>
|
||||
<span class="mcp-preset-events">${preset.events.length} events</span>
|
||||
</div>
|
||||
<div class="mcp-preset-actions">
|
||||
<button class="mcp-preset-toggle ${buttonClass}" data-preset-id="${presetId}">
|
||||
${buttonText}
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Attach event listener to toggle button
|
||||
const toggleBtn = card.querySelector('.mcp-preset-toggle')
|
||||
toggleBtn.addEventListener('click', () => togglePreset(presetId, preset.enabled))
|
||||
|
||||
return card
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle a webhook preset (enable/disable).
|
||||
*
|
||||
* @param {string} presetId Preset ID
|
||||
* @param {boolean} currentlyEnabled Current enabled state
|
||||
*/
|
||||
async function togglePreset(presetId, currentlyEnabled) {
|
||||
const card = document.querySelector(`[data-preset-id="${presetId}"]`)
|
||||
if (!card) return
|
||||
|
||||
const toggleBtn = card.querySelector('.mcp-preset-toggle')
|
||||
const originalText = toggleBtn.textContent
|
||||
|
||||
// Disable button during request
|
||||
toggleBtn.disabled = true
|
||||
toggleBtn.textContent = currentlyEnabled ? 'Disabling...' : 'Enabling...'
|
||||
|
||||
try {
|
||||
const action = currentlyEnabled ? 'disable' : 'enable'
|
||||
const url = generateUrl(`/apps/astroglobe/api/admin/webhooks/presets/${presetId}/${action}`)
|
||||
|
||||
const response = await axios.post(url)
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error(response.data.error || `Failed to ${action} preset`)
|
||||
}
|
||||
|
||||
// Reload presets to update UI
|
||||
const container = document.getElementById('webhook-presets-container')
|
||||
await initWebhookManagement()
|
||||
|
||||
// Show success notification
|
||||
OC.Notification.showTemporary(response.data.message || `Preset ${action}d successfully`)
|
||||
} catch (error) {
|
||||
console.error(`Failed to toggle preset ${presetId}:`, error)
|
||||
|
||||
// Restore button state
|
||||
toggleBtn.disabled = false
|
||||
toggleBtn.textContent = originalText
|
||||
|
||||
// Show error notification
|
||||
OC.Notification.showTemporary(
|
||||
error.message || 'Failed to toggle webhook preset',
|
||||
{ type: 'error' }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS.
|
||||
*
|
||||
* @param {string} text Text to escape
|
||||
* @return {string} Escaped text
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = text
|
||||
return div.innerHTML
|
||||
}
|
||||
@@ -54,6 +54,21 @@ style('astroglobe', 'astroglobe-settings');
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong><?php p($l->t('OAuth Client Secret')); ?></strong></td>
|
||||
<td>
|
||||
<?php if ($_['clientSecretConfigured']): ?>
|
||||
<span class="badge badge-success">
|
||||
<span class="icon icon-checkmark-white"></span>
|
||||
<?php p($l->t('Configured')); ?>
|
||||
</span>
|
||||
<?php else: ?>
|
||||
<span class="badge badge-info">
|
||||
<?php p($l->t('Optional - Uses PKCE fallback')); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<?php if (empty($_['serverUrl']) || !$_['apiKeyConfigured']): ?>
|
||||
@@ -69,6 +84,19 @@ style('astroglobe', 'astroglobe-settings');
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!$_['clientSecretConfigured']): ?>
|
||||
<div class="notecard notecard-info">
|
||||
<p><strong><?php p($l->t('Optional: Confidential OAuth Client')); ?></strong></p>
|
||||
<p><?php p($l->t('To use refresh tokens for long-lived sessions, generate a client secret:')); ?></p>
|
||||
<pre><code>openssl rand -hex 32</code></pre>
|
||||
<p><?php p($l->t('Then add it to your config.php:')); ?></p>
|
||||
<pre><code>'astroglobe_client_secret' => 'your-generated-secret',</code></pre>
|
||||
<p class="mcp-help-text">
|
||||
<?php p($l->t('Without a client secret, the system will use PKCE (public client) authentication. Both methods work, but confidential clients provide better security for long-lived sessions.')); ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Service Status -->
|
||||
@@ -259,6 +287,41 @@ style('astroglobe', 'astroglobe-settings');
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Webhook Management -->
|
||||
<?php if ($_['vectorSyncEnabled']): ?>
|
||||
<div class="mcp-status-card" id="webhook-presets">
|
||||
<h3><?php p($l->t('Webhook Management')); ?></h3>
|
||||
<p class="mcp-settings-description">
|
||||
<?php p($l->t('Configure real-time synchronization for Nextcloud apps using webhooks. Webhooks provide instant updates to the MCP server when content changes.')); ?>
|
||||
</p>
|
||||
|
||||
<div id="webhook-presets-container">
|
||||
<div class="mcp-loading">
|
||||
<?php p($l->t('Loading webhook presets...')); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notecard notecard-info">
|
||||
<p><strong><?php p($l->t('How Webhooks Work')); ?></strong></p>
|
||||
<ul>
|
||||
<li><?php p($l->t('Enable a preset to register webhooks for that app with the MCP server')); ?></li>
|
||||
<li><?php p($l->t('When content changes in Nextcloud, webhooks notify the MCP server instantly')); ?></li>
|
||||
<li><?php p($l->t('The MCP server updates its vector index in real-time for semantic search')); ?></li>
|
||||
<li><?php p($l->t('Disable a preset to stop receiving updates for that app')); ?></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="notecard notecard-warning">
|
||||
<p><strong><?php p($l->t('Requirements')); ?></strong></p>
|
||||
<ul>
|
||||
<li><?php p($l->t('The webhook_listeners app must be installed and enabled in Nextcloud')); ?></li>
|
||||
<li><?php p($l->t('The MCP server must be reachable from your Nextcloud instance')); ?></li>
|
||||
<li><?php p($l->t('You must have authorized Astroglobe with the MCP server (see Personal Settings)')); ?></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<div class="mcp-status-card">
|
||||
<h3><?php p($l->t('Capabilities')); ?></h3>
|
||||
|
||||
+1
@@ -2,6 +2,7 @@ import { createAppConfig } from '@nextcloud/vite-config'
|
||||
|
||||
export default createAppConfig({
|
||||
main: 'src/main.js',
|
||||
adminSettings: 'src/adminSettings.js',
|
||||
}, {
|
||||
inlineCSS: { relativeCSSInjection: true },
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user