diff --git a/releasenotes/notes/web-page-build-93eeb53418f8a3f0.yaml b/releasenotes/notes/web-page-build-93eeb53418f8a3f0.yaml new file mode 100644 index 0000000000..562d3378c6 --- /dev/null +++ b/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. diff --git a/web/src/api.js b/web/src/api.js index 9af4adb8e8..40fc3ee173 100644 --- a/web/src/api.js +++ b/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, diff --git a/web/src/pages/Build.jsx b/web/src/pages/Build.jsx new file mode 100644 index 0000000000..20dae9449e --- /dev/null +++ b/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 (
Loading...
) + } + 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 = ( + + {value} + + ) + } + if (column === 'voting') { + if (value) { + value = 'Yes' + } else { + value = 'No' + } + } + if (value && (column === 'log_url' || column === 'ref_url')) { + value = {value} + } + if (value) { + rows.push({key: label, value: value}) + } + }) + return ( +{item.key} | +{item.value} | +