@appscode/design-system 1.1.0-beta.42 → 1.1.0-beta.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.42",
+  "version": "1.1.0-beta.46",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/types/notification.ts

@@ -1,6 +1,6 @@
-import type { TaskLog } from "./longRunningTasks";
-
-export interface Notification extends TaskLog {
+export interface Notification {
   id: string;
   time: number;
+  msg?: string;
+  status: string;
 }

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

@@ -9,7 +9,7 @@ import {
   watch,
 } from "vue";
 import type { Ref } from "vue";
-import type { TaskLog } from "../../types/longRunningTasks";
+// import type { TaskLog } from "../../types/longRunningTasks";
 import type { Notification } from "../../types/notification";
 
 const NotificationItem = defineAsyncComponent(
@@ -48,7 +48,7 @@ async function subscribeToNotifcations() {
     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));
+      const log = JSON.parse(StringCodec().decode(msg.data));
       console.log({ log });
       const currentTime = new Date().getTime();
       addNewNotification({

package/vue-components/types/longRunningTasks.ts

@@ -1,20 +0,0 @@
-export type TaskStatus =
-  | "Pending"
-  | "Running"
-  | "Success"
-  | "Failed"
-  | "Started";
-export interface TaskLog {
-  status?: TaskStatus;
-  msg?: string;
-  step?: string;
-  error?: string;
-  id?: string;
-}
-export interface Task extends Omit<TaskLog, "message"> {
-  logs: Array<string>;
-}
-export interface LongRunningTasksCtx {
-  natsSubject: string;
-  tasks: Array<Task>;
-}

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

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-import type { TaskStatus } from "./../../types/longRunningTasks";
-
-interface Props {
-  title?: string;
-  status?: TaskStatus;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "no 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";
-});
-</script>
-
-<template>
-  <span href="" class="task-item" :class="[statusClass]">
-    <i class="fa" :class="`fa-${statusIcon}`" />
-    {{ title }}
-  </span>
-</template>
-
-<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: $primary-97;
-    cursor: pointer;
-  }
-  &.is-active {
-    background-color: $primary-97;
-  }
-  &.is-pending {
-    color: $black-50;
-    i {
-      visibility: hidden;
-    }
-    &:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-  &.is-aborted {
-    color: $black-50;
-    &:hover {
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-  &.is-running,
-  &.is-started {
-    i {
-      color: $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);
-      }
-    }
-  }
-  &.is-success {
-    i {
-      color: $success;
-    }
-  }
-  &.is-failed {
-    i {
-      color: $danger;
-    }
-  }
-}
-</style>

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

@@ -1,402 +0,0 @@
-<script setup lang="ts">
-import {
-  computed,
-  getCurrentInstance,
-  onBeforeUnmount,
-  toRefs,
-  watch,
-} from "vue";
-import type { Ref } from "vue";
-import { defineAsyncComponent, ref } from "vue";
-import type { Task, TaskLog } from "../../types/longRunningTasks";
-import { StringCodec } from "nats.ws";
-import type { Subscription } from "nats.ws";
-
-const Modal = defineAsyncComponent(() => import("../modal/Modal.vue"));
-const LongRunningTaskItem = defineAsyncComponent(
-  () => import("../long-running-tasks/LongRunningTaskItem.vue")
-);
-const LongRunningTaskTerminal = defineAsyncComponent(
-  () => import("../terminal/LongRunningTaskTerminal.vue")
-);
-const Preloader = defineAsyncComponent(
-  () => import("../../v2/preloader/Preloader.vue")
-);
-const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
-
-defineEmits(["close"]);
-
-interface Props {
-  open?: boolean;
-  theme?: string;
-  title?: string;
-  simple?: boolean;
-  natsSubject?: string;
-  isNatsConnectionLoading?: boolean;
-  errorCtx?: {
-    connectionError: string;
-    onError: (msg: string) => void;
-  };
-  successCtx?: {
-    btnTitle?: string;
-    isLoaderActive?: boolean;
-    onSuccess: () => void;
-    onSuccessBtnClick?: () => void;
-  };
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  open: true,
-  theme: "light",
-  simple: true,
-  title: "Sample title",
-  natsSubject: "",
-  isNatsConnectionLoading: false,
-  errorCtx: undefined,
-  successCtx: undefined,
-});
-
-const { natsSubject, open, errorCtx, successCtx } = toRefs(props);
-const connectionError = computed(() => errorCtx.value?.connectionError);
-const currentInstance = getCurrentInstance();
-const $nats = currentInstance?.appContext.config.globalProperties.$nc;
-let subscription: Subscription;
-
-const tasks: Ref<Array<Task>> = ref([]);
-const activeStepId: Ref<string> = ref("");
-// to maintain stepId to stepIndex map
-// to find active task faster
-const idToStepIndex: Ref<Record<string, number>> = ref({});
-const activeTask = computed(() => {
-  const task = tasks.value[idToStepIndex.value[activeStepId.value]];
-  return task;
-});
-
-function handleTaskLog(log: TaskLog) {
-  if (log.step) {
-    // log has a step
-    // so add new task
-    tasks.value.push({
-      ...log,
-      logs: [(log.msg && log.msg) || ""],
-    });
-
-    // recent pushed task index
-    const latestStepIndex = tasks.value.length - 1;
-
-    // map taskid to stepIndex
-    idToStepIndex.value[log.id as string] = latestStepIndex;
-
-    // update active step index for first task
-    // or if current active step is in latest step
-    if (
-      latestStepIndex === 0 ||
-      latestStepIndex === idToStepIndex.value[activeStepId.value] + 1
-    ) {
-      activeStepId.value = log.id as string;
-    }
-  } else {
-    // get active task
-    const task = tasks.value[idToStepIndex.value[log.id as string]];
-    if (task) {
-      task.status = log.status;
-      if (log.status === "Failed") {
-        task.logs.push(log.error || "");
-        errorCtx.value?.onError(log?.error || "");
-      } else {
-        task.logs.push(log.msg || "");
-      }
-    }
-  }
-}
-
-async function subscribeToChannel(channelId: string) {
-  subscription = $nats?.subscribe(channelId);
-
-  console.log("Started listening", channelId);
-
-  if (subscription) {
-    // listen to channel events
-    //@ts-ignore
-    for await (const msg of subscription) {
-      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 });
-      handleTaskLog(log);
-    }
-    console.log("Stopped listening", channelId);
-    console.log("Closed Channel", channelId);
-  }
-}
-
-watch(
-  natsSubject,
-  (n) => {
-    if (n) {
-      subscribeToChannel(n);
-    }
-  },
-  { immediate: true }
-);
-
-watch(open, (n) => {
-  if (!n) {
-    subscription && subscription.unsubscribe();
-  }
-});
-onBeforeUnmount(() => {
-  subscription && subscription.unsubscribe();
-});
-
-const longRunningTaskStatus = computed(() => {
-  let successTaskCount = 0;
-  let failedTaskCount = 0;
-
-  // get count of success and failed task
-  tasks.value.forEach((task) => {
-    if (task?.status === "Success") successTaskCount++;
-    else if (task?.status === "Failed") failedTaskCount++;
-  });
-
-  if (tasks.value.length === 0) return "NotStarted";
-  // if all the task has been successful
-  else if (successTaskCount === tasks.value.length) {
-    return "Success";
-  }
-  // if all the task has been completed and some tasks are failed
-  else if (
-    failedTaskCount &&
-    successTaskCount + failedTaskCount === tasks.value.length
-  ) {
-    return "Failed";
-  } else return "Pending";
-});
-
-// modal close / footer feature
-const enableModalClose = computed(() => {
-  return (
-    connectionError.value ||
-    longRunningTaskStatus.value === "Failed" ||
-    longRunningTaskStatus.value === "Success"
-  );
-});
-const enableModalFooter = computed(() => {
-  return showReportButton.value || showSuccessButton.value;
-});
-
-// generate report issue title with error step title
-const getReportIssueInfo = (): { title: string; body: string } => {
-  const stepTitlesFromErrorTasks: Array<string> = [];
-  const stepLogsFromErrorTasks: Array<string> = [];
-  tasks.value.forEach((task) => {
-    // if this taskLog is error task, push it to array
-    if (task.error) {
-      stepTitlesFromErrorTasks.push(task?.step || "");
-      stepLogsFromErrorTasks.push(task?.logs[task?.logs?.length - 1] || "");
-    }
-  });
-  // return final object
-  return {
-    title: stepTitlesFromErrorTasks.join(", "),
-    body: stepLogsFromErrorTasks.join(", "),
-  };
-};
-
-// report button
-const showReportButton = computed(
-  () => longRunningTaskStatus.value === "Failed"
-);
-function onReportIssueClick() {
-  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
-    getReportIssueInfo().title
-  }&labels[]=bug&body=${window.location.href} %0A%0A %60%60%60 %0A  ${
-    getReportIssueInfo().body
-  } %0A %60%60%60`;
-  window.open(url, "_blank");
-}
-
-// success button
-const showSuccessButton = computed(
-  () =>
-    longRunningTaskStatus.value === "Success" && !!successCtx.value?.btnTitle
-);
-
-// execute on success and on error functions
-watch(longRunningTaskStatus, (n) => {
-  if (n === "Success") {
-    successCtx.value?.onSuccess();
-  } else if (n === "Failed") {
-    errorCtx.value?.onError("Operation Failed");
-  }
-});
-</script>
-
-<template>
-  <modal
-    :open="open"
-    :title="title"
-    :is-close-option-disabled="!enableModalClose"
-    :ignore-outside-click="true"
-    :hide-action-footer="!enableModalFooter"
-    @closemodal="$emit('close')"
-  >
-    <div v-if="connectionError" class="task-simple-wrapper">
-      <div class="task-cogs-icon">
-        <i class="fa fa-times-circle has-text-danger fa-5x fa-fw"></i>
-      </div>
-      <div class="task-log">
-        <span class="task-title">
-          <i class="fa fa-times-circle mr-5 is-failed" />
-          <span> Connection error </span>
-        </span>
-        <span>{{ connectionError }}</span>
-      </div>
-    </div>
-    <div
-      v-else-if="isNatsConnectionLoading || !activeStepId"
-      class="is-justify-content-center"
-      :class="simple ? 'task-simple-wrapper' : 'task-complex-wrapper'"
-    >
-      <preloader
-        :style="{ height: '100%' }"
-        class="is-fullheight"
-        message="Connecting..."
-      />
-    </div>
-    <div v-else-if="simple" class="task-simple-wrapper">
-      <div class="task-cogs-icon">
-        <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
-        <span class="is-flex is-flex-direction-column">
-          <i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
-          <i class="fa fa-cog fa-spin fa-3x fa-bw"></i>
-        </span>
-      </div>
-      <div class="task-log">
-        <span class="task-title">
-          <i
-            v-if="activeTask?.status === 'Running'"
-            class="fa fa-circle-o-notch fa-spin mr-5"
-          />
-          <i
-            v-else-if="activeTask?.status === 'Success'"
-            class="fa fa-check-circle mr-5 is-success"
-          />
-          <i
-            v-else-if="activeTask?.status === 'Failed'"
-            class="fa fa-times-circle mr-5 is-failed"
-          />
-          <span>
-            {{ activeTask?.step }}
-          </span>
-        </span>
-        <span>{{ activeTask?.logs[activeTask?.logs.length - 1] }}</span>
-      </div>
-    </div>
-    <div v-else class="task-complex-wrapper">
-      <ul class="task-list">
-        <li v-for="task in tasks" :key="task.step">
-          <long-running-task-item
-            :title="task.step"
-            :status="task.status"
-            :class="{ 'is-active': activeStepId === task.id }"
-            @click="activeStepId = task.id as string"
-          />
-        </li>
-      </ul>
-      <long-running-task-terminal
-        :key="activeTask?.id"
-        :theme="theme"
-        :logs="activeTask?.logs"
-        class="task-log"
-      />
-    </div>
-
-    <template #modal-footer-controls>
-      <ac-button
-        title="Close"
-        modifier-classes="is-outlined"
-        @click.stop="$emit('close')"
-      />
-      <ac-button
-        v-if="showSuccessButton"
-        :title="successCtx?.btnTitle"
-        :is-loader-active="successCtx?.isLoaderActive"
-        modifier-classes="is-primary"
-        icon-class="step-forward"
-        @click="successCtx?.onSuccessBtnClick"
-      />
-      <ac-button
-        v-if="showReportButton"
-        title="Report Issue"
-        modifier-classes="is-danger"
-        icon-class="external-link"
-        @click="onReportIssueClick"
-      />
-    </template>
-  </modal>
-</template>
-
-<style scoped lang="scss">
-.task-simple-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 40vw;
-  height: 40vh;
-  .task-cogs-icon {
-    width: 100%;
-    height: 70%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    color: $primary;
-  }
-  .task-log {
-    width: 100%;
-    height: 30%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .task-title {
-      span,
-      i {
-        font-size: 16px;
-      }
-      i {
-        color: $primary;
-        &.is-success {
-          color: $success;
-        }
-        &.is-failed {
-          color: $danger;
-        }
-      }
-      font-weight: 500;
-    }
-    span {
-      font-size: 14px;
-    }
-  }
-}
-.task-complex-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 60vw;
-  height: 60vh;
-
-  .task-list {
-    width: 25%;
-    height: 100%;
-  }
-  .task-log {
-    width: 70%;
-    height: 100%;
-    border-radius: 4px;
-    font-size: 13px;
-  }
-}
-</style>

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

@@ -1,151 +0,0 @@
-<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
-
-interface Props {
-  theme?: string;
-  logs?: string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  theme: "light",
-  logs: () => [],
-});
-// terminal print logic
-const { logs, theme } = toRefs(props);
-const lastPrintIdx = ref(0);
-
-//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);
-  });
-}
-
-watch(
-  logs,
-  (n) => {
-    if (n.length > lastPrintIdx.value) {
-      nextTick(() => {
-        writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
-        lastPrintIdx.value = n.length;
-      });
-    }
-  },
-  { immediate: true, deep: true }
-);
-</script>
-
-<template>
-  <div ref="terminalRef" class="terminal-body"></div>
-</template>
-
-<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>