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

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

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

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

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