@appscode/design-system 1.0.43-alpha.222 → 1.0.43-alpha.224

package/package.json

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

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

@@ -20,7 +20,7 @@
       </div>
     </div>
     <div
-      v-else-if="isNatsConnectionLoading || !activeStep"
+      v-else-if="isNatsConnectionLoading || !activeStepId"
       class="is-justify-content-center"
       :class="simple ? 'task-simple-wrapper' : 'task-complex-wrapper'"
     >
@@ -65,12 +65,13 @@
           <long-running-task-item
             :title="task.step"
             :status="task.status"
-            :class="{ 'is-active': activeStep === task.step }"
+            :class="{ 'is-active': activeStepId === task.id }"
+            @click="activeStepId = task.id"
           />
         </li>
       </ul>
       <long-running-task-terminal
-        :key="activeTask?.step"
+        :key="activeTask?.id"
         :theme="theme"
         :logs="activeTask?.logs"
         class="task-log"
@@ -167,9 +168,12 @@ const $nats = currentInstance?.appContext.config.globalProperties.$nc;
 let subscription: Subscription;
 
 const tasks: Ref<Array<Task>> = ref([]);
-const activeStep: Ref<string> = 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.find((task) => task.step === activeStep.value);
+  const task = tasks.value.find((task) => task.id === activeStepId.value);
   return task;
 });
 
@@ -181,9 +185,24 @@ function handleTaskLog(log: TaskLog) {
       ...log,
       logs: [(log.msg && log.msg) || ""],
     });
-    activeStep.value = log.step;
+
+    // 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 {
-    const task = tasks.value.find((task) => task.step === activeStep.value);
+    // get active task
+    const task = tasks.value[idToStepIndex.value[log.id]];
     if (task) {
       task.status = log.status;
       if (log.status === "Failed") {
@@ -214,11 +233,15 @@ async function subscribeToChannel(channelId: string) {
   }
 }
 
-watchEffect(() => {
-  if (natsSubject.value) {
-    subscribeToChannel(natsSubject.value);
-  }
-});
+watch(
+  natsSubject,
+  (n) => {
+    if (n) {
+      subscribeToChannel(n);
+    }
+  },
+  { immediate: true }
+);
 
 watch(open, (n) => {
   if (!n) {
@@ -241,12 +264,25 @@ const enableModalFooter = computed(() => {
   return showReportButton.value || showSuccessButton.value;
 });
 
+// generate report issue title with error step title
+const getReportIssueTitle = (): string => {
+  const stepTitlesFromErrorTasks: Array<string> = [];
+  tasks.value.forEach((task) => {
+    // if this taskLog is error task, push it to array
+    if (task.error) {
+      stepTitlesFromErrorTasks.push(task.step);
+    }
+  });
+  // return final string
+  return stepTitlesFromErrorTasks.join(", ");
+};
+
 // report button
 const showReportButton = computed(() => activeTask.value?.status === "Failed");
 function onReportIssueClick() {
-  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${
-    activeStep.value
-  }&labels[]=bug&body=${window.location.href} %0A%0A %60%60%60 %0A  ${
+  const url = `https://github.com/bytebuilders/community/issues/new?title=Chart Install: ${getReportIssueTitle()}&labels[]=bug&body=${
+    window.location.href
+  } %0A%0A %60%60%60 %0A  ${
     activeTask.value?.logs[activeTask.value?.logs.length - 1 || 0]
   } %0A %60%60%60`;
   window.open(url, "_blank");