@appscode/design-system 1.0.43-alpha.21 → 1.0.43-alpha.211

package/vue-components/v2/notification/Notification.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    @mouseenter="notificationPanelOpen = true"
+    @mouseleave="notificationPanelOpen = false"
+  >
+    <button class="button ac-nav-button">
+      <span v-if="unreadCount">{{ unreadCount }}</span>
+      <i
+        class="fa fa-bell"
+        :class="{ 'ac-shake': unreadCount }"
+        aria-hidden="true"
+      ></i>
+    </button>
+    <div class="ac-menu-content is-notification">
+      <div class="notification-header">
+        <div class="left-content">
+          <p>
+            Notifications <span>({{ notifications.length }})</span>
+          </p>
+        </div>
+        <div class="right-content"></div>
+      </div>
+      <div :key="notificationPanelOpen ? 1 : 0" class="notification-body">
+        <transition-group v-if="notifications.length" name="slide-right">
+          <notification-item
+            v-for="notification in notifications"
+            :key="`${notification.id}${unreadCount}`"
+            :notification="notification"
+          />
+        </transition-group>
+        <span v-else class="single-notification-item"
+          >No new notifications</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { StringCodec } from "nats.ws/cjs/nats";
+export default {
+  components: {
+    NotificationItem: () => import("./NotificationItem.vue"),
+  },
+  data() {
+    return {
+      notifications: [],
+      notificationsRead: 0,
+
+      notificationPanelOpen: false,
+      subscription: null,
+    };
+  },
+  computed: {
+    unreadCount() {
+      return this.notifications.length - this.notificationsRead;
+    },
+  },
+  watch: {
+    notificationPanelOpen(n) {
+      if (n) {
+        this.notificationsRead = this.notifications.length;
+      }
+    },
+  },
+  created() {
+    this.subscribeToNotifcations();
+  },
+  methods: {
+    addNewNotification(notification) {
+      this.notifications.unshift(notification);
+      if (this.notificationPanelOpen) {
+        this.notificationsRead = this.notifications.length;
+      }
+    },
+    async subscribeToNotifcations() {
+      this.subscription = this.$nc?.subscribe("notifications");
+      console.log("Started listening to Notifications");
+
+      if (this.subscription) {
+        // listen to channel events
+        for await (const msg of this.subscription) {
+          console.log("notifications ===>");
+          console.log({ data: StringCodec().decode(msg.data) });
+          const log = JSON.parse(StringCodec().decode(msg.data));
+          console.log({ log });
+          const currentTime = new Date().getTime();
+          this.addNewNotification({
+            ...log,
+            id: currentTime,
+            time: currentTime,
+          });
+          msg.respond();
+        }
+        console.log("Stopped listening to Notifications");
+        console.log("Closed Channel Notifications");
+      }
+    },
+  },
+};
+</script>

package/vue-components/v2/notification/NotificationItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <a class="single-notification-item is-complete">
+    <p>
+      {{ notification.msg }}
+    </p>
+    <div class="notification-status">
+      <p
+        :class="{
+          'is-success': notification.status === 'Success',
+          'is-danger': notification.status === 'Failed',
+          'is-info':
+            notification.status === 'Started' ||
+            notification.status === 'Running',
+          'is-warning': notification.status === 'Pending',
+        }"
+      >
+        <i
+          class="fa mr-5"
+          :class="{
+            'fa-check': notification.status === 'Success',
+            'fa-exclamation-triangle': notification.status === 'Failed',
+            'fa-info-circle':
+              notification.status === 'Started' ||
+              notification.status === 'Pending' ||
+              notification.status === 'Running',
+          }"
+        />
+        {{ notification.status }}
+      </p>
+      <p>{{ notification.time | getDayDifferences }} ago</p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>

package/vue-components/v2/pagination/Pagination.vue

@@ -9,7 +9,11 @@
         "
       >
         <label>Rows per page</label>
-        <select v-model="selectedItemCountPerPage" name="page">
+        <select
+          v-model="selectedItemCountPerPage"
+          name="page"
+          data-testid="rows-per-page-selector"
+        >
           <option :value="5">5</option>
           <option :value="10" v-show="totalNoOfItems > 5">10</option>
           <option :value="15" v-show="totalNoOfItems > 10">15</option>
