Skip to content

Commit

Permalink
Implement MetaFilter with separate field and value
Browse files Browse the repository at this point in the history 
Add a metadata filtering class for use on filtertable result pages.
Adding to classify failures first, where its needed most right now.

This could be applied to run and results views as well, replacing their
current filtering selections.
  • Loading branch information
@mshriver
mshriver committed Oct 13, 2021
1 parent 5425527 commit 464aef4
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 83 deletions.
104 changes: 23 additions & 81 deletions frontend/src/components/classify-failures.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@ import {
Checkbox,
Flex,
FlexItem,
Select,
SelectOption,
SelectVariant,
TextContent,
Text,
} from '@patternfly/react-core';
Expand All @@ -27,10 +24,11 @@ import {
getSpinnerRow,
resultToClassificationRow,
} from '../utilities';
import { OPERATIONS } from '../constants';
import { OPERATIONS, STRING_RESULT_FIELDS } from '../constants';
import {
FilterTable,
MultiClassificationDropdown,
MetaFilter,
} from './index';


Expand All @@ -56,9 +54,6 @@ export class ClassifyFailuresTable extends React.Component {
isError: false,
isFieldOpen: false,
isOperationOpen: false,
exceptionSelections: [],
isExceptionOpen: false,
exceptions: [],
includeSkipped: false,
filters: Object.assign({
'result': {op: 'in', val: 'failed;error'},
Expand All @@ -73,39 +68,6 @@ export class ClassifyFailuresTable extends React.Component {
this.getResultsForTable();
}

onExceptionToggle = isExpanded => {
this.setState({isExceptionOpen: isExpanded}, this.applyFilter);
}

applyExceptionFilter = () => {
let { filters, exceptionSelections } = this.state;
if (exceptionSelections.length > 0) {
filters["metadata.exception_name"] = Object.assign({op: 'in', val: exceptionSelections.join(';')});
this.setState({filters}, this.refreshResults);
}
else {
delete filters["metadata.exception_name"];
this.setState({filters}, this.refreshResults);
}
}

onExceptionSelect = (event, selection) => {
const exceptionSelections = this.state.exceptionSelections;
if (exceptionSelections.includes(selection)) {
this.setState({exceptionSelections: exceptionSelections.filter(item => item !== selection)}, this.applyExceptionFilter);
}
else {
this.setState({exceptionSelections: [...exceptionSelections, selection]}, this.applyExceptionFilter);
}
};

onExceptionClear = () => {
this.setState({
exceptionSelections: [],
isExceptionOpen: false
}, this.applyExceptionFilter);
};

onCollapse(event, rowIndex, isOpen) {
const { rows } = this.state;
rows[rowIndex].isOpen = isOpen;
Expand Down Expand Up @@ -156,18 +118,17 @@ export class ClassifyFailuresTable extends React.Component {
}

setFilter = (field, value) => {
this.updateFilters(field, 'eq', value, () => {
this.refreshResults();
})
// maybe process values array to string format here instead of expecting caller to do it?
console.log('SETFILTER VALUE: '+value)
let operator = (value.includes(";")) ? 'in' : 'eq'
this.updateFilters(field, operator, value, this.refreshResults)
};

removeFilter = id => {
if (id === "metadata.exception_name") { // only remove exception_name filter
this.updateFilters(id, null, null, () => {
this.setState({exceptionSelections: [], page: 1}, this.applyExceptionFilter);
});
if (!(id in ["result", "run_id"])) { // Don't allow removal of error/failure filter
this.updateFilters(id, null, null, this.refreshResults)
}
}
};

onSkipCheck = (checked) => {
let { filters } = this.state;
Expand Down Expand Up @@ -229,17 +190,8 @@ export class ClassifyFailuresTable extends React.Component {
});
}

getExceptions() {
fetch(buildUrl(Settings.serverUrl + '/widget/result-aggregator', {group_field: 'metadata.exception_name', run_id: this.props.run_id}))
.then(response => response.json())
.then(data => {
this.setState({exceptions: data})
})
}

componentDidMount() {
this.getResultsForTable();
this.getExceptions();
}

render() {
Expand All @@ -248,35 +200,25 @@ export class ClassifyFailuresTable extends React.Component {
rows,
selectedResults,
includeSkipped,
isExceptionOpen,
exceptionSelections,
exceptions,
} = this.state;
const {
run_id
} = this.props
const pagination = {
pageSize: this.state.pageSize,
page: this.state.page,
totalItems: this.state.totalItems
}
// filters for the exception
const exceptionFilters = [
<React.Fragment key="value">
<Select
aria-label="exception-filter"
placeholderText="Filter by exception"
variant={SelectVariant.checkbox}
isOpen={isExceptionOpen}
selections={exceptionSelections}
maxHeight={"1140%"}
isDisabled={exceptions.length < 2}
onToggle={this.onExceptionToggle}
onSelect={this.onExceptionSelect}
onClear={this.onExceptionClear}
>
{exceptions.map((option, index) => (
<SelectOption key={index} value={option._id} description={option.count + ' results'}/>
))}
</Select>
</React.Fragment>
// filters for the metadata
const resultFilters = [
<MetaFilter
key="metafilter"
// user_properties fields shouldn't be injected here
fieldOptions={['metadata.user_properties.assignee', 'metadata.user_properties.component', ...STRING_RESULT_FIELDS,]}
runId={run_id}
setFilter={this.setFilter}
customFilters={['result*failed;error']}
/>,
]
return (
<Card className="pf-u-mt-lg">
Expand Down Expand Up @@ -314,7 +256,7 @@ export class ClassifyFailuresTable extends React.Component {
onRowSelect={this.onTableRowSelect}
variant={TableVariant.compact}
activeFilters={this.state.filters}
filters={exceptionFilters}
filters={resultFilters}
onRemoveFilter={this.removeFilter}
hideFilters={["run_id", "project_id"]}
/>
Expand Down
132 changes: 131 additions & 1 deletion frontend/src/components/filtertable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,22 @@ import {
Flex,
FlexItem,
Pagination,
PaginationVariant
PaginationVariant,
Select,
SelectOption,
SelectVariant,
} from '@patternfly/react-core';
import {
Table,
TableBody,
TableHeader
} from '@patternfly/react-table';

import { Settings } from '../settings';
import {
buildUrl,
} from '../utilities';

import { TableEmptyState, TableErrorState } from './tablestates';

export class FilterTable extends React.Component {
Expand Down Expand Up @@ -160,3 +168,125 @@ export class FilterTable extends React.Component {
);
}
}


export class MetaFilter extends React.Component {
static propTypes = {
fieldOptions: PropTypes.array, // could reference constants directly
runId: PropTypes.string, // make optional?
setFilter: PropTypes.func,
customFilters: PropTypes.array, // more advanced handling of filter objects? the results-aggregator endpoint takes a string filter
};

constructor(props) {
super(props);
this.state = {
fieldSelection: null,
isFieldOpen: false,
isValueOpen: false,
valueOptions: [],
valueSelections: [],
};
}

onFieldToggle = isExpanded => {
this.setState({isFieldOpen: isExpanded})
};

onValueToggle = isExpanded => {
this.setState({isValueOpen: isExpanded})
};

onFieldSelect = (event, selection) => {
this.setState(
// clear value state too, otherwise the old selection remains selected but is no longer visible
{fieldSelection: selection, isFieldOpen: false, valueSelections: [], valueOptions: [], isValueOpen: false},
this.updateValueOptions
)

};

onValueSelect = (event, selection) => {
// update state and call setFilter
const valueSelections = this.state.valueSelections;
let updated_values = (valueSelections.includes(selection))
? valueSelections.filter(item => item !== selection)
: [...valueSelections, selection]

this.setState(
{valueSelections: updated_values},
() => this.props.setFilter(this.state.fieldSelection, this.state.valueSelections.join(';'))
)
};

onFieldClear = () => {
this.setState(
{fieldSelection: null, valueSelections: [], isFieldOpen: false, isValueOpen: false},
)
};

onValueClear = () => {
this.setState(
{valueSelections: [], isValueOpen: false},
() => this.props.setFilter(this.state.fieldSelection, this.state.valueSelections)
)
}

updateValueOptions = () => {
const {fieldSelection} = this.state
if (fieldSelection !== null) {
fetch(buildUrl(Settings.serverUrl + '/widget/result-aggregator',
{
group_field: fieldSelection,
run_id: this.props.runId,
additional_filters: this.props.customFilters.join(),
}
))
.then(response => response.json())
.then(data => {
this.setState({valueOptions: data})
})
}
}

render () {
const {isFieldOpen, fieldSelection, isValueOpen, valueOptions, valueSelections} = this.state

return (
<React.Fragment>
<Select key="metafield_select"
aria-label="metadata-field-filter"
placeholderText="Select Metadata Field"
variant={SelectVariant.single}
isOpen={isFieldOpen}
selections={fieldSelection}
maxHeight={"1140%"}
onToggle={this.onFieldToggle}
onSelect={this.onFieldSelect}
onClear={this.onFieldClear}
>
{this.props.fieldOptions.map((option, index) => (
<SelectOption key={index} value={option} description={option}/>
))}
</Select>
<Select key="metavalue_select"
aria-label="metadata-value-filter"
placeholderText="Select field value(s)"
variant={SelectVariant.checkbox}
isOpen={isValueOpen}
selections={valueSelections}
maxHeight={"1140%"}
isDisabled={this.state.fieldSelection == null}
onToggle={this.onValueToggle}
onSelect={this.onValueSelect}
onClear={this.onValueClear}
>
{valueOptions.map((option, index) => (
<SelectOption key={index} value={option._id} description={option.count + ' results'}/>
))}
</Select>
</React.Fragment>

)
}
}
2 changes: 1 addition & 1 deletion frontend/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export { ClassifyFailuresTable } from './classify-failures';
export { DeleteModal } from './delete-modal';
export { EmptyObject } from './empty-object';
export { FileUpload } from './fileupload';
export { FilterTable } from './filtertable';
export { FilterTable, MetaFilter } from './filtertable';
export { ParamDropdown } from './widget-components';
export { MultiValueInput } from './multivalueinput';
export { NewDashboardModal } from './new-dashboard-modal';
Expand Down

0 comments on commit 464aef4

Please sign in to comment.