feat(xo-web/task): display age and estimated duration (#5530)

See https://xcp-ng.org/forum/topic/4083/task-list-enhancement

CHANGELOG.unreleased.md

@@ -7,6 +7,8 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- [Task] Display age and estimated duration (PR [#5530](https://github.com/vatesfr/xen-orchestra/pull/5530))
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
@@ -31,3 +33,4 @@
 > In case of conflict, the highest (lowest in previous list) `$version` wins.
 
 - xo-server-auth-ldap patch
+- xo-web minor

packages/xo-web/src/common/intl/messages.js

@@ -427,6 +427,7 @@ const messages = {
   taskMergedDataSize: 'Merge size',
   taskMergedDataSpeed: 'Merge speed',
   taskError: 'Error',
+  taskEstimatedEnd: 'Estimated end',
   taskReason: 'Reason',
   saveBackupJob: 'Save',
   deleteBackupSchedule: 'Remove backup job',

packages/xo-web/src/xo-app/tasks/index.js

@@ -7,7 +7,7 @@ import Link from 'link'
 import React from 'react'
 import renderXoItem, { Pool } from 'render-xo-item'
 import SortedTable from 'sorted-table'
-import { FormattedDate, injectIntl } from 'react-intl'
+import { FormattedDate, FormattedRelative, injectIntl } from 'react-intl'
 import { SelectPool } from 'select-objects'
 import { connectStore, resolveIds } from 'utils'
 import { Col, Container, Row } from 'grid'
@@ -89,7 +89,6 @@ const COMMON = [
 
 const COLUMNS = [
   {
-    default: true,
     itemRenderer: ({ $poolId }) => <Pool id={$poolId} link />,
     name: _('pool'),
     sortCriteria: (task, userData) => {
@@ -105,6 +104,25 @@ const COLUMNS = [
     name: _('progress'),
     sortCriteria: 'progress',
   },
+  {
+    default: true,
+    itemRenderer: task => <FormattedRelative value={task.created * 1000} />,
+    name: _('taskStarted'),
+    sortCriteria: 'created',
+    sortOrder: 'desc',
+  },
+  {
+    itemRenderer: task => {
+      const started = task.created * 1000
+      const { progress } = task
+
+      if (progress === 0 || progress === 1) {
+        return // not yet started or already finished
+      }
+      return <FormattedRelative value={started + (Date.now() - started) / progress} />
+    },
+    name: _('taskEstimatedEnd'),
+  },
 ]
 
 const FINISHED_TASKS_COLUMNS = [