feat: enhance job information display with tooltips for created and finished times

Author: yaroslav8765

custom/JobInfoPopup.vue

@@ -1,14 +1,26 @@
 <template> 
     <div class="flex flex-col w-full min-w-96">
       <div class="flex items-center mb-1">
-        <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
-        <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full">{{ t('Created:') }} {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
+        <div class="flex flex-col items-start">
+          <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
+          <Tooltip>
+            <p class="text-xs text-gray-600 dark:text-gray-200 h-full">{{ t('Created:') }} {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
+            <template #tooltip>
+              {{ t('Created at:') }} {{ new Date(job.createdAt).toLocaleString() }}
+            </template>
+          </Tooltip>
+        </div>
         <div class="ml-auto flex flex-col items-start">
           <div class="flex items-center">
             <p class=" text-gray-800 dark:text-white h-full"> {{  t('Progress:')  }} <span class="font-semibold" >{{ job.progress }}%</span></p>
             <StateToIcon :job="job" />
           </div>
-          <p class="text-xs text-gray-600 dark:text-gray-200 h-full" v-if="job.finishedAt"> {{ t('Finished:') }} {{ getTimeAgoString(new Date(job.finishedAt)) }}</p>
+          <Tooltip v-if="job.finishedAt">
+             <p class="text-xs text-gray-600 dark:text-gray-200 h-full"> {{ t('Finished:') }} {{ getTimeAgoString(new Date(job.finishedAt)) }}</p>
+            <template #tooltip>
+              {{ t('Finished at:') }} {{ new Date(job.finishedAt).toLocaleString() }}
+            </template>
+          </Tooltip>
         </div>
       </div>
       <div class="flex items-center gap-4 w-full">
@@ -40,7 +52,7 @@
 
 <script setup lang="ts">
 import type { IJob } from './utils';
-import { ProgressBar, Button } from '@/afcl';
+import { ProgressBar, Button, Tooltip } from '@/afcl';
 import { getTimeAgoString, callAdminForthApi, getCustomComponent} from '@/utils';
 import { useI18n } from 'vue-i18n';
 import StateToIcon from './StateToIcon.vue';

custom/NavbarJobs.vue

@@ -94,6 +94,9 @@
         if (data.progress !== undefined) {
           jobs.value[jobIndex].progress = data.progress;
         }
+        if (data.finishedAt) {
+          jobs.value[jobIndex].finishedAt = data.finishedAt;
+        }
       } else {
         jobs.value.unshift({
           id: data.jobId,

index.ts

@@ -273,7 +273,7 @@ export default class BackgroundJobsPlugin extends AdminForthPlugin {
         [this.options.statusField]: 'DONE',
         [this.options.finishedAtField]: (new Date()).toISOString(),
       })
-      this.adminforth.websocket.publish('/background-jobs', { jobId, status: 'DONE' });
+      this.adminforth.websocket.publish('/background-jobs', { jobId, status: 'DONE', finishedAt: (new Date()).toISOString() });
     } else if (failedTasks > 0) {
       await this.adminforth.resource(this.getResourceId()).update(jobId, {
         [this.options.statusField]: 'DONE_WITH_ERRORS',