@appscode/design-system 1.1.0 → 2.0.1

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

@@ -1,400 +0,0 @@
-<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"
-          />
-        </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>
-<script setup lang="ts">
-import {
-  computed,
-  getCurrentInstance,
-  onBeforeUnmount,
-  Ref,
-  toRefs,
-  watch,
-} from "vue";
-import { defineAsyncComponent, ref } from "vue";
-import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
-import { Subscription, StringCodec } 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"]);
-
-const props = withDefaults(
-  defineProps<{
-    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;
-    };
-  }>(),
-  {
-    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] = 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;
-    }
-  } else {
-    // get active task
-    const task = tasks.value[idToStepIndex.value[log.id]];
-    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
-    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>
-
-<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: var(--ac-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: var(--ac-primary);
-        &.is-success {
-          color: #158748;
-        }
-        &.is-failed {
-          color: #ff3729;
-        }
-      }
-      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: 1rem;
-    font-size: 13px;
-  }
-}
-</style>

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

@@ -1,148 +0,0 @@
-<template>
-  <div ref="terminalRef" class="terminal-body"></div>
-</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<{
-    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;
-
-  // 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>