Implement response cachingHEADmaster

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>

3 files changed, 50 insertions, 1 deletions

diff --git a/package-lock.json b/package-lock.json
index d482f663..e8b7fdd8 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,
diff --git a/package.json b/package.json
index 18f3aded..be2fb417 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",
diff --git a/src/store/api.js b/src/store/api.js
index 9fd900d2..0bd84e62 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 @@ import store from '../store';
 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;