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 19, 2021
1 parent 5c50400 commit a274ab1
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 99 deletions.
122 changes: 25 additions & 97 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 @@ -24,13 +21,15 @@ import { Settings } from '../settings';
import {
buildParams,
buildUrl,
toAPIFilter,
getSpinnerRow,
resultToClassificationRow,
} from '../utilities';
import { OPERATIONS } from '../constants';
import { FILTERABLE_RESULT_FIELDS } from '../constants';
import {
FilterTable,
MultiClassificationDropdown,
MetaFilter,
} from './index';


Expand All @@ -56,9 +55,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 +69,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 @@ -146,7 +109,7 @@ export class ClassifyFailuresTable extends React.Component {

updateFilters(name, operator, value, callback) {
let filters = this.state.filters;
if (!value) {
if ((value === null) || (value.length === 0)) {
delete filters[name];
}
else {
Expand All @@ -156,27 +119,20 @@ 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?
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 !== "result") && (id !== "run_id")) { // Don't allow removal of error/failure filter
this.updateFilters(id, null, null, this.refreshResults)
}
}
};

onSkipCheck = (checked) => {
let { filters } = this.state;
if (checked) {
filters["result"]["val"] += ";skipped;xfailed"
}
else {
filters["result"]["val"] = "failed;error"
}
filters["result"]["val"] = ("failed;error") + ((checked) ? ";skipped;xfailed" : "")
this.setState(
{includeSkipped: checked, filters},
this.refreshResults
Expand All @@ -199,17 +155,9 @@ export class ClassifyFailuresTable extends React.Component {
this.setState({rows: [getSpinnerRow(5)], isEmpty: false, isError: false});
// get only failed results
let params = buildParams(filters);
params['filter'] = [];
params['filter'] = toAPIFilter(filters);
params['pageSize'] = this.state.pageSize;
params['page'] = this.state.page;
// Convert UI filters to API filters
for (let key in filters) {
if (Object.prototype.hasOwnProperty.call(filters, key) && !!filters[key]) {
let val = filters[key]['val'];
const op = OPERATIONS[filters[key]['op']];
params.filter.push(key + op + val);
}
}

this.setState({rows: [['Loading...', '', '', '', '']]});
fetch(buildUrl(Settings.serverUrl + '/result', params))
Expand All @@ -229,17 +177,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 +187,24 @@ export class ClassifyFailuresTable extends React.Component {
rows,
selectedResults,
includeSkipped,
isExceptionOpen,
exceptionSelections,
exceptions,
filters
} = 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={FILTERABLE_RESULT_FIELDS}
runId={run_id}
setFilter={this.setFilter}
customFilters={{'result': filters['result']}}
/>,
]
return (
<Card className="pf-u-mt-lg">
Expand Down Expand Up @@ -314,7 +242,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
143 changes: 142 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,23 @@ 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,
toAPIFilter,
} from '../utilities';

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

export class FilterTable extends React.Component {
Expand Down Expand Up @@ -160,3 +169,135 @@ 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
const {customFilters} = this.props

console.log('CUSTOMFILTER: '+customFilters)
if (fieldSelection !== null) {
let api_filter = toAPIFilter(customFilters).join()
console.log('APIFILTER: '+customFilters)

fetch(buildUrl(Settings.serverUrl + '/widget/result-aggregator',
{
group_field: fieldSelection,
run_id: this.props.runId,
additional_filters: api_filter,
}
))
.then(response => response.json())
.then(data => {
this.setState({valueOptions: data})
})
}
}

render () {
const {isFieldOpen, fieldSelection, isValueOpen, valueOptions, valueSelections} = this.state;
let field_selected = this.state.fieldSelection !== null;
let values_available = valueOptions.length > 0;
let value_placeholder = "Select a field first" ; // default instead of an else block
if (field_selected && values_available){ value_placeholder = "Select value(s)";}
else if (field_selected && !values_available) { value_placeholder = "No values for selected field";}
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}/>
))}
</Select>
<Select key="metavalue_select"
typeAheadAriaLabel={value_placeholder}
placeholderText={value_placeholder}
variant={SelectVariant.typeaheadMulti}
isOpen={isValueOpen}
selections={valueSelections}
maxHeight={"1140%"}
isDisabled={!field_selected || (field_selected && !values_available) }
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
Loading

0 comments on commit a274ab1

Please sign in to comment.