@@ -31,19 +35,28 @@
 
       <ul v-if="totalNoOfItems > selectedItemCountPerPage">
         <li>
-          <a class="previous" @click.prevent="prevPage()">
+          <a
+            class="previous"
+            @click.prevent="prevPage()"
+            data-testid="pagination-previous-page-button"
+          >
             <i class="fa fa-angle-left" aria-hidden="true"></i>
           </a>
         </li>
         <li v-for="page in pages" :key="`page-${page}`">
           <a
             @click.prevent="changePage(page)"
+            data-testid="pagination-page-switch-button"
             :class="{ 'is-current': activePageNo === page }"
             >{{ page }}</a
           >
         </li>
         <li>
-          <a class="next" @click.prevent="nextPage()">
+          <a
+            class="next"
+            @click.prevent="nextPage()"
+            data-testid="pagination-next-page-button"
+          >
             <i class="fa fa-angle-right" aria-hidden="true"></i>
           </a>
         </li>

package/vue-components/v2/preloader/Preloader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
     style="height: calc(100vh - 200px);"
   >
     <span v-if="showSpinner" class="spinner"></span>
@@ -15,12 +15,12 @@ export default {
   props: {
     showSpinner: {
       type: Boolean,
-      default: true,
+      default: true
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime...",
-    },
-  },
+      default: "Loading ..."
+    }
+  }
 };
 </script>

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+      alt="provider-icon"
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="name"
+    :options="clusterOptions"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    clusterOptions: {
+      type: Array,
+      default: [],
+    },
+    value: {
+      type: String,
+      default: "",
+    }
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      selectedClusterName: "",
+    };
+  },
+
+  methods: {
+    getProviderIcon(provider) {
+      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        this.selectedClusterName = n;
+      },
+    },
+    selectedCluster: {
+      deep: true,
+      handler(n) {
+        this.selectedClusterName = n.name;
+      },
+    },
+    selectedClusterName(n) {
+      if (this.selectedCluster && n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
+      this.$emit("input", n);
+    },
+    clusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        if (list) {
+          list.forEach(async (item) => {
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
+            }
+          });
+        }
+      },
+    },
+  },
+};
+</script>

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li ref="sidebarItem">
     <router-link
       :id="id"
       :title="title"
@@ -38,5 +38,27 @@ export default {
       default: "@/assets/images/icons/basic.svg",
     },
   },
+  watch: {
+    isActive: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const top = (this.$refs.sidebarItem && this.$refs.sidebarItem.getBoundingClientRect().top) || 0;
+              // preventing scroll to options that are already visible
+              if (top > window.innerHeight - 200) {
+                // scroll to selected option item
+                this.$refs.sidebarItem.scrollIntoView({
+                  behavior: 'smooth',
+                  block: "center"
+                });
+              }
+            }, 500);  
+          });
+        }
+      }
+    }
+  }
 };
 </script>

package/vue-components/v2/sidebar/SidebarItemWithDropDown.vue

@@ -10,7 +10,7 @@
       </span>
     </a>
 
-    <ul :ref="title" :style="{ maxHeight: dropDownSectionHeight }">
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
       <slot />
     </ul>
   </li>
@@ -23,10 +23,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
     title: {
       type: String,
       default: "Sidebar Item",
@@ -41,27 +37,32 @@ export default {
     return {
       dropDownStatus: "close",
       dropDownSectionHeight: null,
+      isCompMounted: false,
     };
   },
 
-  watch: {
-    isLoaderActive(n) {
-      if (!n) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("open");
-        });
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
       }
