Spaces:

eaglelandsonce
/

threejshcl

Running

App Files Files Community

eaglelandsonce commited on Aug 6

Commit

4cb3f71

verified ·

1 Parent(s): 15de190

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -237

index.html CHANGED Viewed

@@ -3,251 +3,115 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Terraform 3D Icon Visualizer</title>
     <style>
-        body { margin: 0; background-color: #0d1117; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; overflow: hidden; }
-        canvas { display: block; }
-        #loader-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 200; backdrop-filter: blur(5px); background-color: rgba(13, 17, 23, 0.5);}
-        #loader-content { text-align: center; padding: 2em; background-color: #161b22; border-radius: 10px; border: 1px solid #30363d; }
-        #loader-content p { font-size: 1.5em; color: #c9d1d9; margin-top: 0; }
-        #loader-content span { font-size: 1em; color: #8b949e; max-width: 500px; display: inline-block; }
-        #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; color: #c9d1d9; font-size: 1.2em; pointer-events: none; }
-        #tooltip { position: absolute; display: none; padding: 10px; background-color: rgba(22, 27, 34, 0.9); border: 1px solid #30363d; border-radius: 5px; pointer-events: none; backdrop-filter: blur(5px); }
     </style>
 </head>
 <body>
-    <!-- This container provides status updates and error messages -->
-    <div id="loader-container">
-        <div id="loader-content">
-            <p>Loading Visualizer...</p>
-            <span id="loader-message">Initializing 3D scene...</span>
-        </div>
-    </div>
-    <div id="info">Terraform Azure 3D Visualizer</div>
-    <div id="tooltip"></div>
-    <!-- Importmap for Three.js modules -->
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
-            }
-        }
-    </script>
-    <!-- Main JavaScript Module -->
-    <script type="module">
-        // BUILT-IN CHECK: This is the critical fix.
-        if (window.location.protocol === 'file:') {
-            const loaderContent = document.getElementById('loader-content');
-            loaderContent.innerHTML = `
-                <p style="color: #f85149;">Error: Cannot Run From File</p>
-                <span style="max-width: 500px; display: inline-block;">
-                    You must open this HTML file using a local web server due to browser security rules (CORS).
-                    <br><br>
-                    <strong>The easiest way is with the 'Live Server' extension in VS Code.</strong>
-                </span>
-            `;
-            throw new Error("Execution stopped: This file must be served over HTTP/HTTPS, not from a file: URL.");
-        }
-        import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
-        import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
-        // The Terraform HCL code to visualize
-        const terraformCode = `
-            resource "azurerm_resource_group" "tfexample" { name = "my-terraform-rg" }
-            resource "azurerm_virtual_network" "tfexample" { resource_group_name = azurerm_resource_group.tfexample.name }
-            resource "azurerm_subnet" "tfexample" { virtual_network_name = azurerm_virtual_network.tfexample.name }
-            resource "azurerm_public_ip" "tfexample" { resource_group_name = azurerm_resource_group.tfexample.name }
-            resource "azurerm_lb" "tfexample" { public_ip_address_id = azurerm_public_ip.tfexample.id }
-            resource "azurerm_linux_virtual_machine_scale_set" "tfexample" { subnet_id = azurerm_subnet.tfexample.id }
-        `;
-        // Simple HCL parser for resources and their direct dependencies
-        function parseTerraform(code) {
-            const resources = [], dependencies = new Set(), regex = /resource "([\w_]+)" "([\w_]+)"/g;
-            let match;
-            while ((match = regex.exec(code)) !== null) resources.push({ type: match[1], name: match[2], id: `${match[1]}.${match[2]}` });
-            resources.forEach(res => {
-                const blockRegex = new RegExp(`resource "${res.type}" "${res.name}" \\{[\\s\\S]*?\\}`, 'g');
-                const blockMatch = blockRegex.exec(code);
-                if (blockMatch) resources.forEach(p => { if (res.id !== p.id && blockMatch[0].includes(p.id)) dependencies.add(JSON.stringify({ from: res.id, to: p.id })) });
-            });
-            return { nodes: resources, edges: Array.from(dependencies).map(d => JSON.parse(d)) };
-        }
-        // Mapping resource types to their official Azure SVG icons
-        const iconMap = {
-            "azurerm_resource_group": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resourcegroup.svg",
-            "azurerm_virtual_network": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/virtualnetwork.svg",
-            "azurerm_subnet": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/subnets.svg",
-            "azurerm_public_ip": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/publicipaddress.svg",
-            "azurerm_lb": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/loadbalancer.svg",
-            "azurerm_linux_virtual_machine_scale_set": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/virtualmachinescaleset.svg",
-            "default": "https://raw.githubusercontent.com/microsoft/vscode-azure-icons/main/icons/svg/resource.svg"
-        };
-        let camera, scene, renderer, labelRenderer, controls;
-        const nodes = {};
-        const intersectableObjects = [];
-        // Function to create a visual node (3D or 2D sprite), returns a Promise
-        function createNodeVisual(node, position) {
-            return new Promise((resolve, reject) => {
-                const is3D = node.type === 'azurerm_resource_group' || node.type === 'azurerm_virtual_network';
-                const iconUrl = iconMap[node.type] || iconMap.default;
-                if (is3D) {
-                    new SVGLoader().load(iconUrl, (data) => {
-                        const iconGroup = new THREE.Group();
-                        const extrudeSettings = { depth: 0.8, bevelEnabled: true, bevelThickness: 0.2, bevelSize: 0.1, bevelSegments: 2 };
-                        data.paths.forEach(path => {
-                            const material = new THREE.MeshStandardMaterial({ color: path.color, metalness: 0.5, roughness: 0.5 });
-                            SVGLoader.createShapes(path).forEach(shape => {
-                                const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-                                geometry.center();
-                                iconGroup.add(new THREE.Mesh(geometry, material));
-                            });
-                        });
-                        const box = new THREE.Box3().setFromObject(iconGroup);
-                        iconGroup.scale.multiplyScalar(5 / box.getSize(new THREE.Vector3()).length());
-                        iconGroup.position.copy(position);
-                        resolve(iconGroup);
-                    }, undefined, (error) => reject(`SVG Load Error for ${node.id}: ${error}`));
-                } else {
-                    new THREE.TextureLoader().load(iconUrl, (map) => {
-                        const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map }));
-                        sprite.scale.set(6, 6, 6);
-                        sprite.position.copy(position);
-                        resolve(sprite);
-                    }, undefined, (error) => reject(`Texture Load Error for ${node.id}: ${error}`));
-                }
-            });
-        }
-        // Main function to initialize the scene and run the visualizer
-        async function init() {
-            const loaderMessage = document.getElementById('loader-message');
-            // Setup basic Three.js scene
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x0d1117);
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 15, 45);
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            document.body.appendChild(renderer.domElement);
-            labelRenderer = new CSS2DRenderer();
-            labelRenderer.setSize(window.innerWidth, window.innerHeight);
-            labelRenderer.domElement.style.position = 'absolute';
-            labelRenderer.domElement.style.top = '0px';
-            document.body.appendChild(labelRenderer.domElement);
-            controls = new OrbitControls(camera, labelRenderer.domElement);
-            controls.enableDamping = true;
-            scene.add(new THREE.AmbientLight(0xffffff, 0.7));
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            dirLight.position.set(8, 15, 10);
-            scene.add(dirLight);
-            // Parse Terraform and create node creation promises
-            const graph = parseTerraform(terraformCode);
-            loaderMessage.innerText = `Found ${graph.nodes.length} resources. Loading models...`;
-            const nodePromises = graph.nodes.map((node, index) => {
-                const angle = (index / graph.nodes.length) * Math.PI * 2;
-                const position = new THREE.Vector3(30 * Math.cos(angle), (Math.random() - 0.5) * 15, 30 * Math.sin(angle));
-                return createNodeVisual(node, position);
-            });
-            // Wait for all models to load before proceeding
-            const loadedNodes = await Promise.all(nodePromises);
-            document.getElementById('loader-container').style.display = 'none';
-            // Add loaded nodes to the scene
-            loadedNodes.forEach((visualNode, index) => {
-                const nodeInfo = graph.nodes[index];
-                visualNode.userData = { id: nodeInfo.id, type: nodeInfo.type };
-                nodes[nodeInfo.id] = visualNode;
-                intersectableObjects.push(visualNode);
-                scene.add(visualNode);
-                const labelDiv = document.createElement('div');
-                labelDiv.textContent = nodeInfo.id;
-                labelDiv.style.color = '#c9d1d9';
-                labelDiv.style.fontSize = '12px';
-                labelDiv.style.marginTop = '-1em';
-                const label = new CSS2DObject(labelDiv);
-                label.position.set(0, -5, 0);
-                visualNode.add(label);
-            });
-            // Draw dependency lines now that nodes have positions
-            graph.edges.forEach(edge => {
-                const startNode = nodes[edge.from];
-                const endNode = nodes[edge.to];
-                if (startNode && endNode) {
-                    const geometry = new THREE.BufferGeometry().setFromPoints([startNode.position, endNode.position]);
-                    scene.add(new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x3081f8, transparent: true, opacity: 0.7 })));
-                }
-            });
-            // Start the animation loop
-            animate();
-        }
-        const raycaster = new THREE.Raycaster();
-        const mouse = new THREE.Vector2();
-        const tooltip = document.getElementById('tooltip');
-        function animate() {
-            requestAnimationFrame(animate);
-            controls.update();
-            // Handle hover/tooltip logic
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(intersectableObjects, true);
-            if (intersects.length > 0) {
-                let obj = intersects[0].object;
-                while(obj.parent && !obj.userData.id) obj = obj.parent;
-                if (obj.userData.id) {
-                    tooltip.style.display = 'block';
-                    tooltip.innerHTML = `<b>Type:</b> ${obj.userData.type}<br><b>Name:</b> ${obj.userData.id}`;
-                }
-            } else {
-                tooltip.style.display = 'none';
-            }
-            renderer.render(scene, camera);
-            labelRenderer.render(scene, camera);
-        }
-        window.addEventListener('mousemove', (event) => {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
-            if (tooltip.style.display === 'block') {
-                 tooltip.style.left = `${event.clientX + 15}px`;
-                 tooltip.style.top = `${event.clientY}px`;
-            }
-        });
-        window.addEventListener('resize', () => {
-            if(camera) {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-                labelRenderer.setSize(window.innerWidth, window.innerHeight);
-            }
-        });
-        // Run the main initialization function
-        init().catch(error => {
-            console.error("Visualizer initialization failed:", error);
-            const loaderContent = document.getElementById('loader-content');
-            loaderContent.innerHTML = `<p style="color: #f85149;">A critical error occurred.</p><span>Check the browser's developer console (F12) for details.</span>`;
-        });
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Azure Terraform Visualization</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f2f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: 20px;
+        }
+        h1 {
+            color: #333;
+        }
+        .svg-container {
+            border: 1px solid #ccc;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            background-color: #fff;
+        }
     </style>
 </head>
 <body>
