@adminforth/background-jobs 1.12.1 → 1.13.1

package/build.log

@@ -13,5 +13,5 @@ custom/tsconfig.json
 custom/useBackgroundJobApi.ts
 custom/utils.ts
 
-sent 18,730 bytes  received 172 bytes  37,804.00 bytes/sec
-total size is 18,097  speedup is 0.96
+sent 22,184 bytes  received 172 bytes  44,712.00 bytes/sec
+total size is 21,551  speedup is 0.96

package/custom/JobInfoPopup.vue

@@ -54,6 +54,8 @@
       :meta="job.customComponent"
       :getJobTasks="getJobTasks"
       :job="job"
+      :subscribeToJobStateFields="subscribeToJobStateFields"
+      :subscribeToJobTaskFields="subscribeToJobTaskFields"
     />
 </template>
 
@@ -67,12 +69,15 @@ import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils'
 import { useI18n } from 'vue-i18n';
 import StateToIcon from './StateToIcon.vue';
 import { useAdminforth } from '@/adminforth';
-import { watch } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
+import websocket from '@/websocket';
+import { useBackgroundJobApi } from './useBackgroundJobApi';
 
 
 const { t } = useI18n();
 
 const adminforth = useAdminforth();
+const jobStore = useBackgroundJobApi();
 
 const props = defineProps<{
   job: IJob;
@@ -82,6 +87,90 @@ const props = defineProps<{
   closeModal: () => void;
 }>();
 
+type JobTask = {
+  state: Record<string, any>;
+  status: string;
+};
+
+type JobStateFieldUpdate = {
+  jobId: string;
+  fieldName: string;
+  value: any;
+};
+
+type TaskStateFieldUpdate = JobStateFieldUpdate & {
+  taskIndex: number;
+};
+
+const jobTasks = ref<JobTask[]>([]);
+const subscriptionCleanups = new Set<() => void>();
+
+function getUniqueFieldNames(fieldNames: string[]): string[] {
+  return Array.from(new Set(fieldNames.filter((fieldName) => typeof fieldName === 'string' && fieldName.length > 0)));
+}
+
+function createStateFieldSubscription(
+  fieldNames: string[],
+  pathFactory: (fieldName: string) => string,
+  callback: (data: any) => void,
+) {
+  const paths = getUniqueFieldNames(fieldNames).map(pathFactory);
+  for (const path of paths) {
+    websocket.subscribe(path, callback);
+  }
+
+  const unsubscribe = () => {
+    for (const path of paths) {
+      websocket.unsubscribe(path);
+    }
+    subscriptionCleanups.delete(unsubscribe);
+  };
+  subscriptionCleanups.add(unsubscribe);
+  return unsubscribe;
+}
+
+function handleJobStateFieldUpdate(data: JobStateFieldUpdate) {
+  if (data.jobId !== props.job.id) {
+    return;
+  }
+
+  props.job.state[data.fieldName] = data.value;
+  if (jobStore.currentJob?.id === props.job.id) {
+    jobStore.updateCurrentJob({
+      state: {
+        ...props.job.state,
+      },
+    });
+  }
+}
+
+function handleTaskStateFieldUpdate(data: TaskStateFieldUpdate) {
+  if (data.jobId !== props.job.id || !jobTasks.value[data.taskIndex]) {
+    return;
+  }
+
+  jobTasks.value[data.taskIndex].state = {
+    ...jobTasks.value[data.taskIndex].state,
+    [data.fieldName]: data.value,
+  };
+}
+
+function subscribeToJobStateFields(fieldNames: string[]) {
+  return createStateFieldSubscription(
+    fieldNames,
+    (fieldName) => `/background-jobs-state-update/${props.job.id}/${encodeURIComponent(fieldName)}`,
+    handleJobStateFieldUpdate,
+  );
+}
+
+function subscribeToJobTaskFields(fieldNames: string[]) {
+  return createStateFieldSubscription(
+    fieldNames,
+    (fieldName) => `/background-jobs-task-state-update/${props.job.id}/${encodeURIComponent(fieldName)}`,
+    handleTaskStateFieldUpdate,
+  );
+}
+
 async function cancelJob() {
   // Implement job cancellation logic here
   const isConfirmed = await adminforth.confirm({ message: t('Are you sure you want to cancel this job?') });
@@ -111,7 +200,7 @@ async function cancelJob() {
 
 
 
-async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{state: Record<string, any>, status: string}[]> {
+async function getJobTasks(limit: number = 10, offset: number = 0): Promise<JobTask[]> {
   try {
     const res = await callAdminForthApi({
       path: `/plugin/${props.meta.pluginInstanceId}/get-tasks`,
@@ -123,7 +212,12 @@ async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{sta
       },
     });
     if (res.ok) {
-      return res.data;
+      const tasks = res.data.tasks as JobTask[];
+      const startIndex = offset || 0;
+      for (let taskIndex = 0; taskIndex < tasks.length; taskIndex++) {
+        jobTasks.value[startIndex + taskIndex] = tasks[taskIndex];
+      }
+      return jobTasks.value.slice(startIndex, startIndex + tasks.length);
     } else {
       console.error('Error fetching job tasks:', res.error);
       return [];
@@ -147,6 +241,12 @@ watch(
   { immediate: true }
 );
 
+onBeforeUnmount(() => {
+  for (const unsubscribe of Array.from(subscriptionCleanups)) {
+    unsubscribe();
+  }
+});
+
 
 
-</script>
+</script>

package/custom/JobsList.vue

@@ -5,7 +5,7 @@
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
       :beforeCloseFunction="onBeforeClose" 
-      :beforeOpenFunction="onBeforeOpen"
+      :beforeOpenFunction="() => onBeforeOpen(job)"
       removeFromDomOnClose
     >
       <template #trigger>
@@ -30,7 +30,8 @@
         </div>
       </template>
       <JobInfoPopup
-        :job="job" 
+        v-if="loadedJobs[job.id]"
+        :job="loadedJobs[job.id]"
         :meta="meta"
         :closeModal="closeModal"
       />
@@ -42,7 +43,7 @@
 
 <script setup lang="ts">
 import type { IJob } from './utils';
-import { getTimeAgoString } from '@/utils';
+import { callAdminForthApi, getTimeAgoString } from '@/utils';
 import { ProgressBar, Modal } from '@/afcl';
 import JobInfoPopup from './JobInfoPopup.vue';
 import StateToIcon from './StateToIcon.vue';
@@ -78,9 +79,34 @@ const props = defineProps<{
 
 
 const isModalOpen = ref(false);
+const loadedJobs = ref<Record<string, IJob>>({});
 
-function onBeforeOpen() {
+async function onBeforeOpen(job: IJob) {
   props.closeDropdown();
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/get-background-job-info`,
+      method: 'POST',
+      body: { jobId: job.id },
+    });
+
+    if (res?.ok && res.job) {
+      loadedJobs.value[job.id] = res.job;
+      return;
+    }
+
+    console.log('[background-jobs] failed to load full job info', {
+      jobId: job.id,
+      response: res,
+    });
+  } catch (error) {
+    console.log('[background-jobs] failed to load full job info', {
+      error,
+      jobId: job.id,
+    });
+  }
+
+  loadedJobs.value[job.id] = job;
 }
 
 function onBeforeClose() {
@@ -88,4 +114,4 @@ function onBeforeClose() {
 }
 
   
-</script>
+</script>

package/dist/custom/JobInfoPopup.vue

@@ -54,6 +54,8 @@
       :meta="job.customComponent"
       :getJobTasks="getJobTasks"
       :job="job"
+      :subscribeToJobStateFields="subscribeToJobStateFields"
+      :subscribeToJobTaskFields="subscribeToJobTaskFields"
     />
 </template>
 
@@ -67,12 +69,15 @@ import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils'
 import { useI18n } from 'vue-i18n';
 import StateToIcon from './StateToIcon.vue';
 import { useAdminforth } from '@/adminforth';
-import { watch } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
+import websocket from '@/websocket';
+import { useBackgroundJobApi } from './useBackgroundJobApi';
 
 
 const { t } = useI18n();
 
 const adminforth = useAdminforth();
+const jobStore = useBackgroundJobApi();
 
 const props = defineProps<{
   job: IJob;
@@ -82,6 +87,90 @@ const props = defineProps<{
   closeModal: () => void;
 }>();
 
+type JobTask = {
+  state: Record<string, any>;
+  status: string;
+};
+
+type JobStateFieldUpdate = {
+  jobId: string;
+  fieldName: string;
+  value: any;
+};
+
+type TaskStateFieldUpdate = JobStateFieldUpdate & {
+  taskIndex: number;
+};
+
+const jobTasks = ref<JobTask[]>([]);
+const subscriptionCleanups = new Set<() => void>();
+
+function getUniqueFieldNames(fieldNames: string[]): string[] {
+  return Array.from(new Set(fieldNames.filter((fieldName) => typeof fieldName === 'string' && fieldName.length > 0)));
+}
+
+function createStateFieldSubscription(
+  fieldNames: string[],
+  pathFactory: (fieldName: string) => string,
+  callback: (data: any) => void,
+) {
+  const paths = getUniqueFieldNames(fieldNames).map(pathFactory);
+  for (const path of paths) {
+    websocket.subscribe(path, callback);
+  }
+
+  const unsubscribe = () => {
+    for (const path of paths) {
+      websocket.unsubscribe(path);
+    }
+    subscriptionCleanups.delete(unsubscribe);
+  };
+  subscriptionCleanups.add(unsubscribe);
+  return unsubscribe;
+}
+
+function handleJobStateFieldUpdate(data: JobStateFieldUpdate) {
+  if (data.jobId !== props.job.id) {
+    return;
+  }
+
+  props.job.state[data.fieldName] = data.value;
+  if (jobStore.currentJob?.id === props.job.id) {
+    jobStore.updateCurrentJob({
+      state: {
+        ...props.job.state,
+      },
+    });
+  }
+}
+
+function handleTaskStateFieldUpdate(data: TaskStateFieldUpdate) {
+  if (data.jobId !== props.job.id || !jobTasks.value[data.taskIndex]) {
+    return;
+  }
+
+  jobTasks.value[data.taskIndex].state = {
+    ...jobTasks.value[data.taskIndex].state,
+    [data.fieldName]: data.value,
+  };
+}
+
+function subscribeToJobStateFields(fieldNames: string[]) {
+  return createStateFieldSubscription(
+    fieldNames,
+    (fieldName) => `/background-jobs-state-update/${props.job.id}/${encodeURIComponent(fieldName)}`,
+    handleJobStateFieldUpdate,
+  );
+}
+
+function subscribeToJobTaskFields(fieldNames: string[]) {
+  return createStateFieldSubscription(
+    fieldNames,
+    (fieldName) => `/background-jobs-task-state-update/${props.job.id}/${encodeURIComponent(fieldName)}`,
+    handleTaskStateFieldUpdate,
+  );
+}
+
 async function cancelJob() {
   // Implement job cancellation logic here
   const isConfirmed = await adminforth.confirm({ message: t('Are you sure you want to cancel this job?') });
@@ -111,7 +200,7 @@ async function cancelJob() {
 
 
 
-async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{state: Record<string, any>, status: string}[]> {
+async function getJobTasks(limit: number = 10, offset: number = 0): Promise<JobTask[]> {
   try {
     const res = await callAdminForthApi({
       path: `/plugin/${props.meta.pluginInstanceId}/get-tasks`,
@@ -123,7 +212,12 @@ async function getJobTasks(limit: number = 10, offset: number = 0): Promise<{sta
       },
     });
     if (res.ok) {
-      return res.data;
+      const tasks = res.data.tasks as JobTask[];
+      const startIndex = offset || 0;
+      for (let taskIndex = 0; taskIndex < tasks.length; taskIndex++) {
+        jobTasks.value[startIndex + taskIndex] = tasks[taskIndex];
+      }
+      return jobTasks.value.slice(startIndex, startIndex + tasks.length);
     } else {
       console.error('Error fetching job tasks:', res.error);
       return [];
@@ -147,6 +241,12 @@ watch(
   { immediate: true }
 );
 
+onBeforeUnmount(() => {
+  for (const unsubscribe of Array.from(subscriptionCleanups)) {
+    unsubscribe();
+  }
+});
+
 
 
-</script>
+</script>

package/dist/custom/JobsList.vue

@@ -5,7 +5,7 @@
       class="p-4"
       v-for="job in props.jobs" :key="job.id" 
       :beforeCloseFunction="onBeforeClose" 
-      :beforeOpenFunction="onBeforeOpen"
+      :beforeOpenFunction="() => onBeforeOpen(job)"
       removeFromDomOnClose
     >
       <template #trigger>
@@ -30,7 +30,8 @@
         </div>
       </template>
       <JobInfoPopup
-        :job="job" 
+        v-if="loadedJobs[job.id]"
+        :job="loadedJobs[job.id]"
         :meta="meta"
         :closeModal="closeModal"
       />
@@ -42,7 +43,7 @@
 
 <script setup lang="ts">
 import type { IJob } from './utils';
-import { getTimeAgoString } from '@/utils';
+import { callAdminForthApi, getTimeAgoString } from '@/utils';
 import { ProgressBar, Modal } from '@/afcl';
 import JobInfoPopup from './JobInfoPopup.vue';
 import StateToIcon from './StateToIcon.vue';
@@ -78,9 +79,34 @@ const props = defineProps<{
 
 
 const isModalOpen = ref(false);
+const loadedJobs = ref<Record<string, IJob>>({});
 
-function onBeforeOpen() {
+async function onBeforeOpen(job: IJob) {
   props.closeDropdown();
+  try {
+    const res = await callAdminForthApi({
+      path: `/plugin/get-background-job-info`,
+      method: 'POST',
+      body: { jobId: job.id },
+    });
+
+    if (res?.ok && res.job) {
+      loadedJobs.value[job.id] = res.job;
+      return;
+    }
+
+    console.log('[background-jobs] failed to load full job info', {
+      jobId: job.id,
+      response: res,
+    });
+  } catch (error) {
+    console.log('[background-jobs] failed to load full job info', {
+      error,
+      jobId: job.id,
+    });
+  }
+
+  loadedJobs.value[job.id] = job;
 }
 
 function onBeforeClose() {
@@ -88,4 +114,4 @@ function onBeforeClose() {
 }
 
   
-</script>
+</script>

package/dist/index.js

@@ -13,6 +13,9 @@ import pLimit from 'p-limit';
 import { Level } from 'level';
 import fs from 'fs/promises';
 import { Mutex } from 'async-mutex';
+function encodeStateFieldName(fieldName) {
+    return encodeURIComponent(fieldName);
+}
 export default class BackgroundJobsPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
@@ -170,6 +173,23 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
             return { failedTasks, succeededTasks };
         });
     }
+    publishJobStateField(jobId, fieldName, value) {
+        this.adminforth.websocket.publish(`/background-jobs-state-update/${jobId}/${encodeStateFieldName(fieldName)}`, {
+            jobId,
+            fieldName,
+            value,
+        });
+    }
+    publishTaskStateFields(jobId, taskIndex, state) {
+        for (const [fieldName, value] of Object.entries(state)) {
+            this.adminforth.websocket.publish(`/background-jobs-task-state-update/${jobId}/${encodeStateFieldName(fieldName)}`, {
+                jobId,
+                taskIndex,
+                fieldName,
+                value,
+            });
+        }
+    }
     triggerOnAllTasksDone(onAllTasksDone, levelDb, jobId) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!onAllTasksDone) {
@@ -270,8 +290,8 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
                 }
                 //define the setTaskStateField and getTaskStateField functions to pass to the task
                 const setTaskStateField = (state) => __awaiter(this, void 0, void 0, function* () {
-                    this.adminforth.websocket.publish(`/background-jobs-task-update/${jobId}`, { taskIndex, state });
                     yield this.setLevelDbTaskStateField(jobLevelDb, taskIndex.toString(), state);
+                    this.publishTaskStateFields(jobId, taskIndex, state);
                 });
                 const getTaskStateField = () => __awaiter(this, void 0, void 0, function* () {
                     return yield this.getLevelDbTaskStateField(jobLevelDb, taskIndex.toString());
@@ -397,10 +417,10 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
             const state = jobRecord[this.options.stateField];
             const parsedState = JSON.parse(state);
             parsedState[key] = value;
-            this.adminforth.websocket.publish(`/background-jobs`, { jobId, state: parsedState });
             yield this.adminforth.resource(this.getResourceId()).update(jobId, {
                 [this.options.stateField]: JSON.stringify(parsedState),
             });
+            this.publishJobStateField(jobId, key, value);
         });
     }
     getJobField(jobId, key) {

package/index.ts

@@ -21,6 +21,10 @@ type taskType = {
   skip?: boolean;
   state: Record<string, any>;
 }
+
+function encodeStateFieldName(fieldName: string): string {
+  return encodeURIComponent(fieldName);
+}
  
 export default class BackgroundJobsPlugin extends AdminForthPlugin {
   options: PluginOptions;
@@ -184,6 +188,25 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
     return { failedTasks, succeededTasks };
   }
 
+  private publishJobStateField(jobId: string, fieldName: string, value: any) {
+    this.adminforth.websocket.publish(`/background-jobs-state-update/${jobId}/${encodeStateFieldName(fieldName)}`, {
+      jobId,
+      fieldName,
+      value,
+    });
+  }
+
+  private publishTaskStateFields(jobId: string, taskIndex: number, state: Record<string, any>) {
+    for (const [fieldName, value] of Object.entries(state)) {
+      this.adminforth.websocket.publish(`/background-jobs-task-state-update/${jobId}/${encodeStateFieldName(fieldName)}`, {
+        jobId,
+        taskIndex,
+        fieldName,
+        value,
+      });
+    }
+  }
+
   private async triggerOnAllTasksDone(onAllTasksDone: onAllTasksDoneType | undefined, levelDb: Level, jobId: string) {
     if (!onAllTasksDone) {
       return;
@@ -306,8 +329,8 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
 
       //define the setTaskStateField and getTaskStateField functions to pass to the task
       const setTaskStateField = async (state: Record<string, any>) => {
-        this.adminforth.websocket.publish(`/background-jobs-task-update/${jobId}`, { taskIndex, state });
         await this.setLevelDbTaskStateField(jobLevelDb, taskIndex.toString(), state);
+        this.publishTaskStateFields(jobId, taskIndex, state);
       }
       const getTaskStateField = async () => {
         return await this.getLevelDbTaskStateField(jobLevelDb, taskIndex.toString());
@@ -435,10 +458,10 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
     const state = jobRecord[this.options.stateField];
     const parsedState = JSON.parse(state);
     parsedState[key] = value;
-    this.adminforth.websocket.publish(`/background-jobs`, { jobId, state: parsedState });
     await this.adminforth.resource(this.getResourceId()).update(jobId, {
       [this.options.stateField]: JSON.stringify(parsedState),
     });
+    this.publishJobStateField(jobId, key, value);
   }
 
   public async getJobField(jobId: string, key: string) {
@@ -629,4 +652,4 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
     });
   }
 
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/background-jobs",
-  "version": "1.12.1",
+  "version": "1.13.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",