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

package/vue-components/v3/table/MultiInfoTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <table-container>
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
+      <tbody v-if="isFullTableLoaderActive">
+        <table-row v-for="i in loaderCols" :key="i">
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+        </table-row>
+      </tbody>
+      <tbody
+        v-else
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding,
+        }"
+      >
+        <template v-if="!isTableEmpty">
+          <table-row
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="headerLabels[idx]"
+          >
+            <table-cell>
+              <slot :name="`table-cell-icon-${idx}`" />
+              {{ headerLabels[idx] }}
+            </table-cell>
+            <table-cell v-if="isLoaderActive">
+              <cell-value :is-loader-active="true" />
+            </table-cell>
+            <slot v-else :name="`slot-${idx}`" />
+          </table-row>
+        </template>
+
+        <empty-table-info v-else />
+      </tbody>
+    </table>
+
+    <!-- pagination start -->
+    <slot name="table-pagination" />
+    <!-- pagination end -->
+  </table-container>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    isTableEmpty: {
+      type: Boolean,
+      default: true,
+    },
+    tableHeaders: {
+      type: Array,
+      default: () => [],
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    TableContainer: defineAsyncComponent(() =>
+      import("../../v2/table/TableContainer.vue").then(
+        (module) => module.default
+      )
+    ),
+    EmptyTableInfo: defineAsyncComponent(() =>
+      import("../../v2/table/EmptyTableInfo.vue").then(
+        (module) => module.default
+      )
+    ),
+    TableRow: defineAsyncComponent(() =>
+      import("./TableRow.vue").then((module) => module.default)
+    ),
+    TableCell: defineAsyncComponent(() =>
+      import("./TableCell.vue").then((module) => module.default)
+    ),
+    CellValue: defineAsyncComponent(() =>
+      import("./table-cell/CellValue.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      loaderCols: 5,
+      headerSortables: [],
+    };
+  },
+
+  computed: {
+    isFullTableLoaderActive() {
+      return !this.tableHeaders.length;
+    },
+    headerLabels() {
+      return this.tableHeaders.map((th) =>
+        typeof th === "string" ? th : th?.name || "Label"
+      );
+    },
+  },
+
+  watch: {
+    tableHeaders: {
+      immediate: true,
+      handler(n) {
+        if (this.headerSortables.length === n.length) {
+          n.forEach((th, idx) => {
+            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
+              this.headerSortables[idx].enabled = !!th?.sort?.enable;
+              this.headerSortables[idx].mode = "";
+            }
+          });
+        } else {
+          this.headerSortables = n.map((th) => {
+            if (typeof th === "string") {
+              return {
+                enabled: false,
+                mode: "",
+              };
+            } else {
+              return {
+                enabled: !!th?.sort?.enable,
+                mode: "",
+              };
+            }
+          });
+        }
+      },
+    },
+  },
+});
+</script>

package/vue-components/v3/table/Table.vue

@@ -1,14 +1,16 @@
 <template>
-  <table-container>
+  <table-container ref="ac-table-container" @scroller="handleScroller">
     <table
       ref="ac-table"
-      class="table ac-table ac-striped"
+      class="table ac-table"
       :class="{
         'is-fullwidth':
           !isDynamicWidthTable ||
           isFullTableLoaderActive ||
           isTableEmpty ||
           isLoaderActive,
+        'ac-striped': !columnStriped,
+        'ac-label-texted': columnStriped,
       }"
     >
       <thead>
@@ -18,6 +20,7 @@
           </th>
         </table-row>
         <table-row v-else>
+          <th v-if="collapsible" style="width: 20px" />
           <th
             v-for="(tableHeader, idx) in tableHeaders"
             :key="idx"
@@ -25,10 +28,33 @@
               sorting: headerSortables[idx].enabled,
               'sorting-desc': headerSortables[idx].mode === 'desc',
               'sorting-asc': headerSortables[idx].mode === 'asc',
+              'has-text-centered':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'center',
+              'has-text-left':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'left',
+              'has-text-right':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'right',
             }"
             @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
           >
             {{ headerLabels[idx] }}
