summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZuul <zuul@review.openstack.org>2018-12-31 11:22:36 +0000
committerGerrit Code Review <review@openstack.org>2018-12-31 11:22:36 +0000
commit144ab10ba792383fbed25a5c6de172cb69efa11c (patch)
tree536beee943cf9ee233d5fe801cff819e6bfc7172
parent92ccf5f642d3a407ead7687f93e3d15d40d5f95f (diff)
parent17ecc46d445e658ad977286cff5d04fcdf64e882 (diff)
Merge "web: add nodes page"
-rw-r--r--web/src/api.js4
-rw-r--r--web/src/pages/Nodes.jsx110
-rw-r--r--web/src/routes.js6
3 files changed, 120 insertions, 0 deletions
diff --git a/web/src/api.js b/web/src/api.js
index 03dd15b..7354226 100644
--- a/web/src/api.js
+++ b/web/src/api.js
@@ -143,6 +143,9 @@ function fetchJobs (apiPrefix) {
143function fetchLabels (apiPrefix) { 143function fetchLabels (apiPrefix) {
144 return Axios.get(apiUrl + apiPrefix + 'labels') 144 return Axios.get(apiUrl + apiPrefix + 'labels')
145} 145}
146function fetchNodes (apiPrefix) {
147 return Axios.get(apiUrl + apiPrefix + 'nodes')
148}
146 149
147export { 150export {
148 getHomepageUrl, 151 getHomepageUrl,
@@ -157,6 +160,7 @@ export {
157 fetchJob, 160 fetchJob,
158 fetchJobs, 161 fetchJobs,
159 fetchLabels, 162 fetchLabels,
163 fetchNodes,
160 fetchTenants, 164 fetchTenants,
161 fetchInfo 165 fetchInfo
162} 166}
diff --git a/web/src/pages/Nodes.jsx b/web/src/pages/Nodes.jsx
new file mode 100644
index 0000000..6e77341
--- /dev/null
+++ b/web/src/pages/Nodes.jsx
@@ -0,0 +1,110 @@
1// Copyright 2018 Red Hat, Inc
2//
3// Licensed under the Apache License, Version 2.0 (the "License"); you may
4// not use this file except in compliance with the License. You may obtain
5// a copy of the License at
6//
7// http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
12// License for the specific language governing permissions and limitations
13// under the License.
14
15import * as React from 'react'
16import PropTypes from 'prop-types'
17import { connect } from 'react-redux'
18import { Table } from 'patternfly-react'
19import * as moment from 'moment'
20
21import { fetchNodes } from '../api'
22
23
24class NodesPage extends React.Component {
25 static propTypes = {
26 tenant: PropTypes.object
27 }
28
29 state = {
30 nodes: null
31 }
32
33 updateData () {
34 fetchNodes(this.props.tenant.apiPrefix).then(response => {
35 this.setState({nodes: response.data})
36 })
37 }
38
39 componentDidMount () {
40 document.title = 'Zuul Nodes'
41 if (this.props.tenant.name) {
42 this.updateData()
43 }
44 }
45
46 componentDidUpdate (prevProps) {
47 if (this.props.tenant.name !== prevProps.tenant.name) {
48 this.updateData()
49 }
50 }
51
52 render () {
53 const { nodes } = this.state
54 if (!nodes) {
55 return (<p>Loading...</p>)
56 }
57
58 const headerFormat = value => <Table.Heading>{value}</Table.Heading>
59 const cellFormat = value => <Table.Cell>{value}</Table.Cell>
60 const cellPreFormat = value => (
61 <Table.Cell style={{fontFamily: 'Menlo,Monaco,Consolas,monospace'}}>
62 {value}
63 </Table.Cell>)
64 const cellAgeFormat = value => (
65 <Table.Cell style={{fontFamily: 'Menlo,Monaco,Consolas,monospace'}}>
66 {moment.unix(value).fromNow()}
67 </Table.Cell>)
68
69 const columns = []
70 const myColumns = [
71 'id', 'label', 'connection', 'server', 'provider', 'state',
72 'age', 'comment'
73 ]
74 myColumns.forEach(column => {
75 let formatter = cellFormat
76 let prop = column
77 if (column === 'label') {
78 prop = 'type'
79 } else if (column === 'connection') {
80 prop = 'connection_type'
81 } else if (column === 'server') {
82 prop = 'external_id'
83 formatter = cellPreFormat
84 } else if (column === 'age') {
85 prop = 'state_time'
86 formatter = cellAgeFormat
87 }
88 columns.push({
89 header: {label: column, formatters: [headerFormat]},
90 property: prop,
91 cell: {formatters: [formatter]}
92 })
93 })
94 return (
95 <Table.PfProvider
96 striped
97 bordered
98 hover
99 columns={columns}
100 >
101 <Table.Header/>
102 <Table.Body
103 rows={nodes}
104 rowKey="id"
105 />
106 </Table.PfProvider>)
107 }
108}
109
110export default connect(state => ({tenant: state.tenant}))(NodesPage)
diff --git a/web/src/routes.js b/web/src/routes.js
index 99653ec..ee93ab4 100644
--- a/web/src/routes.js
+++ b/web/src/routes.js
@@ -19,6 +19,7 @@ import ProjectsPage from './pages/Projects'
19import JobPage from './pages/Job' 19import JobPage from './pages/Job'
20import JobsPage from './pages/Jobs' 20import JobsPage from './pages/Jobs'
21import LabelsPage from './pages/Labels' 21import LabelsPage from './pages/Labels'
22import NodesPage from './pages/Nodes'
22import BuildPage from './pages/Build' 23import BuildPage from './pages/Build'
23import BuildsPage from './pages/Builds' 24import BuildsPage from './pages/Builds'
24import ConfigErrorsPage from './pages/ConfigErrors' 25import ConfigErrorsPage from './pages/ConfigErrors'
@@ -51,6 +52,11 @@ const routes = () => [
51 component: LabelsPage 52 component: LabelsPage
52 }, 53 },
53 { 54 {
55 title: 'Nodes',
56 to: '/nodes',
57 component: NodesPage
58 },
59 {
54 title: 'Builds', 60 title: 'Builds',
55 to: '/builds', 61 to: '/builds',
56 component: BuildsPage 62 component: BuildsPage