+    <h1>Visualization of Azure Terraform Layout</h1>
+    <div class="svg-container">
+        <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family: Arial, sans-serif; background-color: #f9f9f9;">
+          <title>Azure Terraform Layout</title>
+          <!-- Definitions for icons and markers -->
+          <defs>
+            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+              <path d="M 0 0 L 10 5 L 0 10 z" fill="#444" />
+            </marker>
+            <!-- Azure Icons (simplified representations) -->
+            <g id="icon-public-ip">
+                <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/>
+                <path d="M12,5 l-5,5 h3 v6 h4 v-6 h3 z" fill="white"/>
+            </g>
+            <g id="icon-lb">
+                <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/>
+                <path d="M4,12 h16 m-16,-4 h16 m-12,8 l-3,-4 h14 l-3,4" fill="none" stroke="white" stroke-width="2"/>
+            </g>
+            <g id="icon-vmss">
+                <path d="M2,2 h20 v20 h-20z" fill="#0078D4"/>
+                <rect x="5" y="5" width="14" height="14" fill="white" />
+                <rect x="7" y="7" width="10" height="10" fill="#0078D4" />
+                <rect x="9" y="9" width="6" height="6" fill="white" />
+            </g>
+             <g id="icon-internet">
+                <path fill="#A0A0A0" d="M35.6,20.8c-0.1-2-0.8-3.8-1.9-5.5c-1.2-1.6-2.8-2.9-4.7-3.6c-1.9-0.7-4-0.8-6-0.3c-2,0.5-3.8,1.5-5.2,3 c-1.4,1.5-2.3,3.4-2.6,5.5c-0.3,2.1,0.1,4.2,0.9,6.2c0.8,2,2.1,3.7,3.8,5c1.7,1.3,3.7,2.1,5.9,2.2c2.2,0.1,4.3-0.4,6.2-1.4 c1.9-1,3.5-2.5,4.6-4.3C35.2,25.9,35.7,23.4,35.6,20.8z M33.2,26.5c-1,1.6-2.4,2.9-4.1,3.7c-1.7,0.8-3.6,1.1-5.5,0.9 c-1.9-0.2-3.7-0.9-5.2-2.1c-1.5-1.2-2.6-2.7-3.2-4.5c-0.6-1.8-0.7-3.7-0.3-5.5c0.4-1.8,1.3-3.5,2.6-4.8c1.3-1.3,3-2.2,4.8-2.6 c1.8-0.4,3.7-0.3,5.5,0.3c1.8,0.6,3.4,1.7,4.5,3.2c1.1,1.5,1.7,3.3,1.9,5.1c0.1,1.8-0.2,3.6-0.9,5.2 C34.4,24.3,33.9,25.5,33.2,26.5z"/>
+            </g>
+          </defs>
+          <!-- Main Drawing -->
+          <!-- Resource Group -->
+          <rect x="10" y="10" width="780" height="580" rx="10" ry="10" fill="#E6F2FF" stroke="#0078D4" stroke-width="2"/>
+          <text x="30" y="40" font-size="16" font-weight="bold">Resource Group: my-terraform-rg</text>
+          <!-- VNet -->
+          <rect x="30" y="70" width="740" height="400" rx="5" ry="5" fill="#D4E8FF" stroke="#0078D4" stroke-width="1.5" stroke-dasharray="4"/>
+          <text x="50" y="100" font-size="14" font-weight="bold">Virtual Network: my-terraform-vnet</text>
+          <text x="50" y="120" font-size="12">Address Space: 10.0.0.0/16</text>
+          <!-- Subnet -->
+          <rect x="50" y="150" width="700" height="300" rx="5" ry="5" fill="#C2DEFF" stroke="#0078D4" stroke-width="1" stroke-dasharray="2"/>
+          <text x="70" y="180" font-size="14" font-weight="bold">Subnet: my-terraform-subnet</text>
+          <text x="70" y="200" font-size="12">Address Prefixes: 10.0.2.0/24</text>
+          <!-- Internet -->
+          <use xlink:href="#icon-internet" x="50" y="250" width="50" height="50"/>
+          <text x="70" y="320" font-size="14">Internet</text>
+          <!-- Public IP -->
+          <use xlink:href="#icon-public-ip" x="180" y="280" width="30" height="30"/>
+          <text x="170" y="325" font-size="12" font-weight="bold">Public IP</text>
+          <text x="145" y="340" font-size="10">my-terraform-public-ip</text>
+          <!-- Load Balancer -->
+          <use xlink:href="#icon-lb" x="300" y="280" width="30" height="30"/>
+          <text x="275" y="325" font-size="12" font-weight="bold">Load Balancer</text>
+          <text x="278" y="340" font-size="10">my-terraform-lb</text>
+          <text x="275" y="365" font-size="10" fill="#333">Rule: 80 -> ${var.server_port}</text>
+          <text x="280" y="380" font-size="10" fill="#333">Probe: Port ${var.server_port}</text>
+          <!-- VM Scale Set -->
+          <g transform="translate(450, 250)">
+            <use xlink:href="#icon-vmss" width="40" height="40"/>
+            <text x="-5" y="55" font-size="12" font-weight="bold">VM Scale Set</text>
+            <text x="-35" y="70" font-size="10">my-terraform-vm-scale-set</text>
+          </g>
+          <g transform="translate(550, 250)">
+            <use xlink:href="#icon-vmss" width="40" height="40"/>
+             <text x="-5" y="55" font-size="12" font-weight="bold">VM Scale Set</text>
+             <text x="-35" y="70" font-size="10">my-terraform-vm-scale-set</text>
+          </g>
+          <rect x="430" y="230" width="240" height="110" fill="none" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="3"/>
+          <text x="460" y="360" font-size="10" font-weight="bold" fill="#4CAF50">Backend Address Pool</text>
+          <text x="462" y="375" font-size="10" fill="#4CAF50">my-terraform-lb-backend-pool</text>
+          <!-- Connection Lines -->
+          <path d="M 120 295 C 150 295, 150 295, 180 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/>
+          <path d="M 210 295 C 250 295, 270 295, 300 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/>
+          <path d="M 330 295 C 380 295, 400 295, 430 295" stroke="#444" stroke-width="2" fill="none" marker-end="url(#arrow)"/>
+        </svg>
+    </div>
 </body>
 </html>