@appscode/design-system 1.0.43-alpha.99 → 1.1.0-alpha.10

package/plugins/caching.ts

@@ -0,0 +1,243 @@
+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." + md5(stringify(params)).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;
+
+  // queryParams without ctag
+  const queryParamsWithoutCtag = Object.keys(params).reduce((ob, key) => {
+    if (key !== "ctag") return { ...ob, [key]: params[key] };
+    else return { ...ob };
+  }, {});
+
+  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." + md5(stringify(queryParamsWithoutCtag)).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 storageKeyPrefix = `ctag.${user}.${cluster}.${gvr.replaceAll(
+          "/",
+          "."
+        )}`;
+
+        // clear list cache for all namespaces
+        localStorage.setItem(
+          `${storageKeyPrefix}.q.${md5(
+            stringify({ convertToTable: true })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        // clear list cache for specific namespace
+        localStorage.setItem(
+          `${storageKeyPrefix}.ns.${namespace || "default"}.q.${md5(
+            stringify({ convertToTable: true })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+
+        // clear for genericresources and resourcesummaries
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group=${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.resourcesummaries.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group-kind=${kind}.${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group=${group}`,
+            })
+          ).toString()}`,
+          new Date().getTime().toString()
+        );
+        localStorage.setItem(
+          `ctag.${user}.${cluster}.core.k8s.appscode.com.v1alpha1.genericresources.q.${md5(
+            stringify({
+              convertToTable: true,
+              labelSelector: `k8s.io/group-kind=${kind}.${group}`,
+            })
+          ).toString()}`,
+          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;
+}

package/plugins/time-convert.js

@@ -0,0 +1,49 @@
+import moment from "moment";
+import { useNow, useThrottleFn } from "@vueuse/core";
+
+const getTime = option => {
+  if (parseInt(option.time, 10) < 0 || !option.time) {
+    return undefined;
+  }
+  let time = option.time;
+
+  // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
+  time = moment(option.time).valueOf("x")
+    ? moment(option.time).valueOf("x")
+    : time * 1000;
+
+  return moment(time).format("MMM DD YYYY, h:mm A");
+};
+const getDayDifferences = options => {
+  const past = moment(options.past).isValid()
+    ? moment(options.past).valueOf("x") / 1000
+    : options.past;
+  const now = Date.now() / 1000;
+  const diff = now - past;
+  if (parseInt(options.past, 10) > 10) {
+    let ret = Math.floor(diff / 86400);
+    let unit = "";
+    if (diff < 60) {
+      ret = parseInt(diff, 10);
+      unit = " Second";
+    } else if (diff < 3600) {
+      ret = parseInt(diff / 60, 10);
+      unit = " Minute";
+    } else if (diff < 86400) {
+      ret = parseInt(diff / 3600, 10);
+      unit = " Hour";
+    } else {
+      ret = parseInt(diff / 86400, 10);
+      unit = " Day";
+    }
+    unit += ret > 1 ? "s" : "";
+    return ret + unit;
+  }
+  return undefined;
+};
+
+export default {
+  getTime,
+  // formatMoment,
+  getDayDifferences
+};

package/plugins/vue-toaster.js

@@ -41,6 +41,7 @@ module.exports = {
       },
       options: {
         icon: "fa-warning",
+        duration: 20000,
         type: "error",
         className: "ac-toast is-error",
       },
@@ -56,6 +57,7 @@ module.exports = {
       },
       options: {
         icon: "fa-info",
+        duration: 20000,
         type: "info",
         className: "ac-toast is-info",
       },
@@ -73,6 +75,7 @@ module.exports = {
       },
       options: {
         icon: "fa-warning",
+        duration: 2500,
         type: "error",
         className: "ac-toast is-warning",
       },

package/vue-components/v2/banner/Banner.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sign-up-notification mb-20">
     <div class="notification-inner has-text-centered">
-      <h3><slot name="banner-title" /></h3>
-      <slot />
+      <h3><slot name="banner-title">Error!</slot></h3>
+      <slot><p>Oops!! There was an error while loading!</p></slot>
     </div>
   </div>
 </template>

package/vue-components/v2/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ac-breadcrumb">
+    <nav aria-label="breadcrumbs" class="breadcrumb">
+      <ul>
+        <li
+          v-for="(item, idx) in list"
+          :key="idx"
+          :class="{ 'is-active': idx === list.length - 1 }"
+        >
+          <router-link
+            class="router-link-active"
+            :class="{ 'is-active': idx === list.length - 1 }"
+            :to="item.path"
+            >{{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    };
+  },
+  methods: {
+    createBreadcrumbs(n) {
+      //Adding dynamic path to the route
+      const listPaths = this.$route.matched.map(element =>
+        this.pathReplaceWithParam(element.path)
+      );
+
+      //Removing the last duplicate value from the listpaths array
+      listPaths.pop();
+
+      //Createing the breadcrumb name
+      const listName = this.createList(listPaths);
+
+      //Set the new breadcrumb name and path value to list
+      this.list = listName.map((element, index) => {
+        return {
+          name: element,
+          path: listPaths[index]
+        };
+      });
+    },
+    pathReplaceWithParam(path) {
+      //Split the path and remove the first and last empty block
+      let splitPath = path.split("/").filter(element => element !== "");
+
+      //Replace all element with query params where the element start with ":"
+      // Then again add them wthi "/" and return the path value
+      return splitPath.reduce((pval, cval) => {
+        if (cval[0] === ":") {
+          const cutIndex =
+            cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
+          return (pval += this.$route.params[cval.slice(1, cutIndex)] + "/");
+        } else return (pval += cval + "/");
+      }, "/");
+    },
+    createList(paths) {
+      //Split all the path and remove all empty block
+      let spath = paths.map(element => {
+        return element.split("/").filter(word => word !== "");
+      });
+
+      // Convert all the path arry in one arry where each element is the  different fo previous element
+      return spath.reduce((prev, curr, currentIdx) => {
+        if (currentIdx === 0) return prev.concat([this.createVal(0, curr)]);
+        else
+          return prev.concat([
+            this.createVal(spath[currentIdx - 1].length, curr)
+          ]);
+      }, []);
+    },
+    createVal(startIdx, paths) {
+      return paths.reduce((prev, curr, idx) => {
+        if (idx >= startIdx) {
+          if (idx + 1 === paths.length) return (prev += curr);
+          else return (prev += curr + " / ");
+        } else return prev + "";
+      }, "");
+    }
+  },
+  watch: {
+    "$route.path": {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.createBreadcrumbs(n);
+      }
+    }
+  }
+};
+</script>

package/vue-components/v2/button/Button.vue

@@ -4,6 +4,7 @@
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
     :disabled="disabled"
     @click="handleClick"
+    :title="tooltip"
   >
     <span v-if="iconClass || iconImage" class="icon is-small">
       <img
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: undefined
+    },
     // for loader
     isLoaderActive: {
       type: Boolean,

package/vue-components/v2/button/DownloadBtn.vue

@@ -0,0 +1,45 @@
+<template>
+  <ac-button
+    modifier-classes="is-primary is-square"
+    icon-class="download"
+    :is-loader-active="isFetching"
+    @click="download()"
+  />
+</template>
+
+<script>
+import downloadFunc from "downloadjs";
+
+export default {
+  components: {
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    fileData: {
+      type: String,
+      default: ""
+    },
+    fileName: {
+      type: String,
+      default: ""
+    },
+    isFetching: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      downloadIcon: "fa fa-cloud-download"
+    };
+  },
+  component: {
+    downloadFunc
+  },
+  methods: {
+    download() {
+      downloadFunc(this.fileData, this.fileName);
+    }
+  }
+};
+</script>

package/vue-components/v2/card/Card.vue

@@ -3,6 +3,7 @@
     class="ac-single-card has-text-centered style-three"
     :class="{ 'is-selected': isSelected }"
     @click="$emit('click', $event)"
+    data-testid="card-list-item"
   >
     <div class="ac-card-logo" v-if="hasLogo">
       <slot name="card-logo" />

package/vue-components/v2/content/ContentTable.vue

@@ -2,8 +2,10 @@
   <content-layout>
     <template #content-header>
       <content-header
+        v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
+        :remove-border-bottom="removeBorderBottom"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
       >
         <header-item>
@@ -35,6 +37,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    hideHeader: {
+      type: Boolean,
+      default: false,
+    },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),

package/vue-components/v2/editor/Editor.vue

@@ -7,21 +7,22 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
-      v-model="editorContent"
+      :value="editorContent"
+      @change="onChange"
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: readOnly,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
+      data-testid="monaco-editor-edit-section"
     />
     <monaco-editor
       v-if="activeTab === 'preview'"
@@ -31,65 +32,75 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: true,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
       :original="originalEditorContent"
       :diff-editor="true"
+      data-testid="monaco-editor-preview-section"
     />
   </div>
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     value: {
       type: String,
-      default: ""
+      default: "",
     },
     originalValue: {
       type: String,
-      default: ""
+      default: "",
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     language: {
       type: String,
-      default: "yaml"
+      default: "yaml",
     },
     showMinimap: {
       type: Boolean,
-      default: true
+      default: true,
     },
     editorHeight: {
       type: Number,
-      default: 40
+      default: 40,
     },
     editorTheme: {
       type: String,
-      default: ""
+      default: "",
     },
     wordWrap: {
       type: String,
-      default: "off"
+      default: "off",
     },
   },
+
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco")
+    MonacoEditor: () => ({
+      component: import("./MonacoEditor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 100000,
+    }),
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: ""
+      originalEditorContent: "",
     };
   },
 
@@ -105,7 +116,7 @@ export default {
           ? "vs-dark"
           : "vs")
       );
-    }
+    },
   },
 
   watch: {
@@ -115,7 +126,7 @@ export default {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      }
+      },
     },
     originalValue: {
       immediate: true,
@@ -123,18 +134,20 @@ export default {
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onChange(e) {
+      if (typeof e === "string") this.editorContent = e;
+    },
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);
       });
-    }
-  }
+    },
+  },
 };
 </script>