Spaces:
Sleeping
Sleeping
| /** | |
| * Integrations Panel Component | |
| * | |
| * Third-party integration management: | |
| * - View all integrations | |
| * - Configure API keys | |
| * - Enable/disable integrations | |
| * - Run health checks | |
| */ | |
| import React, { useState, useEffect, useCallback } from 'react'; | |
| import { | |
| Link2, RefreshCw, Settings, Check, XCircle, AlertTriangle, | |
| Eye, EyeOff, Save, Power, Activity, Zap, Cloud, Mail, CreditCard, | |
| Bot, Brain, Server | |
| } from 'lucide-react'; | |
| import { getToken } from '../../services/api'; | |
| const API_BASE = import.meta.env.VITE_API_URL || ''; | |
| // Integration icons mapping | |
| const getIntegrationIcon = (name) => { | |
| const icons = { | |
| openai: Zap, | |
| aws_s3: Cloud, | |
| sendgrid: Mail, | |
| stripe: CreditCard | |
| }; | |
| return icons[name] || Server; | |
| }; | |
| // Status indicator | |
| const StatusIndicator = ({ connected, enabled }) => { | |
| if (!enabled) { | |
| return ( | |
| <span className="status-badge disabled"> | |
| <Power size={12} /> Disabled | |
| </span> | |
| ); | |
| } | |
| return connected ? ( | |
| <span className="status-badge connected"> | |
| <Check size={12} /> Connected | |
| </span> | |
| ) : ( | |
| <span className="status-badge disconnected"> | |
| <XCircle size={12} /> Not Connected | |
| </span> | |
| ); | |
| }; | |
| // Integration card component | |
| const IntegrationCard = ({ integration, onUpdate, onHealthCheck }) => { | |
| const [editing, setEditing] = useState(false); | |
| const [apiKey, setApiKey] = useState(''); | |
| const [apiSecret, setApiSecret] = useState(''); | |
| const [showKey, setShowKey] = useState(false); | |
| const [showSecret, setShowSecret] = useState(false); | |
| const [saving, setSaving] = useState(false); | |
| const [checking, setChecking] = useState(false); | |
| const [healthResult, setHealthResult] = useState(null); | |
| const Icon = getIntegrationIcon(integration.name); | |
| const handleSave = async () => { | |
| setSaving(true); | |
| try { | |
| const updates = { | |
| is_enabled: integration.is_enabled | |
| }; | |
| if (apiKey) updates.api_key = apiKey; | |
| if (apiSecret) updates.api_secret = apiSecret; | |
| await onUpdate(integration.id, updates); | |
| setEditing(false); | |
| setApiKey(''); | |
| setApiSecret(''); | |
| } catch (err) { | |
| console.error('Error saving:', err); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| const handleToggle = async () => { | |
| setSaving(true); | |
| try { | |
| await onUpdate(integration.id, { is_enabled: !integration.is_enabled }); | |
| } catch (err) { | |
| console.error('Error toggling:', err); | |
| } finally { | |
| setSaving(false); | |
| } | |
| }; | |
| const handleHealthCheck = async () => { | |
| setChecking(true); | |
| setHealthResult(null); | |
| try { | |
| const result = await onHealthCheck(integration.name); | |
| setHealthResult(result); | |
| } catch (err) { | |
| setHealthResult({ status: 'error', message: err.message }); | |
| } finally { | |
| setChecking(false); | |
| } | |
| }; | |
| return ( | |
| <div className={`integration-card ${integration.is_enabled ? 'enabled' : 'disabled'}`}> | |
| <div className="integration-header"> | |
| <div className="integration-icon"> | |
| <Icon size={32} /> | |
| </div> | |
| <div className="integration-info"> | |
| <h3>{integration.display_name}</h3> | |
| <p>{integration.description}</p> | |
| </div> | |
| <StatusIndicator | |
| connected={integration.is_configured} | |
| enabled={integration.is_enabled} | |
| /> | |
| </div> | |
| <div className="integration-details"> | |
| <div className="detail-row"> | |
| <span className="label">API Key:</span> | |
| <span className="value"> | |
| {integration.api_key_preview || 'Not configured'} | |
| </span> | |
| </div> | |
| {integration.config && Object.keys(integration.config).length > 0 && ( | |
| <div className="detail-row"> | |
| <span className="label">Config:</span> | |
| <span className="value">{JSON.stringify(integration.config)}</span> | |
| </div> | |
| )} | |
| </div> | |
| {editing && ( | |
| <div className="integration-edit-form"> | |
| <div className="form-row"> | |
| <label>API Key</label> | |
| <div className="password-input"> | |
| <input | |
| type={showKey ? 'text' : 'password'} | |
| value={apiKey} | |
| onChange={(e) => setApiKey(e.target.value)} | |
| placeholder="Enter new API key..." | |
| /> | |
| <button | |
| className="toggle-visibility" | |
| onClick={() => setShowKey(!showKey)} | |
| > | |
| {showKey ? <EyeOff size={16} /> : <Eye size={16} />} | |
| </button> | |
| </div> | |
| </div> | |
| {integration.name !== 'openai' && ( | |
| <div className="form-row"> | |
| <label>API Secret</label> | |
| <div className="password-input"> | |
| <input | |
| type={showSecret ? 'text' : 'password'} | |
| value={apiSecret} | |
| onChange={(e) => setApiSecret(e.target.value)} | |
| placeholder="Enter API secret (if required)..." | |
| /> | |
| <button | |
| className="toggle-visibility" | |
| onClick={() => setShowSecret(!showSecret)} | |
| > | |
| {showSecret ? <EyeOff size={16} /> : <Eye size={16} />} | |
| </button> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| {healthResult && ( | |
| <div className={`health-result ${healthResult.status}`}> | |
| {healthResult.status === 'healthy' ? ( | |
| <Check size={16} /> | |
| ) : ( | |
| <AlertTriangle size={16} /> | |
| )} | |
| <span>{healthResult.message || healthResult.status}</span> | |
| </div> | |
| )} | |
| <div className="integration-actions"> | |
| <button | |
| className={`toggle-btn ${integration.is_enabled ? 'enabled' : ''}`} | |
| onClick={handleToggle} | |
| disabled={saving} | |
| > | |
| <Power size={16} /> | |
| {integration.is_enabled ? 'Disable' : 'Enable'} | |
| </button> | |
| {editing ? ( | |
| <> | |
| <button | |
| className="save-btn" | |
| onClick={handleSave} | |
| disabled={saving} | |
| > | |
| {saving ? <RefreshCw size={16} className="spinning" /> : <Save size={16} />} | |
| Save | |
| </button> | |
| <button | |
| className="cancel-btn" | |
| onClick={() => { setEditing(false); setApiKey(''); setApiSecret(''); }} | |
| > | |
| <XCircle size={16} /> | |
| Cancel | |
| </button> | |
| </> | |
| ) : ( | |
| <button | |
| className="edit-btn" | |
| onClick={() => setEditing(true)} | |
| > | |
| <Settings size={16} /> | |
| Configure | |
| </button> | |
| )} | |
| <button | |
| className="health-btn" | |
| onClick={handleHealthCheck} | |
| disabled={checking || !integration.is_enabled} | |
| > | |
| {checking ? ( | |
| <RefreshCw size={16} className="spinning" /> | |
| ) : ( | |
| <Activity size={16} /> | |
| )} | |
| Health Check | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| function IntegrationsPanel() { | |
| const [integrations, setIntegrations] = useState([]); | |
| const [loading, setLoading] = useState(true); | |
| const [error, setError] = useState(null); | |
| // Fetch integrations | |
| const fetchIntegrations = useCallback(async () => { | |
| setLoading(true); | |
| setError(null); | |
| try { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/integrations`, { | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (!response.ok) throw new Error('Failed to fetch integrations'); | |
| const data = await response.json(); | |
| if (data.success) { | |
| setIntegrations(data.integrations); | |
| } | |
| } catch (err) { | |
| setError(err.message); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }, []); | |
| // Update integration | |
| const updateIntegration = async (integrationId, updates) => { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/integrations/${integrationId}`, { | |
| method: 'PUT', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(updates) | |
| }); | |
| if (!response.ok) throw new Error('Failed to update integration'); | |
| fetchIntegrations(); | |
| }; | |
| // Health check | |
| const healthCheck = async (integrationName) => { | |
| const token = getToken(); | |
| const response = await fetch(`${API_BASE}/api/admin/integrations/${integrationName}/health-check`, { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${token}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (!response.ok) throw new Error('Health check failed'); | |
| const data = await response.json(); | |
| return data.health; | |
| }; | |
| // Initial fetch | |
| useEffect(() => { | |
| fetchIntegrations(); | |
| }, [fetchIntegrations]); | |
| if (loading) { | |
| return ( | |
| <div className="admin-loading"> | |
| <RefreshCw className="spinning" size={40} /> | |
| <p>Loading integrations...</p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="integrations-panel"> | |
| {/* Header */} | |
| <div className="panel-header"> | |
| <div className="header-left"> | |
| <Link2 size={24} /> | |
| <h2>Third-Party Integrations</h2> | |
| </div> | |
| <div className="header-right"> | |
| <button className="refresh-btn" onClick={fetchIntegrations} disabled={loading}> | |
| <RefreshCw size={16} className={loading ? 'spinning' : ''} /> | |
| Refresh | |
| </button> | |
| </div> | |
| </div> | |
| {/* Stats */} | |
| <div className="integrations-stats"> | |
| <div className="stat"> | |
| <span className="stat-value"> | |
| {integrations.filter(i => i.is_enabled).length} | |
| </span> | |
| <span className="stat-label">Enabled</span> | |
| </div> | |
| <div className="stat"> | |
| <span className="stat-value"> | |
| {integrations.filter(i => i.is_configured).length} | |
| </span> | |
| <span className="stat-label">Configured</span> | |
| </div> | |
| <div className="stat"> | |
| <span className="stat-value">{integrations.length}</span> | |
| <span className="stat-label">Total</span> | |
| </div> | |
| </div> | |
| {/* Integrations Grid */} | |
| <div className="integrations-grid"> | |
| {integrations.map((integration) => ( | |
| <IntegrationCard | |
| key={integration.id} | |
| integration={integration} | |
| onUpdate={updateIntegration} | |
| onHealthCheck={healthCheck} | |
| /> | |
| ))} | |
| </div> | |
| {integrations.length === 0 && ( | |
| <div className="empty-state"> | |
| <Link2 size={48} /> | |
| <p>No integrations configured</p> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export default IntegrationsPanel; | |