feat(backup/logs): show job tag in table (#2005)

Fixes #1982

src/common/intl/messages.js

@@ -213,7 +213,9 @@ var messages = {
   backupEditNotFoundTitle: 'Cannot edit backup',
   backupEditNotFoundMessage: 'Missing required info for edition',
   job: 'Job',
-  jobId: 'Job ID',
+  jobModalTitle: 'Job {job}',
+  jobId: 'ID',
+  jobType: 'Type',
   jobName: 'Name',
   jobNamePlaceholder: 'Name of your job (forbidden: "_")',
   jobStart: 'Start',

src/xo-app/backup/overview/index.js

@@ -45,10 +45,15 @@ const jobKeyToLabel = {
 
 const JOB_COLUMNS = [
   {
-    name: _('job'),
-    itemRenderer: ({ jobId, jobLabel }) => <span>{jobId.slice(4, 8)} ({jobLabel})</span>,
+    name: _('jobId'),
+    itemRenderer: ({ jobId }) => jobId.slice(4, 8),
     sortCriteria: 'jobId'
   },
+  {
+    name: _('jobType'),
+    itemRenderer: ({ jobLabel }) => jobLabel,
+    sortCriteria: 'jobLabel'
+  },
   {
     name: _('jobTag'),
     itemRenderer: ({ scheduleTag }) => scheduleTag

src/xo-app/logs/index.js

@@ -3,6 +3,7 @@ import ActionButton from 'action-button'
 import ActionRowButton from 'action-row-button'
 import classnames from 'classnames'
 import forEach from 'lodash/forEach'
+import get from 'lodash/get'
 import Icon from 'icon'
 import includes from 'lodash/includes'
 import map from 'lodash/map'
@@ -71,8 +72,8 @@ class JobReturn extends Component {
 
 const Log = props => <ul className='list-group'>
   {map(props.log.calls, call => <li key={call.callKey} className='list-group-item'>
-    <strong className='text-info'>{call.method}: </strong>
-    {map(call.params, (value, key) => <JobParam id={value} paramKey={key} key={key} />)}
+    <strong className='text-info'>{call.method}: </strong><br />
+    {map(call.params, (value, key) => [ <JobParam id={value} paramKey={key} key={key} />, <br /> ])}
     {call.returnedValue && <span>{' '}<JobReturn id={call.returnedValue} /></span>}
     {call.error &&
       <span className='text-danger'>
@@ -86,7 +87,7 @@ const Log = props => <ul className='list-group'>
   </li>)}
 </ul>
 
-const showCalls = log => alert(<span>{_('job')} {log.jobId}</span>, <Log log={log} />)
+const showCalls = log => alert(_('jobModalTitle', { job: log.jobId }), <Log log={log} />)
 
 const LOG_COLUMNS = [
   {
@@ -95,10 +96,15 @@ const LOG_COLUMNS = [
     sortCriteria: log => log.jobId
   },
   {
-    name: _('job'),
+    name: _('jobType'),
     itemRenderer: log => jobKeyToLabel[log.key],
     sortCriteria: log => log.key
   },
+  {
+    name: _('jobTag'),
+    itemRenderer: log => get(log, 'calls[0].params.tag'),
+    sortCriteria: log => get(log, 'calls[0].params.tag')
+  },
   {
     name: _('jobStart'),
     itemRenderer: log => log.start && <FormattedDate value={new Date(log.start)} month='short' day='numeric' year='numeric' hour='2-digit' minute='2-digit' second='2-digit' />,