JENKINS-46812 Test results always show duration as "A few seconds" (#…

…1491) * use moment.format instead of humanize which would not give exact duration times * implement suggestions, re-factor TimeDuration so it doesn't need the localisation strings to be passed in every time * fix tests and a typo * release beta ver of the JDL and core-js * remove live duration as is the same as display format * release beta version of the JDL and core-js * release non-beta versions of the JDL and core-js * tick up core-js and JDL versions
jenkinsci · Oct 17, 2017 · 3e162d2 · 3e162d2
1 parent 0cda420
commit 3e162d2
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 869 deletions.
diff --git a/blueocean-core-js/npm-shrinkwrap.json b/blueocean-core-js/npm-shrinkwrap.json
diff --git a/blueocean-core-js/package.json b/blueocean-core-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.169-SNAPSHOT",
+  "version": "0.0.170-SNAPSHOT",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {
@@ -32,7 +32,7 @@
     "url": "https://github.com/jenkinsci/blueocean-plugin.git"
   },
   "dependencies": {
-    "@jenkins-cd/design-language": "0.0.157",
+    "@jenkins-cd/design-language": "0.0.158",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "@jenkins-cd/logging": "0.0.6",

diff --git a/blueocean-dashboard/npm-shrinkwrap.json b/blueocean-dashboard/npm-shrinkwrap.json
diff --git a/blueocean-dashboard/package.json b/blueocean-dashboard/package.json
@@ -43,8 +43,8 @@
     "skin-deep": "0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.168",
-    "@jenkins-cd/design-language": "0.0.157",
+    "@jenkins-cd/blueocean-core-js": "0.0.169",
+    "@jenkins-cd/design-language": "0.0.158",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "@jenkins-cd/preferences": "0.0.4",

diff --git a/blueocean-dashboard/src/main/js/components/ActivityDetailsRow.jsx b/blueocean-dashboard/src/main/js/components/ActivityDetailsRow.jsx
@@ -95,9 +95,7 @@ class ActivityDetailsRow extends Component {
                                   updatePeriod={1000}
                                   liveUpdate={isRunning}
                                   locale={locale}
-                                  displayFormat={t('common.date.duration.display.format', { defaultValue: 'M[ month] d[ days] h[ hours] m[ minutes] s[ seconds]' })}
-                                  liveFormat={t('common.date.duration.format', { defaultValue: 'm[ minutes] s[ seconds]' })}
-                                  hintFormat={t('common.date.duration.hint.format', { defaultValue: 'M [month], d [days], h[h], m[m], s[s]' })}
+                                  t={t}
                     />
                 </TableCell>
                 <TableCell linkTo={runDetailsUrl}>

diff --git a/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx b/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx
@@ -71,9 +71,6 @@ class RunDetailsHeader extends Component {
             t('rundetail.header.pullRequest', { defaultValue: 'Pull Request' }) :
             t('rundetail.header.branch', { defaultValue: 'Branch' });
         const commitLabel = t('rundetail.header.commit', { defaultValue: 'Commit' });
-        const durationDisplayFormat = t('common.date.duration.display.format', { defaultValue: 'M[ month] d[ days] h[ hours] m[ minutes] s[ seconds]' });
-        const durationFormat = t('common.date.duration.format', { defaultValue: 'm[ minutes] s[ seconds]' });
-        const durationHintFormat = t('common.date.duration.hint.format', { defaultValue: 'M [month], d [days], h[h], m[m], s[s]' });
         const dateFormatShort = t('common.date.readable.short', { defaultValue: 'MMM DD h:mma Z' });
         const dateFormatLong = t('common.date.readable.long', { defaultValue: 'MMM DD YYYY h:mma Z' });
 
@@ -140,9 +137,7 @@ class RunDetailsHeader extends Component {
                     liveUpdate={ isRunning() }
                     updatePeriod={ 1000 }
                     locale={ locale }
-                    displayFormat={ durationDisplayFormat }
-                    liveFormat={ durationFormat }
-                    hintFormat={ durationHintFormat }
+                    t={ t }
                 />
             </div>
         );

diff --git a/blueocean-dashboard/src/main/js/components/karaoke/components/Step.jsx b/blueocean-dashboard/src/main/js/components/karaoke/components/Step.jsx
@@ -146,9 +146,7 @@ export class Step extends Component {
             liveUpdate={step.isRunning}
             updatePeriod={1000}
             locale={locale}
-            displayFormat={t('common.date.duration.display.format', { defaultValue: 'M[ month] d[ days] h[ hours] m[ minutes] s[ seconds]' })}
-            liveFormat={t('common.date.duration.format', { defaultValue: 'm[ minutes] s[ seconds]' })}
-            hintFormat={t('common.date.duration.hint.format', { defaultValue: 'M [month], d [days], h[h], m[m], s[s]' })}
+            t={t}
         />);
 
         return (<div className={logConsoleClass}>

diff --git a/blueocean-dashboard/src/main/js/components/testing/TestCaseResultRow.jsx b/blueocean-dashboard/src/main/js/components/testing/TestCaseResultRow.jsx
@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { observer } from 'mobx-react';
-import { ResultItem, StatusIndicator } from '@jenkins-cd/design-language';
-import moment from 'moment';
+import { ResultItem, StatusIndicator, TimeDuration } from '@jenkins-cd/design-language';
 import TestDetails from './TestDetails';
 
 @observer
@@ -23,8 +22,7 @@ export default class TestCaseResultRow extends Component {
 
     render() {
         const { testCase: t, translation, locale = 'en' } = this.props;
-        moment.locale(locale);
-        const duration = moment.duration(Number(t.duration), 'milliseconds').humanize();
+        const duration = TimeDuration.format(t.duration, translation, locale);
         const showTestCase = (t.errorStackTrace || t.errorDetails || this.stdout || this.stderr);
         let statusIndicator = null;
         switch (t.status) {

diff --git a/blueocean-personalization/npm-shrinkwrap.json b/blueocean-personalization/npm-shrinkwrap.json
diff --git a/blueocean-personalization/package.json b/blueocean-personalization/package.json
@@ -39,8 +39,8 @@
     "react-addons-test-utils": "15.4.2"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.168",
-    "@jenkins-cd/design-language": "0.0.157",
+    "@jenkins-cd/blueocean-core-js": "0.0.169",
+    "@jenkins-cd/design-language": "0.0.158",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "immutable": "3.8.1",

diff --git a/blueocean-pipeline-editor/npm-shrinkwrap.json b/blueocean-pipeline-editor/npm-shrinkwrap.json
diff --git a/blueocean-pipeline-editor/package.json b/blueocean-pipeline-editor/package.json
@@ -41,8 +41,8 @@
     "react-addons-test-utils": "15.4.2"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.168",
-    "@jenkins-cd/design-language": "0.0.157",
+    "@jenkins-cd/blueocean-core-js": "0.0.169",
+    "@jenkins-cd/design-language": "0.0.158",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "lodash.debounce": "4.0.8",

diff --git a/blueocean-web/npm-shrinkwrap.json b/blueocean-web/npm-shrinkwrap.json
diff --git a/blueocean-web/package.json b/blueocean-web/package.json
@@ -30,8 +30,8 @@
     "zombie": "4.2.1"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.168",
-    "@jenkins-cd/design-language": "0.0.157",
+    "@jenkins-cd/blueocean-core-js": "0.0.169",
+    "@jenkins-cd/design-language": "0.0.158",
     "@jenkins-cd/js-extensions": "0.0.39",
     "@jenkins-cd/js-modules": "0.0.10",
     "history": "2.0.2",

diff --git a/jenkins-design-language/package.json b/jenkins-design-language/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@jenkins-cd/design-language",
   "jdlName": "jenkins-design-language",
-  "version": "0.0.158-SNAPSHOT",
+  "version": "0.0.159-SNAPSHOT",
   "description": "Styles, assets, and React classes for Jenkins Design Language",
   "main": "dist/js/components/index.js",
   "scripts": {

diff --git a/jenkins-design-language/src/js/components/TimeDuration.jsx b/jenkins-design-language/src/js/components/TimeDuration.jsx
@@ -44,8 +44,8 @@ export class TimeDuration extends Component {
         super(props);
         // track how much time has elapsed since live updating tracking started
         this.state = { elapsed: 0 };
-        const {updatePeriod = 30000} = this.props;
-        this.timerPeriodMillis = typeof updatePeriod !== 'number' || isNaN(updatePeriod) ? 30000 : updatePeriod;
+        const {updatePeriod = 5000} = this.props;
+        this.timerPeriodMillis = typeof updatePeriod !== 'number' || isNaN(updatePeriod) ? 5000 : updatePeriod;
         this.clearIntervalId = 0;
 
     }
@@ -85,6 +85,21 @@ export class TimeDuration extends Component {
         });
     }
 
+    static format(value, t, locale) {
+        const displayFormat = t('common.date.duration.display.format', { defaultValue: 'd[d] h[h] m[m] s[s]' });
+
+        moment.locale(locale);
+
+        if (!isNaN(value)) {
+            if(value < 1000) {
+                return '<1s';
+            }
+            return moment.duration(value).format(displayFormat);
+        } else {
+            return '-';
+        }
+    }
+
     componentWillUnmount() {
         if (this.clearIntervalId) {
             clearInterval(this.clearIntervalId);
@@ -101,17 +116,16 @@ export class TimeDuration extends Component {
                     <span title={this.props.hint ? this.props.hint : '<1s'}>&#x3C;1s</span>
                 );
             }
+
             const {
                 locale = 'en',
-                displayFormat = 'd[d] h[h] m[m] s[s]',
-                liveFormat = 'd[d] h[h] m[m] s[s]',
-                hintFormat = 'M [months], d [days], h [hours], m [minutes], s [seconds]',
+                t,
             } = this.props;
-            moment.locale(locale);
-            // in case we are in live update we are interested in seconds
-            const duration = this.props.liveUpdate ?
-                moment.duration(millis).format(liveFormat) : moment.duration(millis).format(displayFormat);
 
+            const duration = TimeDuration.format(millis, t, locale);
+            const hintFormat = t('common.date.duration.hint.format', { defaultValue: 'M [month], d [days], h[h], m[m], s[s]' });
+
+            moment.locale(locale);
             const hint = this.props.hint ?
                 this.props.hint : moment.duration(millis).format(hintFormat);
 
@@ -130,7 +144,5 @@ TimeDuration.propTypes = {
     hint: PropTypes.string,
     liveUpdate: PropTypes.bool,
     locale: PropTypes.string,
-    displayFormat: PropTypes.string,
-    liveFormat: PropTypes.string,
-    hintFormat: PropTypes.string,
+    t: PropTypes.func,
 };
diff --git a/jenkins-design-language/src/js/stories/resultItemStories.jsx b/jenkins-design-language/src/js/stories/resultItemStories.jsx
@@ -16,6 +16,14 @@ const wrapperStyle = {
 
 let __ctr = 1;
 
+const strings = {
+    "common.date.duration.display.format": "M [mos], d [Tage], h[Std.], m[m], s[s]",
+    "common.date.duration.format": "m[ Minuten] s[ Sekunden]",
+    "common.date.duration.hint.format": "M [Monate], d [Tage], h[Std.], m[m], s[s]",
+};
+
+const t = (key) => strings[key] || key;
+
 function moLipsum() {
 
     const l = lipsum.length;
@@ -43,9 +51,7 @@ function standardDe() {
         <TimeDuration
             millis={5000000}
             locale="de"
-            displayFormat="M [mos], d [Tage], h[Std.], m[m], s[s]"
-            hintFormat="M [Monate], d [Tage], h[Std.], m[m], s[s]"
-            liveFormat="m[ Minuten] s[ Sekunden]"
+            t={t}
         />
     );
 }
@@ -57,8 +63,7 @@ function liveUpdateDe() {
             updatePeriod={3000}
             millis={50000}
             locale="de"
-            hintFormat="M [mos], d [Tage], h[Std.], m[m], s[s]"
-            liveFormat="m[ Minuten] s[ Sekunden]"
+            t={t}
         />
     );
 }