Merge "web: add jobs list filter"

This commit is contained in:
Zuul 2019-03-12 10:06:47 +00:00 committed by Gerrit Code Review
commit 958163d1f6
1 changed files with 76 additions and 20 deletions

View File

@ -16,7 +16,13 @@ import * as React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { TreeView } from 'patternfly-react'
import {
Form,
FormGroup,
FormControl,
Icon,
TreeView
} from 'patternfly-react'
class JobsList extends React.Component {
@ -25,8 +31,21 @@ class JobsList extends React.Component {
jobs: PropTypes.array,
}
state = {
filter: null
}
handleKeyPress = (e) => {
if (e.charCode === 13) {
this.setState({filter: e.target.value})
e.preventDefault()
e.target.blur()
}
}
render () {
const { jobs } = this.props
const { filter } = this.state
const linkPrefix = this.props.tenant.linkPrefix + '/job/'
@ -37,7 +56,7 @@ class JobsList extends React.Component {
// visited contains individual node
const visited = {}
// getNode returns the tree node and visit each parents
const getNode = function (job) {
const getNode = function (job, filtered) {
if (!visited[job.name]) {
// Collect parents
let parents = []
@ -62,10 +81,11 @@ class JobsList extends React.Component {
expanded: true,
},
parents: parents,
filtered: filtered,
}
// Visit parent recursively
for (let parent of parents) {
getNode(jobMap[parent])
getNode(jobMap[parent], filtered)
}
}
return visited[job.name]
@ -74,30 +94,66 @@ class JobsList extends React.Component {
for (let job of jobs) {
jobMap[job.name] = job
}
// filter job
let filtered = false
if (filter) {
filtered = true
for (let job of jobs) {
if (job.name.indexOf(filter) !== -1 ||
(job.description && job.description.indexOf(filter) !== -1)) {
getNode(job, !filtered)
}
}
}
// process job list
for (let job of jobs) {
const jobNode = getNode(job)
let attached = false
// add tree node to each parent and expand the parent
for (let parent of jobNode.parents) {
const parentNode = visited[parent]
if (!parentNode) {
console.log('Job ', job.name, ' parent ', parent, ' does not exist!')
continue
const jobNode = getNode(job, filtered)
if (!jobNode.filtered) {
let attached = false
// add tree node to each parent and expand the parent
for (let parent of jobNode.parents) {
const parentNode = visited[parent]
if (!parentNode) {
console.log(
'Job ', job.name, ' parent ', parent, ' does not exist!')
continue
}
if (!parentNode.nodes) {
parentNode.nodes = []
}
parentNode.nodes.push(jobNode)
attached = true
}
if (!parentNode.nodes) {
parentNode.nodes = []
// else add node at the tree root
if (!attached || jobNode.parents.length === 0) {
nodes.push(jobNode)
}
parentNode.nodes.push(jobNode)
attached = true
}
// else add node at the tree root
if (!attached || jobNode.parents.length === 0) {
nodes.push(jobNode)
}
}
return (
<div className='tree-view-container'>
<div className="tree-view-container">
<Form inline>
<FormGroup controlId='jobs'>
<FormControl
type='text'
placeholder='job name'
defaultValue={filter}
inputRef={i => this.filter = i}
onKeyPress={this.handleKeyPress} />
{filter && (
<FormControl.Feedback>
<span
onClick={() => {this.setState({filter: ''})
this.filter.value = ''}}
style={{cursor: 'pointer', zIndex: 10, pointerEvents: 'auto'}}
>
<Icon type='pf' title='Clear filter' name='delete' />
&nbsp;
</span>
</FormControl.Feedback>
)}
</FormGroup>
</Form>
<TreeView nodes={nodes} />
</div>
)