@appscode/design-system 1.0.43-alpha.98 → 1.1.0

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

@@ -8,21 +8,23 @@
       :secondaryColor="secondaryColor"
     />
   </div>
-  <div v-else class="haha" ref="cellDiv">
+  <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="value">{{
+      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -31,7 +33,12 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
-import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -47,6 +54,10 @@ export default defineComponent({
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: defineAsyncComponent(() =>
@@ -63,7 +74,8 @@ export default defineComponent({
   computed: {
     valueType() {
       if (typeof this.value === "object") {
-        if (Array.isArray(this.value)) return "array";
+        if (this.value === null) return "null";
+        else if (Array.isArray(this.value)) return "array";
         else return "object";
       } else return typeof this.value;
     },
@@ -71,11 +83,15 @@ export default defineComponent({
       return Math.ceil(this.computedCellWidth / 8);
     },
     primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
     },
     secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
-    }
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {

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

@@ -6,6 +6,7 @@
         indexOfCharacterLengthExceed
       )"
       :key="printableStringOb.key"
+      modifierClasses="is-info is-light"
     >
       <value-with-modal
         v-if="printableStringOb.exceededLength"
@@ -16,7 +17,7 @@
       <template v-else> {{ printableStringOb.print }} </template>
     </tag>
 
-    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+    <tag modifierClasses="is-info is-light" v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
       <a @click.prevent.stop="showFullData = true">
         <ellipsis-icon />
         <json-show-modal
@@ -79,7 +80,10 @@ export default defineComponent({
     },
     printableStringObjs() {
       return this.objKeys.map((key) => {
-        const value = this.obj[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;
@@ -103,3 +107,4 @@ export default defineComponent({
   },
 });
 </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>