Fixes AJAX agent cache buttons

app/classes/agent.php

@@ -113,8 +113,8 @@ class Agent {
 
     // check for agent cache
     public function checkAgentCache($agent_id) {
-        $agent_cache_name = $agent_id . '_cache';
+        $agent_cache_name = 'agent' . $agent_id . '_cache';
-        $agent_cache_time = $agent_id . '_time';
+        $agent_cache_time = 'agent' . $agent_id . '_time';
         return isset($_SESSION[$agent_cache_name]) && isset($_SESSION[$agent_cache_time]) && (time() - $_SESSION[$agent_cache_time] < 600);
     }
 
@@ -155,8 +155,8 @@ class Agent {
 
         // we need agent details for URL and JWT token
         $agent = $this->getAgentDetails($agent_id);
-        $agent_cache_name = $agent_id . '_cache';
+        $agent_cache_name = 'agent' . $agent_id . '_cache';
-        $agent_cache_time = $agent_id . '_time';
+        $agent_cache_time = 'agent' . $agent_id . '_time';
 
         // check if the cache is still valid, unless force-refresh is requested
         if (!$force && this->checkAgentCache($agent_id)) {
@@ -193,6 +193,12 @@ class Agent {
     }
 
 
+    // clear agent cache
+    public function clearAgentCache($agent_id) {
+        $_SESSION["agent{$agent_id}_cache"] = '';
+        $_SESSION["agent{$agent_id}_cache_time"] = '';
+    }
+
 }
 
 ?>

app/pages/agents.php

@@ -17,9 +17,22 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
     if ($result) {
         $_SESSION["agent{$agent}_cache"] = $result;
         $_SESSION["agent{$agent}_cache_time"] = time();  // store the cache time
-        echo json_encode(['status' => 'success']);
+        echo json_encode([
+            'status'    => 'success',
+            'message'   => "Cache for agent {$agent} is stored."
+        ]);
+    } elseif ($result === null && !empty($agent)) {
+        unset($_SESSION["agent{$agent}_cache"]);
+        unset($_SESSION["agent{$agent}_cache_time"]);
+        echo json_encode([
+            'status'    => 'success',
+            'message'   => "Cache for agent {$agent} is cleared."
+        ]);
     } else {
-        echo json_encode(['status' => 'error', 'message' => 'Invalid data']);
+        echo json_encode([
+            'status'    => 'error',
+            'message'   => 'Invalid data'
+        ]);
     }
 
 //// if it's a GET request, it's read/load from cache

app/templates/agent-list.php

@@ -22,13 +22,16 @@
 //    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 id="agent<?= htmlspecialchars($agent['id']) ?>-fetch" 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) ?>', true)">fetch data</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>
+                            <button id="agent<?= htmlspecialchars($agent['id']) ?>-cache" class="btn btn-secondary" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="load cache" onclick="loadCache('<?= htmlspecialchars($agent['id']) ?>')">load cache</button>
-<?php } else { ?>
+                            <button id="agent<?= htmlspecialchars($agent['id']) ?>-clear" class="btn btn-danger" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="clear cache" onclick="clearCache('<?= htmlspecialchars($agent['id']) ?>')">clear cache</button>
-                            <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>
+<?php } else { ?>
-                        <pre class="results" id="result<?= htmlspecialchars($agent['id']) ?>">click a button to fetch data from the agent.</pre>
+                            <button id="agent<?= htmlspecialchars($agent['id']) ?>-fetch" 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 style="display: none" disabled id="agent<?= htmlspecialchars($agent['id']) ?>-cache" class="btn btn-secondary" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="load cache" onclick="loadCache('<?= htmlspecialchars($agent['id']) ?>')">load cache</button>
+                            <button style="display: none" disabled id="agent<?= htmlspecialchars($agent['id']) ?>-clear" class="btn btn-danger" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="clear cache" onclick="clearCache('<?= htmlspecialchars($agent['id']) ?>')">clear cache</button>
+                            <span style="display: none" id="cacheInfo<?= htmlspecialchars($agent['id']) ?>" style="margin: 5px 0;"></span>
+<?php } ?>
+                    </p>
+                        <pre class="results" id="result<?= htmlspecialchars($agent['id']) ?>">click a button to display data from the agent.</pre>
 <?php } ?>

public_html/static/agents.js

@@ -2,6 +2,8 @@ function fetchData(agent_id, url, endpoint, jwtToken, force = false) {
     // FIXME make use of force variable
 
     let counter = 0;
+    const loadCacheButton = document.getElementById('agent' + agent_id + '-cache');
+    const clearCacheButton = document.getElementById('agent' + agent_id + '-clear');
     const resultElement = document.getElementById("result" + agent_id);
     const cacheInfoElement = document.getElementById("cacheInfo" + agent_id);
 
@@ -56,15 +58,22 @@ function fetchData(agent_id, url, endpoint, jwtToken, force = false) {
                         // show the result in the html
                         resultElement.innerHTML = JSON.stringify(result, null, 2);
 
-                        // Show the cache timestamp from the session
+                        // get the cache timestamp from the session
                         const now = Date.now();
                         const cacheTimestamp = new Date(now);
 
-                        // Display the cache retrieval date and time
+                        // display the cache retrieval date and time
                         const formattedDate = cacheTimestamp.toLocaleDateString();
                         const formattedTime = cacheTimestamp.toLocaleTimeString();
+                        cacheInfoElement.style.display = '';
                         cacheInfoElement.innerHTML = `cache refreshed on ${formattedDate} at ${formattedTime}`;
 
+                        // show the cache buttons
+                        loadCacheButton.disabled = false;
+                        loadCacheButton.style.display = '';
+                        clearCacheButton.disabled = false;
+                        clearCacheButton.style.display = '';
+
                         // send the result to PHP to store in session
                         saveResultToSession(result, agent_id);
                     }
@@ -165,6 +174,27 @@ function loadCache(agent_id) {
 }
 
 
+// clear cache
+function clearCache(agent_id) {
+    const loadCacheButton = document.getElementById('agent' + agent_id + '-cache');
+    const clearCacheButton = document.getElementById('agent' + agent_id + '-clear');
+    const cacheInfoElement = document.getElementById('cacheInfo' + agent_id);
+    const resultElement = document.getElementById("result" + agent_id);
+
+    saveResultToSession(null, agent_id);
+
+    // hides the cache buttons
+    // FIXME add a check whether the saveResult function was successful
+    loadCacheButton.disabled = true;
+    loadCacheButton.style.display = 'none';
+    clearCacheButton.disabled = true;
+    clearCacheButton.style.display = 'none';
+    cacheInfoElement.innerHTML = '';
+    cacheInfoElement.style.display = 'none';
+    resultElement.innerHTML = 'click a button to to display data from the agent.';
+}
+
+
 // we send result to PHP session, to be available to the whole app
 function saveResultToSession(result, agent_id) {
     var xhr = new XMLHttpRequest();