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 <[email protected]>

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

@@ -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;