Merge "Web UI: substring search for builds, buildsets"
This commit is contained in:
commit
1561fe775e
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
features:
|
||||||
|
- |
|
||||||
|
Zuul now supports substring searches on the Builds and Buildsets pages on
|
||||||
|
its web UI. This is supported by placing asterisk (*) placeholders anywhere
|
||||||
|
in the search term, representing any characters. This is enabled for job
|
||||||
|
name, branch, project, and pipeline filters.
|
|
@ -30,6 +30,7 @@ import {
|
||||||
ToolbarGroup,
|
ToolbarGroup,
|
||||||
ToolbarItem,
|
ToolbarItem,
|
||||||
ToolbarToggleGroup,
|
ToolbarToggleGroup,
|
||||||
|
Tooltip,
|
||||||
} from '@patternfly/react-core'
|
} from '@patternfly/react-core'
|
||||||
import { FilterIcon, SearchIcon } from '@patternfly/react-icons'
|
import { FilterIcon, SearchIcon } from '@patternfly/react-icons'
|
||||||
|
|
||||||
|
@ -149,6 +150,7 @@ function FilterToolbar(props) {
|
||||||
isOpen={isCategoryDropdownOpen}
|
isOpen={isCategoryDropdownOpen}
|
||||||
dropdownItems={filterCategories.filter(
|
dropdownItems={filterCategories.filter(
|
||||||
(category) => (category.type === 'search' ||
|
(category) => (category.type === 'search' ||
|
||||||
|
category.type === 'fuzzy-search' ||
|
||||||
category.type === 'select' ||
|
category.type === 'select' ||
|
||||||
category.type === 'ternary' ||
|
category.type === 'ternary' ||
|
||||||
category.type === 'checkbox')
|
category.type === 'checkbox')
|
||||||
|
@ -185,6 +187,31 @@ function FilterToolbar(props) {
|
||||||
</Button>
|
</Button>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)
|
)
|
||||||
|
} else if (category.type === 'fuzzy-search') {
|
||||||
|
return (
|
||||||
|
<InputGroup>
|
||||||
|
<Tooltip
|
||||||
|
content="Wildcard search with * placeholders">
|
||||||
|
<TextInput
|
||||||
|
name={`${category.key}-input`}
|
||||||
|
id={`${category.key}-input`}
|
||||||
|
type="search"
|
||||||
|
aria-label={`${category.key} filter`}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
value={inputValue}
|
||||||
|
placeholder={category.placeholder}
|
||||||
|
onKeyDown={(event) => handleInputSend(event, category)}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<Button
|
||||||
|
variant={ButtonVariant.control}
|
||||||
|
aria-label="search button for search input"
|
||||||
|
onClick={(event) => handleInputSend(event, category)}
|
||||||
|
>
|
||||||
|
<SearchIcon />
|
||||||
|
</Button>
|
||||||
|
</InputGroup>
|
||||||
|
)
|
||||||
} else if (category.type === 'select') {
|
} else if (category.type === 'select') {
|
||||||
return (
|
return (
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
|
|
|
@ -43,25 +43,25 @@ class BuildsPage extends React.Component {
|
||||||
key: 'job_name',
|
key: 'job_name',
|
||||||
title: 'Job',
|
title: 'Job',
|
||||||
placeholder: 'Filter by Job...',
|
placeholder: 'Filter by Job...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'project',
|
key: 'project',
|
||||||
title: 'Project',
|
title: 'Project',
|
||||||
placeholder: 'Filter by Project...',
|
placeholder: 'Filter by Project...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'branch',
|
key: 'branch',
|
||||||
title: 'Branch',
|
title: 'Branch',
|
||||||
placeholder: 'Filter by Branch...',
|
placeholder: 'Filter by Branch...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'pipeline',
|
key: 'pipeline',
|
||||||
title: 'Pipeline',
|
title: 'Pipeline',
|
||||||
placeholder: 'Filter by Pipeline...',
|
placeholder: 'Filter by Pipeline...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'change',
|
key: 'change',
|
||||||
|
@ -195,7 +195,7 @@ class BuildsPage extends React.Component {
|
||||||
this.updateData(filters)
|
this.updateData(filters)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
filterInputValidation = (filterKey, filterValue) => {
|
filterInputValidation = (filterKey, filterValue) => {
|
||||||
// Input value should not be empty for all cases
|
// Input value should not be empty for all cases
|
||||||
if (!filterValue) {
|
if (!filterValue) {
|
||||||
|
|
|
@ -42,19 +42,19 @@ class BuildsetsPage extends React.Component {
|
||||||
key: 'project',
|
key: 'project',
|
||||||
title: 'Project',
|
title: 'Project',
|
||||||
placeholder: 'Filter by Project...',
|
placeholder: 'Filter by Project...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'branch',
|
key: 'branch',
|
||||||
title: 'Branch',
|
title: 'Branch',
|
||||||
placeholder: 'Filter by Branch...',
|
placeholder: 'Filter by Branch...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'pipeline',
|
key: 'pipeline',
|
||||||
title: 'Pipeline',
|
title: 'Pipeline',
|
||||||
placeholder: 'Filter by Pipeline...',
|
placeholder: 'Filter by Pipeline...',
|
||||||
type: 'search',
|
type: 'fuzzy-search',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'change',
|
key: 'change',
|
||||||
|
|
Loading…
Reference in New Issue