Merge "web: add change status page"
This commit is contained in:
commit
29fe7892a1
|
@ -52,6 +52,7 @@ function getHomepageUrl (url) {
|
||||||
'/job/',
|
'/job/',
|
||||||
'/project/',
|
'/project/',
|
||||||
'/stream/',
|
'/stream/',
|
||||||
|
'/status/',
|
||||||
]
|
]
|
||||||
subDir.forEach(path => {
|
subDir.forEach(path => {
|
||||||
if (baseUrl.includes(path)) {
|
if (baseUrl.includes(path)) {
|
||||||
|
@ -114,6 +115,9 @@ function fetchConfigErrors (apiPrefix) {
|
||||||
function fetchStatus (apiPrefix) {
|
function fetchStatus (apiPrefix) {
|
||||||
return Axios.get(apiUrl + apiPrefix + 'status')
|
return Axios.get(apiUrl + apiPrefix + 'status')
|
||||||
}
|
}
|
||||||
|
function fetchChangeStatus (apiPrefix, changeId) {
|
||||||
|
return Axios.get(apiUrl + apiPrefix + 'status/change/' + changeId)
|
||||||
|
}
|
||||||
function fetchBuild (apiPrefix, buildId) {
|
function fetchBuild (apiPrefix, buildId) {
|
||||||
return Axios.get(apiUrl + apiPrefix + 'build/' + buildId)
|
return Axios.get(apiUrl + apiPrefix + 'build/' + buildId)
|
||||||
}
|
}
|
||||||
|
@ -134,6 +138,7 @@ function fetchJobs (apiPrefix) {
|
||||||
export {
|
export {
|
||||||
getHomepageUrl,
|
getHomepageUrl,
|
||||||
getStreamUrl,
|
getStreamUrl,
|
||||||
|
fetchChangeStatus,
|
||||||
fetchConfigErrors,
|
fetchConfigErrors,
|
||||||
fetchStatus,
|
fetchStatus,
|
||||||
fetchBuild,
|
fetchBuild,
|
||||||
|
|
|
@ -14,6 +14,8 @@
|
||||||
|
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
import LineAngleImage from '../../images/line-angle.png'
|
import LineAngleImage from '../../images/line-angle.png'
|
||||||
import LineTImage from '../../images/line-t.png'
|
import LineTImage from '../../images/line-t.png'
|
||||||
|
@ -24,7 +26,8 @@ class Change extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
change: PropTypes.object.isRequired,
|
change: PropTypes.object.isRequired,
|
||||||
queue: PropTypes.object.isRequired,
|
queue: PropTypes.object.isRequired,
|
||||||
expanded: PropTypes.bool.isRequired
|
expanded: PropTypes.bool.isRequired,
|
||||||
|
tenant: PropTypes.object
|
||||||
}
|
}
|
||||||
|
|
||||||
renderStatusIcon (change) {
|
renderStatusIcon (change) {
|
||||||
|
@ -47,10 +50,20 @@ class Change extends React.Component {
|
||||||
iconGlyph = 'pficon pficon-error-circle-o'
|
iconGlyph = 'pficon pficon-error-circle-o'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
const icon = (
|
||||||
<span className={'zuul-build-status ' + iconGlyph}
|
<span
|
||||||
title={iconTitle} />
|
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) {
|
renderLineImg (change, i) {
|
||||||
|
@ -96,4 +109,4 @@ class Change extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Change
|
export default connect(state => ({tenant: state.tenant}))(Change)
|
||||||
|
|
|
@ -0,0 +1,94 @@
|
||||||
|
/* global setTimeout, clearTimeout */
|
||||||
|
// 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 PropTypes from 'prop-types'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
} from 'patternfly-react'
|
||||||
|
|
||||||
|
import { fetchChangeStatus } from '../api'
|
||||||
|
import ChangePanel from '../containers/status/ChangePanel'
|
||||||
|
|
||||||
|
|
||||||
|
class ChangeStatusPage extends React.Component {
|
||||||
|
static propTypes = {
|
||||||
|
match: PropTypes.object.isRequired,
|
||||||
|
tenant: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
change: null,
|
||||||
|
error: null,
|
||||||
|
}
|
||||||
|
|
||||||
|
updateData = () => {
|
||||||
|
// Clear any running timer
|
||||||
|
if (this.timer) {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
this.setState({error: null})
|
||||||
|
fetchChangeStatus(
|
||||||
|
this.props.tenant.apiPrefix, this.props.match.params.changeId)
|
||||||
|
.then(response => {
|
||||||
|
this.setState({change: response.data})
|
||||||
|
}).catch(error => {
|
||||||
|
this.setState({error: error.message, change: null})
|
||||||
|
})
|
||||||
|
this.timer = setTimeout(this.updateData, 5000)
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
document.title = this.props.match.params.changeId + ' | Zuul Status'
|
||||||
|
if (this.props.tenant.name) {
|
||||||
|
this.updateData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate (prevProps) {
|
||||||
|
if (this.props.tenant.name !== prevProps.tenant.name) {
|
||||||
|
this.updateData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount () {
|
||||||
|
if (this.timer) {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { error, change } = this.state
|
||||||
|
if (error) {
|
||||||
|
return (<Alert>{this.state.error}</Alert>)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
{change && change.map((item, idx) => (
|
||||||
|
<div className='row' key={idx}>
|
||||||
|
<ChangePanel
|
||||||
|
globalExpanded={true}
|
||||||
|
change={item}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</React.Fragment>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(state => ({tenant: state.tenant}))(ChangeStatusPage)
|
|
@ -13,6 +13,7 @@
|
||||||
// under the License.
|
// under the License.
|
||||||
|
|
||||||
import StatusPage from './pages/Status'
|
import StatusPage from './pages/Status'
|
||||||
|
import ChangeStatusPage from './pages/ChangeStatus'
|
||||||
import JobPage from './pages/Job'
|
import JobPage from './pages/Job'
|
||||||
import JobsPage from './pages/Jobs'
|
import JobsPage from './pages/Jobs'
|
||||||
import BuildPage from './pages/Build'
|
import BuildPage from './pages/Build'
|
||||||
|
@ -41,6 +42,10 @@ const routes = () => [
|
||||||
to: '/builds',
|
to: '/builds',
|
||||||
component: BuildsPage
|
component: BuildsPage
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
to: '/status/change/:changeId',
|
||||||
|
component: ChangeStatusPage
|
||||||
|
},
|
||||||
{
|
{
|
||||||
to: '/stream/:buildId',
|
to: '/stream/:buildId',
|
||||||
component: StreamPage
|
component: StreamPage
|
||||||
|
|
Loading…
Reference in New Issue