feat: improve reactive subscriptions to fields, improve naming of methods and their interface

Author: ivictbor

custom/GlobalJobApi.vue

@@ -27,6 +27,7 @@ import { useBackgroundJobApi } from './useBackgroundJobApi';
 const jobStore = useBackgroundJobApi();
 
 const dialogRef = ref<any>(null);
+let unsubscribeJobUpdates: (() => void) | undefined;
 
 const props = defineProps<{
   meta: {
@@ -69,7 +70,7 @@ onMounted(() => {
   // @ts-ignore
   window.OpenJobInfoPopup = openJobInfo;
 
-  websocket.subscribe('/background-jobs', (data) => {
+  unsubscribeJobUpdates = websocket.subscribe('/background-jobs-job-update', (data) => {
     if (data.jobId === jobStore.currentJob?.id) {
       if (data.status) { 
         jobStore.updateCurrentJob({ status: data.status });
@@ -90,6 +91,6 @@ onBeforeUnmount(() => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   if (window.OpenJobInfoPopup) delete window.OpenJobInfoPopup;
-  websocket.unsubscribe('/background-jobs');
+  unsubscribeJobUpdates?.();
 });
 </script>

custom/JobInfoPopup.vue

@@ -69,7 +69,7 @@ import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils'
 import { useI18n } from 'vue-i18n';
 import StateToIcon from './StateToIcon.vue';
 import { useAdminforth } from '@/adminforth';
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import websocket from '@/websocket';
 import { useBackgroundJobApi } from './useBackgroundJobApi';
 
@@ -115,13 +115,11 @@ function createStateFieldSubscription(
   callback: (data: any) => void,
 ) {
   const paths = getUniqueFieldNames(fieldNames).map(pathFactory);
-  for (const path of paths) {
-    websocket.subscribe(path, callback);
-  }
+  const pathCleanups = paths.map((path) => websocket.subscribe(path, callback));
 
   const unsubscribe = () => {
-    for (const path of paths) {
-      websocket.unsubscribe(path);
+    for (const cleanup of pathCleanups) {
+      cleanup();
     }
     subscriptionCleanups.delete(unsubscribe);
   };
@@ -155,6 +153,50 @@ function handleTaskStateFieldUpdate(data: TaskStateFieldUpdate) {
   };
 }
 
+function handleTaskStatusUpdate(data: { taskIndex: number; status: string }) {
+  if (!jobTasks.value[data.taskIndex]) {
+    return;
+  }
+
+  jobTasks.value[data.taskIndex].status = data.status;
+}
+
+function handleJobUpdate(data: {
+  jobId: string;
+  status?: IJob['status'];
+  progress?: string;
+  finishedAt?: Date;
+  state?: Record<string, any>;
+}) {
+  if (data.jobId !== props.job.id) {
+    return;
+  }
+
+  if (data.status) {
+    props.job.status = data.status;
+  }
+  if (data.progress !== undefined) {
+    props.job.progress = data.progress;
+  }
+  if (data.finishedAt) {
+    props.job.finishedAt = data.finishedAt;
+  }
+  if (data.state) {
+    props.job.state = {
+      ...props.job.state,
+      ...data.state,
+    };
+  }
+  if (jobStore.currentJob?.id === props.job.id) {
+    jobStore.updateCurrentJob({
+      status: props.job.status,
+      progress: props.job.progress,
+      finishedAt: props.job.finishedAt,
+      state: props.job.state,
+    });
+  }
+}
+
 function subscribeToJobStateFields(fieldNames: string[]) {
   return createStateFieldSubscription(
     fieldNames,
@@ -241,6 +283,13 @@ watch(
   { immediate: true }
 );
 
+onMounted(() => {
+  const taskStatusPath = `/background-jobs-task-update/${props.job.id}`;
+  subscriptionCleanups.add(websocket.subscribe(taskStatusPath, handleTaskStatusUpdate));
+
+  subscriptionCleanups.add(websocket.subscribe('/background-jobs-job-update', handleJobUpdate));
+});
+
 onBeforeUnmount(() => {
   for (const unsubscribe of Array.from(subscriptionCleanups)) {
     unsubscribe();

custom/NavbarJobs.vue

@@ -3,7 +3,7 @@
     <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
       <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
         <Tooltip>
-          <IconBriefcaseSolid class="w-7 h-7 text-lightNavbarIcons dark:text-darkNavbarIcons" />
+          <IconCheckCircleOutline class="w-7 h-7 text-lightNavbarIcons dark:text-darkNavbarIcons" />
           <template #tooltip>
             {{ t('All jobs completed') }}
           </template>
@@ -48,8 +48,8 @@
 <script setup lang="ts">
   import type { AdminUser } from 'adminforth';
   import { onMounted, onUnmounted, ref, computed } from 'vue';
-  import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
   import { Tooltip } from '@/afcl';
+  import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
   import { useI18n } from 'vue-i18n';
   import JobsList from './JobsList.vue';
   import type { IJob } from './utils';
@@ -69,6 +69,7 @@
   const isDropdownOpen = ref(false);
   const jobs = ref<IJob[]>([]);
   const dropdownRef = ref<HTMLElement | null>(null);
+  let unsubscribeJobUpdates: (() => void) | undefined;
 
   onClickOutside(dropdownRef, () => {
     isDropdownOpen.value = false;
@@ -85,7 +86,7 @@
 
 
   onMounted(async () => {
-    websocket.subscribe('/background-jobs', (data) => {
+    unsubscribeJobUpdates = websocket.subscribe('/background-jobs-job-update', (data) => {
       const jobIndex = jobs.value.findIndex(job => job.id === data.jobId);
       if (jobIndex !== -1) {
         if (data.status) {
@@ -130,7 +131,7 @@
 
 
   onUnmounted(() => {
-    websocket.unsubscribe('/background-jobs');
+    unsubscribeJobUpdates?.();
   });
 
 </script>
@@ -147,4 +148,4 @@
     opacity: 0;
   }
 }
-</style>
+</style>