agents.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>JSON Data Display</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. margin: 20px;
  11. }
  12. #data-container {
  13. margin-top: 20px;
  14. }
  15. .data-item {
  16. margin-bottom: 10px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h1>JSON Data Display</h1>
  22. <div id="data-container">
  23. <!-- Data will be inserted here -->
  24. </div>
  25. <script>
  26. const url = 'http://localhost:8080/json'; // Replace with your actual URL
  27. const dataContainer = document.getElementById('data-container');
  28. async function fetchData() {
  29. try {
  30. const response = await fetch(url);
  31. if (!response.ok) {
  32. throw new Error('Network response was not ok');
  33. }
  34. const data = await response.json();
  35. updateData(data);
  36. } catch (error) {
  37. console.error('There was a problem with the fetch operation:', error);
  38. }
  39. }
  40. function updateData(data) {
  41. const agent = data.Agents.blackbox;
  42. dataContainer.innerHTML = `
  43. <div class="data-item"><strong>Name:</strong> ${agent.Name}</div>
  44. <div class="data-item"><strong>Registration Time:</strong> ${agent.Reg}</div>
  45. <div class="data-item"><strong>Cores:</strong> ${agent.Cores}</div>
  46. <div class="data-item"><strong>CPU Usage:</strong> ${agent.Cpu.join(', ')}</div>
  47. <div class="data-item"><strong>Max Memory:</strong> ${agent.Mem_max}</div>
  48. <div class="data-item"><strong>Memory Usage:</strong> ${agent.Mem_usg.join(', ')}</div>
  49. <div class="data-item"><strong>Task ID:</strong> ${agent.TaskId}</div>
  50. `;
  51. }
  52. // Fetch data initially
  53. fetchData();
  54. // Fetch data every second
  55. setInterval(fetchData, 1000);
  56. </script>
  57. <hr/>
  58. <form action="http://localhost:8080/addTask" method="post">
  59. <table border="0">
  60. <tr><td>Row1</td><td>:</td><td><input type="text" value="769104802" name="rows"></td></tr>
  61. <tr><td>Row2</td><td>:</td><td><input type="text" value="154800060" name="rows"></td></tr>
  62. <tr><td>Row3</td><td>:</td><td><input type="text" value="832700154" name="rows"></td></tr>
  63. <tr><td>Row4</td><td>:</td><td><input type="text" value="600900328" name="rows"></td></tr>
  64. <tr><td>Row5</td><td>:</td><td><input type="text" value="045328670" name="rows"></td></tr>
  65. <tr><td>Row6</td><td>:</td><td><input type="text" value="328670945" name="rows"></td></tr>
  66. <tr><td>Row7</td><td>:</td><td><input type="text" value="597410280" name="rows"></td></tr>
  67. <tr><td>Row8</td><td>:</td><td><input type="text" value="006283090" name="rows"></td></tr>
  68. <tr><td>Row9</td><td>:</td><td><input type="text" value="200590006" name="rows"></td></tr>
  69. <tr><td colspan="3" align="right"><input type="submit"></td></tr>
  70. </table>
  71. </form>
  72. <hr/>
  73. </body>
  74. </html>