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

package/management-ui/src/components/index.js

@@ -0,0 +1,21 @@
+// Layout components
+export { default as Layout } from './Layout'
+export { default as ErrorBoundary } from './ErrorBoundary'
+
+// UI components
+export { Card, CardHeader, CardContent, CardTitle, CardDescription } from './Card'
+export { Button } from './Button'
+export { default as StatusBadge } from './StatusBadge'
+export { default as LoadingSpinner } from './LoadingSpinner'
+export { default as IntegrationCard } from './IntegrationCard'
+export { default as UserContextSwitcher } from './UserContextSwitcher'
+
+// Connection components
+export * from './connections'
+
+// Environment components
+export { default as EnvironmentEditor } from './EnvironmentEditor'
+export { default as EnvironmentSchema } from './EnvironmentSchema'
+export { default as EnvironmentCompare } from './EnvironmentCompare'
+export { default as EnvironmentImportExport } from './EnvironmentImportExport'
+export { default as EnvironmentSecurity } from './EnvironmentSecurity'

package/management-ui/src/components/monitoring/APIGatewayMetrics.jsx

@@ -0,0 +1,222 @@
+import React from 'react'
+import { Card } from '../Card'
+import { StatusBadge } from '../StatusBadge'
+
+/**
+ * API Gateway Metrics Component
+ * Displays detailed metrics for AWS API Gateway endpoints
+ */
+function APIGatewayMetrics({ metrics }) {
+    if (!metrics || metrics.error) {
+        return (
+            <Card>
+                <div className="text-center py-8 text-gray-500">
+                    {metrics?.error || 'No API Gateway metrics available'}
+                </div>
+            </Card>
+        )
+    }
+
+    const { apis = [] } = metrics
+
+    const getStatusFromMetrics = (api) => {
+        if (api.metrics?.['5xxerror'] > 0) return 'error'
+        if (api.metrics?.['4xxerror'] > 0) return 'warning'
+        if (api.metrics?.count > 0) return 'success'
+        return 'inactive'
+    }
+
+    const formatLatency = (latency) => {
+        if (!latency) return '0ms'
+        return `${Math.round(latency)}ms`
+    }
+
+    return (
+        <div className="space-y-4">
+            <Card>
+                <h3 className="text-lg font-semibold mb-4">
+                    API Gateways ({apis.length})
+                </h3>
+                
+                {apis.length === 0 ? (
+                    <p className="text-gray-500">No API Gateways found for this service</p>
+                ) : (
+                    <div className="space-y-4">
+                        {apis.map((api, index) => (
+                            <div key={index} className="border rounded-lg p-4">
+                                <div className="flex items-start justify-between mb-2">
+                                    <div>
+                                        <h4 className="font-semibold">{api.apiName}</h4>
+                                        <div className="text-sm text-gray-600">
+                                            <span>ID: {api.apiId}</span>
+                                            {api.description && (
+                                                <span className="ml-4">{api.description}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <StatusBadge 
+                                        status={getStatusFromMetrics(api)}
+                                        text={getStatusFromMetrics(api)}
+                                    />
+                                </div>
+
+                                {api.metrics && (
+                                    <div className="grid grid-cols-2 md:grid-cols-6 gap-4 mt-4">
+                                        <div>
+                                            <div className="text-sm text-gray-600">Total Requests</div>
+                                            <div className="text-xl font-mono">
+                                                {api.metrics.count || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">4XX Errors</div>
+                                            <div className="text-xl font-mono text-yellow-600">
+                                                {api.metrics['4xxerror'] || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">5XX Errors</div>
+                                            <div className="text-xl font-mono text-red-600">
+                                                {api.metrics['5xxerror'] || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Error Rate</div>
+                                            <div className="text-xl font-mono">
+                                                {api.metrics.errorRate?.toFixed(2) || 0}%
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Avg Latency</div>
+                                            <div className="text-xl font-mono">
+                                                {formatLatency(api.metrics.latency)}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Integration</div>
+                                            <div className="text-xl font-mono">
+                                                {formatLatency(api.metrics.integrationlatency)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {api.metrics && (api.metrics['5xxerror'] > 0 || api.metrics.errorRate > 5) && (
+                                    <div className="mt-3 p-3 bg-red-50 rounded text-sm">
+                                        {api.metrics['5xxerror'] > 0 && (
+                                            <div className="text-red-700">
+                                                ⚠️ Server errors detected. Check Lambda function logs and API Gateway execution logs.
+                                            </div>
+                                        )}
+                                        {api.metrics.errorRate > 5 && (
+                                            <div className="text-yellow-700">
+                                                ⚠️ High error rate detected ({api.metrics.errorRate.toFixed(2)}%). Review recent deployments.
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+
+                                <div className="text-xs text-gray-500 mt-2">
+                                    Created: {new Date(api.createdDate).toLocaleString()}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </Card>
+
+            {/* Performance Analysis */}
+            {apis.length > 0 && apis.some(api => api.metrics?.count > 0) && (
+                <Card>
+                    <h3 className="text-lg font-semibold mb-4">Performance Analysis</h3>
+                    <div className="space-y-4">
+                        {/* Latency Distribution */}
+                        <div>
+                            <h4 className="font-medium mb-2">Latency Breakdown</h4>
+                            <div className="space-y-2">
+                                {apis.filter(api => api.metrics?.latency > 0).map((api, index) => {
+                                    const totalLatency = api.metrics.latency || 0
+                                    const integrationLatency = api.metrics.integrationlatency || 0
+                                    const gatewayLatency = totalLatency - integrationLatency
+                                    
+                                    return (
+                                        <div key={index} className="flex items-center gap-2">
+                                            <div className="w-32 text-sm truncate">{api.apiName}</div>
+                                            <div className="flex-1 flex h-6 rounded overflow-hidden">
+                                                <div 
+                                                    className="bg-blue-500 flex items-center justify-center text-xs text-white"
+                                                    style={{ width: `${(gatewayLatency / totalLatency) * 100}%` }}
+                                                >
+                                                    {formatLatency(gatewayLatency)}
+                                                </div>
+                                                <div 
+                                                    className="bg-green-500 flex items-center justify-center text-xs text-white"
+                                                    style={{ width: `${(integrationLatency / totalLatency) * 100}%` }}
+                                                >
+                                                    {formatLatency(integrationLatency)}
+                                                </div>
+                                            </div>
+                                            <div className="text-sm font-mono w-20 text-right">
+                                                {formatLatency(totalLatency)}
+                                            </div>
+                                        </div>
+                                    )
+                                })}
+                            </div>
+                            <div className="flex gap-4 mt-2 text-xs">
+                                <div className="flex items-center gap-1">
+                                    <div className="w-3 h-3 bg-blue-500 rounded"></div>
+                                    <span>Gateway Overhead</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <div className="w-3 h-3 bg-green-500 rounded"></div>
+                                    <span>Integration (Lambda)</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Summary Statistics */}
+                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4 border-t">
+                            <div>
+                                <div className="text-sm text-gray-600">Total Requests</div>
+                                <div className="text-2xl font-mono">
+                                    {apis.reduce((sum, api) => sum + (api.metrics?.count || 0), 0)}
+                                </div>
+                            </div>
+                            <div>
+                                <div className="text-sm text-gray-600">Total Errors</div>
+                                <div className="text-2xl font-mono text-red-600">
+                                    {apis.reduce((sum, api) => sum + (api.metrics?.['4xxerror'] || 0) + (api.metrics?.['5xxerror'] || 0), 0)}
+                                </div>
+                            </div>
+                            <div>
+                                <div className="text-sm text-gray-600">Avg Error Rate</div>
+                                <div className="text-2xl font-mono">
+                                    {(() => {
+                                        const validApis = apis.filter(api => api.metrics?.count > 0)
+                                        if (validApis.length === 0) return '0%'
+                                        const avgErrorRate = validApis.reduce((sum, api) => sum + (api.metrics.errorRate || 0), 0) / validApis.length
+                                        return `${avgErrorRate.toFixed(2)}%`
+                                    })()}
+                                </div>
+                            </div>
+                            <div>
+                                <div className="text-sm text-gray-600">Avg Latency</div>
+                                <div className="text-2xl font-mono">
+                                    {(() => {
+                                        const validApis = apis.filter(api => api.metrics?.latency > 0)
+                                        if (validApis.length === 0) return '0ms'
+                                        const avgLatency = validApis.reduce((sum, api) => sum + api.metrics.latency, 0) / validApis.length
+                                        return formatLatency(avgLatency)
+                                    })()}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+            )}
+        </div>
+    )
+}
+
+export default APIGatewayMetrics

package/management-ui/src/components/monitoring/LambdaMetrics.jsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { Card } from '../Card'
+import { StatusBadge } from '../StatusBadge'
+
+/**
+ * Lambda Functions Metrics Component
+ * Displays detailed metrics for AWS Lambda functions
+ */
+function LambdaMetrics({ metrics }) {
+    if (!metrics || metrics.error) {
+        return (
+            <Card>
+                <div className="text-center py-8 text-gray-500">
+                    {metrics?.error || 'No Lambda metrics available'}
+                </div>
+            </Card>
+        )
+    }
+
+    const { functions = [] } = metrics
+
+    const getStatusFromMetrics = (fn) => {
+        if (fn.metrics?.errors > 0) return 'error'
+        if (fn.metrics?.throttles > 0) return 'warning'
+        if (fn.metrics?.invocations > 0) return 'success'
+        return 'inactive'
+    }
+
+    const formatDuration = (duration) => {
+        if (!duration) return '0ms'
+        if (duration < 1000) return `${Math.round(duration)}ms`
+        return `${(duration / 1000).toFixed(2)}s`
+    }
+
+    return (
+        <div className="space-y-4">
+            <Card>
+                <h3 className="text-lg font-semibold mb-4">
+                    Lambda Functions ({functions.length})
+                </h3>
+                
+                {functions.length === 0 ? (
+                    <p className="text-gray-500">No Lambda functions found for this service</p>
+                ) : (
+                    <div className="space-y-4">
+                        {functions.map((fn, index) => (
+                            <div key={index} className="border rounded-lg p-4">
+                                <div className="flex items-start justify-between mb-2">
+                                    <div>
+                                        <h4 className="font-semibold">{fn.functionName}</h4>
+                                        <div className="text-sm text-gray-600 space-x-4">
+                                            <span>Runtime: {fn.runtime}</span>
+                                            <span>Memory: {fn.memorySize}MB</span>
+                                            <span>Timeout: {fn.timeout}s</span>
+                                        </div>
+                                    </div>
+                                    <StatusBadge 
+                                        status={getStatusFromMetrics(fn)}
+                                        text={getStatusFromMetrics(fn)}
+                                    />
+                                </div>
+
+                                {fn.metrics && (
+                                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-4">
+                                        <div>
+                                            <div className="text-sm text-gray-600">Invocations</div>
+                                            <div className="text-xl font-mono">
+                                                {fn.metrics.invocations || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Errors</div>
+                                            <div className="text-xl font-mono text-red-600">
+                                                {fn.metrics.errors || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Avg Duration</div>
+                                            <div className="text-xl font-mono">
+                                                {formatDuration(fn.metrics.duration)}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Throttles</div>
+                                            <div className="text-xl font-mono text-yellow-600">
+                                                {fn.metrics.throttles || 0}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <div className="text-sm text-gray-600">Concurrent</div>
+                                            <div className="text-xl font-mono">
+                                                {Math.round(fn.metrics.concurrentexecutions || 0)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {fn.metrics && (fn.metrics.errors > 0 || fn.metrics.throttles > 0) && (
+                                    <div className="mt-3 p-3 bg-red-50 rounded text-sm">
+                                        {fn.metrics.errors > 0 && (
+                                            <div className="text-red-700">
+                                                ⚠️ This function has errors. Check CloudWatch logs for details.
+                                            </div>
+                                        )}
+                                        {fn.metrics.throttles > 0 && (
+                                            <div className="text-yellow-700">
+                                                ⚠️ This function is being throttled. Consider increasing reserved concurrency.
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+
+                                <div className="text-xs text-gray-500 mt-2">
+                                    Last modified: {new Date(fn.lastModified).toLocaleString()}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </Card>
+
+            {/* Summary Statistics */}
+            {functions.length > 0 && (
+                <Card>
+                    <h3 className="text-lg font-semibold mb-4">Summary Statistics</h3>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <div>
+                            <div className="text-sm text-gray-600">Total Invocations</div>
+                            <div className="text-2xl font-mono">
+                                {functions.reduce((sum, fn) => sum + (fn.metrics?.invocations || 0), 0)}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="text-sm text-gray-600">Total Errors</div>
+                            <div className="text-2xl font-mono text-red-600">
+                                {functions.reduce((sum, fn) => sum + (fn.metrics?.errors || 0), 0)}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="text-sm text-gray-600">Error Rate</div>
+                            <div className="text-2xl font-mono">
+                                {(() => {
+                                    const totalInvocations = functions.reduce((sum, fn) => sum + (fn.metrics?.invocations || 0), 0)
+                                    const totalErrors = functions.reduce((sum, fn) => sum + (fn.metrics?.errors || 0), 0)
+                                    return totalInvocations > 0 
+                                        ? `${((totalErrors / totalInvocations) * 100).toFixed(2)}%`
+                                        : '0%'
+                                })()}
+                            </div>
+                        </div>
+                        <div>
+                            <div className="text-sm text-gray-600">Avg Duration</div>
+                            <div className="text-2xl font-mono">
+                                {(() => {
+                                    const validFunctions = functions.filter(fn => fn.metrics?.duration > 0)
+                                    if (validFunctions.length === 0) return '0ms'
+                                    const avgDuration = validFunctions.reduce((sum, fn) => sum + fn.metrics.duration, 0) / validFunctions.length
+                                    return formatDuration(avgDuration)
+                                })()}
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+            )}
+        </div>
+    )
+}
+
+export default LambdaMetrics

package/management-ui/src/components/monitoring/MetricsChart.jsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { Card } from '../Card'
+
+/**
+ * Metrics Charts Component
+ * Displays visual charts for metrics data
+ * Note: This is a placeholder for future chart implementation
+ */
+function MetricsChart({ metrics }) {
+    if (!metrics) {
+        return (
+            <Card>
+                <div className="text-center py-8 text-gray-500">
+                    No metrics data available for charting
+                </div>
+            </Card>
+        )
+    }
+
+    // Simple bar chart implementation using CSS
+    const renderSimpleBarChart = (data, title, color = 'blue') => {
+        if (!data || data.length === 0) return null
+        
+        const maxValue = Math.max(...data.map(d => d.value))
+        
+        return (
+            <div className="mb-6">
+                <h4 className="font-medium mb-3">{title}</h4>
+                <div className="space-y-2">
+                    {data.map((item, index) => (
+                        <div key={index} className="flex items-center gap-3">
+                            <div className="w-32 text-sm truncate">{item.label}</div>
+                            <div className="flex-1 flex items-center">
+                                <div className="flex-1 bg-gray-200 rounded h-6 relative">
+                                    <div
+                                        className={`bg-${color}-500 h-full rounded transition-all duration-300`}
+                                        style={{ width: `${(item.value / maxValue) * 100}%` }}
+                                    />
+                                </div>
+                                <span className="ml-2 text-sm font-mono w-16 text-right">
+                                    {item.value}
+                                </span>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    // Prepare chart data
+    const lambdaInvocationsData = metrics.lambda?.functions?.map(fn => ({
+        label: fn.functionName.split('-').pop() || fn.functionName,
+        value: fn.metrics?.invocations || 0
+    })) || []
+
+    const lambdaErrorsData = metrics.lambda?.functions?.map(fn => ({
+        label: fn.functionName.split('-').pop() || fn.functionName,
+        value: fn.metrics?.errors || 0
+    })) || []
+
+    const apiRequestsData = metrics.apiGateway?.apis?.map(api => ({
+        label: api.apiName.split('-').pop() || api.apiName,
+        value: api.metrics?.count || 0
+    })) || []
+
+    const queueMessagesData = metrics.sqs?.queues?.map(queue => ({
+        label: queue.queueName.split('-').pop() || queue.queueName,
+        value: (queue.messagesAvailable || 0) + (queue.messagesInFlight || 0)
+    })) || []
+
+    return (
+        <div className="space-y-6">
+            <Card>
+                <h3 className="text-lg font-semibold mb-4">Metrics Visualization</h3>
+                <p className="text-gray-600 mb-6">
+                    Visual representation of your Frigg application metrics. 
+                    Charts are updated in real-time as new metrics are collected.
+                </p>
+
+                {/* Lambda Invocations Chart */}
+                {lambdaInvocationsData.length > 0 && (
+                    renderSimpleBarChart(
+                        lambdaInvocationsData.filter(d => d.value > 0),
+                        'Lambda Function Invocations (Last Hour)',
+                        'blue'
+                    )
+                )}
+
+                {/* Lambda Errors Chart */}
+                {lambdaErrorsData.some(d => d.value > 0) && (
+                    renderSimpleBarChart(
+                        lambdaErrorsData.filter(d => d.value > 0),
+                        'Lambda Function Errors (Last Hour)',
+                        'red'
+                    )
+                )}
+
+                {/* API Gateway Requests Chart */}
+                {apiRequestsData.length > 0 && (
+                    renderSimpleBarChart(
+                        apiRequestsData.filter(d => d.value > 0),
+                        'API Gateway Requests (Last Hour)',
+                        'green'
+                    )
+                )}
+
+                {/* SQS Messages Chart */}
+                {queueMessagesData.length > 0 && (
+                    renderSimpleBarChart(
+                        queueMessagesData.filter(d => d.value > 0),
+                        'SQS Queue Messages',
+                        'yellow'
+                    )
+                )}
+
+                {/* Performance Comparison */}
+                {metrics.lambda?.functions?.length > 0 && (
+                    <div className="mt-8">
+                        <h4 className="font-medium mb-3">Average Duration Comparison</h4>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            {metrics.lambda.functions
+                                .filter(fn => fn.metrics?.duration > 0)
+                                .sort((a, b) => (b.metrics?.duration || 0) - (a.metrics?.duration || 0))
+                                .map((fn, index) => (
+                                    <div key={index} className="border rounded p-3">
+                                        <div className="text-sm font-medium truncate">
+                                            {fn.functionName.split('-').pop() || fn.functionName}
+                                        </div>
+                                        <div className="text-2xl font-mono">
+                                            {fn.metrics.duration < 1000
+                                                ? `${Math.round(fn.metrics.duration)}ms`
+                                                : `${(fn.metrics.duration / 1000).toFixed(2)}s`
+                                            }
+                                        </div>
+                                        <div className="text-xs text-gray-500">
+                                            {fn.metrics.invocations} invocations
+                                        </div>
+                                    </div>
+                                ))
+                            }
+                        </div>
+                    </div>
+                )}
+
+                {/* Health Score */}
+                <div className="mt-8 p-4 bg-gray-50 rounded">
+                    <h4 className="font-medium mb-2">System Health Score</h4>
+                    <div className="flex items-center gap-4">
+                        <div className="flex-1">
+                            {(() => {
+                                const totalInvocations = metrics.lambda?.functions?.reduce(
+                                    (sum, fn) => sum + (fn.metrics?.invocations || 0), 0
+                                ) || 0
+                                const totalErrors = metrics.lambda?.functions?.reduce(
+                                    (sum, fn) => sum + (fn.metrics?.errors || 0), 0
+                                ) || 0
+                                const errorRate = totalInvocations > 0 ? (totalErrors / totalInvocations) * 100 : 0
+                                const healthScore = Math.max(0, 100 - errorRate * 10)
+                                
+                                let healthColor = 'green'
+                                if (healthScore < 80) healthColor = 'yellow'
+                                if (healthScore < 60) healthColor = 'red'
+                                
+                                return (
+                                    <>
+                                        <div className="flex justify-between text-sm mb-1">
+                                            <span>Overall Health</span>
+                                            <span>{Math.round(healthScore)}%</span>
+                                        </div>
+                                        <div className="w-full bg-gray-200 rounded-full h-4">
+                                            <div
+                                                className={`bg-${healthColor}-500 h-4 rounded-full transition-all duration-300`}
+                                                style={{ width: `${healthScore}%` }}
+                                            />
+                                        </div>
+                                        <div className="text-xs text-gray-600 mt-1">
+                                            Based on error rates and response times
+                                        </div>
+                                    </>
+                                )
+                            })()}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Future Chart Integration Notice */}
+                <div className="mt-8 p-4 bg-blue-50 rounded text-sm text-blue-700">
+                    <strong>Coming Soon:</strong> Interactive time-series charts with Chart.js or D3.js 
+                    for historical trend analysis and real-time metric streaming.
+                </div>
+            </Card>
+        </div>
+    )
+}
+
+export default MetricsChart