Enhances agent data display

app/templates/agent-list.php

@@ -19,15 +19,16 @@
         'agent_id' => $agent['id']
     ];
     $jwt = $agentObject->generateAgentToken($payload, $agent['secret_key']);
+//    print_r($_SESSION);
 ?>
 <?php if (isset($_SESSION["agent{$agent['id']}_cache"])) { ?>
                             <button class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="load recently cached data" onclick="loadCache('<?= htmlspecialchars($agent['id']) ?>')">load cache</button>
                             <button class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="get fresh data from agent" onclick="fetchData('<?= htmlspecialchars($agent['id']) ?>', '<?= htmlspecialchars($agent['url']) ?>', '<?= htmlspecialchars($agent['agent_endpoint']) ?>', '<?= htmlspecialchars($jwt) ?>', true)">force refresh</button>
-                            <span id="cacheInfo<?= htmlspecialchars($agent['id']) ?>" style="margin: 5px 0;"></span>
 <?php } else { ?>
                             <button class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="get data from the agent" onclick="fetchData('<?= htmlspecialchars($agent['id']) ?>', '<?= htmlspecialchars($agent['url']) ?>', '<?= htmlspecialchars($agent['agent_endpoint']) ?>', '<?= htmlspecialchars($jwt) ?>')">fetch data</button>
                             <button class="btn btn-light" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="no cache to refresh">force refresh</button>
 <?php } ?>
+                            <span id="cacheInfo<?= htmlspecialchars($agent['id']) ?>" style="margin: 5px 0;"></span>
                     </p>
-                        <pre id="result<?= htmlspecialchars($agent['id']) ?>">click a button to fetch data from the agent.</pre>
+                        <pre class="agent_result" id="result<?= htmlspecialchars($agent['id']) ?>">click a button to fetch data from the agent.</pre>
 <?php } ?>

app/templates/page-header.php

@@ -25,6 +25,7 @@
     </script>
 <?php if ($page === 'agents') { ?>
     <script src="<?= $app_root ?>static/agents.js"></script>
+    <link rel="stylesheet" type="text/css" href="<?= $app_root ?>static/css/agents.css">
 <?php } ?>
     <title>Jilo Web</title>
     <link rel="icon" type="image/x-icon" href="<?= $app_root ?>static/favicon.ico">

public_html/static/agents.js

@@ -55,13 +55,22 @@ function fetchData(agent_id, url, endpoint, jwtToken, force = false) {
                     } else {
                         // show the result in the html
                         resultElement.innerHTML = JSON.stringify(result, null, 2);
-                        cacheInfoElement.innerHTML = "";
+
+                        // Show the cache timestamp from the session
+                        const cacheTimestamp = new Date(result.cache_time);
+
+                        // Display the cache retrieval date and time
+                        const formattedDate = cacheTimestamp.toLocaleDateString();
+                        const formattedTime = cacheTimestamp.toLocaleTimeString();
+                        cacheInfoElement.innerHTML = `cache refreshed on ${formattedDate} at ${formattedTime}`;
+
                         // send the result to PHP to store in session
                         saveResultToSession(result, agent_id);
                     }
                 } catch (e) {
                     // Display the error
                     resultElement.innerHTML = "Error: Response is not a valid JSON.<br />Response: " + xhr.responseText;
+                    console.error("error:", e);
                 }
             } else {
                 resultElement.innerHTML = `Error: Unable to fetch data from ${agentUrl}<br />Status Code: ${xhr.status}<br />Status Text: ${xhr.statusText}<br />Response: ${xhr.responseText}`;
@@ -139,6 +148,7 @@ function loadCache(agent_id) {
                     }
                 } catch (e) {
                     resultElement.innerHTML = "Error loading cached data.";
+                    console.error("error:", e);
                 }
             } else {
                 resultElement.innerHTML = `Error: Unable to load cache. Status code: ${xhr.status}`;

public_html/static/css/agents.css

@@ -0,0 +1,11 @@
+
+.agent_result {
+    text-align: left;
+    font-family: monospace;
+    white-space: pre-wrap;
+    background-color: #f4f4f4;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow-x: auto;
+}

public_html/static/loadcache.php

@@ -12,7 +12,9 @@ if (isset($_SESSION["agent{$agent}_cache"])) {
     echo json_encode([
         'status' => 'success',
         'data' => $_SESSION["agent{$agent}_cache"],
-        'cache_time' => $_SESSION["agent{$agent}_cache_time"] ?? time()  // we store cache time in the session
+        // we store cache time in the session
+        // FIXME may need to move to file cache
+        'cache_time' => $_SESSION["agent{$agent}_cache_time"] ?? time()
     ]);
 } else {
     // If no cached data exists