script.js

x
const { useState, useEffect } = React;

const FlowNode = ({ id, title, details, type, position, onClick }) => {
    const getNodeClass = (type) => {
        switch (type) {
            case 'internet':
                return 'internet-node';
            case 'igw':
                return 'igw-node';
            case 'subnet':
                return 'subnet-node';
            case 'ec2':
                return 'ec2-node';
            case 'lb':
                return 'lb-node';
            default:
                return 'default-node';
        }
    };

    return (
        <div 
            className={`flow-node ${getNodeClass(type)}`}
            style={{ left: position.x, top: position.y }}
            onClick={() => onClick && onClick({ id, title, details, type })}
        >
            <div className="node-title">{title}</div>
            {details && <div className="node-details">{details}</div>}
        </div>
    );
};

const FlowArrow = ({ from, to }) => {
    const deltaX = to.x - from.x;
    const deltaY = to.y - from.y;
    const length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
    const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
    
    return (
        <div 
            className="flow-arrow"
            style={{
                left: from.x,
                top: from.y,
                width: length,
                transform: `rotate(${angle}deg)`,
                transformOrigin: '0 0'
            }}
        />
    );
};

const VPCDiagram = () => {
    const [selectedComponent, setSelectedComponent] = useState(null);

    // Production VPC flow configuration
    const prodFlow = {
        internet: { id: 'prod-internet', title: 'Internet', type: 'internet', position: { x: 50, y: 100 } },
        igw: { id: 'prod-igw', title: 'Internet Gateway', details: 'igw-09cf4bcb7239a6547', type: 'igw', position: { x: 300, y: 100 } },
        pubsub1: { id: 'prod-pubsub1', title: 'Public Subnet', details: '15.0.0.0/20\nus-east-1a', type: 'subnet', position: { x: 550, y: 50 } },
        pubsub2: { id: 'prod-pubsub2', title: 'Public Subnet', details: '15.0.16.0/20\nus-east-1b', type: 'subnet', position: { x: 550, y: 150 } },
        ec2prod1: { id: 'prod-ec2-1', title: 'BE Prod', details: '3.220.214.17\nt2.small', type: 'ec2', position: { x: 800, y: 20 } },
        ec2prod2: { id: 'prod-ec2-2', title: 'BE Admin Prod', details: '3.227.125.175\nt2.small', type: 'ec2', position: { x: 800, y: 80 } },
        ec2ml: { id: 'prod-ec2-ml', title: 'ML Prod', details: '98.83.117.30\nt2.medium', type: 'ec2', position: { x: 800, y: 140 } },
        lbprod: { id: 'prod-lb', title: 'Internal Load Balancer', details: 'ieq-prod-lb', type: 'lb', position: { x: 1050, y: 80 } }
    };

    // Default VPC flow configuration
    const defaultFlow = {
        internet: { id: 'def-internet', title: 'Internet', type: 'internet', position: { x: 50, y: 400 } },
        igw: { id: 'def-igw', title: 'Internet Gateway', details: 'igw-08f0068d5deb99f34', type: 'igw', position: { x: 300, y: 400 } },
        
        // Development Environment
        devbe: { id: 'dev-be', title: 'BE Dev', details: '23.22.6.48\nt2.small', type: 'ec2', position: { x: 600, y: 320 } },
        devadmin: { id: 'dev-admin', title: 'BE Admin Dev', details: '34.225.40.84\nt2.micro', type: 'ec2', position: { x: 600, y: 370 } },
        devml: { id: 'dev-ml', title: 'ML Dev', details: '54.225.50.5\nt2.medium', type: 'ec2', position: { x: 600, y: 420 } },
        devav: { id: 'dev-av', title: 'AV Processing', details: '54.224.121.98\nt2.small', type: 'ec2', position: { x: 600, y: 470 } },
        
        // PreProduction Environment
        prebe: { id: 'pre-be', title: 'BE PreProd', details: '44.214.177.246\nt2.small', type: 'ec2', position: { x: 900, y: 320 } },
        preadmin: { id: 'pre-admin', title: 'BE Admin PreProd', details: '34.193.219.91\nt2.small', type: 'ec2', position: { x: 900, y: 370 } },
        preml: { id: 'pre-ml', title: 'ML PreProd', details: '18.234.27.117\nc5.2xlarge', type: 'ec2', position: { x: 900, y: 420 } },
        premcp: { id: 'pre-mcp', title: 'MCP PreProd', details: '44.204.54.3\nt2.medium', type: 'ec2', position: { x: 900, y: 470 } },
        
        // Load Balancers
        lbdev: { id: 'dev-lb', title: 'ALB Dev', details: 'ieq-be-dev\nieq-be-admin-dev-lb', type: 'lb', position: { x: 1200, y: 345 } },
        lbmcp: { id: 'pre-lb', title: 'Internal ALB', details: 'ieq-mcp-stage-lb', type: 'lb', position: { x: 1200, y: 445 } }
    };

    // Production connections
    const prodConnections = [
        { from: 'prod-internet', to: 'prod-igw' },
        { from: 'prod-igw', to: 'prod-pubsub1' },
        { from: 'prod-igw', to: 'prod-pubsub2' },
        { from: 'prod-pubsub1', to: 'prod-ec2-1' },
        { from: 'prod-pubsub1', to: 'prod-ec2-2' },
        { from: 'prod-pubsub1', to: 'prod-ec2-ml' },
        { from: 'prod-lb', to: 'prod-ec2-1' }
    ];

    // Default VPC connections
    const defaultConnections = [
        { from: 'def-internet', to: 'def-igw' },
        { from: 'def-igw', to: 'dev-be' },
        { from: 'def-igw', to: 'dev-admin' },
        { from: 'def-igw', to: 'dev-ml' },
        { from: 'def-igw', to: 'dev-av' },
        { from: 'def-igw', to: 'pre-be' },
        { from: 'def-igw', to: 'pre-admin' },
        { from: 'def-igw', to: 'pre-ml' },
        { from: 'def-igw', to: 'pre-mcp' },
        { from: 'dev-lb', to: 'dev-be' },
        { from: 'dev-lb', to: 'dev-admin' },
        { from: 'pre-lb', to: 'pre-mcp' }
    ];

    const VPCSection = ({ title, vpc, flow, connections }) => (
        <div className="vpc-flow-section">
            <div className="vpc-flow-header">
                <h2>{title}</h2>
            </div>
            <div className="flow-diagram">
                {connections.map((conn, index) => (
                    <FlowArrow
                        key={index}
                        from={flow[conn.from].position}
                        to={flow[conn.to].position}
                    />
                ))}
                {Object.values(flow).map((node) => (
                    <FlowNode
                        key={node.id}
                        id={node.id}
                        title={node.title}
                        details={node.details}
                        type={node.type}
                        position={node.position}
                        onClick={setSelectedComponent}
                    />
                ))}
            </div>
        </div>
    );

    const ComponentDetails = () => {
        if (!selectedComponent) return null;
        
        return (
            <div className="component-details-overlay" onClick={() => setSelectedComponent(null)}>
                <div className="component-details-panel" onClick={(e) => e.stopPropagation()}>
                    <h3>{selectedComponent.title}</h3>
                    {selectedComponent.details && <p>{selectedComponent.details}</p>}
                    <p>Type: {selectedComponent.type}</p>
                    <button onClick={() => setSelectedComponent(null)}>Close</button>
                </div>
            </div>
        );
    };

    useEffect(() => {
        feather.replace();
    }, []);

    return (
        <div className="container">
            <div className="header">
                <h1>AWS VPC Traffic Flow Diagram</h1>
                <p>Interactive visualization of Production and Development VPC traffic patterns</p>
            </div>
            
            <div className="diagram-container">
                <VPCSection 
                    title="Production VPC - 15.0.0.0/16"
                    vpc="production"
                    flow={prodFlow}
                    connections={prodConnections}
                />
                
                <VPCSection 
                    title="Default VPC - 172.31.0.0/16 (Dev & PreProd)"
                    vpc="default"
                    flow={defaultFlow}
                    connections={defaultConnections}
                />
            </div>
            
            <ComponentDetails />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<VPCDiagram />);