From db95e9e6dbddb8feddb6352174676356207db40c Mon Sep 17 00:00:00 2001 From: avelichk Date: Thu, 2 Jul 2020 17:11:27 +0100 Subject: [PATCH 1/3] Enable sort in Trials table --- .../src/components/HP/Monitor/HPJobTable.jsx | 125 +++++++++++++----- 1 file changed, 93 insertions(+), 32 deletions(-) diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx index b3f5a2c7e68..3a1d9ec73c9 100644 --- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx +++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx @@ -6,6 +6,7 @@ import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; +import TableSortLabel from '@material-ui/core/TableSortLabel'; import { connect } from 'react-redux'; import { fetchHPJobTrialInfo } from '../../../actions/hpMonitorActions'; @@ -21,10 +22,11 @@ const styles = theme => ({ table: { minWidth: 700, }, - hover: { + trialName: { '&:hover': { cursor: 'pointer', }, + width: '20%', }, created: { color: theme.colors.created, @@ -44,48 +46,83 @@ const styles = theme => ({ }); class HPJobTable extends React.Component { - fetchAndOpenDialogTrial = trialName => event => { + fetchAndOpenDialogTrial = trialName => () => { this.props.fetchHPJobTrialInfo(trialName, this.props.namespace); }; + constructor(props) { + super(props); + this.state = { orderByIdx: 1, order: 'asc' }; + } + + onChangeSortHeaderIndex = headerIndex => () => { + if (headerIndex !== undefined) { + const isAsc = this.state.orderByIdx === headerIndex && this.state.order === 'asc'; + this.setState(isAsc ? { order: 'desc' } : { order: 'asc' }); + this.setState({ orderByIdx: headerIndex }); + } + }; + + descendingComparator = (a, b) => { + if (b[this.state.orderByIdx] < a[this.state.orderByIdx]) { + return -1; + } + if (b[this.state.orderByIdx] > a[this.state.orderByIdx]) { + return 1; + } + return 0; + }; + + getComparator = () => { + return this.state.order === 'desc' + ? (a, b) => this.descendingComparator(a, b) + : (a, b) => -this.descendingComparator(a, b); + }; + + stableSort = (data, comparator) => { + const stabilizedData = data.map((el, index) => [el, index]); + stabilizedData.sort((a, b) => { + console.log(comparator); + const order = comparator(a[0], b[0]); + if (order !== 0) return order; + return a[1] - b[1]; + }); + return stabilizedData.map(el => el[0]); + }; + render() { const { classes } = this.props; - let header = []; - let data = []; - if (this.props.jobData && this.props.jobData.length > 1) { - header = this.props.jobData[0]; - // TODO: Add sorting by each table column - // Sort jobData by Trial Status - data = this.props.jobData.slice(1).sort(function(a, b) { - if (a[1] < b[1]) { - return -1; - } - if (a[1] > b[1]) { - return 1; - } - return 0; - }); - } return ( {this.props.jobData.length > 1 && ( - {header.map(header => ( - {header} + {this.props.headers.map((header, idx) => ( + + + {header} + + ))} - {data.map((row, id) => ( - + {this.stableSort(this.props.data, this.getComparator()).map((row, idx) => ( + {row.map((element, index) => { if (index === 0 && row[1] === 'Succeeded') { return ( {element}; + return ( + + {element} + + ); } else if (element === 'Running') { - return {element}; + return ( + + {element} + + ); } else if (element === 'Succeeded') { - return {element}; + return ( + + {element} + + ); } else if (element === 'Killed') { - return {element}; + return ( + + {element} + + ); } else if (element === 'Failed') { - return {element}; + return ( + + {element} + + ); } } - return {element}; + return {element}; })} ))} @@ -119,8 +176,12 @@ class HPJobTable extends React.Component { } } -const mapStateToProps = state => ({ - jobData: state[HP_MONITOR_MODULE].jobData, -}); +const mapStateToProps = state => { + return { + jobData: state[HP_MONITOR_MODULE].jobData, + headers: state[HP_MONITOR_MODULE].jobData[0], + data: state[HP_MONITOR_MODULE].jobData.slice(1), + }; +}; export default connect(mapStateToProps, { fetchHPJobTrialInfo })(withStyles(styles)(HPJobTable)); From 465b196328d6ea28899c875de61e23a7521a163b Mon Sep 17 00:00:00 2001 From: avelichk Date: Thu, 2 Jul 2020 17:35:58 +0100 Subject: [PATCH 2/3] Remove console log --- .../frontend/src/components/HP/Monitor/HPJobTable.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx index 3a1d9ec73c9..c2d486ca188 100644 --- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx +++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { connect } from 'react-redux'; + import { withStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; @@ -8,9 +10,7 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import TableSortLabel from '@material-ui/core/TableSortLabel'; -import { connect } from 'react-redux'; import { fetchHPJobTrialInfo } from '../../../actions/hpMonitorActions'; - import { HP_MONITOR_MODULE } from '../../../constants/constants'; const styles = theme => ({ @@ -82,7 +82,6 @@ class HPJobTable extends React.Component { stableSort = (data, comparator) => { const stabilizedData = data.map((el, index) => [el, index]); stabilizedData.sort((a, b) => { - console.log(comparator); const order = comparator(a[0], b[0]); if (order !== 0) return order; return a[1] - b[1]; From 3249555a31d74b816ef3a605652a449ac2377e87 Mon Sep 17 00:00:00 2001 From: avelichk Date: Thu, 2 Jul 2020 18:51:49 +0100 Subject: [PATCH 3/3] Modify cell width --- .../v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx index c2d486ca188..19ec18d19a9 100644 --- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx +++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobTable.jsx @@ -26,7 +26,7 @@ const styles = theme => ({ '&:hover': { cursor: 'pointer', }, - width: '20%', + width: 300, }, created: { color: theme.colors.created,