@appscode/design-system 0.0.21-alpha.2 → 0.4.27

package/vue-components/v3/table/table-cell/ArrayCell.vue

@@ -0,0 +1,111 @@
+<template>
+  <tags v-if="printableStringObjs.length">
+    <tag
+      v-for="(printableStringOb, idx) in printableStringObjs.slice(
+        0,
+        indexOfCharacterLengthExceed
+      )"
+      :key="`${printableStringOb.print}-${idx}`"
+    >
+      <value-with-modal
+        v-if="printableStringOb.exceededLength"
+        :title="`${cellTitle}: ${idx}`"
+        :value="printableStringOb.value"
+        :print="printableStringOb.print"
+      />
+      <template v-else> {{ printableStringOb.print }} </template>
+    </tag>
+
+    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+      <a @click.prevent.stop="showFullData = true">
+        <ellipsis-icon />
+        <json-show-modal
+          :open="showFullData"
+          @closemodal="showFullData = false"
+          :editor-title="cellTitle"
+          :editor-content="items"
+        />
+      </a>
+    </tag>
+  </tags>
+  <p v-else>-</p>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    cellTitle: {
+      type: String,
+      default: "Array",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    maxCharacterLength: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  components: {
+    Tags: defineAsyncComponent(() =>
+      import("../../../v2/tag/Tags.vue").then((module) => module.default)
+    ),
+    Tag: defineAsyncComponent(() =>
+      import("../../tag/Tag.vue").then((module) => module.default)
+    ),
+    EllipsisIcon: defineAsyncComponent(() =>
+      import("../../../v2/icons/Ellipsis.vue").then((module) => module.default)
+    ),
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+    ValueWithModal: defineAsyncComponent(() =>
+      import("./ValueWithModal.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showFullData: false,
+    };
+  },
+
+  computed: {
+    printableStringObjs() {
+      return this.items.map((item) => {
+        const value = item;
+        let exceededLength = false;
+        let print = item;
+        if (typeof item === "object") {
+          exceededLength = true;
+          print = item["Name"] || item["name"] || item[Object.keys(item)[0]];
+        } else {
+          const stringifiedValue = JSON.stringify(item);
+          exceededLength = stringifiedValue.length > 27;
+          print = exceededLength
+            ? `${stringifiedValue.slice(0, 27)}...`
+            : stringifiedValue;
+        }
+        return { value, exceededLength, print };
+      });
+    },
+    indexOfCharacterLengthExceed() {
+      let idx = -1;
+      let cumulativeLen = 0;
+      for (const [index, po] of this.printableStringObjs.entries()) {
+        const newLen = cumulativeLen + po.print.length;
+        if (newLen > this.maxCharacterLength) {
+          idx = index;
+          break;
+        }
+        cumulativeLen = newLen;
+      }
+
+      return idx === -1 ? this.printableStringObjs.length : idx;
+    },
+  },
+});
+</script>

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
+    <content-loader
+      :view-box="`0 0 ${computedCellWidth || 300} 10`"
+      :speed="2"
+      :key="computedCellWidth"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
+  </div>
+  <div v-else ref="cellDiv">
+    <object-cell
+      v-if="valueType === 'object'"
+      :obj="value"
+      :cell-title="cellTitle"
+      :max-character-length="maxCharacterLength"
+      data-testid="object-cell-value"
+    />
+    <array-cell
+      v-else-if="valueType === 'array'"
+      :items="value"
+      :cell-title="cellTitle"
+      :max-character-length="maxCharacterLength"
+      data-testid="array-cell-value"
+    />
+    <template v-else>
+      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
+        value || (value === 0 ? 0 : "-")
+      }}</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
+
+export default defineComponent({
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    cellTitle: {
+      type: String,
+      default: "Cell",
+    },
+    value: {
+      type: null,
+      default: "",
+    },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
+  },
+  components: {
+    ContentLoader: defineAsyncComponent(() =>
+      import("vue-content-loader").then(({ ContentLoader }) => ContentLoader)
+    ),
+    ObjectCell: defineAsyncComponent(() =>
+      import("./ObjectCell.vue").then((module) => module.default)
+    ),
+    ArrayCell: defineAsyncComponent(() =>
+      import("./ArrayCell.vue").then((module) => module.default)
+    ),
+  },
+
+  computed: {
+    valueType() {
+      if (typeof this.value === "object") {
+        if (this.value === null) return "null";
+        else if (Array.isArray(this.value)) return "array";
+        else return "object";
+      } else return typeof this.value;
+    },
+    maxCharacterLength() {
+      return Math.ceil(this.computedCellWidth / 8);
+    },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
+  },
+
+  data() {
+    return {
+      computedCellWidth: null,
+    };
+  },
+
+  mounted() {
+    this.calcCellWidth();
+  },
+
+  watch: {
+    isLoaderActive() {
+      this.calcCellWidth();
+    },
+  },
+
+  methods: {
+    calcCellWidth() {
+      if (this.isLoaderActive) {
+        this.$nextTick(() => {
+          const cellLoaderDiv = this.$refs.cellLoaderDiv;
+          if (cellLoaderDiv) {
+            this.computedCellWidth = cellLoaderDiv.offsetWidth;
+          }
+        });
+      } else {
+        this.$nextTick(() => {
+          const cellDiv = this.$refs.cellDiv;
+          if (cellDiv) {
+            this.computedCellWidth = cellDiv.offsetWidth;
+          }
+        });
+      }
+    },
+  },
+});
+</script>

