summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZuul <zuul@review.openstack.org>2019-03-12 10:03:50 +0000
committerGerrit Code Review <review@openstack.org>2019-03-12 10:03:50 +0000
commit52877b3b266d8fd9f721d7831a9f5fc1a13ae672 (patch)
tree2db07d687fd8c0bb692f9644571056a6756f4edd
parentd0569f0214c14261e02d148e8f8381eeb3fe9068 (diff)
parent8f5003da204a69616bebcd06463d225381d5c5fb (diff)
Merge "web: switch jobs list to a tree view"
-rw-r--r--web/src/containers/jobs/Jobs.jsx115
-rw-r--r--web/src/index.css5
2 files changed, 75 insertions, 45 deletions
diff --git a/web/src/containers/jobs/Jobs.jsx b/web/src/containers/jobs/Jobs.jsx
index 36a414f..054b9b4 100644
--- a/web/src/containers/jobs/Jobs.jsx
+++ b/web/src/containers/jobs/Jobs.jsx
@@ -16,7 +16,7 @@ import * as React from 'react'
16import PropTypes from 'prop-types' 16import PropTypes from 'prop-types'
17import { connect } from 'react-redux' 17import { connect } from 'react-redux'
18import { Link } from 'react-router-dom' 18import { Link } from 'react-router-dom'
19import { Table } from 'patternfly-react' 19import { TreeView } from 'patternfly-react'
20 20
21 21
22class JobsList extends React.Component { 22class JobsList extends React.Component {
@@ -28,53 +28,78 @@ class JobsList extends React.Component {
28 render () { 28 render () {
29 const { jobs } = this.props 29 const { jobs } = this.props
30 30
31 const headerFormat = value => <Table.Heading>{value}</Table.Heading> 31 const linkPrefix = this.props.tenant.linkPrefix + '/job/'
32 const cellFormat = (value) => ( 32
33 <Table.Cell>{value}</Table.Cell>) 33 // job index map
34 const cellJobFormat = (value) => ( 34 const jobMap = {}
35 <Table.Cell> 35 // nodes contains the tree data
36 <Link to={this.props.tenant.linkPrefix + '/job/' + value}> 36 const nodes = []
37 {value} 37 // visited contains individual node
38 </Link> 38 const visited = {}
39 </Table.Cell>) 39 // getNode returns the tree node and visit each parents
40 const cellBuildFormat = (value) => ( 40 const getNode = function (job) {
41 <Table.Cell> 41 if (!visited[job.name]) {
42 <Link to={this.props.tenant.linkPrefix + '/builds?job_name=' + value}> 42 // Collect parents
43 builds 43 let parents = []
44 </Link> 44 if (job.variants) {
45 </Table.Cell>) 45 for (let jobVariant of job.variants) {
46 const columns = [] 46 if (jobVariant.parent &&
47 const myColumns = ['name', 'description', 'Last builds'] 47 parents.indexOf(jobVariant.parent) === -1) {
48 myColumns.forEach(column => { 48 parents.push(jobVariant.parent)
49 let formatter = cellFormat 49 }
50 let prop = column 50 }
51 if (column === 'name') { 51 }
52 formatter = cellJobFormat 52 visited[job.name] = {
53 text: (
54 <React.Fragment>
55 <Link to={linkPrefix + job.name}>{job.name}</Link>
56 {job.description && (
57 <span style={{marginLeft: '10px'}}>{job.description}</span>
58 )}
59 </React.Fragment>),
60 icon: 'fa fa-cube',
61 state: {
62 expanded: true,
63 },
64 parents: parents,
65 }
66 // Visit parent recursively
67 for (let parent of parents) {
68 getNode(jobMap[parent])
69 }
70 }
71 return visited[job.name]
72 }
73 // index job list
74 for (let job of jobs) {
75 jobMap[job.name] = job
76 }
77 // process job list
78 for (let job of jobs) {
79 const jobNode = getNode(job)
80 let attached = false
81 // add tree node to each parent and expand the parent
82 for (let parent of jobNode.parents) {
83 const parentNode = visited[parent]
84 if (!parentNode) {
85 console.log('Job ', job.name, ' parent ', parent, ' does not exist!')
86 continue
87 }
88 if (!parentNode.nodes) {
89 parentNode.nodes = []
90 }
91 parentNode.nodes.push(jobNode)
92 attached = true
53 } 93 }
54 if (column === 'Last builds') { 94 // else add node at the tree root
55 prop = 'name' 95 if (!attached || jobNode.parents.length === 0) {
56 formatter = cellBuildFormat 96 nodes.push(jobNode)
57 } 97 }
58 columns.push({ 98 }
59 header: {label: column,
60 formatters: [headerFormat]},
61 property: prop,
62 cell: {formatters: [formatter]}
63 })
64 })
65 return ( 99 return (
66 <Table.PfProvider 100 <div className='tree-view-container'>
67 striped 101 <TreeView nodes={nodes} />
68 bordered 102 </div>
69 hover
70 columns={columns}
71 >
72 <Table.Header/>
73 <Table.Body
74 rows={jobs}
75 rowKey="name"
76 />
77 </Table.PfProvider>
78 ) 103 )
79 } 104 }
80} 105}
diff --git a/web/src/index.css b/web/src/index.css
index a7a72dc..64a2f9c 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -130,3 +130,8 @@ p.zuulstreamline {
130 margin: 0px 0px; 130 margin: 0px 0px;
131 line-height: 1.4; 131 line-height: 1.4;
132} 132}
133
134/* Job Tree View group gap */
135div.tree-view-container ul.list-group {
136 margin: 0px 0px;
137}