Merge "web: add build page"

releasenotes/notes/web-page-build-93eeb53418f8a3f0.yaml

@@ -0,0 +1,5 @@
+---
+features:
+  - |
+    A new Build page in the web interface enable displaying a single Build
+    information.

web/src/api.js

@@ -111,6 +111,9 @@ function fetchTenants () {
 function fetchStatus (apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'status')
 }
+function fetchBuild (apiPrefix, buildId) {
+  return Axios.get(apiUrl + apiPrefix + 'build/' + buildId)
+}
 function fetchBuilds (apiPrefix, queryString) {
   let path = 'builds'
   if (queryString) {
@@ -126,6 +129,7 @@ export {
   getHomepageUrl,
   getStreamUrl,
   fetchStatus,
+  fetchBuild,
   fetchBuilds,
   fetchJobs,
   fetchTenants,

web/src/pages/Build.jsx

@@ -0,0 +1,111 @@
+// 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 { Link } from 'react-router-dom'
+import { Panel } from 'react-bootstrap'
+
+import { fetchBuild } from '../api'
+
+
+class BuildPage extends React.Component {
+  static propTypes = {
+    match: PropTypes.object.isRequired,
+    tenant: PropTypes.object
+  }
+
+  state = {
+    build: null
+  }
+
+  updateData = () => {
+    fetchBuild(this.props.tenant.apiPrefix, this.props.match.params.buildId)
+      .then(response => {
+        this.setState({build: response.data})
+      })
+  }
+
+  componentDidMount () {
+    document.title = 'Zuul Build'
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  render () {
+    const { build } = this.state
+    if (!build) {
+      return (<p>Loading...</p>)
+    }
+    const rows = []
+    const myColumns = [
+      'job_name', 'result', 'voting',
+      'pipeline', 'start_time', 'end_time', 'duration',
+      'project', 'branch', 'ref', 'new_rev', 'ref_url',
+      'log_url']
+
+    myColumns.forEach(column => {
+      let label = column
+      let value = build[column]
+      if (column === 'job_name') {
+        label = 'Job'
+        value = (
+          <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
+            {value}
+          </Link>
+        )
+      }
+      if (column === 'voting') {
+        if (value) {
+          value = 'Yes'
+        } else {
+          value = 'No'
+        }
+      }
+      if (value && (column === 'log_url' || column === 'ref_url')) {
+        value = <a href={value}>{value}</a>
+      }
+      if (value) {
+        rows.push({key: label, value: value})
+      }
+    })
+    return (
+      <Panel>
+        <Panel.Heading>Build result {build.uuid}</Panel.Heading>
+        <Panel.Body>
+          <table className="table table-striped table-bordered">
+            <tbody>
+              {rows.map(item => (
+                <tr key={item.key}>
+                  <td>{item.key}</td>
+                  <td>{item.value}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Panel.Body>
+      </Panel>
+    )
+  }
+}
+
+export default connect(state => ({tenant: state.tenant}))(BuildPage)

web/src/pages/Builds.jsx

@@ -15,6 +15,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { Table } from 'patternfly-react'
 
 import { fetchBuilds } from '../api'
@@ -71,9 +72,15 @@ class BuildsPage extends TableFilters {
         <a href={value} target='_blank' rel='noopener noreferrer'>link</a>
       </Table.Cell>
     )
+    const linkBuildFormat = (value) => (
+      <Table.Cell>
+        <Link to={this.props.tenant.linkPrefix + '/build/' + value}>link</Link>
+      </Table.Cell>
+    )
     this.columns = []
     this.filterTypes = []
     const myColumns = [
+      'build',
       'job',
       'project',
       'branch',
@@ -87,6 +94,10 @@ class BuildsPage extends TableFilters {
       let prop = column
       let formatter = cellFormat
       // Adapt column name and property name
+      if (column === 'build') {
+        prop = 'uuid'
+        formatter = linkBuildFormat
+      }
       if (column === 'job') {
         prop = 'job_name'
       } else if (column === 'start time') {

web/src/routes.js

@@ -14,6 +14,7 @@
 
 import StatusPage from './pages/Status'
 import JobsPage from './pages/Jobs'
+import BuildPage from './pages/Build'
 import BuildsPage from './pages/Builds'
 import TenantsPage from './pages/Tenants'
 import StreamPage from './pages/Stream'
@@ -42,6 +43,10 @@ const routes = () => [
     to: '/stream/:buildId',
     component: StreamPage
   },
+  {
+    to: '/build/:buildId',
+    component: BuildPage
+  },
   {
     to: '/tenants',
     component: TenantsPage,