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

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

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

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

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

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