@friggframework/devtools 2.0.0-next.60 → 2.0.0-next.62

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

@@ -1,362 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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