feat: enhance JobsList component with detailed job status tooltips and progress bar animations

Author: yaroslav8765

custom/JobsList.vue

@@ -1,8 +1,46 @@
 <template>
   <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
-    <div v-for="job in props.jobs" :key="job.id" class="flex flex-col px-4 py-2 border-b border-gray-200 pb-8 hover:bg-gray-50 transition-colors">
-      <p class="flex gap-2 items-end text-end"><span class="text-sm h-full">{{ job.name }}</span> <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span> </p>
-      <ProgressBar :current-value="job.progress" :max-value="100" :min-value="0"/>
+    <div v-for="job in props.jobs" :key="job.id" class="flex items-center px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
+      <div class="flex flex-col w-full max-w-48">
+        <p class="flex gap-2 items-end justify-between text-nowrap">
+          <span class="text-sm h-full text truncate">{{ job.name }}</span> 
+          <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span> 
+        </p>
+        <ProgressBar 
+          class="mt-1"
+          :current-value="job.progress" 
+          :max-value="100" 
+          :min-value="0"
+          :showAnimation="job.status === 'IN_PROGRESS'"
+          :showLabels="false"
+          :showValues="false"
+          :show-progress="false"
+        />
+      </div>
+      <Tooltip v-if="job.status === 'IN_PROGRESS'">
+        <Spinner class="w-4 h-4 ml-2" />
+        <template #tooltip>
+          {{ t('In progress') }}
+        </template>
+      </Tooltip>
+      <Tooltip v-else-if="job.status === 'DONE'">
+        <IconCheckCircleOutline  class="w-5 h-5 ml-2 text-green-500" />
+          <template #tooltip>
+            {{ t('Done') }}
+          </template>
+      </Tooltip>
+      <Tooltip v-else-if="job.status === 'CANCELED'">
+        <IconCloseCircleOutline class="w-5 h-5 ml-2 text-red-500" />
+          <template #tooltip>
+            {{ t('Canceled') }}
+          </template>
+      </Tooltip>
+      <Tooltip v-else-if="job.status === 'DONE_WITH_ERRORS'">
+        <IconExclamationCircleOutline class="w-5 h-5 ml-2 text-yellow-500" />
+          <template #tooltip>
+            {{ t('Done with errors') }}
+          </template>
+      </Tooltip>
     </div>
   </div>
 </template>
@@ -11,7 +49,11 @@
 <script setup lang="ts">
 import type { IJob } from './utils';
 import { getTimeAgoString } from '@/utils';
