commit 01492c3dcbdba6b463ecef63f4c769520432d829
author Ed Tanous <ed@tanous.net> Sat Apr 20 16:34:54 2024 -0700
committer Ed Tanous <ed@tanous.net> Fri Apr 26 13:47:02 2024 +0000
tree 8c2077c7a79d8343f4502d151b4cadaf883151f3
parent 511650a90260e0922bfeb1091b4babc597d36af6

Implement response caching

Bmcweb supports the If-None-Match and etag headers on responses.  While
for static files, we can do a direct set, for responses, there's no way
to cache values.

Add caching support by adding what seems to be a well supported axios
package.  Note the intent is that the cache expires immediately, such
that the bmc will always be polled for results, and return 304 when not
modified.  Additionally, we currently cache these values in the session
context, such that they can be reused on refresh.

Tested: webui loads properly.  Upon navigating to a logs page, and back,
the network console shows the bmc returning nearly all redfish responses
with 304, not modified.

Change-Id: I2e8067a88a0352226db9f987d1508ab5bf266b92
Signed-off-by: Ed Tanous <ed@tanous.net>

package-lock.json

diff --git a/package-lock.json b/package-lock.json
index d482f66..e8b7fdd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
                 "@carbon/icons-vue": "10.28.0",
                 "@novnc/novnc": "1.2.0",
                 "axios": "1.6.0",
+                "axios-cache-interceptor": "1.5.1",
                 "bootstrap": "4.6.0",
                 "bootstrap-vue": "2.21.2",
                 "core-js": "3.9.1",
@@ -5752,6 +5753,25 @@
                 "proxy-from-env": "^1.1.0"
             }
         },
+        "node_modules/axios-cache-interceptor": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.5.1.tgz",
+            "integrity": "sha512-1p/rTi7DSqUghJ5Ck8GKNt47X6f3IB8XnJ+TM4PwIdhimmCgh0jEQiwI8mBvf2kIMIl4Kz5idwbf/ouK75nEHA==",
+            "dependencies": {
+                "cache-parser": "1.2.4",
+                "fast-defer": "1.1.8",
+                "object-code": "1.3.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/arthurfiorette/axios-cache-interceptor?sponsor=1"
+            },
+            "peerDependencies": {
+                "axios": "^1"
+            }
+        },
         "node_modules/axios/node_modules/form-data": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -6827,6 +6847,11 @@
                 "node": ">=4.0.0"
             }
         },
+        "node_modules/cache-parser": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/cache-parser/-/cache-parser-1.2.4.tgz",
+            "integrity": "sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g=="
+        },
         "node_modules/cacheable-request": {
             "version": "6.1.0",
             "dev": true,
@@ -10644,6 +10669,11 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/fast-defer": {
+            "version": "1.1.8",
+            "resolved": "https://registry.npmjs.org/fast-defer/-/fast-defer-1.1.8.tgz",
+            "integrity": "sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q=="
+        },
         "node_modules/fast-diff": {
             "version": "1.3.0",
             "dev": true,
@@ -15862,6 +15892,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/object-code": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.2.tgz",
+            "integrity": "sha512-3CVDmQiru7YYVr+4OpCGrqkVE7GogmWinDcgfno1fXlKgIhtW9FhgHTiV98gMPUjQwWuWvijQDCY8sGnqKrhTw=="
+        },
         "node_modules/object-copy": {
             "version": "0.1.0",
             "dev": true,

package.json

diff --git a/package.json b/package.json
index 18f3ade..be2fb41 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
         "@carbon/icons-vue": "10.28.0",
         "@novnc/novnc": "1.2.0",
         "axios": "1.6.0",
+        "axios-cache-interceptor": "1.5.1",
         "bootstrap": "4.6.0",
         "bootstrap-vue": "2.21.2",
         "core-js": "3.9.1",

src/store/api.js

diff --git a/src/store/api.js b/src/store/api.js
index 9fd900d..0bd84e6 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -1,4 +1,6 @@
 import Axios from 'axios';
+import { setupCache, buildWebStorage } from 'axios-cache-interceptor';
+
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
@@ -7,10 +9,21 @@
 Axios.defaults.headers.common['Accept'] = 'application/json';
 Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-const api = Axios.create({
+const axiosInstance = Axios.create({
   withCredentials: true,
 });
 
+const api = setupCache(axiosInstance, {
+  debug: console.log,
+  methods: ['get'],
+  interpretHeader: false,
+  etag: true,
+  modifiedSince: false,
+  staleIfError: false,
+  ttl: 0,
+  storage: buildWebStorage(localStorage, 'webui-vue-cache:'),
+});
+
 api.interceptors.response.use(undefined, (error) => {
   let response = error.response;