JENKINS-43746 Update step heading to include selected parallel and live duration

acceptance-tests/src/test/java/io/blueocean/ath/offline/multibranch/ParallelNavigationTest.java

@@ -57,11 +57,11 @@ public void parallelNavigationTest () throws IOException, GitAPIException, Inter
         pipeline.getRunDetailsPipelinePage().open(1);
 
         // at first we see branch one
-        wait.until(By.xpath("//*[text()=\"Steps firstBranch\"]"));
+        wait.until(By.xpath("//*[text()=\"firstBranch\"]"));
 
         // and clicking on the unselected node will yield us the second branch
         wait.until(By.xpath("//*[contains(@class, 'pipeline-node')][3]")).click();
-        wait.until(By.xpath("//*[text()=\"Steps secondBranch\"]"));
+        wait.until(By.xpath("//*[text()=\"secondBranch\"]"));
 
         pipeline.stopAllRuns();
     }
@@ -85,12 +85,12 @@ public void parallelNavigationTestInput () throws IOException, GitAPIException,
         pipeline.getRunDetailsPipelinePage().open(1);
 
         // at first we see branch one
-        wait.until(By.xpath("//*[text()=\"Steps firstBranch\"]"));
+        wait.until(By.xpath("//*[text()=\"firstBranch\"]"));
         wait.until(By.cssSelector(".btn.inputStepSubmit")).click();
 
         // and clicking on the unselected node will yield us the second branch
         wait.until(By.xpath("//*[contains(@class, 'pipeline-node')][3]")).click();
-        wait.until(By.xpath("//*[text()=\"Steps secondBranch\"]"));
+        wait.until(By.xpath("//*[text()=\"secondBranch\"]"));
         wait.until(By.cssSelector(".btn.inputStepSubmit")).click();
     }
 

blueocean-dashboard/src/main/js/components/PipelineRunGraph.jsx

@@ -73,7 +73,7 @@ function convertJenkinsNodeDetails(jenkinsNode, isCompleted, skewMillis = 0) {
     }
     const i18nDuration = timeManager.format(harmonized.durationInMillis, translate('common.date.duration.hint.format', { defaultValue: 'M [month], d [days], h[h], m[m], s[s]' }));
 
-    const title = translate(`common.state.${state}`, { 0: i18nDuration });
+    const title = state === 'running' ? '' : translate(`common.state.${state}`, { 0: i18nDuration });
 
     const converted = {
         name: jenkinsNode.displayName,

blueocean-dashboard/src/main/js/components/karaoke/components/LogToolbar.jsx

@@ -1,21 +1,35 @@
 import React, { Component, PropTypes } from 'react';
-import { Icon } from '@jenkins-cd/design-language';
+import { Icon, TimeDuration } from '@jenkins-cd/design-language';
 import { fetchAllSuffix as suffix } from '../../../util/UrlUtils';
 
 const { string } = PropTypes;
 
 export default class LogToolbar extends Component {
     render() {
-        const { url, title } = this.props;
+        const { url, title, duration, t, running } = this.props;
+
         // early out
         if (!url) {
             return null;
         }
         const logUrl = url.includes(suffix) ? url : `${url}${suffix}`;
-        
+
         return (<div className="log-header">
             <div className="log-header__section selected">
-                {title}
+                <span>
+                    {title}
+                </span>
+                {duration &&
+                    <span>
+                        <span>&nbsp;-&nbsp;</span>
+                        <TimeDuration
+                            millis={ duration }
+                            liveUpdate={ running }
+                            updatePeriod={ 1000 }
+                            t={ t }
+                        />
+                    </span>
+                }
             </div>
             <div className="log-header__section download-log-button">
                 <a {...{
@@ -44,4 +58,7 @@ LogToolbar.propTypes = {
     title: string,
     fileName: string,
     url: string.isRequired,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    t: PropTypes.func,
+    running: PropTypes.bool,
 };

blueocean-dashboard/src/main/js/components/karaoke/components/Pipeline.jsx

@@ -237,14 +237,19 @@ export default class Pipeline extends Component {
             logger.debug('redirecting now to:', location.pathname);
             router.push(location);
         };
-        const title = this.pager.nodes !== undefined ? t('rundetail.pipeline.steps', {
-            defaultValue: 'Steps {0}',
-            0: this.pager.currentNode.displayName,
-        }) : '';
+
+        let stepName = this.pager.nodes !== undefined ? this.pager.nodes.data.model.filter((item) => item.id === this.pager.currentNode.parent)[0] : '';
+        stepName = stepName && this.pager.currentNode.isParallel ? stepName.displayName : '';
+
+        let title = this.pager.nodes !== undefined ? this.pager.currentNode.displayName : '';
+
+        title = stepName ? `${stepName} / ${title}` : title;
+
         // JENKINS-40526 node can provide logs only related to that node
         const logUrl = this.pager.nodes !== undefined ? augmenter.getNodesLogUrl(this.pager.currentNode) : augmenter.generalLogUrl;
         const logFileName = this.pager.nodes !== undefined ? augmenter.getNodesLogFileName(this.pager.currentNode) : augmenter.generalLogFileName;
         logger.debug('displayName', this.pager.currentNode.displayName, 'logging info', logUrl, logFileName);
+
         return (<div>
             { <RunDescription run={this.props.run} t={t} /> }
             { this.pager.nodes !== undefined &&
@@ -265,6 +270,9 @@ export default class Pipeline extends Component {
                     fileName={logFileName}
                     url={logUrl}
                     title={title}
+                    duration={this.pager.currentNode.durationInMillis}
+                    running={this.pager.currentNode.isRunning}
+                    t={t}
                 />
             }
             {this.pager.steps && !noResultsToDisplay && (