feat(xo-web/backup-ng/logs): merge status and display log details (#3800)

Fixes #3797

CHANGELOG.md

@@ -16,6 +16,7 @@
 - [Backup NG] Display the last run status for each schedule with the possibility to show the associated log [#3769](https://github.com/vatesfr/xen-orchestra/issues/3769) (PR [#3779](https://github.com/vatesfr/xen-orchestra/pull/3779))
 - [Backup NG] Add a link to the documentation [#3789](https://github.com/vatesfr/xen-orchestra/issues/3789) (PR [#3790](https://github.com/vatesfr/xen-orchestra/pull/3790))
 - [Backup NG] Ability to copy schedule/job id to the clipboard [#3753](https://github.com/vatesfr/xen-orchestra/issues/3753) (PR [#3791](https://github.com/vatesfr/xen-orchestra/pull/3791))
+- [Backup NG / logs] Merge the job log status with the display details button [#3797](https://github.com/vatesfr/xen-orchestra/issues/3797) (PR [#3800](https://github.com/vatesfr/xen-orchestra/pull/3800))
 
 ### Bug fixes
 

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

@@ -30,7 +30,7 @@ import {
   subscribeSchedules,
 } from 'xo'
 
-import LogsTable, { STATUS_LABELS, showTasks } from '../logs/backup-ng-logs'
+import LogsTable, { LogStatus } from '../logs/backup-ng-logs'
 import Page from '../page'
 
 import Edit from './edit'
@@ -125,16 +125,7 @@ const SchedulePreviewBody = decorate([
           />
         )}{' '}
         {lastRunLog !== undefined && (
-          <ActionButton
-            btnStyle={STATUS_LABELS[lastRunLog.status].className}
-            handler={showTasks}
-            handlerParam={lastRunLog}
-            icon='preview'
-            size='small'
-            tooltip={_('scheduleLastRun')}
-          >
-            <span>{_(STATUS_LABELS[lastRunLog.status].label)}</span>
-          </ActionButton>
+          <LogStatus log={lastRunLog} tooltip={_('scheduleLastRun')} />
         )}
       </Li>
     </Ul>

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

@@ -1,4 +1,5 @@
 import _, { FormattedDuration } from 'intl'
+import ActionButton from 'action-button'
 import addSubscriptions from 'add-subscriptions'
 import Button from 'button'
 import Copiable from 'copiable'
@@ -29,7 +30,7 @@ const LI_STYLE = {
   whiteSpace: 'nowrap',
 }
 
-export const STATUS_LABELS = {
+const STATUS_LABELS = {
   failure: {
     className: 'danger',
     label: 'jobFailed',
@@ -52,6 +53,25 @@ export const STATUS_LABELS = {
   },
 }
 
+const showTasks = id =>
+  alert(<LogAlertHeader id={id} />, <LogAlertBody id={id} />)
+
+export const LogStatus = ({ log, tooltip = _('logDisplayDetails') }) => {
+  const { className, label } = STATUS_LABELS[log.status]
+  return (
+    <ActionButton
+      btnStyle={className}
+      handler={showTasks}
+      handlerParam={log.id}
+      icon='preview'
+      size='small'
+      tooltip={tooltip}
+    >
+      {_(label)}
+    </ActionButton>
+  )
+}
+
 const LogDate = ({ time }) => (
   <FormattedDate
     value={new Date(time)}
@@ -100,10 +120,7 @@ const LOG_BACKUP_COLUMNS = [
   DURATION_COLUMN,
   {
     name: _('jobStatus'),
-    itemRenderer: log => {
-      const { className, label } = STATUS_LABELS[log.status]
-      return <span className={`tag tag-${className}`}>{_(label)}</span>
-    },
+    itemRenderer: log => <LogStatus log={log} />,
     sortCriteria: 'status',
   },
   {
@@ -286,17 +303,6 @@ const ROW_TRANSFORM = (task, { vms }) => {
   }
 }
 
-export const showTasks = ({ id }) =>
-  alert(<LogAlertHeader id={id} />, <LogAlertBody id={id} />)
-
-const LOG_INDIVIDUAL_ACTIONS = [
-  {
-    handler: showTasks,
-    icon: 'preview',
-    label: _('logDisplayDetails'),
-  },
-]
-
 const LOG_FILTERS = {
   jobFailed: 'status: failure',
   jobInterrupted: 'status: interrupted',
@@ -373,7 +379,6 @@ export default decorate([
           data-jobs={jobs}
           emptyMessage={_('noLogs')}
           filters={LOG_FILTERS}
-          individualActions={LOG_INDIVIDUAL_ACTIONS}
           itemsPerPage={state.tenPerPageBackup ? 10 : 3}
         />
         <h2>