Spaces:

Rammanokar
/

aws-vpc-diagram-react

Running

App Files Files Community

Rammanokar commited on Oct 31

Commit

fea0c80

verified ·

1 Parent(s): 7c1241e

convert this to react diagram.

Browse files

```mermaid
graph
Internet[Internet]

subgraph "Production VPC - 15.0.0.0/16"
IGW_Prod[Internet Gateway igw-09cf4bcb7239a6547]
LB_Prod[Internal Load Balancer ieq-prod-lb]

subgraph "us-east-1a"
PubSub1[Public Subnet 15.0.0.0/20]
EC2Prod1[BE Prod 3.220.214.17 t2.small]
EC2Prod2[BE Admin Prod 3.227.125.175 t2.small]
EC2ML_Prod[ML Prod 98.83.117.30 t2.medium]
end

subgraph "us-east-1b"
PubSub2[Public Subnet 15.0.16.0/20]
end

Internet --> IGW_Prod
IGW_Prod --> PubSub1
IGW_Prod --> PubSub2
PubSub1 --> EC2Prod1
PubSub1 --> EC2Prod2
PubSub1 --> EC2ML_Prod
LB_Prod --> EC2Prod1
end
```
```mermaid
graph TB

Internet[Internet]

subgraph "Default VPC - 172.31.0.0/16 (Dev & PreProd)"
IGW_Default[Internet Gateway igw-08f0068d5deb99f34]

subgraph "Development Environment"
DevBE[BE Dev 23.22.6.48 t2.small]
DevAdmin[BE Admin Dev 34.225.40.84 t2.micro]
DevML[ML Dev 54.225.50.5 t2.medium]
DevAV[AV Processing 54.224.121.98 t2.small]
end

subgraph "PreProduction Environment"
PreBE[BE PreProd 44.214.177.246 t2.small]
PreAdmin[BE Admin PreProd 34.193.219.91 t2.small]
PreML[ML PreProd 18.234.27.117 c5.2xlarge]
PreMCP[MCP PreProd 44.204.54.3 t2.medium]
end

LB_Dev[ALB: ieq-be-dev ieq-be-admin-dev-lb]
LB_MCP[Internal ALB ieq-mcp-stage-lb]

Internet --> IGW_Default
IGW_Default --> DevBE
IGW_Default --> DevAdmin
IGW_Default --> DevML
IGW_Default --> DevAV
IGW_Default --> PreBE
IGW_Default --> PreAdmin
IGW_Default --> PreML
IGW_Default --> PreMCP

LB_Dev --> DevBE
LB_Dev --> DevAdmin
LB_MCP --> PreMCP
end

```

Files changed (4) hide show

README.md +8 -5
index.html +20 -19
script.js +277 -0
style.css +268 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Aws Vpc Diagram React
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AWS VPC Diagram React
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,20 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AWS VPC Architecture Diagram</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel" src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,277 @@

