feat(job/log): display start/end time for each call and precise its duration (#2284)

Fixes part of #2270

src/common/intl/index.js

@@ -6,8 +6,10 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { FormattedMessage, IntlProvider as IntlProvider_ } from 'react-intl'
 
-import messages from './messages'
 import locales from './locales'
+import messages from './messages'
+import Tooltip from '.././tooltip'
+import { createSelector } from '.././selectors'
 
 // ===================================================================
 
@@ -74,17 +76,36 @@ export class IntlProvider extends Component {
   }
 }
 
+const parseDuration = milliseconds => {
+  let seconds = Math.floor(milliseconds / 1e3)
+  const days = Math.floor(seconds / 86400)
+  seconds -= days * 86400
+  const hours = Math.floor(seconds / 3600)
+  seconds -= hours * 3600
+  const minutes = Math.floor(seconds / 60)
+  seconds -= minutes * 60
+  return { days, hours, minutes, seconds }
+}
+
 @connect(({ lang }) => ({ lang }))
 export class FormattedDuration extends Component {
+  _parseDuration = createSelector(() => this.props.duration, parseDuration)
+
+  _humanizeDuration = createSelector(
+    () => this.props.duration,
+    () => this.props.lang,
+    (duration, lang) =>
+      moment
+        .duration(duration)
+        .locale(lang)
+        .humanize()
+  )
+
   render () {
-    const { duration, lang } = this.props
     return (
-      <span>
+      <Tooltip content={getMessage('durationFormat', this._parseDuration())}>
-        {moment
+        <span>{this._humanizeDuration()}</span>
-          .duration(duration)
+      </Tooltip>
-          .locale(lang)
-          .humanize()}
-      </span>
     )
   }
 }

src/common/intl/messages.js

@@ -1705,6 +1705,10 @@ const messages = {
   expiresOn: 'expires on {date}',
   xosanInstallXoaPlugin: 'Install XOA plugin first',
   xosanLoadXoaPlugin: 'Load XOA plugin first',
+
+  // ----- Utils -----
+  durationFormat:
+    '{days, plural, =0 {} one {# day } other {# days }}{hours, plural, =0 {} one {# hour } other {# hours }}{minutes, plural, =0 {} one {# minute } other {# minutes }}{seconds, plural, =0 {} one {# second} other {# seconds}}',
 }
 forEach(messages, function (message, id) {
   if (isString(message)) {

src/xo-app/logs/index.js

@@ -162,11 +162,40 @@ class Log extends BaseComponent {
                     <JobParam id={value} paramKey={key} key={key} />,
                     <br />,
                   ])}
-                  {end !== undefined &&
+                  {_.keyValue(
-                    _.keyValue(
+                    _('jobStart'),
-                      _('jobDuration'),
+                    <FormattedDate
-                      <FormattedDuration duration={jobDuration} />
+                      value={new Date(start)}
-                    )}
+                      month='short'
+                      day='numeric'
+                      year='numeric'
+                      hour='2-digit'
+                      minute='2-digit'
+                      second='2-digit'
+                    />
+                  )}
+                  <br />
+                  {end !== undefined && (
+                    <div>
+                      {_.keyValue(
+                        _('jobEnd'),
+                        <FormattedDate
+                          value={new Date(end)}
+                          month='short'
+                          day='numeric'
+                          year='numeric'
+                          hour='2-digit'
+                          minute='2-digit'
+                          second='2-digit'
+                        />
+                      )}
+                      <br />
+                      {_.keyValue(
+                        _('jobDuration'),
+                        <FormattedDuration duration={jobDuration} />
+                      )}
+                    </div>
+                  )}
                   {returnedValue != null && (
                     <JobDataInfos
                       jobDuration={jobDuration}