fix(xo-web/backup-ng): make log value dynamic in copy/report buttons (#3360)

Fixes #3273

CHANGELOG.md

@@ -18,6 +18,7 @@
 - [Remotes] Fix error appears twice on testing (PR [#3399](https://github.com/vatesfr/xen-orchestra/pull/3399))
 - [Backup NG] Don't fail on VMs with empty VBDs (like CDs or floppy disks) (PR [#3410](https://github.com/vatesfr/xen-orchestra/pull/3410))
 - [XOA updater] Fix issue where trial request would fail [#3407](https://github.com/vatesfr/xen-orchestra/issues/3407) (PR [#3412](https://github.com/vatesfr/xen-orchestra/pull/3412))
+- [Backup NG logs] Fix log's value not being updated in the copy and report button [#3273](https://github.com/vatesfr/xen-orchestra/issues/3273) (PR [#3360](https://github.com/vatesfr/xen-orchestra/pull/3360))
 
 ### Released packages
 

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

@@ -1,14 +1,9 @@
 import _, { FormattedDuration } from 'intl'
 import addSubscriptions from 'add-subscriptions'
-import Button from 'button'
-import ButtonGroup from 'button-group'
-import CopyToClipboard from 'react-copy-to-clipboard'
 import Icon from 'icon'
 import NoObjects from 'no-objects'
 import React from 'react'
-import ReportBugButton, { CAN_REPORT_BUG } from 'report-bug-button'
 import SortedTable from 'sorted-table'
-import Tooltip from 'tooltip'
 import { alert } from 'modal'
 import { Card, CardHeader, CardBlock } from 'card'
 import { formatSize } from 'utils'
@@ -18,6 +13,7 @@ import { isEmpty, keyBy } from 'lodash'
 import { subscribeBackupNgJobs, subscribeBackupNgLogs } from 'xo'
 
 import LogAlertBody from './log-alert-body'
+import LogAlertHeader from './log-alert-header'
 
 const UL_STYLE = { listStyleType: 'none' }
 
@@ -168,34 +164,8 @@ const LOG_COLUMNS = [
   },
 ]
 
-const showTasks = (log, { jobs }) => {
-  const formattedLog = JSON.stringify(log, null, 2)
-  alert(
-    <span>
-      {get(() => jobs[log.jobId].name) || 'Job'} ({log.jobId.slice(4, 8)}){' '}
-      <span style={{ fontSize: '0.5em' }} className='text-muted'>
-        {log.id}
-      </span>{' '}
-      <ButtonGroup>
-        <Tooltip content={_('copyToClipboard')}>
-          <CopyToClipboard text={formattedLog}>
-            <Button size='small'>
-              <Icon icon='clipboard' />
-            </Button>
-          </CopyToClipboard>
-        </Tooltip>
-        {CAN_REPORT_BUG && (
-          <ReportBugButton
-            message={`\`\`\`json\n${formattedLog}\n\`\`\``}
-            size='small'
-            title='Backup job failed'
-          />
-        )}
-      </ButtonGroup>
-    </span>,
-    <LogAlertBody id={log.id} />
-  )
-}
+const showTasks = ({ id }, { jobs }) =>
+  alert(<LogAlertHeader id={id} jobs={jobs} />, <LogAlertBody id={id} />)
 
 const LOG_INDIVIDUAL_ACTIONS = [
   {

packages/xo-web/src/xo-app/logs/log-alert-header.js

@@ -0,0 +1,52 @@
+import _ from 'intl'
+import addSubscriptions from 'add-subscriptions'
+import Button from 'button'
+import ButtonGroup from 'button-group'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import Icon from 'icon'
+import React from 'react'
+import ReportBugButton, { CAN_REPORT_BUG } from 'report-bug-button'
+import Tooltip from 'tooltip'
+import { get } from 'xo-defined'
+import { injectState, provideState } from '@julien-f/freactal'
+import { subscribeBackupNgLogs } from 'xo'
+
+export default [
+  addSubscriptions(({ id }) => ({
+    log: cb =>
+      subscribeBackupNgLogs(logs => {
+        cb(logs[id])
+      }),
+  })),
+  provideState({
+    computed: {
+      formattedLog: (_, { log }) => JSON.stringify(log, null, 2),
+    },
+  }),
+  injectState,
+  ({ state, log = {}, jobs }) => (
+    <span>
+      {get(() => jobs[log.jobId].name) || 'Job'} (
+      {get(() => log.jobId.slice(4, 8))}){' '}
+      <span style={{ fontSize: '0.5em' }} className='text-muted'>
+        {log.id}
+      </span>{' '}
+      <ButtonGroup>
+        <Tooltip content={_('copyToClipboard')}>
+          <CopyToClipboard text={state.formattedLog}>
+            <Button size='small'>
+              <Icon icon='clipboard' />
+            </Button>
+          </CopyToClipboard>
+        </Tooltip>
+        {CAN_REPORT_BUG && (
+          <ReportBugButton
+            message={`\`\`\`json\n${state.formattedLog}\n\`\`\``}
+            size='small'
+            title='Backup job failed'
+          />
+        )}
+      </ButtonGroup>
+    </span>
+  ),
+].reduceRight((value, decorator) => decorator(value))