k8s-pulse/static/app.js

let currentMetric = 'cpu';
let clusterData = null;

// Three.js Core Variables
let scene, camera, renderer, controls;
let podMeshes = [];
let nodeMeshes = [];
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let hoveredPod = null;

let maxCpuInCluster = 1;
let maxMemInCluster = 1;
let autoRotateEnabled = false;

// Formatters
const formatBytes = (bytes) => {
    if (!bytes || bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const formatCpu = (millicores) => {
    if (!millicores || millicores === 0) return '0 m';
    return `${millicores} m`;
};

// UI Controls Setup
document.getElementById('btn-cpu').addEventListener('click', () => {
    document.getElementById('btn-cpu').classList.add('active');
    document.getElementById('btn-mem').classList.remove('active');
    currentMetric = 'cpu';
    updatePodHeights();
});

document.getElementById('btn-mem').addEventListener('click', () => {
    document.getElementById('btn-mem').classList.add('active');
    document.getElementById('btn-cpu').classList.remove('active');
    currentMetric = 'memory';
    updatePodHeights();
});

document.getElementById('btn-reset-cam').addEventListener('click', () => {
    resetCameraView();
});

document.getElementById('btn-auto-rotate').addEventListener('click', () => {
    autoRotateEnabled = !autoRotateEnabled;
    controls.autoRotate = autoRotateEnabled;
    const btn = document.getElementById('btn-auto-rotate');
    const textSpan = document.getElementById('auto-rotate-text');
    if (autoRotateEnabled) {
        btn.classList.add('active');
        textSpan.innerText = 'Rotating...';
    } else {
        btn.classList.remove('active');
        textSpan.innerText = 'Auto Rotate';
    }
});

// Initialize 3D Engine
function init3D() {
    const container = document.getElementById('chart-container');
    const width = container.clientWidth;
    const height = container.clientHeight;

    // Scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x090d16);
    scene.fog = new THREE.FogExp2(0x090d16, 0.0012);

    // Camera
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
    camera.position.set(0, 140, 210);
    camera.lookAt(0, 0, 0);

    // Renderer
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
    // Clear previous elements if any
    container.innerHTML = '';
    container.appendChild(renderer.domElement);

    // Lights
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.65);
    scene.add(ambientLight);

    const dirLight = new THREE.DirectionalLight(0xffffff, 0.85);
    dirLight.position.set(120, 220, 120);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize.width = 2048;
    dirLight.shadow.mapSize.height = 2048;
    scene.add(dirLight);

    const bluePointLight = new THREE.PointLight(0x3b82f6, 1.2, 600);
    bluePointLight.position.set(-150, 150, -150);
    scene.add(bluePointLight);

    const purplePointLight = new THREE.PointLight(0x8b5cf6, 1.0, 600);
    purplePointLight.position.set(150, 150, 150);
    scene.add(purplePointLight);

    // Grid Floor
    const gridHelper = new THREE.GridHelper(600, 60, 0x3b82f6, 0x1e293b);
    gridHelper.position.y = -0.5;
    scene.add(gridHelper);

    // Orbit Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.maxPolarAngle = Math.PI / 2 - 0.02; // Don't go below ground
    controls.minDistance = 20;
    controls.maxDistance = 800;
    controls.autoRotate = autoRotateEnabled;
    controls.autoRotateSpeed = 1.0;

    // Events
    window.addEventListener('resize', onWindowResize);
    container.addEventListener('mousemove', onPointerMove);
    container.addEventListener('click', onPointerClick);

    // Start animation loop
    animate();
}

function resetCameraView() {
    let startPos = camera.position.clone();
    let targetPos = new THREE.Vector3(0, 140, 210);
    let startLookAt = controls.target.clone();
    let targetLookAt = new THREE.Vector3(0, 0, 0);

    let duration = 600;
    let startTime = performance.now();

    function step(now) {
        let progress = Math.min((now - startTime) / duration, 1);
        // Ease out cubic
        let ease = 1 - Math.pow(1 - progress, 3);

        camera.position.lerpVectors(startPos, targetPos, ease);
        controls.target.lerpVectors(startLookAt, targetLookAt, ease);
        controls.update();

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

function onWindowResize() {
    const container = document.getElementById('chart-container');
    if (!container || !renderer || !camera) return;

    const width = container.clientWidth;
    const height = container.clientHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height);
}

// Fetch Cluster Data
async function fetchData() {
    try {
        const response = await fetch('/api/cluster-data');
        if (!response.ok) throw new Error('Failed to fetch cluster data');
        clusterData = await response.json();

        document.getElementById('loading').classList.add('hidden');
        
        if (!scene) {
            init3D();
        }
        build3DCluster(clusterData);
    } catch (error) {
        console.error(error);
        document.getElementById('loading').innerHTML = `<p style="color: #ef4444; font-weight: 600;">Error loading cluster data: ${error.message}</p>`;
    }
}

// Helper to create 3D Canvas Text Sprite for Node Labels
function createTextSprite(text, fontSize = 28, textColor = '#f8fafc', bgColor = 'rgba(15, 23, 42, 0.85)') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 512;
    canvas.height = 128;

    // Pill background
    ctx.fillStyle = bgColor;
    ctx.roundRect(16, 16, canvas.width - 32, canvas.height - 32, 24);
    ctx.fill();

    // Border
    ctx.strokeStyle = 'rgba(59, 130, 246, 0.6)';
    ctx.lineWidth = 6;
    ctx.stroke();

    // Text
    ctx.font = `700 ${fontSize}px Inter, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);

    const texture = new THREE.CanvasTexture(canvas);
    const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true });
    const sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(45, 11.25, 1);
    return sprite;
}

// Build 3D Topology from Data
function build3DCluster(data) {
    // Clear existing node & pod meshes
    podMeshes.forEach(mesh => {
        scene.remove(mesh);
        mesh.geometry.dispose();
        if (mesh.material) mesh.material.dispose();
    });
    podMeshes = [];

    nodeMeshes.forEach(obj => {
        scene.remove(obj);
        if (obj.geometry) obj.geometry.dispose();
        if (obj.material) obj.material.dispose();
    });
    nodeMeshes = [];

    if (!data || !data.children || data.children.length === 0) return;

    // 1. Compute cluster max metrics for scaling height
    maxCpuInCluster = 1;
    maxMemInCluster = 1;

    data.children.forEach(node => {
        if (node.children) {
            node.children.forEach(pod => {
                if (pod.type === 'pod') {
                    if (pod.cpu_raw > maxCpuInCluster) maxCpuInCluster = pod.cpu_raw;
                    if (pod.memory_raw > maxMemInCluster) maxMemInCluster = pod.memory_raw;
                }
            });
        }
    });

    // 2. Layout on X-Z floor using D3 Treemap
    const BOUNDS_SIZE = 220; // 3D world dimension for ground layout

    const root = d3.hierarchy(data)
        .sum(d => {
            if (d.type === 'node') return 0;
            // Ensure minimum footprint for every pod block
            return Math.max(d.cpu_raw || 0, d.memory_raw ? d.memory_raw / 1000000 : 0, 15);
        })
        .sort((a, b) => b.value - a.value);

    d3.treemap()
        .size([BOUNDS_SIZE, BOUNDS_SIZE])
        .paddingTop(36)
        .paddingRight(10)
        .paddingInner(6)
        .paddingBottom(10)
        .paddingLeft(10)(root);

    // 3. Render Nodes and Pods
    const nodes = root.descendants().filter(d => d.depth === 1);
    const pods = root.leaves();

    // Render Node Platforms
    nodes.forEach(n => {
        const nw = Math.max(10, n.x1 - n.x0);
        const nh = Math.max(10, n.y1 - n.y0);
        const centerX = (n.x0 + n.x1) / 2 - BOUNDS_SIZE / 2;
        const centerZ = (n.y0 + n.y1) / 2 - BOUNDS_SIZE / 2;

        const platformGeo = new THREE.BoxGeometry(nw, 1.5, nh);
        const platformMat = new THREE.MeshStandardMaterial({
            color: 0x1e293b,
            roughness: 0.5,
            metalness: 0.3,
            transparent: true,
            opacity: 0.95
        });
        const platformMesh = new THREE.Mesh(platformGeo, platformMat);
        platformMesh.position.set(centerX, 0.75, centerZ);
        platformMesh.receiveShadow = true;

        // Platform Border Frame
        const edges = new THREE.EdgesGeometry(platformGeo);
        const lineMat = new THREE.LineBasicMaterial({ color: 0x3b82f6, linewidth: 2 });
        const wireframe = new THREE.LineSegments(edges, lineMat);
        platformMesh.add(wireframe);

        scene.add(platformMesh);
        nodeMeshes.push(platformMesh);

        // Node Label Sprite
        const sprite = createTextSprite(n.data.name, 26, '#f8fafc');
        sprite.position.set(centerX, 12, centerZ - nh / 2 - 4);
        scene.add(sprite);
        nodeMeshes.push(sprite);
    });

    // Render Pod Towers
    pods.forEach(p => {
        const pw = Math.max(2, (p.x1 - p.x0) * 0.88);
        const pd = Math.max(2, (p.y1 - p.y0) * 0.88);
        const centerX = (p.x0 + p.x1) / 2 - BOUNDS_SIZE / 2;
        const centerZ = (p.y0 + p.y1) / 2 - BOUNDS_SIZE / 2;

        // Calculate height
        const targetHeight = getTargetHeight(p.data);

        // Box geometry: 1 unit height base, scaled in animation loop
        const podGeo = new THREE.BoxGeometry(pw, 1, pd);

        // Color & Material based on Pod Status
        let color = 0x10b981; // Running emerald
        let emissive = 0x059669;
        let opacity = 0.9;
        let transparent = false;

        if (p.data.type === 'unused') {
            color = 0x64748b;
            emissive = 0x334155;
            opacity = 0.25;
            transparent = true;
        } else if (p.data.status === 'Pending') {
            color = 0xf59e0b;
            emissive = 0xd97706;
        } else if (p.data.status === 'Succeeded') {
            color = 0x94a3b8;
            emissive = 0x475569;
        } else if (p.data.status !== 'Running') {
            color = 0xef4444;
            emissive = 0xdc2626;
        }

        const podMat = new THREE.MeshStandardMaterial({
            color: color,
            emissive: emissive,
            emissiveIntensity: p.data.type === 'unused' ? 0.05 : 0.25,
            roughness: 0.3,
            metalness: 0.4,
            transparent: transparent,
            opacity: opacity
        });

        const podMesh = new THREE.Mesh(podGeo, podMat);
        podMesh.castShadow = true;
        podMesh.receiveShadow = true;

        // Initial positions & properties
        podMesh.position.set(centerX, 1.5 + 0.1 / 2, centerZ);
        podMesh.scale.set(1, 0.1, 1);

        podMesh.userData = {
            ...p.data,
            nodeName: p.parent ? p.parent.data.name : 'Unknown Node'
        };
        podMesh.targetHeight = targetHeight;
        podMesh.currentHeight = 0.1;
        podMesh.baseWidth = pw;
        podMesh.baseDepth = pd;
        podMesh.baseCenterX = centerX;
        podMesh.baseCenterZ = centerZ;
        podMesh.originalColor = color;
        podMesh.originalEmissive = emissive;
        podMesh.originalEmissiveIntensity = p.data.type === 'unused' ? 0.05 : 0.25;

        scene.add(podMesh);
        podMeshes.push(podMesh);
    });
}

// Calculate target 3D tower height based on current metric
function getTargetHeight(data) {
    if (data.type === 'unused') return 0.5; // low plate for available capacity

    const MAX_HEIGHT = 50; // Maximum tower height units
    const MIN_HEIGHT = 1.5; // Base minimum height for visibility

    if (currentMetric === 'cpu') {
        const val = data.cpu_raw || 0;
        return MIN_HEIGHT + (val / (maxCpuInCluster || 1)) * MAX_HEIGHT;
    } else {
        const val = data.memory_raw || 0;
        return MIN_HEIGHT + (val / (maxMemInCluster || 1)) * MAX_HEIGHT;
    }
}

// Update heights smoothly when toggling metric
function updatePodHeights() {
    podMeshes.forEach(mesh => {
        mesh.targetHeight = getTargetHeight(mesh.userData);
    });
}

// Main Render & Animation Loop
function animate() {
    requestAnimationFrame(animate);

    // Smoothly interpolate pod tower heights (lerp)
    podMeshes.forEach(mesh => {
        if (Math.abs(mesh.currentHeight - mesh.targetHeight) > 0.01) {
            mesh.currentHeight += (mesh.targetHeight - mesh.currentHeight) * 0.1;
            mesh.scale.y = mesh.currentHeight;
            // Keep tower base resting on the node platform at y = 1.5
            mesh.position.y = 1.5 + mesh.currentHeight / 2;
        }
    });

    controls.update();
    renderer.render(scene, camera);
}

// Mouse Pointer Raycasting & Hover Tooltip
function onPointerMove(event) {
    const container = document.getElementById('chart-container');
    const rect = container.getBoundingClientRect();

    mouse.x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
    mouse.y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(podMeshes);

    const tooltip = document.getElementById('tooltip');

    if (intersects.length > 0) {
        const hitMesh = intersects[0].object;

        if (hoveredPod !== hitMesh) {
            // Reset previous hovered pod
            if (hoveredPod) {
                hoveredPod.material.emissive.setHex(hoveredPod.originalEmissive);
                hoveredPod.material.emissiveIntensity = hoveredPod.originalEmissiveIntensity;
            }

            hoveredPod = hitMesh;
            // Highlight hovered pod tower
            hoveredPod.material.emissive.setHex(0x60a5fa);
            hoveredPod.material.emissiveIntensity = 0.6;
        }

        // Display Tooltip
        tooltip.classList.remove('hidden');

        // Boundary handling
        const tWidth = 260;
        let left = event.pageX + 15;
        let top = event.pageY + 15;

        if (left + tWidth > window.innerWidth) {
            left = event.pageX - tWidth - 15;
        }

        tooltip.style.left = left + 'px';
        tooltip.style.top = top + 'px';

        const data = hitMesh.userData;
        const valCpu = formatCpu(data.cpu_raw);
        const valMem = formatBytes(data.memory_raw);

        if (data.type === 'unused') {
            tooltip.innerHTML = `
                <div class="tooltip-title">
                    <span>Available Capacity</span>
                    <span class="legend-dot unused"></span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Node:</span>
                    <span class="tooltip-value">${data.nodeName}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Unused CPU:</span>
                    <span class="tooltip-value">${valCpu}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Unused Memory:</span>
                    <span class="tooltip-value">${valMem}</span>
                </div>
            `;
        } else {
            const statusColor = data.status === 'Running' ? '#10b981' : (data.status === 'Pending' ? '#f59e0b' : (data.status === 'Succeeded' ? '#94a3b8' : '#ef4444'));
            tooltip.innerHTML = `
                <div class="tooltip-title">
                    <span>${data.name}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Namespace:</span>
                    <span class="tooltip-value">${data.namespace}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Node:</span>
                    <span class="tooltip-value">${data.nodeName}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Status:</span>
                    <span class="tooltip-value" style="color: ${statusColor}; font-weight: 700;">${data.status}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">CPU Usage:</span>
                    <span class="tooltip-value ${currentMetric === 'cpu' ? 'active-metric' : ''}">${valCpu}</span>
                </div>
                <div class="tooltip-row">
                    <span class="tooltip-label">Memory Usage:</span>
                    <span class="tooltip-value ${currentMetric === 'memory' ? 'active-metric' : ''}">${valMem}</span>
                </div>
            `;
        }

    } else {
        if (hoveredPod) {
            hoveredPod.material.emissive.setHex(hoveredPod.originalEmissive);
            hoveredPod.material.emissiveIntensity = hoveredPod.originalEmissiveIntensity;
            hoveredPod = null;
        }
        tooltip.classList.add('hidden');
    }
}

// Click to focus camera on selected Pod
function onPointerClick(event) {
    if (!hoveredPod) return;

    let targetPos = hoveredPod.position.clone();

    let startLookAt = controls.target.clone();
    let duration = 500;
    let startTime = performance.now();

    function step(now) {
        let progress = Math.min((now - startTime) / duration, 1);
        let ease = 1 - Math.pow(1 - progress, 3);

        controls.target.lerpVectors(startLookAt, targetPos, ease);
        controls.update();

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);
}

// Initial fetch and auto-polling every 30s
fetchData();
setInterval(fetchData, 30000);