+x
+const { useState, useEffect } = React;
+const VPCDiagram = () => {
+    const [selectedComponent, setSelectedComponent] = useState(null);
+    const productionComponents = [
+        {
+            id: 'igw-prod',
+            type: 'Internet Gateway',
+            name: 'Internet Gateway',
+            details: 'igw-09cf4bcb7239a6547',
+            icon: 'globe'
+        },
+        {
+            id: 'lb-prod',
+            type: 'Load Balancer',
+            name: 'Internal Load Balancer',
+            details: 'ieq-prod-lb',
+            icon: 'layers'
+        },
+        {
+            id: 'ec2-prod-1',
+            type: 'EC2 Instance',
+            name: 'BE Prod',
+            details: '3.220.214.17 - t2.small',
+            icon: 'server'
+        },
+        {
+            id: 'ec2-prod-2',
+            type: 'EC2 Instance',
+            name: 'BE Admin Prod',
+            details: '3.227.125.175 - t2.small',
+            icon: 'server'
+        },
+        {
+            id: 'ec2-ml-prod',
+            type: 'EC2 Instance',
+            name: 'ML Prod',
+            details: '98.83.117.30 - t2.medium',
+            icon: 'cpu'
+        }
+    ];
+    const developmentComponents = [
+        {
+            id: 'dev-be',
+            type: 'EC2 Instance',
+            name: 'BE Dev',
+            details: '23.22.6.48 - t2.small',
+            icon: 'server'
+        },
+        {
+            id: 'dev-admin',
+            type: 'EC2 Instance',
+            name: 'BE Admin Dev',
+            details: '34.225.40.84 - t2.micro',
+            icon: 'server'
+        },
+        {
+            id: 'dev-ml',
+            type: 'EC2 Instance',
+            name: 'ML Dev',
+            details: '54.225.50.5 - t2.medium',
+            icon: 'cpu'
+        },
+        {
+            id: 'dev-av',
+            type: 'EC2 Instance',
+            name: 'AV Processing',
+            details: '54.224.121.98 - t2.small',
+            icon: 'shield'
+        },
+        {
+            id: 'lb-dev',
+            type: 'Load Balancer',
+            name: 'ALB Dev',
+            details: 'ieq-be-dev',
+            icon: 'layers'
+        }
+    ];
+    const preproductionComponents = [
+        {
+            id: 'pre-be',
+            type: 'EC2 Instance',
+            name: 'BE PreProd',
+            details: '44.214.177.246 - t2.small',
+            icon: 'server'
+        },
+        {
+            id: 'pre-admin',
+            type: 'EC2 Instance',
+            name: 'BE Admin PreProd',
+            details: '34.193.219.91 - t2.small',
+            icon: 'server'
+        },
+        {
+            id: 'pre-ml',
+            type: 'EC2 Instance',
+            name: 'ML PreProd',
+            details: '18.234.27.117 - c5.2xlarge',
+            icon: 'cpu'
+        },
+        {
+            id: 'pre-mcp',
+            type: 'EC2 Instance',
+            name: 'MCP PreProd',
+            details: '44.204.54.3 - t2.medium',
+            icon: 'zap'
+        },
+        {
+            id: 'lb-mcp',
+            type: 'Load Balancer',
+            name: 'Internal ALB',
+            details: 'ieq-mcp-stage-lb',
+            icon: 'layers'
+        }
+    ];
+    const ComponentCard = ({ component, onClick }) => {
+        const getComponentClass = (type) => {
+            switch (type) {
+                case 'Internet Gateway':
+                    return 'internet-gateway';
+                case 'Load Balancer':
+                    return 'load-balancer';
+                case 'EC2 Instance':
+                    return 'ec2-instance';
+                default:
+                    return '';
+            }
+        };
+        return (
+            <div
+                className={`component ${getComponentClass(component.type)}`}
+                onClick={() => onClick(component)}
+            >
+                <i data-feather={component.icon} className="component-icon"></i>
+                <div className="component-title">{component.name}</div>
+                <div className="component-details">{component.details}</div>
+            </div>
+        );
+    };
+    const ConnectionFlow = () => (
+        <div className="connections">
+            <h3>Connection Flow</h3>
+            <div className="connection-flow">
+                <div className="connection-item">
+                    <i data-feather="globe"></i> Internet
+                </div>
+                <div className="arrow">→</div>
+                <div className="connection-item">
+                    <i data-feather="shield"></i> Internet Gateway
+                </div>
+                <div className="arrow">→</div>
+                <div className="connection-item">
+                    <i data-feather="layers"></i> Load Balancer
+                </div>
+                <div className="arrow">→</div>
+                <div className="connection-item">
+                    <i data-feather="server"></i> EC2 Instances
+                </div>
+            </div>
+        </div>
+    );
+    const Stats = () => (
+        <div className="stats">
+            <h3>Infrastructure Overview</h3>
+            <div className="stats-grid">
+                <div className="stat-item">
+                    <div className="stat-number">2</div>
+                    <div className="stat-label">VPCs</div>
+                </div>
+                <div className="stat-item">
+                    <div className="stat-number">13</div>
+                    <div className="stat-label">EC2 Instances</div>
+                </div>
+                <div className="stat-item">
+                    <div className="stat-number">4</div>
+                    <div className="stat-label">Load Balancers</div>
+                </div>
+                <div className="stat-item">
+                    <div className="stat-number">2</div>
+                    <div className="stat-label">Internet Gateways</div>
+                </div>
+            </div>
+        </div>
+    );
+    useEffect(() => {
+        feather.replace();
+    }, []);
+    const handleComponentClick = (component) => {
+        setSelectedComponent(component);
+    };
+    return (
+        <div className="container">
+            <div className="header">
+                <h1>AWS VPC Architecture Diagram</h1>
+                <p>Interactive visualization of Production and Development VPC infrastructure</p>
+            </div>
+            <div className="diagram-container">
+                {/* Production VPC */}
+                <div className="vpc-section">
+                    <div className="vpc-header">
+                        <h2>Production VPC</h2>
+                        <p>15.0.0.0/16</p>
+                    </div>
+                    <div className="environments-grid">
+                        <div className="environment">
+                            <h3>Production Environment</h3>
+                            <div className="components-grid">
+                                {productionComponents.map(component => (
+                                    <ComponentCard
+                                        key={component.id}
+                                        component={component}
+                                        onClick={handleComponentClick}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/* Development VPC */}
+                <div className="vpc-section">
+                    <div className="vpc-header">
+                        <h2>Default VPC</h2>
+                        <p>172.31.0.0/16 (Dev & PreProd)</p>
+                    </div>
+                    <div className="environments-grid">
+                        <div className="environment">
+                            <h3>Development Environment</h3>
+                            <div className="components-grid">
+                                {developmentComponents.map(component => (
+                                    <ComponentCard
+                                        key={component.id}
+                                        component={component}
+                                        onClick={handleComponentClick}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                        <div className="environment">
+                            <h3>PreProduction Environment</h3>
+                            <div className="components-grid">
+                                {preproductionComponents.map(component => (
+                                    <ComponentCard
+                                        key={component.id}
+                                        component={component}
+                                        onClick={handleComponentClick}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <ConnectionFlow />
+                <Stats />
+            </div>
+        </div>
+    );
+};
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<VPCDiagram />);

style.css CHANGED Viewed

@@ -1,28 +1,278 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+.header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+.header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+.header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+.diagram-container {
+    padding: 40px;
+    background: #f8fafc;
+}
+.vpc-section {
+    margin-bottom: 50px;
+}
+.vpc-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 12px;
+    margin-bottom: 25px;
+    text-align: center;
+}
+.vpc-header h2 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 5px;
 }
+.vpc-header p {
+    font-size: 1rem;
+    opacity: 0.9;
 }
+.environments-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-bottom: 30px;
 }
+.environment {
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    border: 2px solid #e2e8f0;
+    transition: all 0.3s ease;
 }
+.environment:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+    border-color: #667eea;
 }
+.environment h3 {
+    color: #2d3748;
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    text-align: center;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #e2e8f0;
+}
+.components-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+.component {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.component::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+.component:hover::before {
+    left: 100%;
+}
+.component:hover {
+    transform: scale(1.05);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+.component-icon {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    display: block;
+}
+.component-title {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+.component-details {
+    font-size: 0.85rem;
+    opacity: 0.9;
+    line-height: 1.4;
+}
+.internet-gateway {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+.load-balancer {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+.subnet {
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+.ec2-instance {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+.public-subnet {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.connections {
+    margin-top: 40px;
+    text-align: center;
+}
+.connection-flow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-top: 20px;
+}
+.connection-item {
+    background: white;
+    padding: 15px 20px;
+    border-radius: 25px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    border: 2px solid #e2e8f0;
+    font-weight: 500;
+    color: #2d3748;
+    transition: all 0.3s ease;
+}
+.connection-item:hover {
+    border-color: #667eea;
+    color: #667eea;
+    transform: translateY(-2px);
+}
+.arrow {
+    color: #667eea;
+    font-size: 1.2rem;
+}
+.stats {
+    background: white;
+    border-radius: 15px;
+    padding: 25px;
+    margin-top: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+.stats h3 {
+    color: #2d3748;
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    text-align: center;
+}
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+.stat-item {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+}
+.stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+.stat-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+@media (max-width: 768px) {
+    .header h1 {
+        font-size: 2rem;
+    }
+    .diagram-container {
+        padding: 20px;
+    }
+    .environments-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    .components-grid {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+    .connection-flow {
+        flex-direction: column;
+        gap: 10px;
+    }
+}