@appscode/design-system 1.1.0 → 2.0.0

package/mixins/stickyContent.js

@@ -1,141 +0,0 @@
-module.exports = {
-  data() {
-    return {
-      stickyByRootRef: true,
-      topBoundary_Ref: "",
-      topBoundary_Sticky: 0,
-      contentsArray_Sticky: [],
-      isStickySectionViewed: [],
-      mutationObserver: null
-    };
-  },
-
-  mounted() {
-    if (this.stickyByRootRef) {
-      this.topBoundary_Sticky = Math.max(
-        this.$refs[this.topBoundary_Ref].getBoundingClientRect().top,
-        this.topBoundary_Sticky,
-        210
-      ); // 201 is for min-top-boundary
-    }
-    this.configSticky();
-    window.addEventListener("resize", this.onWindowResize);
-    window.addEventListener("scroll", this.configSticky);
-
-    // first declare the mutation observer handler method
-    const handler = mutationList => {
-      // loop through the list of mutations
-      for (const mutation of mutationList) {
-        if (mutation.type === "childList") {
-          // react to child nodes added or removed
-          this.configSticky();
-        }
-      }
-    };
-    // Create an observer instance linked to the callback function
-    this.mutationObserver = new MutationObserver(handler);
-    // Start observing the target node for configured mutations
-    this.contentsArray_Sticky.forEach(item => {
-      this.mutationObserver.observe(this.$refs[item[0]], {
-        attributes: false,
-        childList: true,
-        subtree: true
-      });
-    });
-  },
-
-  beforeDestroy() {
-    window.removeEventListener("resize", this.onWindowResize);
-    window.removeEventListener("scroll", this.configSticky);
-    // detach the mutation observer
-    this.mutationObserver.disconnect();
-  },
-
-  methods: {
-    onWindowResize() {
-      if (this.stickyByRootRef) {
-        this.updateSticky(
-          this.topBoundary_Ref,
-          this.contentsArray_Sticky,
-          true
-        );
-      }
-    },
-
-    // initialize the data of full sticky section
-    // called at created hook
-    initStickyData(topBoundary, contentsArray, hasTopRef) {
-      if (hasTopRef) {
-        this.topBoundary_Ref = topBoundary;
-      } else {
-        this.topBoundary_Sticky = topBoundary;
-      }
-      this.stickyByRootRef = hasTopRef;
-      this.contentsArray_Sticky = contentsArray;
-    },
-
-    // to update top boundary and content array
-    updateSticky(topBoundary, contentsArray, hasTopRef) {
-      this.initStickyData(topBoundary, contentsArray, hasTopRef);
-      if (this.stickyByRootRef) {
-        this.topBoundary_Sticky = Math.max(
-          this.$refs[this.topBoundary_Ref].getBoundingClientRect().top,
-          this.topBoundary_Sticky,
-          210
-        ); // 210 is for min-top-boundary
-      }
-      this.configSticky();
-    },
-
-    // to check the current sticky section
-    configSticky() {
-      this.setBottomSectionConfig(
-        this.$refs,
-        this.contentsArray_Sticky,
-        window.innerHeight,
-        this.topBoundary_Sticky
-      );
-    },
-
-    // Handle Multiple sticky section
-    setBottomSectionConfig(refs, refArray, windowHeight, topBoundary) {
-      refArray.forEach((item, idx) => {
-        const contentRef = refs[item[0]];
-        const actionRef = refs[item[1]];
-        const bound = contentRef.getBoundingClientRect();
-
-        if (actionRef.getBoundingClientRect().bottom <= windowHeight) {
-          this.isStickySectionViewed[idx] = true;
-        }
-
-        // Extra 21 for margin-top
-        if (
-          bound.top < topBoundary + 21 &&
-          bound.bottom > windowHeight - actionRef.offsetHeight
-        ) {
-          if (
-            !actionRef.classList.contains("is-sticky") &&
-            this.isStickySectionViewed[idx]
-          ) {
-            actionRef.classList.add("is-sticky");
-          }
-        } else {
-          if (actionRef.classList.contains("is-sticky")) {
-            actionRef.classList.remove("is-sticky");
-          }
-        }
-      });
-    },
-
-    // to remove is-sticky class
-    removeAllSticky() {
-      this.isStickySectionViewed = [];
-      this.contentsArray_Sticky.forEach((item) => {
-        const actionRef = this.$refs[item[1]];
-        if (actionRef.classList.contains("is-sticky")) {
-          actionRef.classList.remove("is-sticky");
-        }
-      });
-    }
-  }
-};

package/plugins/caching.ts

@@ -1,243 +0,0 @@
-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/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue

@@ -1,92 +0,0 @@
-<template>
-  <span href="" class="task-item" :class="[statusClass]">
-    <i class="fa" :class="`fa-${statusIcon}`" />
-    {{ title }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import { TaskStatus } from "../../../typings/long-running-tasks.ts";
-
-const props = withDefaults(
-  defineProps<{ title: string; status: TaskStatus }>(),
-  {
-    title: "",
-    status: "Pending",
-  }
-);
-
-const { status } = toRefs(props);
-const statusClass = computed(() => `is-${status.value.toLowerCase()}`);
-const statusIcon = computed(() => {
-  if (status.value === "Running" || status.value === "Started")
-    return "circle-o-notch";
-  else if (status.value === "Success") return "check-circle";
-  else if (status.value === "Failed") return "times-circle";
-  else return "spinner";
-});
-</script>
-
-<style scoped lang="scss">
-.task-item {
-  font-size: 14px;
-  display: block;
-  padding: 5px;
-  border-radius: 5px;
-  transition: all 0.3s ease-in-out;
-  &:hover {
-    background-color: var(--ac-white-light);
-    cursor: pointer;
-  }
-  &.is-active {
-    background-color: var(--ac-white-light);
-  }
-  &.is-pending {
-    color: var(--ac-gray-light);
-    i {
-      visibility: hidden;
-    }
-    &:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-  &.is-aborted {
-    color: var(--ac-gray-light);
-    &:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-  &.is-running,
-  &.is-started {
-    i {
-      color: var(--ac-primary);
-      animation-name: spin;
-      animation-duration: 1000ms;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    @keyframes spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-  }
-  &.is-success {
-    i {
-      color: #158748;
-    }
-  }
-  &.is-failed {
-    i {
-      color: #ff3729;
-    }
-  }
-}
-</style>