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

package/package.json

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

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/v3/modals/LongRunningTasksModal.vue

@@ -71,6 +71,7 @@
       </ul>
       <long-running-task-terminal
         :key="activeTask?.step"
+        :theme="theme"
         :logs="activeTask?.logs"
         class="task-log"
       />
@@ -131,6 +132,7 @@ defineEmits(["close"]);
 const props = withDefaults(
   defineProps<{
     open: boolean;
+    theme: string;
     title: string;
     simple: boolean;
     natsSubject: string;
@@ -148,6 +150,7 @@ const props = withDefaults(
   }>(),
   {
     open: true,
+    theme: "light",
     simple: true,
     title: "Sample title",
     natsSubject: "",

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

@@ -3,74 +3,146 @@
 </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<{
-      logs: string[]
-    }>(),
-    { logs: () => [] }
-  )
-  // terminal print logic
-  const { logs } = 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 theme = ref('light') // handle theme logic later, without the useStore function because they are different in console and kubedb ui
-  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)
-    })
+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;
+.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>