Skip to content

Commit

Permalink
Convert ClassifyFailureTable to functional
Browse files Browse the repository at this point in the history 
Convert classification dropdown
  • Loading branch information
@mshriver
mshriver committed Feb 18, 2025
1 parent 4335ae5 commit d14f0a3
Show file tree
Hide file tree
Showing 5 changed files with 303 additions and 312 deletions.
195 changes: 90 additions & 105 deletions frontend/src/components/classification-dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

import {
Expand All @@ -12,125 +12,110 @@ import { HttpClient } from '../services/http';
import { Settings } from '../settings';
import { CLASSIFICATION } from '../constants.js';

const ClassificationDropdown = (props) => {
const [testResult, setTestResult] = useState(props.testResult);
const [classificationOpen, setclassificationOpen] = useState(false);

export class ClassificationDropdown extends React.Component {
static propTypes = {
testResult: PropTypes.object,
const onClassificationSelect = (_event, selection) => {
setTestResult({
...testResult,
'metadata': {
...testResult.metadata,
'classification': selection
}
});
setclassificationOpen(!classificationOpen);
HttpClient.put([Settings.serverUrl, 'result', testResult['id']], {}, testResult)
.catch(error => console.log(error));
};

constructor (props) {
super(props);
this.state = {
testResult: this.props.testResult,
isClassificationOpen: false
};
}
useEffect(()=>{
setTestResult(props.testResult);
}, [props]);

componentDidUpdate (prevProps) {
if (prevProps !== this.props) {
this.setState({testResult: this.props.testResult});
}
}
return (
<Dropdown
isOpen={classificationOpen}
onSelect={onClassificationSelect}
onOpenChange={() => setclassificationOpen(false)}
toggle={toggleRef => (
<MenuToggle
ref={toggleRef}
onClick={() => setclassificationOpen(!classificationOpen)}
isExpanded={classificationOpen}
>
{CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
</MenuToggle>
)}
>
<DropdownList>
{Object.keys(CLASSIFICATION).map((key) => (
<DropdownItem key={key} value={key}>
{CLASSIFICATION[key]}
</DropdownItem>
))}
</DropdownList>
</Dropdown>
);
};

onClassificationToggle = () => {
this.setState({isClassificationOpen: !this.state.isClassificationOpen});
};
ClassificationDropdown.propTypes = {
testResult: PropTypes.object,
};

onClassificationSelect = (_event, selection) => {
let testResult = this.state.testResult;
testResult['metadata']['classification'] = selection;
this.setState({testResult: testResult, isClassificationOpen: !this.state.isClassificationOpen});
HttpClient.put([Settings.serverUrl, 'result', testResult['id']], {}, testResult);
};

render () {
const testResult = this.state.testResult;
return (
<Dropdown
isOpen={this.state.isClassificationOpen}
onSelect={this.onClassificationSelect}
onOpenChange={() => this.setState({isClassificationOpen: false})}
toggle={toggleRef => (
<MenuToggle
ref={toggleRef}
onClick={this.onClassificationToggle}
isExpanded={this.state.isClassificationOpen}
>
{CLASSIFICATION[testResult.metadata && testResult.metadata.classification] || '(unset)'}
</MenuToggle>
)}
>
<DropdownList>
{Object.keys(CLASSIFICATION).map((key) => (
<DropdownItem key={key} value={key}>
{CLASSIFICATION[key]}
</DropdownItem>
))}
</DropdownList>
</Dropdown>
);
}
}

export class MultiClassificationDropdown extends React.Component {
static propTypes = {
selectedResults: PropTypes.array,
refreshFunc: PropTypes.func
};
function MultiClassificationDropdown (props) {
const [classificationOpen, setclassificationOpen] = useState(false);
const {
selectedResults,
refreshFunc
} = props;

constructor (props) {
super(props);
this.state = {
isClassificationOpen: false
};
}

onClassificationToggle = isOpen => {
this.setState({isClassificationOpen: isOpen});
};

onClassificationSelect = event => {
const { selectedResults } = this.props;
function onClassificationSelect (event) {
let classification = event.target.getAttribute('value');
if (selectedResults.length === 0) {
this.setState({isClassificationOpen: !this.state.isClassificationOpen});

setclassificationOpen(!classificationOpen);
}
else {
selectedResults.forEach(result => {
result['metadata']['classification'] = classification;
HttpClient.put([Settings.serverUrl, 'result', result['id']], {}, result)
.then(this.props.refreshFunc());
.then(refreshFunc());
});
this.setState({isClassificationOpen: !this.state.isClassificationOpen});
setclassificationOpen(!classificationOpen);
}
};

render () {
const { selectedResults } = this.props;
return (
<Dropdown
isOpen={this.state.isClassificationOpen}
onSelect={this.onClassificationSelect}
onOpenChange={() => this.setState({isClassificationOpen: false})}
toggle={toggleRef => (
<MenuToggle
ref={toggleRef}
isDisabled={selectedResults.length === 0}
onClick={this.onClassificationToggle}
isExpanded={this.state.isClassificationOpen}
>
Classify Selected Failures
</MenuToggle>
)}
>
<DropdownList>
{Object.keys(CLASSIFICATION).map((key) => (
<DropdownItem key={key} value={key}>
{CLASSIFICATION[key]}
</DropdownItem>
))}
</DropdownList>
</Dropdown>
);
}
}
return (
<Dropdown
isOpen={classificationOpen}
onSelect={onClassificationSelect}
onOpenChange={() => setclassificationOpen(false)}
toggle={toggleRef => (
<MenuToggle
ref={toggleRef}
isDisabled={selectedResults.length === 0}
onClick={() => setclassificationOpen(!classificationOpen)}
isExpanded={classificationOpen}
>
Classify Selected Failures
</MenuToggle>
)}
>
<DropdownList>
{Object.keys(CLASSIFICATION).map((key) => (
<DropdownItem key={key} value={key}>
{CLASSIFICATION[key]}
</DropdownItem>
))}
</DropdownList>
</Dropdown>
);
};

MultiClassificationDropdown.propTypes = {
selectedResults: PropTypes.array,
refreshFunc: PropTypes.func
};

export {ClassificationDropdown, MultiClassificationDropdown};
Loading

0 comments on commit d14f0a3

Please sign in to comment.