@appscode/design-system 1.0.43-alpha.174 → 1.0.43-alpha.175

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.174",
+  "version": "1.0.43-alpha.175",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/plugins/time-convert.js

@@ -0,0 +1,49 @@
+import moment from "moment";
+import { useNow, useThrottleFn } from "@vueuse/core";
+
+const getTime = option => {
+  if (parseInt(option.time, 10) < 0 || !option.time) {
+    return undefined;
+  }
+  let time = option.time;
+
+  // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
+  time = moment(option.time).valueOf("x")
+    ? moment(option.time).valueOf("x")
+    : time * 1000;
+
+  return moment(time).format("MMM DD YYYY, h:mm A");
+};
+const getDayDifferences = options => {
+  const past = moment(options.past).isValid()
+    ? moment(options.past).valueOf("x") / 1000
+    : options.past;
+  const now = Date.now() / 1000;
+  const diff = now - past;
+  if (parseInt(options.past, 10) > 10) {
+    let ret = Math.floor(diff / 86400);
+    let unit = "";
+    if (diff < 60) {
+      ret = parseInt(diff, 10);
+      unit = " Second";
+    } else if (diff < 3600) {
+      ret = parseInt(diff / 60, 10);
+      unit = " Minute";
+    } else if (diff < 86400) {
+      ret = parseInt(diff / 3600, 10);
+      unit = " Hour";
+    } else {
+      ret = parseInt(diff / 86400, 10);
+      unit = " Day";
+    }
+    unit += ret > 1 ? "s" : "";
+    return ret + unit;
+  }
+  return undefined;
+};
+
+export default {
+  getTime,
+  // formatMoment,
+  getDayDifferences
+};

package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue

@@ -6,87 +6,87 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, toRefs } from 'vue'
-  import { TaskStatus } from '../../typings/long-running-tasks'
+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 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'
-  })
+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;
+.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;
     }
-    &.is-active {
-      background-color: var(--ac-white-light);
+    &:hover {
+      background-color: transparent;
+      cursor: not-allowed;
     }
-    &.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-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;
     }
-    &.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);
-        }
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
       }
-    }
-    &.is-success {
-      i {
-        color: #158748;
+      to {
+        transform: rotate(360deg);
       }
     }
-    &.is-failed {
-      i {
-        color: #ff3729;
-      }
+  }
+  &.is-success {
+    i {
+      color: #158748;
+    }
+  }
+  &.is-failed {
+    i {
+      color: #ff3729;
     }
   }
+}
 </style>

package/vue-components/v3/modals/LongRunningTasksModal.vue

@@ -111,7 +111,7 @@ import {
   watchEffect,
 } from "vue";
 import { defineAsyncComponent, ref } from "vue";
-import { Task, TaskLog } from "../../typings/long-running-tasks";
+import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
 import { Subscription, StringCodec } from "nats.ws";
 
 const Modal = defineAsyncComponent(() => import("../modal/Modal.vue"));
@@ -200,7 +200,7 @@ async function subscribeToChannel(channelId: string) {
   if (subscription) {
     // listen to channel events
     for await (const msg of subscription) {
-      console.log("hi");
+      console.log("Long Running Tasks Modal=>");
       console.log({ data: StringCodec().decode(msg.data) });
       const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
       console.log({ log });

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

@@ -0,0 +1,98 @@
+<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 setup lang="ts">
+import { NatsConnection, StringCodec, Subscription } from "nats.ws";
+import {
+  computed,
+  defineAsyncComponent,
+  getCurrentInstance,
+  ref,
+  Ref,
+  watch,
+} from "vue";
+import { TaskLog } from "../../../typings/long-running-tasks";
+import { Notification } from "../../../typings/notification";
+
+const NotificationItem = defineAsyncComponent(
+  () => import("./NotificationItem.vue")
+);
+
+const notifications: Ref<Notification[]> = ref([]);
+const notificationsRead = ref(0);
+const unreadCount = computed(
+  () => notifications.value.length - notificationsRead.value
+);
+
+const notificationPanelOpen = ref(false);
+watch(notificationPanelOpen, (n) => {
+  if (n) notificationsRead.value = notifications.value.length;
+});
+
+function addNewNotification(notification: Notification) {
+  notifications.value.unshift(notification);
+  if (notificationPanelOpen.value) {
+    notificationsRead.value = notifications.value.length;
+  }
+}
+
+const app = getCurrentInstance();
+const $nats: NatsConnection = app?.appContext.config.globalProperties.$nc;
+let subscription: Subscription;
+
+async function subscribeToNotifcations() {
+  subscription = $nats?.subscribe("notifications");
+  console.log("Started listening to Notifications");
+
+  if (subscription) {
+    // listen to channel events
+    for await (const msg of subscription) {
+      console.log("notifications ===>");
+      console.log({ data: StringCodec().decode(msg.data) });
+      const log: TaskLog = JSON.parse(StringCodec().decode(msg.data));
+      console.log({ log });
+      const currentTime = new Date().getTime();
+      addNewNotification({ ...log, id: currentTime, time: currentTime });
+      msg.respond();
+    }
+    console.log("Stopped listening to Notifications");
+    console.log("Closed Channel Notifications");
+  }
+}
+subscribeToNotifcations();
+</script>

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

@@ -0,0 +1,52 @@
+<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>{{ notificationTime }} ago</p>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+  import { computed, toRefs } from 'vue'
+  import { Notification } from '../../../typings/notification'
+  import TimeConvert from '../../../plugins/time-convert'
+
+  const props = withDefaults(defineProps<{ notification: Notification }>(), {
+    notification: () => ({
+      id: 0,
+      status: 'Pending',
+      time: 0,
+    }),
+  })
+
+  const { notification } = toRefs(props)
+  const notificationTime = computed(() =>
+    TimeConvert.getDayDifferences({ past: notification.value.time })
+  )
+</script>