@friggframework/devtools 2.0.0-next.6 → 2.0.0-next.61

package/management-ui/src/components/connections/ConnectionConfigForm.jsx

@@ -0,0 +1,362 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '../Button'
+import api from '../../services/api'
+
+const ConnectionConfigForm = ({ connection, integration, onSave, onCancel }) => {
+  const [config, setConfig] = useState({
+    name: '',
+    description: '',
+    syncInterval: 'hourly',
+    autoSync: true,
+    webhookEnabled: false,
+    webhookUrl: '',
+    rateLimitOverride: '',
+    customHeaders: {},
+    entityMappings: [],
+    advanced: {}
+  })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (connection) {
+      // Load existing configuration
+      setConfig({
+        name: connection.name || '',
+        description: connection.description || '',
+        syncInterval: connection.syncInterval || 'hourly',
+        autoSync: connection.autoSync !== false,
+        webhookEnabled: connection.webhookEnabled || false,
+        webhookUrl: connection.webhookUrl || '',
+        rateLimitOverride: connection.rateLimitOverride || '',
+        customHeaders: connection.customHeaders || {},
+        entityMappings: connection.entityMappings || [],
+        advanced: connection.advanced || {}
+      })
+    }
+  }, [connection])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      const endpoint = connection 
+        ? `/api/connections/${connection.id}/config`
+        : '/api/connections/config'
+      
+      const method = connection ? 'put' : 'post'
+      
+      const response = await api[method](endpoint, {
+        ...config,
+        integrationId: integration.id
+      })
+
+      onSave(response.data)
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to save configuration')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const addCustomHeader = () => {
+    const key = prompt('Header name:')
+    if (key) {
+      const value = prompt('Header value:')
+      if (value) {
+        setConfig(prev => ({
+          ...prev,
+          customHeaders: {
+            ...prev.customHeaders,
+            [key]: value
+          }
+        }))
+      }
+    }
+  }
+
+  const removeCustomHeader = (key) => {
+    setConfig(prev => {
+      const { [key]: _, ...rest } = prev.customHeaders
+      return { ...prev, customHeaders: rest }
+    })
+  }
+
+  const addEntityMapping = () => {
+    setConfig(prev => ({
+      ...prev,
+      entityMappings: [
+        ...prev.entityMappings,
+        {
+          id: Date.now(),
+          sourceType: '',
+          targetType: '',
+          fieldMappings: {}
+        }
+      ]
+    }))
+  }
+
+  const updateEntityMapping = (id, updates) => {
+    setConfig(prev => ({
+      ...prev,
+      entityMappings: prev.entityMappings.map(mapping =>
+        mapping.id === id ? { ...mapping, ...updates } : mapping
+      )
+    }))
+  }
+
+  const removeEntityMapping = (id) => {
+    setConfig(prev => ({
+      ...prev,
+      entityMappings: prev.entityMappings.filter(mapping => mapping.id !== id)
+    }))
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      )}
+
+      {/* Basic Configuration */}
+      <div className="bg-card rounded-lg shadow p-6 border border-border">
+        <h3 className="text-lg font-semibold text-card-foreground mb-4">Basic Configuration</h3>
+        
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-foreground">
+              Connection Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={config.name}
+              onChange={(e) => setConfig(prev => ({ ...prev, name: e.target.value }))}
+              className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+              placeholder={`My ${integration.displayName} Connection`}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-foreground">
+              Description
+            </label>
+            <textarea
+              id="description"
+              value={config.description}
+              onChange={(e) => setConfig(prev => ({ ...prev, description: e.target.value }))}
+              rows={3}
+              className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+              placeholder="Optional description for this connection"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Sync Configuration */}
+      <div className="bg-card rounded-lg shadow p-6 border border-border">
+        <h3 className="text-lg font-semibold text-card-foreground mb-4">Sync Configuration</h3>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="flex items-center">
+              <input
+                type="checkbox"
+                checked={config.autoSync}
+                onChange={(e) => setConfig(prev => ({ ...prev, autoSync: e.target.checked }))}
+                className="rounded border-input text-primary shadow-sm focus:border-ring focus:ring-ring"
+              />
+              <span className="ml-2 text-sm text-foreground">Enable automatic synchronization</span>
+            </label>
+          </div>
+
+          {config.autoSync && (
+            <div>
+              <label htmlFor="syncInterval" className="block text-sm font-medium text-foreground">
+                Sync Interval
+              </label>
+              <select
+                id="syncInterval"
+                value={config.syncInterval}
+                onChange={(e) => setConfig(prev => ({ ...prev, syncInterval: e.target.value }))}
+                className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+              >
+                <option value="realtime">Real-time</option>
+                <option value="5min">Every 5 minutes</option>
+                <option value="15min">Every 15 minutes</option>
+                <option value="hourly">Hourly</option>
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+              </select>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Webhook Configuration */}
+      <div className="bg-card rounded-lg shadow p-6 border border-border">
+        <h3 className="text-lg font-semibold text-card-foreground mb-4">Webhook Configuration</h3>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="flex items-center">
+              <input
+                type="checkbox"
+                checked={config.webhookEnabled}
+                onChange={(e) => setConfig(prev => ({ ...prev, webhookEnabled: e.target.checked }))}
+                className="rounded border-input text-primary shadow-sm focus:border-ring focus:ring-ring"
+              />
+              <span className="ml-2 text-sm text-foreground">Enable webhooks for real-time updates</span>
+            </label>
+          </div>
+
+          {config.webhookEnabled && (
+            <div>
+              <label htmlFor="webhookUrl" className="block text-sm font-medium text-foreground">
+                Webhook URL
+              </label>
+              <div className="mt-1 flex rounded-md shadow-sm">
+                <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
+                  {window.location.origin}/api/webhooks/
+                </span>
+                <input
+                  type="text"
+                  id="webhookUrl"
+                  value={config.webhookUrl}
+                  onChange={(e) => setConfig(prev => ({ ...prev, webhookUrl: e.target.value }))}
+                  className="flex-1 block w-full rounded-none rounded-r-md border-input bg-background text-foreground focus:border-ring focus:ring-ring sm:text-sm"
+                  placeholder="connection-id"
+                  disabled
+                />
+              </div>
+              <p className="mt-2 text-sm text-muted-foreground">
+                This URL will be automatically generated when the connection is created.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Advanced Configuration */}
+      <div className="bg-card rounded-lg shadow p-6 border border-border">
+        <h3 className="text-lg font-semibold text-card-foreground mb-4">Advanced Configuration</h3>
+        
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="rateLimitOverride" className="block text-sm font-medium text-foreground">
+              Rate Limit Override (requests per minute)
+            </label>
+            <input
+              type="number"
+              id="rateLimitOverride"
+              value={config.rateLimitOverride}
+              onChange={(e) => setConfig(prev => ({ ...prev, rateLimitOverride: e.target.value }))}
+              className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+              placeholder="Leave empty to use default"
+            />
+          </div>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="block text-sm font-medium text-foreground">
+                Custom Headers
+              </label>
+              <Button type="button" onClick={addCustomHeader} size="sm" variant="secondary">
+                Add Header
+              </Button>
+            </div>
+            {Object.keys(config.customHeaders).length > 0 ? (
+              <div className="space-y-2">
+                {Object.entries(config.customHeaders).map(([key, value]) => (
+                  <div key={key} className="flex items-center space-x-2 p-2 bg-muted/50 rounded">
+                    <code className="text-sm font-mono flex-1">{key}: {value}</code>
+                    <button
+                      type="button"
+                      onClick={() => removeCustomHeader(key)}
+                      className="text-destructive hover:text-destructive/80"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">No custom headers configured</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Entity Mappings */}
+      <div className="bg-card rounded-lg shadow p-6 border border-border">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-900">Entity Mappings</h3>
+          <Button type="button" onClick={addEntityMapping} size="sm" variant="secondary">
+            Add Mapping
+          </Button>
+        </div>
+        
+        {config.entityMappings.length > 0 ? (
+          <div className="space-y-4">
+            {config.entityMappings.map((mapping) => (
+              <div key={mapping.id} className="border border-gray-200 rounded-lg p-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">
+                      Source Type
+                    </label>
+                    <input
+                      type="text"
+                      value={mapping.sourceType}
+                      onChange={(e) => updateEntityMapping(mapping.id, { sourceType: e.target.value })}
+                      className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+                      placeholder="e.g., Contact"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-foreground">
+                      Target Type
+                    </label>
+                    <input
+                      type="text"
+                      value={mapping.targetType}
+                      onChange={(e) => updateEntityMapping(mapping.id, { targetType: e.target.value })}
+                      className="mt-1 block w-full rounded-md border-input bg-background text-foreground shadow-sm focus:border-ring focus:ring-ring sm:text-sm"
+                      placeholder="e.g., User"
+                    />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeEntityMapping(mapping.id)}
+                  className="mt-2 text-sm text-red-600 hover:text-red-800"
+                >
+                  Remove Mapping
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-gray-500">No entity mappings configured</p>
+        )}
+      </div>
+
+      {/* Form Actions */}
+      <div className="flex justify-end space-x-3">
+        <Button type="button" onClick={onCancel} variant="secondary">
+          Cancel
+        </Button>
+        <Button type="submit" variant="primary" disabled={loading}>
+          {loading ? 'Saving...' : 'Save Configuration'}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default ConnectionConfigForm

package/management-ui/src/components/connections/ConnectionHealthMonitor.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react'
+import { useSocket } from '../../hooks/useSocket'
+import StatusBadge from '../StatusBadge'
+import api from '../../services/api'
+
+const ConnectionHealthMonitor = ({ connectionId, compact = false }) => {
+  const socket = useSocket()
+  const [health, setHealth] = useState({
+    status: 'unknown',
+    lastCheck: null,
+    uptime: 0,
+    latency: null,
+    errorRate: 0,
+    apiCalls: {
+      total: 0,
+      successful: 0,
+      failed: 0
+    }
+  })
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Fetch initial health data
+    fetchHealthData()
+
+    // Subscribe to real-time health updates
+    if (socket) {
+      socket.on(`connection-health-${connectionId}`, handleHealthUpdate)
+      socket.emit('subscribe', { topics: [`connection-health-${connectionId}`] })
+    }
+
+    // Set up periodic health checks
+    const interval = setInterval(fetchHealthData, 60000) // Check every minute
+
+    return () => {
+      if (socket) {
+        socket.off(`connection-health-${connectionId}`, handleHealthUpdate)
+        socket.emit('unsubscribe', { topics: [`connection-health-${connectionId}`] })
+      }
+      clearInterval(interval)
+    }
+  }, [connectionId, socket])
+
+  const fetchHealthData = async () => {
+    try {
+      const response = await api.get(`/api/connections/${connectionId}/health`)
+      setHealth(response.data)
+      setLoading(false)
+    } catch (error) {
+      console.error('Failed to fetch health data:', error)
+      setHealth(prev => ({ ...prev, status: 'error' }))
+      setLoading(false)
+    }
+  }
+
+  const handleHealthUpdate = (data) => {
+    setHealth(prev => ({
+      ...prev,
+      ...data,
+      lastCheck: new Date().toISOString()
+    }))
+  }
+
+  const getHealthStatus = () => {
+    if (health.status === 'healthy' && health.errorRate < 5) {
+      return { color: 'success', text: 'Healthy' }
+    } else if (health.status === 'healthy' && health.errorRate < 20) {
+      return { color: 'warning', text: 'Degraded' }
+    } else if (health.status === 'error' || health.errorRate >= 20) {
+      return { color: 'error', text: 'Unhealthy' }
+    }
+    return { color: 'default', text: 'Unknown' }
+  }
+
+  const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    
+    if (days > 0) {
+      return `${days}d ${hours}h`
+    } else if (hours > 0) {
+      return `${hours}h ${minutes}m`
+    }
+    return `${minutes}m`
+  }
+
+  const healthStatus = getHealthStatus()
+
+  if (loading) {
+    return (
+      <div className="animate-pulse">
+        <div className="h-4 bg-gray-200 rounded w-24"></div>
+      </div>
+    )
+  }
+
+  if (compact) {
+    return (
+      <div className="flex items-center space-x-2">
+        <StatusBadge status={healthStatus.color} text={healthStatus.text} />
+        {health.latency && (
+          <span className="text-xs text-gray-500">{health.latency}ms</span>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-gray-900">Connection Health</h3>
+        <StatusBadge status={healthStatus.color} text={healthStatus.text} />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <p className="text-sm text-gray-500">Uptime</p>
+          <p className="text-lg font-medium text-gray-900">
+            {formatUptime(health.uptime)}
+          </p>
+        </div>
+
+        <div>
+          <p className="text-sm text-gray-500">Response Time</p>
+          <p className="text-lg font-medium text-gray-900">
+            {health.latency ? `${health.latency}ms` : 'N/A'}
+          </p>
+        </div>
+
+        <div>
+          <p className="text-sm text-gray-500">Success Rate</p>
+          <p className="text-lg font-medium text-gray-900">
+            {health.apiCalls.total > 0
+              ? `${Math.round((health.apiCalls.successful / health.apiCalls.total) * 100)}%`
+              : 'N/A'}
+          </p>
+        </div>
+
+        <div>
+          <p className="text-sm text-gray-500">Total API Calls</p>
+          <p className="text-lg font-medium text-gray-900">
+            {health.apiCalls.total.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {health.apiCalls.failed > 0 && (
+        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-800">
+            {health.apiCalls.failed} failed API calls in the last 24 hours
+          </p>
+        </div>
+      )}
+
+      {health.lastCheck && (
+        <p className="mt-4 text-xs text-gray-500">
+          Last checked: {new Date(health.lastCheck).toLocaleTimeString()}
+        </p>
+      )}
+
+      <div className="mt-6 pt-4 border-t border-gray-200">
+        <h4 className="text-sm font-semibold text-gray-900 mb-3">Recent Activity</h4>
+        
+        <div className="space-y-2">
+          {health.recentEvents?.map((event, index) => (
+            <div key={index} className="flex items-center justify-between text-sm">
+              <span className="text-gray-600">{event.type}</span>
+              <span className="text-gray-500 text-xs">
+                {new Date(event.timestamp).toLocaleTimeString()}
+              </span>
+            </div>
+          )) || (
+            <p className="text-sm text-gray-500">No recent activity</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConnectionHealthMonitor