@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.2

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

@@ -1,3 +1,65 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
+import { useToast } from "vue-toastification";
+
+interface Props {
+  open?: boolean;
+  editorTitle?: string;
+  editorContent?: Record<string, unknown> | string | Array<any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  editorTitle: "",
+  editorContent: () => ({}),
+});
+
+const emit = defineEmits(["closemodal"]);
+
+const Modal = defineAsyncComponent(() => import("./../modal/Modal.vue"));
+const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+const HeaderItem = defineAsyncComponent(
+  () => import("./../header/HeaderItem.vue")
+);
+
+const Preloader = defineAsyncComponent(
+  () => import("./../preloader/Preloader.vue")
+);
+
+const Banner = defineAsyncComponent(() => import("./../banner/Banner.vue"));
+
+const Editor = defineAsyncComponent({
+  loader: () =>
+    import("./../editor/Editor.vue").then((module) => module.default),
+  loadingComponent: Preloader,
+  delay: 200,
+  errorComponent: Banner,
+  timeout: 100000,
+});
+
+const toast = useToast();
+
+const parsedContent = computed(() => {
+  try {
+    return JSON.parse(props.editorContent as string);
+  } catch (e) {
+    return props.editorContent;
+  }
+});
+
+const onCopy = () => {
+  toast.success("Value copied successfully", { timeout: 1000 });
+};
+
+const onError = () => {
+  toast.error("Copying failed", { timeout: 1000 });
+};
+
+const closeModal = () => {
+  emit("closemodal", true);
+};
+</script>
+
 <template>
   <modal
     :title="editorTitle"
@@ -26,71 +88,3 @@
     />
   </modal>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-import { useToast } from "vue-toastification";
-import Preloader from "../../v2/preloader/Preloader.vue";
-import Banner from "../../v2/banner/Banner.vue";
-
-export default defineComponent({
-  props: {
-    open: {
-      type: Boolean,
-      default: false
-    },
-    editorTitle: {
-      type: String,
-      default: ""
-    },
-    editorContent: {
-      type: null,
-      default: () => ({})
-    }
-  },
-  emits: ["closemodal"],
-  components: {
-    Modal: defineAsyncComponent(() =>
-      import("../modal/Modal.vue").then(module => module.default)
-    ),
-    Editor: defineAsyncComponent({
-      loader: () =>
-        import("../editor/Editor.vue").then(module => module.default),
-      loadingComponent: Preloader,
-      delay: 200,
-      errorComponent: Banner,
-      timeout: 100000,
-    }),
-    AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then(module => module.default)
-    ),
-    HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then(module => module.default)
-    )
-  },
-  computed: {
-    parsedContent() {
-      try {
-        return JSON.parse(this.editorContent);
-      } catch (e) {
-        return this.editorContent;
-      }
-    }
-  },
-  setup() {
-    const toast = useToast();
-    return { toast };
-  },
-  methods: {
-    onCopy() {
-      this.toast.success("Value copied successfully", { timeout: 1000 });
-    },
-    onError() {
-      this.toast.error("Copying failed", { timeout: 1000 });
-    },
-    closeModal() {
-      this.$emit("closemodal", true);
-    }
-  }
-});
-</script>

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

@@ -1,119 +1,16 @@
-<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 type { Ref } from "vue";
 import { defineAsyncComponent, ref } from "vue";
-import { Task, TaskLog } from "../../../typings/long-running-tasks.ts";
-import { Subscription, StringCodec } from "nats.ws";
+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(
@@ -129,36 +26,35 @@ 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,
-  }
-);
+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);
@@ -189,7 +85,7 @@ function handleTaskLog(log: TaskLog) {
     const latestStepIndex = tasks.value.length - 1;
 
     // map taskid to stepIndex
-    idToStepIndex.value[log.id] = latestStepIndex;
+    idToStepIndex.value[log.id as string] = latestStepIndex;
 
     // update active step index for first task
     // or if current active step is in latest step
@@ -197,16 +93,16 @@ function handleTaskLog(log: TaskLog) {
       latestStepIndex === 0 ||
       latestStepIndex === idToStepIndex.value[activeStepId.value] + 1
     ) {
-      activeStepId.value = log.id;
+      activeStepId.value = log.id as string;
     }
   } else {
     // get active task
-    const task = tasks.value[idToStepIndex.value[log.id]];
+    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);
+        errorCtx.value?.onError(log?.error || "");
       } else {
         task.logs.push(log.msg || "");
       }
@@ -221,6 +117,7 @@ async function subscribeToChannel(channelId: string) {
 
   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) });
@@ -295,7 +192,7 @@ const getReportIssueInfo = (): { title: string; body: string } => {
   tasks.value.forEach((task) => {
     // if this taskLog is error task, push it to array
     if (task.error) {
-      stepTitlesFromErrorTasks.push(task?.step);
+      stepTitlesFromErrorTasks.push(task?.step || "");
       stepLogsFromErrorTasks.push(task?.logs[task?.logs?.length - 1] || "");
     }
   });
@@ -328,13 +225,118 @@ const showSuccessButton = computed(
 // execute on success and on error functions
 watch(longRunningTaskStatus, (n) => {
   if (n === "Success") {
-    successCtx.value.onSuccess();
+    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;