summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZuul <zuul@review.openstack.org>2019-03-12 10:06:47 +0000
committerGerrit Code Review <review@openstack.org>2019-03-12 10:06:47 +0000
commit958163d1f6f08f38e5a80a09ea1fe9c7278f7c45 (patch)
treefbfaf60c51b218f1a93e72925eb8160f8053782b
parent52877b3b266d8fd9f721d7831a9f5fc1a13ae672 (diff)
parent0999d5d8404667d98bd0c7cbaee954a6cceb3b1a (diff)
Merge "web: add jobs list filter"
-rw-r--r--web/src/containers/jobs/Jobs.jsx96
1 files changed, 76 insertions, 20 deletions
diff --git a/web/src/containers/jobs/Jobs.jsx b/web/src/containers/jobs/Jobs.jsx
index 054b9b4..6a83d9b 100644
--- a/web/src/containers/jobs/Jobs.jsx
+++ b/web/src/containers/jobs/Jobs.jsx
@@ -16,7 +16,13 @@ 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 { TreeView } from 'patternfly-react' 19import {
20 Form,
21 FormGroup,
22 FormControl,
23 Icon,
24 TreeView
25} from 'patternfly-react'
20 26
21 27
22class JobsList extends React.Component { 28class JobsList extends React.Component {
@@ -25,8 +31,21 @@ class JobsList extends React.Component {
25 jobs: PropTypes.array, 31 jobs: PropTypes.array,
26 } 32 }
27 33
34 state = {
35 filter: null
36 }
37
38 handleKeyPress = (e) => {
39 if (e.charCode === 13) {
40 this.setState({filter: e.target.value})
41 e.preventDefault()
42 e.target.blur()
43 }
44 }
45
28 render () { 46 render () {
29 const { jobs } = this.props 47 const { jobs } = this.props
48 const { filter } = this.state
30 49
31 const linkPrefix = this.props.tenant.linkPrefix + '/job/' 50 const linkPrefix = this.props.tenant.linkPrefix + '/job/'
32 51
@@ -37,7 +56,7 @@ class JobsList extends React.Component {
37 // visited contains individual node 56 // visited contains individual node
38 const visited = {} 57 const visited = {}
39 // getNode returns the tree node and visit each parents 58 // getNode returns the tree node and visit each parents
40 const getNode = function (job) { 59 const getNode = function (job, filtered) {
41 if (!visited[job.name]) { 60 if (!visited[job.name]) {
42 // Collect parents 61 // Collect parents
43 let parents = [] 62 let parents = []
@@ -62,10 +81,11 @@ class JobsList extends React.Component {
62 expanded: true, 81 expanded: true,
63 }, 82 },
64 parents: parents, 83 parents: parents,
84 filtered: filtered,
65 } 85 }
66 // Visit parent recursively 86 // Visit parent recursively
67 for (let parent of parents) { 87 for (let parent of parents) {
68 getNode(jobMap[parent]) 88 getNode(jobMap[parent], filtered)
69 } 89 }
70 } 90 }
71 return visited[job.name] 91 return visited[job.name]
@@ -74,30 +94,66 @@ class JobsList extends React.Component {
74 for (let job of jobs) { 94 for (let job of jobs) {
75 jobMap[job.name] = job 95 jobMap[job.name] = job
76 } 96 }
97 // filter job
98 let filtered = false
99 if (filter) {
100 filtered = true
101 for (let job of jobs) {
102 if (job.name.indexOf(filter) !== -1 ||
103 (job.description && job.description.indexOf(filter) !== -1)) {
104 getNode(job, !filtered)
105 }
106 }
107 }
77 // process job list 108 // process job list
78 for (let job of jobs) { 109 for (let job of jobs) {
79 const jobNode = getNode(job) 110 const jobNode = getNode(job, filtered)
80 let attached = false 111 if (!jobNode.filtered) {
81 // add tree node to each parent and expand the parent 112 let attached = false
82 for (let parent of jobNode.parents) { 113 // add tree node to each parent and expand the parent
83 const parentNode = visited[parent] 114 for (let parent of jobNode.parents) {
84 if (!parentNode) { 115 const parentNode = visited[parent]
85 console.log('Job ', job.name, ' parent ', parent, ' does not exist!') 116 if (!parentNode) {
86 continue 117 console.log(
118 'Job ', job.name, ' parent ', parent, ' does not exist!')
119 continue
120 }
121 if (!parentNode.nodes) {
122 parentNode.nodes = []
123 }
124 parentNode.nodes.push(jobNode)
125 attached = true
87 } 126 }
88 if (!parentNode.nodes) { 127 // else add node at the tree root
89 parentNode.nodes = [] 128 if (!attached || jobNode.parents.length === 0) {
129 nodes.push(jobNode)
90 } 130 }
91 parentNode.nodes.push(jobNode)
92 attached = true
93 }
94 // else add node at the tree root
95 if (!attached || jobNode.parents.length === 0) {
96 nodes.push(jobNode)
97 } 131 }
98 } 132 }
99 return ( 133 return (
100 <div className='tree-view-container'> 134 <div className="tree-view-container">
135 <Form inline>
136 <FormGroup controlId='jobs'>
137 <FormControl
138 type='text'
139 placeholder='job name'
140 defaultValue={filter}
141 inputRef={i => this.filter = i}
142 onKeyPress={this.handleKeyPress} />
143 {filter && (
144 <FormControl.Feedback>
145 <span
146 onClick={() => {this.setState({filter: ''})
147 this.filter.value = ''}}
148 style={{cursor: 'pointer', zIndex: 10, pointerEvents: 'auto'}}
149 >
150 <Icon type='pf' title='Clear filter' name='delete' />
151 &nbsp;
152 </span>
153 </FormControl.Feedback>
154 )}
155 </FormGroup>
156 </Form>
101 <TreeView nodes={nodes} /> 157 <TreeView nodes={nodes} />
102 </div> 158 </div>
103 ) 159 )