@friggframework/devtools 2.0.0-next.29 → 2.0.0-next.30

package/management-ui/src/pages/Dashboard.jsx

@@ -0,0 +1,311 @@
+import React, { useState, useEffect } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+import { useSocket } from '../hooks/useSocket'
+
+const Dashboard = () => {
+  const { status, startFrigg, stopFrigg, restartFrigg, integrations, users, connections, getMetrics, getLogs } = useFrigg()
+  const { on } = useSocket()
+  const [logs, setLogs] = useState([])
+  const [metrics, setMetrics] = useState(null)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [startOptions, setStartOptions] = useState({
+    stage: 'dev',
+    verbose: false
+  })
+
+  // Socket listeners for real-time updates
+  useEffect(() => {
+    const unsubscribeLogs = on('frigg:logs', (logData) => {
+      setLogs(logData)
+    })
+
+    const unsubscribeLog = on('frigg:log', (logEntry) => {
+      setLogs(prev => [...prev.slice(-99), logEntry]) // Keep last 100 logs
+    })
+
+    // Fetch initial logs and metrics
+    const fetchData = async () => {
+      try {
+        if (typeof getLogs === 'function') {
+          const logsData = await getLogs(50)
+          setLogs(logsData)
+        }
+        
+        if (typeof getMetrics === 'function') {
+          const metricsData = await getMetrics()
+          setMetrics(metricsData)
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    }
+
+    fetchData()
+
+    // Update metrics periodically when running
+    const metricsInterval = setInterval(() => {
+      if (status === 'running' && typeof getMetrics === 'function') {
+        getMetrics().then(setMetrics).catch(console.error)
+      }
+    }, 5000)
+
+    return () => {
+      unsubscribeLogs && unsubscribeLogs()
+      unsubscribeLog && unsubscribeLog()
+      clearInterval(metricsInterval)
+    }
+  }, [on, getLogs, getMetrics, status])
+
+  const handleStart = async () => {
+    try {
+      await startFrigg(startOptions)
+    } catch (error) {
+      console.error('Failed to start Frigg:', error)
+    }
+  }
+
+  const handleStop = async (force = false) => {
+    try {
+      await stopFrigg(force)
+    } catch (error) {
+      console.error('Failed to stop Frigg:', error)
+    }
+  }
+
+  const handleRestart = async () => {
+    try {
+      await restartFrigg(startOptions)
+    } catch (error) {
+      console.error('Failed to restart Frigg:', error)
+    }
+  }
+
+  const stats = [
+    { name: 'Integrations', value: integrations.length, icon: '🔌' },
+    { name: 'Test Users', value: users.length, icon: '👤' },
+    { name: 'Active Connections', value: connections.filter(c => c.active).length, icon: '🔗' },
+    { name: 'Total Entities', value: connections.reduce((sum, c) => sum + (c.entities?.length || 0), 0), icon: '📊' },
+  ]
+
+  const formatUptime = (uptime) => {
+    if (!uptime) return 'N/A'
+    const seconds = Math.floor(uptime / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    
+    if (hours > 0) return `${hours}h ${minutes % 60}m`
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+    return `${seconds}s`
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h2 className="text-3xl font-bold text-foreground">Dashboard</h2>
+        <p className="mt-2 text-muted-foreground">Manage your Frigg development environment</p>
+      </div>
+
+      {/* Control Panel */}
+      <div className="bg-card shadow rounded-lg p-6 mb-8 border border-border">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium text-card-foreground">Frigg Server Control</h3>
+          <button
+            onClick={() => setShowAdvanced(!showAdvanced)}
+            className="text-sm text-primary hover:text-primary/80"
+          >
+            {showAdvanced ? 'Hide' : 'Show'} Advanced Options
+          </button>
+        </div>
+        
+        {/* Advanced Options */}
+        {showAdvanced && (
+          <div className="mb-6 p-4 bg-muted/50 rounded-md">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">
+                  Stage
+                </label>
+                <select
+                  value={startOptions.stage}
+                  onChange={(e) => setStartOptions(prev => ({ ...prev, stage: e.target.value }))}
+                  className="w-full px-3 py-2 border border-input bg-background text-foreground rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  <option value="dev">Development</option>
+                  <option value="staging">Staging</option>
+                  <option value="prod">Production</option>
+                </select>
+              </div>
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="verbose"
+                  checked={startOptions.verbose}
+                  onChange={(e) => setStartOptions(prev => ({ ...prev, verbose: e.target.checked }))}
+                  className="mr-2"
+                />
+                <label htmlFor="verbose" className="text-sm font-medium text-foreground">
+                  Verbose logging
+                </label>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Status Display */}
+        <div className="mb-4 p-4 bg-muted/50 rounded-md">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <span className="text-muted-foreground">Status:</span>
+              <span className={`ml-2 font-medium ${
+                status === 'running' ? 'text-green-600' : 
+                status === 'stopped' ? 'text-red-600' : 
+                'text-yellow-600'
+              }`}>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
+              </span>
+            </div>
+            {metrics && (
+              <>
+                <div>
+                  <span className="text-muted-foreground">PID:</span>
+                  <span className="ml-2 font-medium">{metrics.pid || 'N/A'}</span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">Uptime:</span>
+                  <span className="ml-2 font-medium">{formatUptime(metrics.uptime)}</span>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">Stage:</span>
+                  <span className="ml-2 font-medium">{startOptions.stage}</span>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Control Buttons */}
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={handleStart}
+            disabled={status === 'running' || status === 'starting'}
+            className={`px-6 py-3 rounded-md font-medium transition-colors ${
+              status === 'running' || status === 'starting'
+                ? 'bg-muted text-muted-foreground cursor-not-allowed'
+                : 'bg-green-600 text-white hover:bg-green-700'
+            }`}
+          >
+            ▶️ Start
+          </button>
+          
+          <button
+            onClick={() => handleStop()}
+            disabled={status === 'stopped' || status === 'stopping'}
+            className={`px-6 py-3 rounded-md font-medium transition-colors ${
+              status === 'stopped' || status === 'stopping'
+                ? 'bg-muted text-muted-foreground cursor-not-allowed'
+                : 'bg-red-600 text-white hover:bg-red-700'
+            }`}
+          >
+            ⏹️ Stop
+          </button>
+
+          <button
+            onClick={handleRestart}
+            disabled={status === 'starting' || status === 'stopping'}
+            className={`px-6 py-3 rounded-md font-medium transition-colors ${
+              status === 'starting' || status === 'stopping'
+                ? 'bg-muted text-muted-foreground cursor-not-allowed'
+                : 'bg-blue-600 text-white hover:bg-blue-700'
+            }`}
+          >
+            🔄 Restart
+          </button>
+
+          {(status === 'running' || status === 'stopping') && (
+            <button
+              onClick={() => handleStop(true)}
+              className="px-4 py-3 rounded-md font-medium bg-orange-600 text-white hover:bg-orange-700 transition-colors"
+            >
+              ⚠️ Force Stop
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat) => (
+          <div key={stat.name} className="bg-card shadow rounded-lg p-6 border border-border">
+            <div className="flex items-center">
+              <span className="text-3xl mr-3">{stat.icon}</span>
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">{stat.name}</p>
+                <p className="text-2xl font-bold text-card-foreground">{stat.value}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Real-time Logs */}
+      <div className="bg-card shadow rounded-lg p-6 mb-8 border border-border">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium text-card-foreground">Real-time Logs</h3>
+          <button
+            onClick={() => setLogs([])}
+            className="text-sm text-red-600 hover:text-red-800"
+          >
+            Clear Logs
+          </button>
+        </div>
+        <div className="bg-muted/30 dark:bg-gray-900 text-foreground dark:text-gray-100 p-4 rounded-md h-64 overflow-y-auto font-mono text-sm border border-border">
+          {logs.length === 0 ? (
+            <div className="text-muted-foreground text-center py-8">
+              No logs available. Start Frigg to see real-time logs.
+            </div>
+          ) : (
+            logs.map((log, index) => (
+              <div key={index} className="mb-1 flex">
+                <span className="text-muted-foreground mr-2 w-20 flex-shrink-0">
+                  {new Date(log.timestamp).toLocaleTimeString()}
+                </span>
+                <span className={`mr-2 w-12 flex-shrink-0 ${
+                  log.type === 'stderr' ? 'text-red-400' : 
+                  log.type === 'system' ? 'text-blue-400' : 
+                  'text-green-400'
+                }`}>
+                  [{log.type.toUpperCase()}]
+                </span>
+                <span className="flex-1 break-all">{log.message}</span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="bg-card shadow rounded-lg p-6 border border-border">
+        <h3 className="text-lg font-medium text-card-foreground mb-4">Recent Activity</h3>
+        <div className="space-y-3">
+          <div className="flex items-center text-sm">
+            <span className="w-2 h-2 bg-green-400 rounded-full mr-3"></span>
+            <span className="text-foreground">Frigg server started</span>
+            <span className="ml-auto text-muted-foreground">2 minutes ago</span>
+          </div>
+          <div className="flex items-center text-sm">
+            <span className="w-2 h-2 bg-blue-400 rounded-full mr-3"></span>
+            <span className="text-foreground">Integration 'Slack' installed</span>
+            <span className="ml-auto text-muted-foreground">15 minutes ago</span>
+          </div>
+          <div className="flex items-center text-sm">
+            <span className="w-2 h-2 bg-purple-400 rounded-full mr-3"></span>
+            <span className="text-foreground">Test user 'john.doe' created</span>
+            <span className="ml-auto text-muted-foreground">1 hour ago</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard

package/management-ui/src/pages/Environment.jsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react'
+import { useFrigg } from '../hooks/useFrigg'
+import { useSocket } from '../hooks/useSocket'
+import api from '../services/api'
+import EnvironmentEditor from '../components/EnvironmentEditor'
+import EnvironmentSchema from '../components/EnvironmentSchema'
+import EnvironmentCompare from '../components/EnvironmentCompare'
+import EnvironmentImportExport from '../components/EnvironmentImportExport'
+import EnvironmentSecurity from '../components/EnvironmentSecurity'
+
+const Environment = () => {
+  const { envVariables, updateEnvVariable, refreshData } = useFrigg()
+  const { on } = useSocket()
+  const [activeTab, setActiveTab] = useState('editor') // editor, schema, compare, import-export, security
+  const [selectedEnvironment, setSelectedEnvironment] = useState('local')
+  const [variables, setVariables] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [notification, setNotification] = useState(null)
+
+  // Load environment variables
+  useEffect(() => {
+    loadEnvironmentVariables()
+  }, [selectedEnvironment])
+
+  // Listen for real-time updates
+  useEffect(() => {
+    const unsubscribe = on('env-update', (data) => {
+      if (data.environment === selectedEnvironment) {
+        loadEnvironmentVariables()
+        showNotification('Environment variables updated', 'success')
+      }
+    })
+    return unsubscribe
+  }, [on, selectedEnvironment])
+
+  const loadEnvironmentVariables = async () => {
+    setLoading(true)
+    try {
+      const response = await api.get(`/api/environment/variables/${selectedEnvironment}`)
+      setVariables(response.data.variables || [])
+    } catch (error) {
+      console.error('Error loading variables:', error)
+      showNotification('Failed to load environment variables', 'error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSaveVariables = async (updatedVariables) => {
+    try {
+      await api.put(`/api/environment/variables/${selectedEnvironment}`, {
+        variables: updatedVariables
+      })
+      await loadEnvironmentVariables()
+      showNotification('Environment variables saved successfully', 'success')
+    } catch (error) {
+      console.error('Error saving variables:', error)
+      showNotification('Failed to save environment variables', 'error')
+      throw error
+    }
+  }
+
+  const handleVariableUpdate = async (key, value) => {
+    try {
+      await api.post('/api/environment', { key, value })
+      await loadEnvironmentVariables()
+      showNotification(`Variable ${key} updated`, 'success')
+    } catch (error) {
+      console.error('Error updating variable:', error)
+      showNotification('Failed to update variable', 'error')
+    }
+  }
+
+  const handleVariableDelete = async (key) => {
+    if (!window.confirm(`Are you sure you want to delete ${key}?`)) return
+    
+    try {
+      await api.delete(`/api/environment/${key}`)
+      await loadEnvironmentVariables()
+      showNotification(`Variable ${key} deleted`, 'success')
+    } catch (error) {
+      console.error('Error deleting variable:', error)
+      showNotification('Failed to delete variable', 'error')
+    }
+  }
+
+  const showNotification = (message, type = 'info') => {
+    setNotification({ message, type })
+    setTimeout(() => setNotification(null), 5000)
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-3xl font-bold text-gray-900">Environment Variables</h2>
+            <p className="mt-2 text-gray-600">Manage environment variables across different environments</p>
+          </div>
+          
+          {/* Environment Selector */}
+          <div className="flex items-center space-x-2">
+            <label className="text-sm font-medium text-gray-700">Environment:</label>
+            <select
+              value={selectedEnvironment}
+              onChange={(e) => setSelectedEnvironment(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
+            >
+              <option value="local">Local</option>
+              <option value="staging">Staging</option>
+              <option value="production">Production</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Notification */}
+      {notification && (
+        <div className={`mb-4 p-4 rounded-md ${
+          notification.type === 'success' ? 'bg-green-50 text-green-800' :
+          notification.type === 'error' ? 'bg-red-50 text-red-800' :
+          'bg-blue-50 text-blue-800'
+        }`}>
+          <div className="flex">
+            <div className="flex-shrink-0">
+              {notification.type === 'success' && (
+                <svg className="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                </svg>
+              )}
+              {notification.type === 'error' && (
+                <svg className="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              )}
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium">{notification.message}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="mb-6">
+        <div className="border-b border-gray-200">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab('editor')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'editor'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Editor
+            </button>
+            <button
+              onClick={() => setActiveTab('schema')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'schema'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Schema & Validation
+            </button>
+            <button
+              onClick={() => setActiveTab('compare')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'compare'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Compare & Sync
+            </button>
+            <button
+              onClick={() => setActiveTab('import-export')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'import-export'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Import/Export
+            </button>
+            <button
+              onClick={() => setActiveTab('security')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'security'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              Security
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-6">
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="text-gray-500">Loading...</div>
+          </div>
+        ) : (
+          <>
+            {/* Editor Tab */}
+            {activeTab === 'editor' && (
+              <EnvironmentEditor
+                variables={variables}
+                environment={selectedEnvironment}
+                onSave={handleSaveVariables}
+                onVariableUpdate={handleVariableUpdate}
+                onVariableDelete={handleVariableDelete}
+                readOnly={selectedEnvironment === 'production'}
+              />
+            )}
+
+            {/* Schema Tab */}
+            {activeTab === 'schema' && (
+              <EnvironmentSchema
+                variables={variables}
+                environment={selectedEnvironment}
+                onSchemaUpdate={(schema) => {
+                  showNotification('Schema updated', 'success')
+                }}
+              />
+            )}
+
+            {/* Compare Tab */}
+            {activeTab === 'compare' && (
+              <EnvironmentCompare
+                onSync={(result) => {
+                  showNotification(
+                    `Synced ${result.count} variables from ${result.source} to ${result.target}`,
+                    'success'
+                  )
+                  if (result.target === selectedEnvironment) {
+                    loadEnvironmentVariables()
+                  }
+                }}
+              />
+            )}
+
+            {/* Import/Export Tab */}
+            {activeTab === 'import-export' && (
+              <EnvironmentImportExport
+                environment={selectedEnvironment}
+                onImport={(result) => {
+                  showNotification(
+                    `Imported ${result.imported} variables`,
+                    'success'
+                  )
+                  loadEnvironmentVariables()
+                }}
+                onExport={(result) => {
+                  showNotification(
+                    `Exported variables as ${result.format.toUpperCase()}`,
+                    'success'
+                  )
+                }}
+              />
+            )}
+
+            {/* Security Tab */}
+            {activeTab === 'security' && (
+              <EnvironmentSecurity
+                environment={selectedEnvironment}
+              />
+            )}
+          </>
+        )}
+      </div>
+
+      {/* AWS Parameter Store Status (for production) */}
+      {selectedEnvironment === 'production' && (
+        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex">
+              <svg className="h-5 w-5 text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <div className="text-sm text-yellow-700">
+                <p className="font-medium">Production Environment</p>
+                <p>This environment can sync with AWS Parameter Store for secure secret management.</p>
+              </div>
+            </div>
+            <button
+              onClick={async () => {
+                try {
+                  await api.post('/api/environment/sync/aws-parameter-store', {
+                    environment: 'production'
+                  })
+                  showNotification('Synced with AWS Parameter Store', 'success')
+                } catch (error) {
+                  showNotification('Failed to sync with AWS', 'error')
+                }
+              }}
+              className="px-3 py-1 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
+            >
+              Sync with AWS
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Environment