-    },
+    }, 700);
+  },
+
+  watch: {
     title(n, o) {
-      if (n && !this.isLoaderActive) {
+      if (n && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("open");
         });
       }
 
-      if (o && !this.isLoaderActive) {
+      if (o && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("close");
@@ -84,7 +85,7 @@ export default {
           this.$emit("dropDownItemChange");
 
           this.$nextTick(() => {
-            const dropDownUl = this.$refs[this.title];
+            const dropDownUl = this.$refs["sectionItems"];
             if (dropDownUl)
               this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
@@ -99,11 +100,9 @@ export default {
   methods: {
     setDropdownMaxHeight(mode) {
       if (mode === "open") {
-        this.$refs[this.title][0].style.maxHeight = `${
-          this.$refs[this.title][0].scrollHeight
-        }px`;
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"]?.scrollHeight}px`;
       } else {
-        this.$refs[this.title][0].style.maxHeight = null;
+        this.dropDownSectionHeight = null;
       }
     },
     toggleDropDownStatus() {

package/vue-components/v2/tab/TabItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li :class="{ 'is-active': isActive }">
+  <li :class="{ 'is-active': isActive }" data-testid="tab-item">
     <slot />
   </li>
 </template>

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

@@ -23,12 +23,41 @@
             :key="idx"
             :class="{
               sorting: headerSortables[idx] && headerSortables[idx].enabled,
-              'sorting-desc': headerSortables[idx] && headerSortables[idx].mode === 'desc',
-              'sorting-asc': headerSortables[idx] && headerSortables[idx].mode === 'asc',
+              'sorting-desc':
+                headerSortables[idx] && headerSortables[idx].mode === 'desc',
+              'sorting-asc':
+                headerSortables[idx] && 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] && headerSortables[idx].enabled && emitSortEvent(idx)"
+            @click.prevent="
+              headerSortables[idx] &&
+                headerSortables[idx].enabled &&
+                emitSortEvent(idx)
+            "
           >
             {{ headerLabels[idx] }}
+            <span
+              v-if="
+                tableHeader.dashboard &&
+                tableHeader.dashboard.status &&
+                tableHeader.dashboard.status !== 'Success'
+              "
+              class="icon has-text-danger"
+              :title="tableHeader.dashboard && tableHeader.dashboard.message"
+            >
+              <i class="fa fa-exclamation-triangle" />
+            </span>
           </th>
           <th
             ref="action-section"
@@ -146,7 +175,7 @@ export default {
     },
     headerLabels() {
       return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th.label || "Label"
+        typeof th === "string" ? th : th.name || "Label"
       );
     },
   },
@@ -157,8 +186,15 @@ export default {
       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 && th.sort && th.sort.enable)
+            ) {
+              this.headerSortables[idx].enabled = !!(
+                th &&
+                th.sort &&
+                th.sort.enable
+              );
               this.headerSortables[idx].mode = "";
             }
           });
@@ -171,7 +207,7 @@ export default {
               };
             } else {
               return {
-                enabled: !!th.sortable,
+                enabled: !!(th && th.sort && th.sort.enable),
                 mode: "",
               };
             }
@@ -198,7 +234,7 @@ export default {
     emitSortEvent(index) {
       const emitValue = {
         index,
-        label: this.tableHeaders[index].label,
+        label: this.tableHeaders[index].name,
         mode: "",
       };
 

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

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate">
+    <tr class="is-link" @click="navigate" data-testid="ac-table-row">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"
@@ -14,9 +14,15 @@
       />
     </tr>
   </router-link>
+
   <tr
     v-else
-    :class="{ 'is-selected': isSelected, 'is-hoverless': !isSelected }"
+    :class="{
+      'is-selected': isSelected,
+      'is-hoverless': !isSelected,
+      'is-disabled': isDisabled,
+    }"
+    data-testid="ac-table-row"
     @click.prevent="$emit('rowselect', true)"
   >
     <slot />
@@ -38,6 +44,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
     fakeCellWidth: {
       type: Number,
       default: 0,

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

@@ -1,22 +1,29 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" />
+    <content-loader
+      :height="10"
+      :width="computedCellWidth || 300"
+      :primaryColor="primaryColor"
+      :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>
@@ -24,6 +31,13 @@
 </template>
 
 <script>
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
+
 export default {
   props: {
     isLoaderActive: {
@@ -38,6 +52,10 @@ export default {
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: () =>
@@ -49,13 +67,24 @@ export default {
   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;
     },
     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() {