[backport cloud/1.33] [feat] Show "Finished in" duration for completed jobs in cloud (#7013)

Backport of #6895 to `cloud/1.33`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7013-backport-cloud-1-33-feat-Show-Finished-in-duration-for-completed-jobs-in-cloud-2b86d73d365081419f90ee82f5e45253)
by [Unito](https://www.unito.io)

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>

src/composables/queue/useJobList.ts

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { st } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
@@ -263,7 +264,8 @@ export function useJobList() {
         totalPercent: isActive ? totalPercent.value : undefined,
         currentNodePercent: isActive ? currentNodePercent.value : undefined,
         currentNodeName: isActive ? currentNodeName.value : undefined,
-        showAddedHint
+        showAddedHint,
+        isCloud
       })
 
       return {

src/locales/en/main.json

@@ -984,6 +984,7 @@
     "initializingAlmostReady": "Initializing - Almost ready",
     "inQueue": "In queue...",
     "jobAddedToQueue": "Job added to queue",
+    "completedIn": "Finished in {duration}",
     "jobMenu": {
       "openAsWorkflowNewTab": "Open as workflow in new tab",
       "openWorkflowNewTab": "Open workflow in new tab",

src/utils/queueDisplay.ts

@@ -1,5 +1,6 @@
 import type { TaskItemImpl } from '@/stores/queueStore'
 import type { JobState } from '@/types/queue'
+import { formatDuration } from '@/utils/formatUtil'
 import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
 
 type BuildJobDisplayCtx = {
@@ -11,6 +12,8 @@ type BuildJobDisplayCtx = {
   currentNodePercent?: number
   currentNodeName?: string
   showAddedHint?: boolean
+  /** Whether the app is running in cloud distribution */
+  isCloud?: boolean
 }
 
 type JobDisplay = {
@@ -122,13 +125,20 @@ export const buildJobDisplay = (
     const time = task.executionTimeInSeconds
     const preview = task.previewOutput
     const iconImageUrl = preview && preview.isImage ? preview.url : undefined
+
+    // Cloud shows "Completed in Xh Ym Zs", non-cloud shows filename
+    const primary = ctx.isCloud
+      ? ctx.t('queue.completedIn', {
+          duration: formatDuration(task.executionTime ?? 0)
+        })
+      : preview?.filename && preview.filename.length
+        ? preview.filename
+        : buildTitle(task, ctx.t)
+
     return {
       iconName: iconForJobState(state),
       iconImageUrl,
-      primary:
-        preview?.filename && preview.filename.length
-          ? preview.filename
-          : buildTitle(task, ctx.t),
+      primary,
       secondary: time !== undefined ? `${time.toFixed(2)}s` : '',
       showClear: false
     }