[JENKINS-35837] linkify the name in the favorites card to open the "run details" screen, pipeline tab

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

@@ -91,6 +91,12 @@ class RunDetails extends Component {
                 decodeURIComponent(run.pipeline) === branch;
         })[0];
 
+        // deep-linking across RunDetails for different pipelines yields 'runs' data for the wrong pipeline
+        // during initial render. when runs are refetched the screen will render again with 'currentRun' correctly set
+        if (!currentRun) {
+            return null;
+        }
+
         currentRun.name = name;
 
         const status = currentRun.result === 'UNKNOWN' ? currentRun.state : currentRun.result;

blueocean-personalization/src/main/js/components/DashboardCards.jsx

@@ -126,6 +126,7 @@ export class DashboardCards extends Component {
             let startTime = null;
             let estimatedDuration = null;
             let commitId = null;
+            let runId = null;
 
             if (latestRun) {
                 if (latestRun.result) {
@@ -135,6 +136,7 @@ export class DashboardCards extends Component {
                 startTime = latestRun.startTime;
                 estimatedDuration = latestRun.estimatedDurationInMillis;
                 commitId = latestRun.commitId;
+                runId = latestRun.id;
             }
 
             if (latestRun && latestRun.result) {
@@ -152,6 +154,7 @@ export class DashboardCards extends Component {
                       pipeline={pipelineName}
                       branch={branchName}
                       commitId={commitId}
+                      runId={runId}
                       favorite
                       onFavoriteToggle={(isFavorite) => this._onFavoriteToggle(isFavorite, favorite)}
                     />

blueocean-personalization/src/main/js/components/PipelineCard.jsx

@@ -2,6 +2,7 @@
  * Created by cmeyers on 6/28/16.
  */
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 import { Icon } from 'react-material-icons-blue';
 import { Favorite, LiveStatusIndicator } from '@jenkins-cd/design-language';
 
@@ -75,6 +76,10 @@ export class PipelineCard extends Component {
         const showRun = status && (status.toLowerCase() === 'failure' || status.toLowerCase() === 'aborted');
         const commitText = commitId ? commitId.substr(0, 7) : '';
 
+        const runUrl = `/organizations/${encodeURIComponent(this.props.organization)}/` +
+            `${encodeURIComponent(this.props.fullName)}/detail/` +
+            `${encodeURIComponent(this.props.branch || this.props.pipeline)}/${encodeURIComponent(this.props.runId)}/pipeline`;
+
         return (
             <div className={`pipeline-card ${bgClass}`}>
                 <LiveStatusIndicator
@@ -83,7 +88,9 @@ export class PipelineCard extends Component {
                 />
 
                 <span className="name">
-                    {this.props.organization} / <span title={this.props.fullName}>{this.props.pipeline}</span>
+                    <Link to={runUrl}>
+                        {this.props.organization} / <span title={this.props.fullName}>{this.props.pipeline}</span>
+                    </Link>
                 </span>
 
                 { this.props.branch ?
@@ -129,6 +136,7 @@ PipelineCard.propTypes = {
     pipeline: PropTypes.string,
     branch: PropTypes.string,
     commitId: PropTypes.string,
+    runId: PropTypes.string,
     favorite: PropTypes.bool,
     onRunClick: PropTypes.func,
     onFavoriteToggle: PropTypes.func,

blueocean-personalization/src/main/less/components/pipeline-card.less

@@ -6,6 +6,10 @@
     min-width: 400px;
     padding: 15px;
 
+    a {
+        color: white;
+    }
+
     .name, .branch, .commit {
         margin-left: 10px;
     }