+            <span
+              v-if="
+                tableHeader.dashboard &&
+                tableHeader.dashboard.status &&
+                tableHeader.dashboard.status !== 'Success'
+              "
+              :title="tableHeader.dashboard && tableHeader.dashboard.message"
+              class="icon has-text-danger"
+            >
+              <i class="fa fa-exclamation-triangle" />
+            </span>
           </th>
           <th
             ref="action-section"
@@ -71,7 +97,9 @@
           <table-row class="is-hoverless">
             <table-cell
               :colspan="
-                actionable ? tableHeaders.length + 1 : tableHeaders.length
+                tableHeaders.length +
+                (actionable ? 1 : 0) +
+                (collapsible ? 1 : 0)
               "
               class="no-data-available has-text-centered"
             >
@@ -81,6 +109,11 @@
         </tbody>
       </template>
     </table>
+
+    <!-- table footer info start -->
+    <slot name="table-footer-info" />
+    <!-- table footer info end -->
+
     <!-- pagination start -->
     <slot name="table-pagination" />
     <!-- pagination end -->
@@ -104,6 +137,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
     actionable: {
       type: Boolean,
       default: false,
@@ -116,13 +153,15 @@ export default defineComponent({
       type: Number,
       default: 1920,
     },
+    columnStriped: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ["sort"],
+  emits: ["sort", "scroller"],
   components: {
     TableContainer: defineAsyncComponent(() =>
-      import("../../v2/table/TableContainer.vue").then(
-        (module) => module.default
-      )
+      import("./TableContainer.vue").then((module) => module.default)
     ),
     TableRow: defineAsyncComponent(() =>
       import("./TableRow.vue").then((module) => module.default)
@@ -165,7 +204,7 @@ export default defineComponent({
     },
     headerLabels() {
       return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th?.label || "Label"
+        typeof th === "string" ? th : th?.name || "Label"
       );
     },
   },
@@ -176,8 +215,8 @@ export default defineComponent({
       handler(n) {
         if (this.headerSortables.length === n.length) {
           n.forEach((th, idx) => {
-            if (this.headerSortables[idx].enabled !== !!th?.sortable) {
-              this.headerSortables[idx].enabled = !!th?.sortable;
+            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
+              this.headerSortables[idx].enabled = !!th?.sort?.enable;
               this.headerSortables[idx].mode = "";
             }
           });
@@ -190,7 +229,7 @@ export default defineComponent({
               };
             } else {
               return {
-                enabled: !!th?.sortable,
+                enabled: !!th?.sort?.enable,
                 mode: "",
               };
             }
@@ -199,7 +238,6 @@ export default defineComponent({
       },
     },
   },
-
   updated() {
     this.$nextTick(() => {
       this.onWindowResize();
@@ -207,9 +245,12 @@ export default defineComponent({
   },
 
   methods: {
+    handleScroller(value) {
+      this.$emit("scroller", value);
+    },
     onWindowResize() {
       if (this.$refs["ac-table"] && this.isDynamicWidthTable) {
-        const tableWidth = this.$refs["ac-table"].clientWidth;
+        const tableWidth = this.$refs["ac-table"]?.clientWidth;
         const d = this.fullWidth - tableWidth;
         this.fakeCellWidth = d;
       }
@@ -217,7 +258,7 @@ export default defineComponent({
     emitSortEvent(index) {
       const emitValue = {
         index,
-        label: this.tableHeaders[index].label,
+        label: this.tableHeaders[index].name,
         mode: "",
       };
 

package/vue-components/v3/table/TableContainer.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="ac-table-container table-container" ref="tableContainer">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  import { emit } from 'process'
+  import { defineComponent, ref, onMounted, nextTick } from 'vue'
+
+  export default defineComponent({
+    emits: ['scroller'],
+
+    setup(props, { emit }) {
+      const tableContainer = ref(null)
+
+      function isScrollerShowing() {
+        return tableContainer.value?.scrollWidth > tableContainer.value?.clientWidth
+      }
+
+      onMounted(() => {
+        setTimeout(() => {
+          nextTick(() => {
+            emit('scroller', isScrollerShowing())
+          })
+        }, 50)
+      })
+
+      return {
+        tableContainer,
+      }
+    },
+  })
+</script>

package/vue-components/v3/table/TableRow.vue

@@ -1,12 +1,24 @@
 <template>
   <router-link
     v-if="link"
+    v-slot="{ navigate }"
     event="click"
     :to="link"
     custom
-    v-slot="{ navigate }"
   >
-    <tr class="is-link" @click="navigate" v-bind="$attrs">
+    <tr
+      class="is-link"
+      v-bind="$attrs"
+      data-testid="ac-table-row"
+      @click="navigate"
+    >
+      <table-cell v-if="collapsible">
+        <collapsible-button
+          modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+          :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+          @click.stop="toggleCollapse"
+        />
+      </table-cell>
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -16,15 +28,37 @@
   </router-link>
   <tr
     v-else
-    :class="{ 'is-selected': isSelected, 'is-hoverless': !isSelected }"
+    v-bind="$attrs"
+    :class="{
+      'is-selected': isSelected,
+      'is-hoverless': !isSelected,
+      'is-disabled': isDisabled,
+    }"
+    data-testid="ac-table-row"
     @click.prevent="$emit('rowselect', true)"
   >
+    <table-cell v-if="collapsible">
+      <collapsible-button
+        modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+        :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+        @click.stop="toggleCollapse"
+      />
+    </table-cell>
     <slot />
     <fake-table-cell
       v-if="fakeCellWidth > 0"
       :fake-cell-width="fakeCellWidth"
     />
   </tr>
+  <transition name="slide-down" mode="out-in" appear>
+    <tr v-if="collapsible && !isCollapsed" v-bind="$attrs">
+      <table-cell colspan="1000" class="table-inner-shadow">
+        <div ref="collapsibleRow" class="collapsible-row">
+          <slot name="collapsible-content" />
+        </div>
+      </table-cell>
+    </tr>
+  </transition>
 </template>
 
 <script>
@@ -40,21 +74,74 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
     fakeCellWidth: {
       type: Number,
       default: 0,
     },
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  emits: ["rowselect"],
+  emits: ["rowselect", "rowexpand", "rowcollapse"],
 
   components: {
     TableCell: defineAsyncComponent(() =>
-      import("./TableCell.vue").then((module) => module.default)
+      import(
+        "@appscode/design-system/vue-components/v3/table/TableCell.vue"
+      ).then((module) => module.default)
     ),
     FakeTableCell: defineAsyncComponent(() =>
-      import("./FakeTableCell.vue").then((module) => module.default)
+      import(
+        "@appscode/design-system/vue-components/v3/table/FakeTableCell.vue"
+      ).then((module) => module.default)
+    ),
+    CollapsibleButton: defineAsyncComponent(() =>
+      import("@appscode/design-system/vue-components/v3/button/Button.vue")
     ),
   },
+
+  data() {
+    return {
+      isCollapsed: true,
+    };
+  },
+
+  methods: {
+    toggleCollapse() {
+      const newVal = !this.isCollapsed;
+      if (!newVal) {
+        this.isCollapsed = newVal;
+        // show expand animation
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.$refs.collapsibleRow) {
+              this.$refs.collapsibleRow.classList.remove("is-closed");
+              this.$refs.collapsibleRow.classList.add("is-active");
+            }
+            this.$emit("rowexpand", this.collapseRow);
+          }, 0);
+        });
+      } else {
+        if (this.$refs.collapsibleRow) {
+          this.$refs.collapsibleRow.classList.remove("is-active");
+          this.$refs.collapsibleRow.classList.add("is-closed");
+        }
+        setTimeout(() => {
+          // remove row after animation finish
+          this.isCollapsed = newVal;
+          this.$emit("rowcollapse");
+        }, 100);
+      }
+    },
+    collapseRow() {
+      this.isCollapsed = true;
+    },
+  },
 });
 </script>

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>
+