feat(xo-web/backup-ng/overview): display transferred and merged data size (#3408)

CHANGELOG.md

@@ -8,6 +8,7 @@
 - [Remotes] Use *WORKGROUP* as default domain for new SMB remote (PR [#3398](https://github.com/vatesfr/xen-orchestra/pull/3398))
 - [Backup NG form] Display a tip to encourage users to create vms on a thin-provisioned storage [#3334](https://github.com/vatesfr/xen-orchestra/issues/3334) (PR [#3402](https://github.com/vatesfr/xen-orchestra/pull/3402))
 - [Backup NG form] improve schedule's form [#3138](https://github.com/vatesfr/xen-orchestra/issues/3138) (PR [#3359](https://github.com/vatesfr/xen-orchestra/pull/3359))
+- [Backup NG Overview] Display transferred and merged data size for backup jobs [#3340](https://github.com/vatesfr/xen-orchestra/issues/3340) (PR [#3408](https://github.com/vatesfr/xen-orchestra/pull/3408))
 
 ### Bug fixes
 

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

@@ -197,6 +197,11 @@ const messages = {
   stateDisabled: 'Disabled',
   stateEnabled: 'Enabled',
 
+  // ----- Labels -----
+  labelMerge: 'Merge',
+  labelSize: 'Size',
+  labelTransfer: 'Transfer',
+
   // ----- Forms -----
   formCancel: 'Cancel',
   formCreate: 'Create',

packages/xo-web/src/xo-app/logs/backup-ng-logs.js

@@ -11,13 +11,20 @@ import SortedTable from 'sorted-table'
 import Tooltip from 'tooltip'
 import { alert } from 'modal'
 import { Card, CardHeader, CardBlock } from 'card'
-import { keyBy } from 'lodash'
+import { formatSize } from 'utils'
 import { FormattedDate } from 'react-intl'
 import { get } from 'xo-defined'
+import { isEmpty, keyBy } from 'lodash'
 import { subscribeBackupNgJobs, subscribeBackupNgLogs } from 'xo'
 
 import LogAlertBody from './log-alert-body'
 
+const UL_STYLE = { listStyleType: 'none' }
+
+const LI_STYLE = {
+  whiteSpace: 'nowrap',
+}
+
 const STATUS_LABELS = {
   failure: {
     className: 'danger',
@@ -102,6 +109,63 @@ const LOG_COLUMNS = [
     },
     sortCriteria: 'status',
   },
+  {
+    name: _('labelSize'),
+    itemRenderer: ({ tasks: vmTasks }) => {
+      if (isEmpty(vmTasks)) {
+        return null
+      }
+
+      let transferSize = 0
+      let mergeSize = 0
+      vmTasks.forEach(({ tasks: targetSnapshotTasks = [] }) => {
+        let vmTransferSize
+        let vmMergeSize
+        targetSnapshotTasks.forEach(({ message, tasks: operationTasks }) => {
+          if (message !== 'export' || isEmpty(operationTasks)) {
+            return
+          }
+          operationTasks.forEach(operationTask => {
+            if (operationTask.status !== 'success') {
+              return
+            }
+            if (
+              operationTask.message === 'transfer' &&
+              vmTransferSize === undefined
+            ) {
+              vmTransferSize = operationTask.result.size
+            }
+            if (
+              operationTask.message === 'merge' &&
+              vmMergeSize === undefined
+            ) {
+              vmMergeSize = operationTask.result.size
+            }
+
+            if (vmTransferSize !== undefined && vmMergeSize !== undefined) {
+              return false
+            }
+          })
+        })
+        vmTransferSize !== undefined && (transferSize += vmTransferSize)
+        vmMergeSize !== undefined && (mergeSize += vmMergeSize)
+      })
+      return (
+        <ul style={UL_STYLE}>
+          {transferSize > 0 && (
+            <li style={LI_STYLE}>
+              {_.keyValue(_('labelTransfer'), formatSize(transferSize))}
+            </li>
+          )}
+          {mergeSize > 0 && (
+            <li style={LI_STYLE}>
+              {_.keyValue(_('labelMerge'), formatSize(mergeSize))}
+            </li>
+          )}
+        </ul>
+      )
+    },
+  },
 ]
 
 const showTasks = (log, { jobs }) => {