|
|
@@ -0,0 +1,63 @@
|
|
|
+<!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>
|
