Browse Source

Merge "web: add change status page"

tags/3.4.0
Zuul 5 months ago
parent
commit
29fe7892a1
4 changed files with 122 additions and 5 deletions
  1. 5
    0
      web/src/api.js
  2. 18
    5
      web/src/containers/status/Change.jsx
  3. 94
    0
      web/src/pages/ChangeStatus.jsx
  4. 5
    0
      web/src/routes.js

+ 5
- 0
web/src/api.js View File

@@ -52,6 +52,7 @@ function getHomepageUrl (url) {
52 52
     '/job/',
53 53
     '/project/',
54 54
     '/stream/',
55
+    '/status/',
55 56
   ]
56 57
   subDir.forEach(path => {
57 58
     if (baseUrl.includes(path)) {
@@ -114,6 +115,9 @@ function fetchConfigErrors (apiPrefix) {
114 115
 function fetchStatus (apiPrefix) {
115 116
   return Axios.get(apiUrl + apiPrefix + 'status')
116 117
 }
118
+function fetchChangeStatus (apiPrefix, changeId) {
119
+  return Axios.get(apiUrl + apiPrefix + 'status/change/' + changeId)
120
+}
117 121
 function fetchBuild (apiPrefix, buildId) {
118 122
   return Axios.get(apiUrl + apiPrefix + 'build/' + buildId)
119 123
 }
@@ -134,6 +138,7 @@ function fetchJobs (apiPrefix) {
134 138
 export {
135 139
   getHomepageUrl,
136 140
   getStreamUrl,
141
+  fetchChangeStatus,
137 142
   fetchConfigErrors,
138 143
   fetchStatus,
139 144
   fetchBuild,

+ 18
- 5
web/src/containers/status/Change.jsx View File

@@ -14,6 +14,8 @@
14 14
 
15 15
 import * as React from 'react'
16 16
 import PropTypes from 'prop-types'
17
+import { connect } from 'react-redux'
18
+import { Link } from 'react-router-dom'
17 19
 
18 20
 import LineAngleImage from '../../images/line-angle.png'
19 21
 import LineTImage from '../../images/line-t.png'
@@ -24,7 +26,8 @@ class Change extends React.Component {
24 26
   static propTypes = {
25 27
     change: PropTypes.object.isRequired,
26 28
     queue: PropTypes.object.isRequired,
27
-    expanded: PropTypes.bool.isRequired
29
+    expanded: PropTypes.bool.isRequired,
30
+    tenant: PropTypes.object
28 31
   }
29 32
 
30 33
   renderStatusIcon (change) {
@@ -47,10 +50,20 @@ class Change extends React.Component {
47 50
         iconGlyph = 'pficon pficon-error-circle-o'
48 51
       }
49 52
     }
50
-    return (
51
-      <span className={'zuul-build-status ' + iconGlyph}
52
-        title={iconTitle} />
53
+    const icon = (
54
+        <span
55
+          className={'zuul-build-status ' + iconGlyph}
56
+          title={iconTitle} />
53 57
     )
58
+    if (change.live) {
59
+      return (
60
+        <Link to={this.props.tenant.linkPrefix + '/status/change/' + change.id}>
61
+          {icon}
62
+        </Link>
63
+      )
64
+    } else {
65
+      return icon
66
+    }
54 67
   }
55 68
 
56 69
   renderLineImg (change, i) {
@@ -96,4 +109,4 @@ class Change extends React.Component {
96 109
   }
97 110
 }
98 111
 
99
-export default Change
112
+export default connect(state => ({tenant: state.tenant}))(Change)

+ 94
- 0
web/src/pages/ChangeStatus.jsx View File

@@ -0,0 +1,94 @@
1
+/* global setTimeout, clearTimeout */
2
+// Copyright 2018 Red Hat, Inc
3
+//
4
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+// not use this file except in compliance with the License. You may obtain
6
+// a copy of the License at
7
+//
8
+//      http://www.apache.org/licenses/LICENSE-2.0
9
+//
10
+// Unless required by applicable law or agreed to in writing, software
11
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+// License for the specific language governing permissions and limitations
14
+// under the License.
15
+
16
+import * as React from 'react'
17
+import PropTypes from 'prop-types'
18
+import { connect } from 'react-redux'
19
+import {
20
+  Alert,
21
+} from 'patternfly-react'
22
+
23
+import { fetchChangeStatus } from '../api'
24
+import ChangePanel from '../containers/status/ChangePanel'
25
+
26
+
27
+class ChangeStatusPage extends React.Component {
28
+  static propTypes = {
29
+    match: PropTypes.object.isRequired,
30
+    tenant: PropTypes.object
31
+  }
32
+
33
+  state = {
34
+    change: null,
35
+    error: null,
36
+  }
37
+
38
+  updateData = () => {
39
+    // Clear any running timer
40
+    if (this.timer) {
41
+      clearTimeout(this.timer)
42
+      this.timer = null
43
+    }
44
+    this.setState({error: null})
45
+    fetchChangeStatus(
46
+      this.props.tenant.apiPrefix, this.props.match.params.changeId)
47
+      .then(response => {
48
+        this.setState({change: response.data})
49
+      }).catch(error => {
50
+        this.setState({error: error.message, change: null})
51
+      })
52
+    this.timer = setTimeout(this.updateData, 5000)
53
+  }
54
+
55
+  componentDidMount () {
56
+    document.title = this.props.match.params.changeId + ' | Zuul Status'
57
+    if (this.props.tenant.name) {
58
+      this.updateData()
59
+    }
60
+  }
61
+
62
+  componentDidUpdate (prevProps) {
63
+    if (this.props.tenant.name !== prevProps.tenant.name) {
64
+      this.updateData()
65
+    }
66
+  }
67
+
68
+  componentWillUnmount () {
69
+    if (this.timer) {
70
+      clearTimeout(this.timer)
71
+      this.timer = null
72
+    }
73
+  }
74
+
75
+  render () {
76
+    const { error, change } = this.state
77
+    if (error) {
78
+      return (<Alert>{this.state.error}</Alert>)
79
+    }
80
+    return (
81
+      <React.Fragment>
82
+        {change && change.map((item, idx) => (
83
+          <div className='row' key={idx}>
84
+            <ChangePanel
85
+              globalExpanded={true}
86
+              change={item}
87
+              />
88
+          </div>
89
+        ))}
90
+      </React.Fragment>)
91
+  }
92
+}
93
+
94
+export default connect(state => ({tenant: state.tenant}))(ChangeStatusPage)

+ 5
- 0
web/src/routes.js View File

@@ -13,6 +13,7 @@
13 13
 // under the License.
14 14
 
15 15
 import StatusPage from './pages/Status'
16
+import ChangeStatusPage from './pages/ChangeStatus'
16 17
 import JobPage from './pages/Job'
17 18
 import JobsPage from './pages/Jobs'
18 19
 import BuildPage from './pages/Build'
@@ -41,6 +42,10 @@ const routes = () => [
41 42
     to: '/builds',
42 43
     component: BuildsPage
43 44
   },
45
+  {
46
+    to: '/status/change/:changeId',
47
+    component: ChangeStatusPage
48
+  },
44 49
   {
45 50
     to: '/stream/:buildId',
46 51
     component: StreamPage

Loading…
Cancel
Save