web: add change status page

This change adds a ChangeStatus page to display the status of a single
change and updates the Change component to link the icon to the new
page.

Change-Id: I265f7a390fde33721624a0da7fe5bd1cde32dc37

1 files changed, 18 insertions, 5 deletions

diff --git a/web/src/containers/status/Change.jsx b/web/src/containers/status/Change.jsx
index ddd82a9ae..b4d9be31d 100644
--- a/web/src/containers/status/Change.jsx
+++ b/web/src/containers/status/Change.jsx
@@ -14,6 +14,8 @@
 
 import * as React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 
 import LineAngleImage from '../../images/line-angle.png'
 import LineTImage from '../../images/line-t.png'
@@ -24,7 +26,8 @@ class Change extends React.Component {
   static propTypes = {
     change: PropTypes.object.isRequired,
     queue: PropTypes.object.isRequired,
-    expanded: PropTypes.bool.isRequired
+    expanded: PropTypes.bool.isRequired,
+    tenant: PropTypes.object
   }
 
   renderStatusIcon (change) {
@@ -47,10 +50,20 @@ class Change extends React.Component {
         iconGlyph = 'pficon pficon-error-circle-o'
       }
     }
-    return (
-      <span className={'zuul-build-status ' + iconGlyph}
-        title={iconTitle} />
+    const icon = (
+        <span
+          className={'zuul-build-status ' + iconGlyph}
+          title={iconTitle} />
     )
+    if (change.live) {
+      return (
+        <Link to={this.props.tenant.linkPrefix + '/status/change/' + change.id}>
+          {icon}
+        </Link>
+      )
+    } else {
+      return icon
+    }
   }
 
   renderLineImg (change, i) {
@@ -96,4 +109,4 @@ class Change extends React.Component {
   }
 }
 
-export default Change
+export default connect(state => ({tenant: state.tenant}))(Change)