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

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

@@ -1,393 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Card } from '../Card'
-import { Button } from '../Button'
-import { StatusBadge } from '../StatusBadge'
-import LoadingSpinner from '../LoadingSpinner'
-import { useSocket } from '../../hooks/useSocket'
-import LambdaMetrics from './LambdaMetrics'
-import APIGatewayMetrics from './APIGatewayMetrics'
-import SQSMetrics from './SQSMetrics'
-import MetricsChart from './MetricsChart'
-import './monitoring.css'
-
-/**
- * Production Monitoring Dashboard Component
- * Displays real-time metrics from AWS CloudWatch for production Frigg instances
- */
-function MonitoringDashboard() {
-    const [monitoringStatus, setMonitoringStatus] = useState({
-        initialized: false,
-        isMonitoring: false,
-        config: null
-    })
-    const [metrics, setMetrics] = useState(null)
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState(null)
-    const [selectedView, setSelectedView] = useState('overview')
-    
-    const { socket, connected } = useSocket()
-
-    // Initialize monitoring on component mount
-    useEffect(() => {
-        checkMonitoringStatus()
-    }, [])
-
-    // Subscribe to real-time metrics via WebSocket
-    useEffect(() => {
-        if (!socket || !connected) return
-
-        const handleMetrics = (data) => {
-            setMetrics(data)
-            setError(null)
-        }
-
-        const handleError = (error) => {
-            setError(error.message || 'Monitoring error occurred')
-        }
-
-        // Subscribe to monitoring events
-        socket.emit('subscribe', { topics: ['monitoring:metrics', 'monitoring:error'] })
-        
-        socket.on('broadcast', (message) => {
-            if (message.topic === 'monitoring:metrics') {
-                handleMetrics(message.data)
-            } else if (message.topic === 'monitoring:error') {
-                handleError(message.data)
-            }
-        })
-
-        return () => {
-            socket.emit('unsubscribe', { topics: ['monitoring:metrics', 'monitoring:error'] })
-            socket.off('broadcast')
-        }
-    }, [socket, connected])
-
-    const checkMonitoringStatus = async () => {
-        try {
-            const response = await fetch('/api/monitoring/status')
-            const data = await response.json()
-            setMonitoringStatus(data)
-        } catch (err) {
-            console.error('Failed to check monitoring status:', err)
-        }
-    }
-
-    const initializeMonitoring = async () => {
-        setLoading(true)
-        setError(null)
-        
-        try {
-            // Initialize with default configuration
-            const initResponse = await fetch('/api/monitoring/init', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    collectionInterval: 60000 // 1 minute
-                })
-            })
-            
-            if (!initResponse.ok) {
-                throw new Error('Failed to initialize monitoring')
-            }
-
-            // Start monitoring
-            const startResponse = await fetch('/api/monitoring/start', {
-                method: 'POST'
-            })
-            
-            if (!startResponse.ok) {
-                throw new Error('Failed to start monitoring')
-            }
-
-            await checkMonitoringStatus()
-            
-            // Force initial collection
-            await collectMetricsNow()
-        } catch (err) {
-            setError(err.message)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const stopMonitoring = async () => {
-        setLoading(true)
-        
-        try {
-            const response = await fetch('/api/monitoring/stop', {
-                method: 'POST'
-            })
-            
-            if (!response.ok) {
-                throw new Error('Failed to stop monitoring')
-            }
-
-            await checkMonitoringStatus()
-            setMetrics(null)
-        } catch (err) {
-            setError(err.message)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const collectMetricsNow = async () => {
-        setLoading(true)
-        
-        try {
-            const response = await fetch('/api/monitoring/metrics/collect', {
-                method: 'POST'
-            })
-            
-            if (!response.ok) {
-                throw new Error('Failed to collect metrics')
-            }
-
-            const result = await response.json()
-            if (result.success) {
-                setMetrics(result.data)
-            }
-        } catch (err) {
-            setError(err.message)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const renderOverview = () => {
-        if (!metrics) {
-            return (
-                <div className="text-center py-8 text-gray-500">
-                    No metrics available. Start monitoring to see data.
-                </div>
-            )
-        }
-
-        const { lambda, apiGateway, sqs } = metrics
-
-        return (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {/* Lambda Overview */}
-                <Card>
-                    <h3 className="text-lg font-semibold mb-2">Lambda Functions</h3>
-                    <div className="space-y-2">
-                        <div className="flex justify-between">
-                            <span>Total Functions:</span>
-                            <span className="font-mono">{lambda.totalFunctions || 0}</span>
-                        </div>
-                        {lambda.functions && lambda.functions.length > 0 && (
-                            <>
-                                <div className="flex justify-between">
-                                    <span>Total Invocations:</span>
-                                    <span className="font-mono">
-                                        {lambda.functions.reduce((sum, fn) => 
-                                            sum + (fn.metrics?.invocations || 0), 0
-                                        )}
-                                    </span>
-                                </div>
-                                <div className="flex justify-between">
-                                    <span>Total Errors:</span>
-                                    <span className="font-mono text-red-600">
-                                        {lambda.functions.reduce((sum, fn) => 
-                                            sum + (fn.metrics?.errors || 0), 0
-                                        )}
-                                    </span>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </Card>
-
-                {/* API Gateway Overview */}
-                <Card>
-                    <h3 className="text-lg font-semibold mb-2">API Gateway</h3>
-                    <div className="space-y-2">
-                        <div className="flex justify-between">
-                            <span>Total APIs:</span>
-                            <span className="font-mono">{apiGateway.totalApis || 0}</span>
-                        </div>
-                        {apiGateway.apis && apiGateway.apis.length > 0 && (
-                            <>
-                                <div className="flex justify-between">
-                                    <span>Total Requests:</span>
-                                    <span className="font-mono">
-                                        {apiGateway.apis.reduce((sum, api) => 
-                                            sum + (api.metrics?.count || 0), 0
-                                        )}
-                                    </span>
-                                </div>
-                                <div className="flex justify-between">
-                                    <span>Error Rate:</span>
-                                    <span className="font-mono">
-                                        {apiGateway.apis[0]?.metrics?.errorRate?.toFixed(2) || 0}%
-                                    </span>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </Card>
-
-                {/* SQS Overview */}
-                <Card>
-                    <h3 className="text-lg font-semibold mb-2">SQS Queues</h3>
-                    <div className="space-y-2">
-                        <div className="flex justify-between">
-                            <span>Total Queues:</span>
-                            <span className="font-mono">{sqs.totalQueues || 0}</span>
-                        </div>
-                        {sqs.queues && sqs.queues.length > 0 && (
-                            <>
-                                <div className="flex justify-between">
-                                    <span>Messages Available:</span>
-                                    <span className="font-mono">
-                                        {sqs.queues.reduce((sum, queue) => 
-                                            sum + (queue.messagesAvailable || 0), 0
-                                        )}
-                                    </span>
-                                </div>
-                                <div className="flex justify-between">
-                                    <span>Messages In Flight:</span>
-                                    <span className="font-mono">
-                                        {sqs.queues.reduce((sum, queue) => 
-                                            sum + (queue.messagesInFlight || 0), 0
-                                        )}
-                                    </span>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </Card>
-            </div>
-        )
-    }
-
-    return (
-        <div className="monitoring-dashboard">
-            <div className="mb-6">
-                <h2 className="text-2xl font-bold mb-2">Production Monitoring</h2>
-                <p className="text-gray-600">
-                    Monitor your production Frigg instances in real-time with AWS CloudWatch integration
-                </p>
-            </div>
-
-            {/* Status Bar */}
-            <Card className="mb-6">
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4">
-                        <StatusBadge 
-                            status={monitoringStatus.isMonitoring ? 'success' : 'inactive'}
-                            text={monitoringStatus.isMonitoring ? 'Monitoring Active' : 'Monitoring Inactive'}
-                        />
-                        {monitoringStatus.config && (
-                            <div className="text-sm text-gray-600">
-                                Region: <span className="font-mono">{monitoringStatus.config.region}</span> | 
-                                Stage: <span className="font-mono">{monitoringStatus.config.stage}</span> | 
-                                Service: <span className="font-mono">{monitoringStatus.config.serviceName}</span>
-                            </div>
-                        )}
-                    </div>
-                    <div className="flex gap-2">
-                        {!monitoringStatus.isMonitoring ? (
-                            <Button 
-                                onClick={initializeMonitoring}
-                                disabled={loading}
-                            >
-                                {loading ? <LoadingSpinner size="sm" /> : 'Start Monitoring'}
-                            </Button>
-                        ) : (
-                            <>
-                                <Button 
-                                    variant="secondary"
-                                    onClick={collectMetricsNow}
-                                    disabled={loading}
-                                >
-                                    Refresh Now
-                                </Button>
-                                <Button 
-                                    variant="secondary"
-                                    onClick={stopMonitoring}
-                                    disabled={loading}
-                                >
-                                    Stop Monitoring
-                                </Button>
-                            </>
-                        )}
-                    </div>
-                </div>
-            </Card>
-
-            {/* Error Display */}
-            {error && (
-                <Card className="mb-6 border-red-500 bg-red-50">
-                    <div className="text-red-700">
-                        <strong>Error:</strong> {error}
-                    </div>
-                </Card>
-            )}
-
-            {/* Navigation Tabs */}
-            <div className="flex gap-2 mb-6">
-                <Button
-                    variant={selectedView === 'overview' ? 'primary' : 'secondary'}
-                    onClick={() => setSelectedView('overview')}
-                >
-                    Overview
-                </Button>
-                <Button
-                    variant={selectedView === 'lambda' ? 'primary' : 'secondary'}
-                    onClick={() => setSelectedView('lambda')}
-                >
-                    Lambda Functions
-                </Button>
-                <Button
-                    variant={selectedView === 'apigateway' ? 'primary' : 'secondary'}
-                    onClick={() => setSelectedView('apigateway')}
-                >
-                    API Gateway
-                </Button>
-                <Button
-                    variant={selectedView === 'sqs' ? 'primary' : 'secondary'}
-                    onClick={() => setSelectedView('sqs')}
-                >
-                    SQS Queues
-                </Button>
-                <Button
-                    variant={selectedView === 'charts' ? 'primary' : 'secondary'}
-                    onClick={() => setSelectedView('charts')}
-                >
-                    Charts
-                </Button>
-            </div>
-
-            {/* Content Area */}
-            {loading && !metrics ? (
-                <Card>
-                    <div className="flex items-center justify-center py-8">
-                        <LoadingSpinner />
-                        <span className="ml-2">Loading metrics...</span>
-                    </div>
-                </Card>
-            ) : (
-                <>
-                    {selectedView === 'overview' && renderOverview()}
-                    {selectedView === 'lambda' && <LambdaMetrics metrics={metrics?.lambda} />}
-                    {selectedView === 'apigateway' && <APIGatewayMetrics metrics={metrics?.apiGateway} />}
-                    {selectedView === 'sqs' && <SQSMetrics metrics={metrics?.sqs} />}
-                    {selectedView === 'charts' && <MetricsChart metrics={metrics} />}
-                </>
-            )}
-
-            {/* Last Updated */}
-            {metrics && (
-                <div className="mt-4 text-sm text-gray-500 text-right">
-                    Last updated: {new Date(metrics.timestamp).toLocaleString()}
-                    {metrics.collectionDuration && (
-                        <span> (collected in {metrics.collectionDuration}ms)</span>
-                    )}
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default MonitoringDashboard

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

@@ -1,246 +0,0 @@
-import React from 'react'
-import { Card } from '../Card'
-import { StatusBadge } from '../StatusBadge'
-
-/**
- * SQS Queue Metrics Component
- * Displays detailed metrics for AWS SQS queues
- */
-function SQSMetrics({ metrics }) {
-    if (!metrics || metrics.error) {
-        return (
-            <Card>
-                <div className="text-center py-8 text-gray-500">
-                    {metrics?.error || 'No SQS metrics available'}
-                </div>
-            </Card>
-        )
-    }
-
-    const { queues = [] } = metrics
-
-    const getQueueStatus = (queue) => {
-        if (queue.error) return 'error'
-        if (queue.messagesAvailable > 100) return 'warning'
-        if (queue.messagesInFlight > 0) return 'success'
-        return 'inactive'
-    }
-
-    const formatAge = (timestamp) => {
-        if (!timestamp) return 'Unknown'
-        const age = Date.now() - parseInt(timestamp) * 1000
-        const days = Math.floor(age / (1000 * 60 * 60 * 24))
-        const hours = Math.floor((age % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-        
-        if (days > 0) return `${days}d ${hours}h`
-        if (hours > 0) return `${hours}h`
-        return 'Just created'
-    }
-
-    const formatRetentionPeriod = (seconds) => {
-        const days = Math.floor(seconds / (60 * 60 * 24))
-        const hours = Math.floor((seconds % (60 * 60 * 24)) / (60 * 60))
-        return `${days}d ${hours}h`
-    }
-
-    return (
-        <div className="space-y-4">
-            <Card>
-                <h3 className="text-lg font-semibold mb-4">
-                    SQS Queues ({queues.length})
-                </h3>
-                
-                {queues.length === 0 ? (
-                    <p className="text-gray-500">No SQS queues found for this service</p>
-                ) : (
-                    <div className="space-y-4">
-                        {queues.map((queue, index) => (
-                            <div key={index} className="border rounded-lg p-4">
-                                <div className="flex items-start justify-between mb-2">
-                                    <div>
-                                        <h4 className="font-semibold">{queue.queueName}</h4>
-                                        <div className="text-sm text-gray-600">
-                                            <span className="break-all">{queue.queueUrl}</span>
-                                        </div>
-                                    </div>
-                                    <StatusBadge 
-                                        status={getQueueStatus(queue)}
-                                        text={getQueueStatus(queue)}
-                                    />
-                                </div>
-
-                                {queue.error ? (
-                                    <div className="mt-3 p-3 bg-red-50 rounded text-sm text-red-700">
-                                        Error fetching queue metrics: {queue.error}
-                                    </div>
-                                ) : (
-                                    <>
-                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-                                            <div>
-                                                <div className="text-sm text-gray-600">Available</div>
-                                                <div className="text-xl font-mono">
-                                                    {queue.messagesAvailable || 0}
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <div className="text-sm text-gray-600">In Flight</div>
-                                                <div className="text-xl font-mono text-blue-600">
-                                                    {queue.messagesInFlight || 0}
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <div className="text-sm text-gray-600">Delayed</div>
-                                                <div className="text-xl font-mono text-yellow-600">
-                                                    {queue.messagesDelayed || 0}
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <div className="text-sm text-gray-600">Total</div>
-                                                <div className="text-xl font-mono">
-                                                    {(queue.messagesAvailable || 0) + 
-                                                     (queue.messagesInFlight || 0) + 
-                                                     (queue.messagesDelayed || 0)}
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4 pt-4 border-t">
-                                            <div>
-                                                <div className="text-sm text-gray-600">Visibility Timeout</div>
-                                                <div className="font-mono">{queue.visibilityTimeout}s</div>
-                                            </div>
-                                            <div>
-                                                <div className="text-sm text-gray-600">Retention Period</div>
-                                                <div className="font-mono">
-                                                    {formatRetentionPeriod(queue.messageRetentionPeriod)}
-                                                </div>
-                                            </div>
-                                            <div>
-                                                <div className="text-sm text-gray-600">Age</div>
-                                                <div className="font-mono">
-                                                    {formatAge(queue.createdTimestamp)}
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        {queue.messagesAvailable > 100 && (
-                                            <div className="mt-3 p-3 bg-yellow-50 rounded text-sm text-yellow-700">
-                                                ⚠️ High message count detected. Queue may be backing up.
-                                            </div>
-                                        )}
-
-                                        {queue.messagesInFlight > 10 && (
-                                            <div className="mt-3 p-3 bg-blue-50 rounded text-sm text-blue-700">
-                                                ℹ️ Multiple messages being processed. Monitor for processing delays.
-                                            </div>
-                                        )}
-                                    </>
-                                )}
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </Card>
-
-            {/* Queue Health Summary */}
-            {queues.length > 0 && (
-                <Card>
-                    <h3 className="text-lg font-semibold mb-4">Queue Health Summary</h3>
-                    
-                    {/* Visual Queue Status */}
-                    <div className="space-y-3 mb-4">
-                        {queues.filter(q => !q.error).map((queue, index) => {
-                            const total = (queue.messagesAvailable || 0) + 
-                                        (queue.messagesInFlight || 0) + 
-                                        (queue.messagesDelayed || 0)
-                            const availablePercent = total > 0 ? (queue.messagesAvailable / total) * 100 : 0
-                            const inFlightPercent = total > 0 ? (queue.messagesInFlight / total) * 100 : 0
-                            const delayedPercent = total > 0 ? (queue.messagesDelayed / total) * 100 : 0
-                            
-                            return (
-                                <div key={index}>
-                                    <div className="flex justify-between text-sm mb-1">
-                                        <span className="font-medium">{queue.queueName}</span>
-                                        <span className="font-mono">{total} messages</span>
-                                    </div>
-                                    <div className="flex h-6 rounded overflow-hidden bg-gray-200">
-                                        {availablePercent > 0 && (
-                                            <div 
-                                                className="bg-green-500"
-                                                style={{ width: `${availablePercent}%` }}
-                                                title={`${queue.messagesAvailable} available`}
-                                            />
-                                        )}
-                                        {inFlightPercent > 0 && (
-                                            <div 
-                                                className="bg-blue-500"
-                                                style={{ width: `${inFlightPercent}%` }}
-                                                title={`${queue.messagesInFlight} in flight`}
-                                            />
-                                        )}
-                                        {delayedPercent > 0 && (
-                                            <div 
-                                                className="bg-yellow-500"
-                                                style={{ width: `${delayedPercent}%` }}
-                                                title={`${queue.messagesDelayed} delayed`}
-                                            />
-                                        )}
-                                    </div>
-                                </div>
-                            )
-                        })}
-                    </div>
-
-                    <div className="flex gap-4 text-xs">
-                        <div className="flex items-center gap-1">
-                            <div className="w-3 h-3 bg-green-500 rounded"></div>
-                            <span>Available</span>
-                        </div>
-                        <div className="flex items-center gap-1">
-                            <div className="w-3 h-3 bg-blue-500 rounded"></div>
-                            <span>In Flight</span>
-                        </div>
-                        <div className="flex items-center gap-1">
-                            <div className="w-3 h-3 bg-yellow-500 rounded"></div>
-                            <span>Delayed</span>
-                        </div>
-                    </div>
-
-                    {/* Summary Statistics */}
-                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 pt-4 border-t">
-                        <div>
-                            <div className="text-sm text-gray-600">Total Messages</div>
-                            <div className="text-2xl font-mono">
-                                {queues.reduce((sum, q) => sum + 
-                                    (q.messagesAvailable || 0) + 
-                                    (q.messagesInFlight || 0) + 
-                                    (q.messagesDelayed || 0), 0
-                                )}
-                            </div>
-                        </div>
-                        <div>
-                            <div className="text-sm text-gray-600">Available</div>
-                            <div className="text-2xl font-mono text-green-600">
-                                {queues.reduce((sum, q) => sum + (q.messagesAvailable || 0), 0)}
-                            </div>
-                        </div>
-                        <div>
-                            <div className="text-sm text-gray-600">Processing</div>
-                            <div className="text-2xl font-mono text-blue-600">
-                                {queues.reduce((sum, q) => sum + (q.messagesInFlight || 0), 0)}
-                            </div>
-                        </div>
-                        <div>
-                            <div className="text-sm text-gray-600">Delayed</div>
-                            <div className="text-2xl font-mono text-yellow-600">
-                                {queues.reduce((sum, q) => sum + (q.messagesDelayed || 0), 0)}
-                            </div>
-                        </div>
-                    </div>
-                </Card>
-            )}
-        </div>
-    )
-}
-
-export default SQSMetrics

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

@@ -1,6 +0,0 @@
-// Export monitoring components
-export { default as MonitoringDashboard } from './MonitoringDashboard'
-export { default as LambdaMetrics } from './LambdaMetrics'
-export { default as APIGatewayMetrics } from './APIGatewayMetrics'
-export { default as SQSMetrics } from './SQSMetrics'
-export { default as MetricsChart } from './MetricsChart'