@appscode/design-system 1.0.43-alpha.99 → 1.1.0-alpha.10

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

@@ -0,0 +1,400 @@
+<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/navbar/ThemeMode.vue

@@ -1,27 +1,24 @@
 <template>
-  <div>
-    <button 
-      v-if="themeMode" 
-      class="button ac-nav-button"
-      @click="toggleTheme"
-      :title="themeModes[themeMode].displayName"
-    >
-      <i :class="`fa ${themeModes[themeMode].iconClass} width-15`" />
-    </button>
-    <div class="ac-menu-content theme-choice">
-      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li 
-          v-for="theme of Object.keys(themeModes)"
-          :title="themeModes[theme].displayName"
-          @click="themeMode = theme"
-          :class="{'is-active': themeMode === theme}"
-          :key="theme"
-        >
-          <i :class="['fa', themeModes[theme].iconClass]" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <li class="mt-10 b-t-1 pt-10">
+    <ul class="ac-vscrollbar">
+      <li>
+        <div class="ac-menu-contentt theme-choicee">
+          <ul class="is-flex is-flex-direction-row is-justify-content-center">
+            <li
+              v-for="theme of Object.keys(themeModes)"
+              :title="themeModes[theme].displayName"
+              @click="themeMode = theme"
+              class="p-10 pl-30 pr-30 is-flex-grow-1 has-text-centered"
+              :class="{ 'is-active': themeMode === theme }"
+              :key="theme"
+            >
+              <i :class="['fa', themeModes[theme].iconClass]" />
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </li>
 </template>
 <script>
 import { defineComponent } from "vue";
@@ -31,10 +28,6 @@ export default defineComponent({
     return {
       themeMode: "",
       themeModes: {
-        system: {
-          displayName: "System Theme",
-          iconClass: "fa-desktop",
-        },
         light: {
           displayName: "Light Theme",
           iconClass: "fa-sun-o",
@@ -42,19 +35,23 @@ export default defineComponent({
         dark: {
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
-        }
-      }
+        },
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+      },
     };
   },
 
-  emits: ['set:theme'],
+  emits: ["set:theme"],
 
   mounted() {
     // get theme mode from localStorage or set default one
     this.themeMode = localStorage.getItem("themeMode") || "light";
   },
 
-  destroyed() {
+  unmounted() {
     this.removeColorSchemeEventListener();
   },
 
@@ -62,19 +59,16 @@ export default defineComponent({
     themeMode: {
       handler(n) {
         this.onThemeModeChange(n);
-      }
-    }
+      },
+    },
   },
 
   methods: {
     // handle theme mode button click
     toggleTheme() {
-      if(this.themeMode === "light")
-        this.themeMode = "dark";
-      else if(this.themeMode === "dark")
-        this.themeMode = "system";
-      else if(this.themeMode === "system")
-        this.themeMode = "light";
+      if (this.themeMode === "light") this.themeMode = "dark";
+      else if (this.themeMode === "dark") this.themeMode = "system";
+      else if (this.themeMode === "system") this.themeMode = "light";
     },
 
     // triggered when theme mode is updated
@@ -82,8 +76,10 @@ export default defineComponent({
       localStorage.setItem("themeMode", n);
 
       let theme = n;
-      if(n === "system") {
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
         this.addColorSchemeEventListener();
         theme = isDarkMode ? "dark" : "light";
       } else {
@@ -95,7 +91,7 @@ export default defineComponent({
 
     // add proper css class to update the ui theme
     handleDarkThemeClass(currentTheme) {
-      if(currentTheme === "light") {
+      if (currentTheme === "light") {
         document.documentElement.classList.remove("is-dark-theme");
       } else {
         document.documentElement.classList.add("is-dark-theme");
@@ -106,23 +102,19 @@ export default defineComponent({
     addColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .addEventListener("change", this.handleSystemThemeChange);
     },
 
     // remove system theme listener event
     removeColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .removeEventListener("change", this.handleSystemThemeChange);
     },
 
     handleSystemThemeChange() {
       this.onThemeModeChange(this.themeMode);
     },
-  }
+  },
 });
 </script>