@appscode/design-system 1.0.43-alpha.215 → 1.0.43-alpha.217

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.215",
+  "version": "1.0.43-alpha.217",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@appscode/design-system-images": "^0.0.13"
+    "@appscode/design-system-images": "^0.0.13",
+    "crypto-js": "^4.1.1",
+    "fast-json-stable-stringify": "^2.1.0"
   },
   "repository": {
     "type": "git",

package/plugins/caching.ts

@@ -0,0 +1,190 @@
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import md5 from "crypto-js/md5";
+import stringify from "fast-json-stable-stringify";
+
+const resourceListApiRgx =
+  /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/([^/]+)\/([^/]+)(\/namespaces\/([^/?]+))?\/([^/?]+)(.*)$/;
+const usermenuUpdateApiRgx =
+  /^\/clusters\/([^/]+)\/([^/]+)\/proxy\/meta\.k8s\.appscode\.com\/([^/]+)\/usermenus\/cluster$/;
+
+function getRequestInterceptor(config: AxiosRequestConfig) {
+  // get call
+  const { url, _recurringCall, params } = config;
+  const matchListApi = url?.match(resourceListApiRgx);
+  if (matchListApi) {
+    // url matches list / render api call
+    const [, user, cluster, group, version, , namespace, resource] =
+      matchListApi;
+
+    const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
+      namespace ? ".ns." + namespace : ""
+    }${params?.q ? ".q." + md5(params?.q).toString() : ""}`;
+
+    if (_recurringCall) {
+      // always send latest date time as ctag
+      return new Date().getTime();
+    } else {
+      // read ctag from local storage if exists
+      const storageKey = `ctag.${suffix}`;
+      // read local storage ctag
+      return localStorage.getItem(storageKey);
+    }
+  }
+}
+
+function getResponseInterceptor(resp: AxiosResponse) {
+  // get call
+  const { config, headers } = resp;
+  const { url, _recurringCall, params } = config;
+  const matchListApi = url?.match(resourceListApiRgx);
+  if (matchListApi) {
+    // url matches list / render api call
+    // window.console.log(matchListApi)
+    const [, user, cluster, group, version, , namespace, resource] =
+      matchListApi;
+
+    const suffix = `${user}.${cluster}.${group}.${version}.${resource}${
+      namespace ? ".ns." + namespace : ""
+    }${params?.q ? ".q." + md5(params?.q).toString() : ""}`;
+
+    const storageKey = `etag.${suffix}`;
+    // local storage etag
+    const eTag = localStorage.getItem(storageKey);
+    // etag in header
+    const headerEtag = headers?.["etag"];
+
+    // window.console.log({ eTag, headerEtag, _recurringCall, url })
+
+    if (_recurringCall) {
+      // for recurring api call
+      if (headerEtag && headerEtag !== eTag) {
+        // etag missmatch
+        if (params.ctag) {
+          // save request query parameter ctag into local storage
+          localStorage.setItem(`ctag.${suffix}`, params.ctag);
+        }
+        // update store etag with latest header etag
+        localStorage.setItem(`etag.${suffix}`, headerEtag);
+
+        if (namespace) {
+          // for namespaced list calls if etag missmatch happens
+          // update the ctag storage for all namespaces
+          // this will force the all namespaced list call to ignore disk cache
+          localStorage.setItem(
+            `etag.${user}.${cluster}.${group}.${version}.${resource}`,
+            new Date().getTime().toString()
+          );
+        }
+      }
+    } else {
+      // not recurring api call
+      if (eTag !== headerEtag && headerEtag) {
+        // if the etag missmatches, then the data has changed
+        // update local etag
+        localStorage.setItem(storageKey, headerEtag);
+      }
+    }
+  }
+}
+
+function putResponseInterceptor(resp: AxiosResponse) {
+  const { config } = resp;
+  const { url } = config;
+  const matchUsermenuUpdate = url?.match(usermenuUpdateApiRgx);
+  if (matchUsermenuUpdate) {
+    // user menu update api is called
+    const [, user, cluster, version] = matchUsermenuUpdate;
+
+    // calculate the local storage key
+    const renderStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.rendermenus.q.${md5(
+      stringify({
+        apiVersion: `meta.k8s.appscode.com/${version}`,
+        kind: "RenderMenu",
+        request: {
+          menu: "cluster",
+          mode: "Accordion",
+        },
+      })
+    ).toString()}`;
+    const availableMenuStorageKey = `ctag.${user}.${cluster}.meta.k8s.appscode.com.${version}.usermenus`;
+
+    // set new ctag to that storage key
+    // next time render menu is called, cached data won't be used
+    localStorage.setItem(renderStorageKey, new Date().getTime().toString());
+    // for all available menus api
+    localStorage.setItem(
+      availableMenuStorageKey,
+      new Date().getTime().toString()
+    );
+  }
+}
+
+export function handleCacheFromYamls(
+  yamls: Array<{
+    apiVersion: string;
+    kind: string;
+    metadata: { name: string; namespace: string };
+  }>,
+  user: string,
+  cluster: string,
+  gkToGvrMap: Record<string, string>
+) {
+  return function () {
+    yamls.forEach((yaml) => {
+      const { apiVersion, kind, metadata } = yaml;
+      const { namespace } = metadata || {};
+      const apiVersionMatch = apiVersion.match(/^(([^/]+)\/)?([^/]+)$/);
+      if (apiVersionMatch) {
+        // separate the group and version
+        const [, , group] = apiVersionMatch;
+        const groupKind = `${group || "core"}/${kind}`;
+        const gvr = (gkToGvrMap && gkToGvrMap[groupKind]) || "";
+
+        const storageKey = `ctag.${user}.${cluster}.${gvr.replaceAll(
+          "/",
+          "."
+        )}`;
+
+        // clear list cache for all namespaces
+        localStorage.setItem(storageKey, new Date().getTime().toString());
+
+        // clear list cache for specific namespace
+        localStorage.setItem(
+          `${storageKey}.ns.${namespace || "default"}`,
+          new Date().getTime().toString()
+        );
+      }
+    });
+  };
+}
+
+export async function requestInterceptor(config: AxiosRequestConfig) {
+  // parse the request url
+  const { method, params } = config;
+
+  let ctag;
+
+  if (method === "get") {
+    ctag = getRequestInterceptor(config);
+  }
+
+  return {
+    ...config,
+    params: { ...params, ctag },
+  };
+}
+
+export function responseInterceptor(resp: AxiosResponse) {
+  const { config } = resp;
+  // parse the request url
+  const { method } = config;
+
+  if (method === "get") {
+    // get call
+    getResponseInterceptor(resp);
+  } else if (method === "put") {
+    putResponseInterceptor(resp);
+  }
+
+  return resp;
+}