package/vue-components/v3/table/table-cell/GenericCell.vue

@@ -0,0 +1,75 @@
+<template>
+  <span
+    :class="{
+      'is-flex': cellDescriptor.type !== 'object',
+      'is-align-items-center': cellValue.icon,
+      'is-justify-content-center': cellDescriptor.textAlign === 'center',
+      'is-justify-content-left': cellDescriptor.textAlign === 'left',
+      'is-justify-content-right': cellDescriptor.textAlign === 'right',
+    }"
+  >
+    <span v-if="cellValue.icon" class="icon p-0 mr-10">
+      <img width="15" :src="cellValue.icon" />
+    </span>
+    <a
+      v-if="cellValue.link && cellValue.link.startsWith('http')"
+      :href="getCellLink(cellValue)"
+      @click.prevent="redirectTo"
+    >
+      {{ cellValue.data }}
+    </a>
+    <router-link v-else-if="cellValue.link" :to="getCellLink(cellValue)">
+      {{ cellValue.data }}
+    </router-link>
+    <tag v-else-if="cellValue.color" :class="`is-${cellValue.color}`">
+      {{ cellValue.data }}
+    </tag>
+    <cell-value
+      v-else
+      :cell-title="cellDescriptor.name"
+      :value="cellValue.data || '-'"
+      :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
+    />
+  </span>
+</template>
+
+<script>
+import { defineAsyncComponent, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+
+export default defineComponent({
+  components: {
+    Tag: defineAsyncComponent(() => import("../../tag/Tag.vue")),
+    CellValue: defineAsyncComponent(() =>
+      import("../table-cell/CellValue.vue")
+    ),
+  },
+  props: {
+    cellDescriptor: {
+      type: Object,
+      default: () => ({}),
+    },
+    cellValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const route = useRoute();
+    function getCellLink(cell) {
+      const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
+      const { user, cluster } = route.params;
+      const link = inject(cell.link || "", {
+        username: user,
+        clustername: cluster,
+      });
+      return link;
+    }
+    function redirectTo() {
+      const link = getCellLink(this.cellValue);
+      window.open(link, "_blank");
+    }
+    return { getCellLink, redirectTo };
+  },
+});
+</script>

package/vue-components/v3/table/table-cell/ObjectCell.vue

@@ -0,0 +1,110 @@
+<template>
+  <tags v-if="printableStringObjs.length">
+    <tag
+      v-for="printableStringOb in printableStringObjs.slice(
+        0,
+        indexOfCharacterLengthExceed
+      )"
+      :key="printableStringOb.key"
+      modifierClasses="is-info is-light"
+    >
+      <value-with-modal
+        v-if="printableStringOb.exceededLength"
+        :title="printableStringOb.key"
+        :value="printableStringOb.value"
+        :print="printableStringOb.print"
+      />
+      <template v-else> {{ printableStringOb.print }} </template>
+    </tag>
+
+    <tag modifierClasses="is-info is-light" v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+      <a @click.prevent.stop="showFullData = true">
+        <ellipsis-icon />
+        <json-show-modal
+          :open="showFullData"
+          @closemodal="showFullData = false"
+          :editor-title="cellTitle"
+          :editor-content="obj"
+        />
+      </a>
+    </tag>
+  </tags>
+  <p v-else>-</p>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    cellTitle: {
+      type: String,
+      default: "Object",
+    },
+    obj: {
+      type: Object,
+      default: () => ({}),
+    },
+    maxCharacterLength: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  components: {
+    Tags: defineAsyncComponent(() =>
+      import("../../../v2/tag/Tags.vue").then((module) => module.default)
+    ),
+    Tag: defineAsyncComponent(() =>
+      import("../../tag/Tag.vue").then((module) => module.default)
+    ),
+    EllipsisIcon: defineAsyncComponent(() =>
+      import("../../../v2/icons/Ellipsis.vue").then((module) => module.default)
+    ),
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+    ValueWithModal: defineAsyncComponent(() =>
+      import("./ValueWithModal.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showFullData: false,
+    };
+  },
+
+  computed: {
+    objKeys() {
+      return Object.keys(this.obj) || [];
+    },
+    printableStringObjs() {
+      return this.objKeys.map((key) => {
+        let value = this.obj[key];
+        if (typeof value === "object" && value !== null) {
+          value = JSON.stringify(value);
+        }
+        const keyValue = `${key}: ${value}`;
+        const exceededLength = keyValue.length > 30;
+        const print = exceededLength ? key : keyValue;
+        return { key, value, keyValue, exceededLength, print };
+      });
+    },
+    indexOfCharacterLengthExceed() {
+      let idx = -1;
+      let cumulativeLen = 0;
+      for (const [index, po] of this.printableStringObjs.entries()) {
+        const newLen = cumulativeLen + po.print.length;
+        if (newLen > this.maxCharacterLength) {
+          idx = index;
+          break;
+        }
+        cumulativeLen = newLen;
+      }
+
+      return idx === -1 ? this.printableStringObjs.length : idx;
+    },
+  },
+});
+</script>
+