-import { ProgressBar } from '@/afcl';
+import { ProgressBar, Spinner, Tooltip } from '@/afcl';
+import { IconCheckCircleOutline, IconCloseCircleOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   jobs: IJob[];

custom/utils.ts

@@ -1,7 +1,7 @@
 export interface IJob {
   id: string;
   name: string;
-  status: 'IN_PROGRESS' | 'DONE' | 'CANCELED';
+  status: 'IN_PROGRESS' | 'DONE' | 'DONE_WITH_ERRORS' | 'CANCELED';
   progress: number; // 0 to 100
   createdAt: Date;
 }

index.ts

@@ -4,7 +4,10 @@ import type { PluginOptions } from './types.js';
 import { afLogger } from "adminforth";
 import pLimit from 'p-limit';
 import { Level } from 'level';
+import { resolve } from "node:dns";
+import { set } from "@vueuse/core";
 
+type JobStatus = 'SCHEDULED' | 'IN_PROGRESS' | 'DONE' | 'FAILED';
 type setStateFieldParams = (state: Record<string, any>) => void;
 type getStateFieldParams = () => any;
 
@@ -51,8 +54,8 @@ export default class  extends AdminForthPlugin {
   }
 
   private async createLevelDbTaskRecord(levelDb: Level, taskId: string, initialState: Record<string, any>) {
-    //create record in level db with task id as key and initial state as value and status IN_PROGRESS
-    await levelDb.put(taskId, JSON.stringify({ state: initialState, status: 'IN_PROGRESS' }));
+    //create record in level db with task id as key and initial state as value and status SCHEDULED
+    await levelDb.put(taskId, JSON.stringify({ state: initialState, status: 'SCHEDULED' }));
   }
 
   private async setLevelDbTaskStateField(levelDb: Level, taskId: string, state: Record<string, any>) {
@@ -62,7 +65,7 @@ export default class  extends AdminForthPlugin {
     await levelDb.put(taskId, JSON.stringify({ state, status }));
   }
 
-  private async setLevelDbTaskStatusField(levelDb: Level, taskId: string, status: string) {
+  private async setLevelDbTaskStatusField(levelDb: Level, taskId: string, status: JobStatus) {
     const state = await this.getLevelDbTaskStateField(levelDb, taskId);
     await levelDb.del(taskId);
     await levelDb.put(taskId, JSON.stringify({ state, status }));
@@ -78,7 +81,7 @@ export default class  extends AdminForthPlugin {
     return Promise.resolve(null);
   }
 
-  private async getLevelDbTaskStatusField(levelDb: Level, taskId: string): Promise<Record<string, any>> {
+  private async getLevelDbTaskStatusField(levelDb: Level, taskId: string): Promise<JobStatus> {
     const state = await levelDb.get(taskId);
     if (state) {
       const parsedState = JSON.parse(state);
@@ -125,17 +128,21 @@ export default class  extends AdminForthPlugin {
       createdAt: createdRecord[this.options.createdAtField],
     });
 
-
     //create a level db instance for the job with name as jobId
     const jobLevelDb = new Level(`${this.options.levelDbPath || './background-jobs-dbs/'}job_${jobId}`, { valueEncoding: 'json' });
 
+    const limit2 = pLimit(parrallelLimit);
+    const createTaskRecordsPromises = tasks.map((task, index) => {
+      return limit2(() => this.createLevelDbTaskRecord(jobLevelDb, index.toString(), task.state));
+    });
+
+    await Promise.all(createTaskRecordsPromises);
+
 
     const totalTasks = tasks.length;
     let completedTasks = 0;
 
     const taskHandler = async ( taskIndex: number, taskState ) => {
-      // create a level db record for the task with status in progress
-      await this.createLevelDbTaskRecord(jobLevelDb, taskIndex.toString(), taskState);
 
       //define the setTaskStateField and getTaskStateField functions to pass to the task
       const setTaskStateField = async (state: Record<string, any>) => {
@@ -145,12 +152,14 @@ export default class  extends AdminForthPlugin {
         return await this.getLevelDbTaskStateField(jobLevelDb, taskIndex.toString());
       }
 
+      await this.setLevelDbTaskStatusField(jobLevelDb, taskIndex.toString(), 'IN_PROGRESS');
+
       //handling the task 
       try {
         await handleTask({ setTaskStateField, getTaskStateField });
 
         //Set task status to completed in level db
-        await this.setLevelDbTaskStatusField(jobLevelDb, taskIndex.toString(), 'COMPLETED');
+        await this.setLevelDbTaskStatusField(jobLevelDb, taskIndex.toString(), 'DONE');
       } catch (error) {
         afLogger.error(`Error in handling task ${taskIndex} of job ${jobId}: ${error}`, );
         await this.setLevelDbTaskStatusField(jobLevelDb, taskIndex.toString(), 'FAILED');
@@ -177,29 +186,60 @@ export default class  extends AdminForthPlugin {
       [this.options.statusField]: 'DONE',
     })
     this.adminforth.websocket.publish('/background-jobs', { jobId, status: 'DONE' });
+  }
+
+  private async runProcessingUnfinishedTasks(
+    tasks: {state: Record<string, any>}[],
+    parrallelLimit: number,
+    handleTask: ( { setTaskStateField, getTaskStateField }: { setTaskStateField: setStateFieldParams; getTaskStateField: getStateFieldParams } ) => Promise<void>,
+  ) {
 
   }
 
   public async setJobField(jobId: string, key: string, value: any) {
-
+    const jobRecord = await this.adminforth.resource(this.getResourceId()).get(Filters.EQ(this.getResourcePk(), jobId));
+    const state = jobRecord[this.options.stateField];
+    const parsedState = JSON.parse(state);
+    parsedState[key] = value;
+    await this.adminforth.resource(this.getResourceId()).update(jobId, {
+      [this.options.stateField]: JSON.stringify(parsedState),
+    });
   }
 
   public async getJobField(jobId: string, key: string) {
-    
+    const jobRecord = await this.adminforth.resource(this.getResourceId()).get(Filters.EQ(this.getResourcePk(), jobId));
+    const state = jobRecord[this.options.stateField];
+    const parsedState = JSON.parse(state);
+    return parsedState[key];
   }
 
   public async getJobState(jobId: string) {
+    const jobRecord = await this.adminforth.resource(this.getResourceId()).get(Filters.EQ(this.getResourcePk(), jobId));
+    const state = jobRecord[this.options.stateField];
+    return JSON.parse(state);
+  }
 
+  private async processAllUnfinishedJobs() {
+    const resourceId = this.getResourceId();
+    const unprocessedJobs = await this.adminforth.resource(resourceId).list(Filters.EQ(this.options.statusField, 'IN_PROGRESS'));
+
+    console.log('Unprocessed jobs found on startup:', unprocessedJobs);
   }
+
 
-  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+  async validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     // optional method where you can safely check field types after database discovery was performed
     this.checkIfFieldInResource(resourceConfig, this.options.createdAtField, 'createdAtField');
     this.checkIfFieldInResource(resourceConfig, this.options.startedByField, 'startedByField');
     this.checkIfFieldInResource(resourceConfig, this.options.stateField, 'stateField');
     this.checkIfFieldInResource(resourceConfig, this.options.progressField, 'progressField');
     this.checkIfFieldInResource(resourceConfig, this.options.statusField, 'statusField');
     this.checkIfFieldInResource(resourceConfig, this.options.nameField, 'nameField');
+
+
+    //Add temp delay to make sure, that all resources active. Probably should be fixed
+    // await new Promise(resolve => setTimeout(resolve, 1000));
+    // this.processAllUnfinishedJobs();
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {