sacha
/
sfcs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Data Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #data-container {
            margin-top: 20px;
        }
        .data-item {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>JSON Data Display</h1>
    <div id="data-container">
        <!-- Data will be inserted here -->
    </div>

    <script>
        const url = 'http://localhost:8080/json'; // Replace with your actual URL
        const dataContainer = document.getElementById('data-container');

        async function fetchData() {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                updateData(data);
            } catch (error) {
                console.error('There was a problem with the fetch operation:', error);
            }
        }

        function updateData(data) {
            const agent = data.Agents.blackbox;
            dataContainer.innerHTML = `
                <div class="data-item"><strong>Name:</strong> ${agent.Name}</div>
                <div class="data-item"><strong>Registration Time:</strong> ${agent.Reg}</div>
                <div class="data-item"><strong>Cores:</strong> ${agent.Cores}</div>
                <div class="data-item"><strong>CPU Usage:</strong> ${agent.Cpu.join(', ')}</div>
                <div class="data-item"><strong>Max Memory:</strong> ${agent.Mem_max}</div>
                <div class="data-item"><strong>Memory Usage:</strong> ${agent.Mem_usg.join(', ')}</div>
                <div class="data-item"><strong>Task ID:</strong> ${agent.TaskId}</div>
            `;
        }

        // Fetch data initially
        fetchData();

        // Fetch data every second
        setInterval(fetchData, 1000);
    </script>
</body>
</html>