package/vue-components/v3/table/table-cell/ValueWithModal.vue

@@ -0,0 +1,43 @@
+<template>
+  <a @click.prevent.stop="showModal = true">
+    {{ print }}
+
+    <json-show-modal
+      :open="showModal"
+      @closemodal="showModal = false"
+      :editor-title="title"
+      :editor-content="value"
+    />
+  </a>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: null,
+      default: "",
+    },
+    print: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+  },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+});
+</script>

package/vue-components/v3/tabs/EditorTabs.vue

@@ -0,0 +1,36 @@
+<template>
+  <tabs-body class="mt-10">
+    <tabs class="is-line">
+      <tab-item :is-active="activeTab === 'edit'">
+        <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>
+      </tab-item>
+      <tab-item :is-active="activeTab === 'preview'">
+        <a @click.prevent="$emit('tabchange', 'preview')">Preview Changes</a>
+      </tab-item>
+    </tabs>
+  </tabs-body>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  props: {
+    activeTab: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["tabchange"],
+  components: {
+    TabsBody: defineAsyncComponent(() =>
+      import("../../v2/tab/TabsBody.vue").then((module) => module.default)
+    ),
+    Tabs: defineAsyncComponent(() =>
+      import("../../v2/tab/Tabs.vue").then((module) => module.default)
+    ),
+    TabItem: defineAsyncComponent(() =>
+      import("../tab/TabItem.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/tag/Tag.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="tag" :class="modifierClasses">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    modifierClasses: {
+      type: String,
+      default: "",
+    },
+  },
+});
+</script>

package/vue-components/v3/terminal/LongRunningTaskTerminal.vue

@@ -0,0 +1,148 @@
+<template>
+  <div ref="terminalRef" class="terminal-body"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from "vue";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { WebglAddon } from "xterm-addon-webgl";
+import { Material, MaterialDark } from "xterm-theme"; //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
+
+const props = withDefaults(
+  defineProps<{
+    theme: string;
+    logs: string[];
+  }>(),
+  { theme: "light", logs: () => [] }
+);
+// terminal print logic
+const { logs, theme } = toRefs(props);
+const lastPrintIdx = ref(0);
+watch(
+  logs,
+  (n) => {
+    if (n.length > lastPrintIdx.value) {
+      nextTick(() => {
+        writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
+        lastPrintIdx.value = n.length;
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+//theme
+const bodyBgc = computed(() =>
+  theme.value === "light" ? "#eaeaea" : "#232322"
+);
+
+// xterm component logic
+const terminalRef = ref<HTMLElement>();
+const terminal = new Terminal({
+  windowsMode: false,
+  theme: theme.value === "light" ? Material : MaterialDark,
+});
+const fitAddon = new FitAddon();
+terminal.loadAddon(fitAddon);
+const webGlAddon = new WebglAddon();
+webGlAddon.onContextLoss(() => {
+  webGlAddon.dispose();
+});
+watchPostEffect(() => {
+  if (terminalRef.value) {
+    terminal.open(terminalRef.value);
+    fitAddon.fit();
+    terminal.focus();
+    terminal.loadAddon(webGlAddon);
+  }
+});
+function writeOnTerminal(msg: string) {
+  const lines = msg.split("\n");
+  lines.forEach((line, index) => {
+    if (lines.length === 1 || index < lines.length - 1) terminal.writeln(line);
+    else terminal.write(line);
+  });
+}
+</script>
+
+<style lang="scss">
+.terminal-body {
+  width: 100%;
+  height: 100%;
+  background-color: v-bind(bodyBgc);
+  padding: 5px 0px 0px 10px;
+
+  // for terminal scroll bar style
+  .xterm .xterm-viewport {
+    &::-webkit-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-moz-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-ms-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-webkit-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-moz-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-ms-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-moz-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-ms-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &::-moz-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &::-ms-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &:hover::-webkit-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-moz-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-ms-scrollbar-corner {
+      height: 40px;
+    }
+  }
+}
+</style>