web: add job page

This change adds a /job/{job_name} web interface.

Change-Id: Idbeae3a11ec4180a193923def7dc7f9c53dc9043

2 files changed, 74 insertions, 0 deletions

diff --git a/web/src/pages/Job.jsx b/web/src/pages/Job.jsx
new file mode 100644
index 000000000..d4108fe74
--- /dev/null
+++ b/web/src/pages/Job.jsx
@@ -0,0 +1,65 @@
+// Copyright 2018 Red Hat, Inc
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import * as React from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+import Job from '../containers/job/Job'
+import { fetchJob } from '../api'
+
+
+class JobPage extends React.Component {
+  static propTypes = {
+    match: PropTypes.object.isRequired,
+    tenant: PropTypes.object
+  }
+
+  state = {
+    job: null
+  }
+
+  updateData = () => {
+    fetchJob(this.props.tenant.apiPrefix, this.props.match.params.jobName)
+      .then(response => {
+        this.setState({job: response.data})
+      })
+  }
+
+  componentDidMount () {
+    document.title = 'Zuul Job | ' + this.props.match.params.jobName
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name ||
+       this.props.match.params.jobName !== prevProps.match.params.jobName) {
+      this.updateData()
+    }
+  }
+
+  render () {
+    const { job } = this.state
+    if (!job) {
+      return (<p>Loading...</p>)
+    }
+    return (
+      <Job job={job} />
+    )
+  }
+}
+
+export default connect(state => ({tenant: state.tenant}))(JobPage)
diff --git a/web/src/pages/Jobs.jsx b/web/src/pages/Jobs.jsx
index 8ec0e3d72..d4ef1553f 100644
--- a/web/src/pages/Jobs.jsx
+++ b/web/src/pages/Jobs.jsx
@@ -58,6 +58,12 @@ class JobsPage extends React.Component {
     const headerFormat = value => <Table.Heading>{value}</Table.Heading>
     const cellFormat = (value) => (
       <Table.Cell>{value}</Table.Cell>)
+    const cellJobFormat = (value) => (
+      <Table.Cell>
+        <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
+          {value}
+        </Link>
+      </Table.Cell>)
     const cellBuildFormat = (value) => (
       <Table.Cell>
         <Link to={this.props.tenant.linkPrefix + '/builds?job_name=' + value}>
@@ -69,6 +75,9 @@ class JobsPage extends React.Component {
     myColumns.forEach(column => {
       let formatter = cellFormat
       let prop = column
+      if (column === 'name') {
+        formatter = cellJobFormat
+      }
       if (column === 'Last builds') {
         prop = 'name'
         formatter = cellBuildFormat