Skip to content
This repository has been archived by the owner on Mar 23, 2019. It is now read-only.

Bug 1520857- add support in tc-web for displaying information from the lastFire table #413

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Bug 1520857- add support in tc-web for displaying information from the lastFire table #413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c57174f
Initial display of lastfire fires
Biboswan Jan 23, 2019
7a33df8
Improve responsiveness and overall ui with Grid
Biboswan Jan 24, 2019
5b5c97d
Remove unwanted class
Biboswan Jan 24, 2019
a154a50
Merge two hook graphql queries into one
Biboswan Jan 25, 2019
f55678d
Replace expansion panel with datatable
Biboswan Jan 25, 2019
c5f5a16
Add pagination
Biboswan Feb 6, 2019
87993e3
minor fix
Biboswan Feb 15, 2019
f98d385
Add toggle view for error
Biboswan Feb 15, 2019
4674382
Add drawer to display error info
Biboswan Feb 22, 2019
0156365
Minor tweak
Biboswan Feb 22, 2019
e238f6f
add link icon for taskids
Biboswan Feb 23, 2019
8bb249f
minor tweak
Biboswan Feb 25, 2019
2b28062
Remove 1-20 part and text rename
Biboswan Mar 13, 2019
aa51ef9
add scrollbar
Biboswan Mar 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion src/components/DataTable/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import {
oneOf,
oneOfType,
object,
bool,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we adding pagination? Is the last fire endpoint paginated (i.e., uses continuation token)?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per discussion with Dustin in irc we are keeping as many as 100 lastfire info rows for each hookId (expiration logic). Hence I think showing all rows at once won't be good.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also only purge those once per day, so a particularly active hook might have many more rows than that at some time during the day!

} from 'prop-types';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';

/**
* A table to display a set of data elements.
Expand All @@ -26,6 +28,12 @@ export default class DataTable extends Component {
sortByHeader: null,
sortDirection: 'desc',
noItemsMessage: 'No items for this page.',
isPaginate: false,
};

state = {
page: 0,
rowsPerPage: 10,
};

static propTypes = {
Expand Down Expand Up @@ -66,6 +74,10 @@ export default class DataTable extends Component {
* A message to display when there is no items to display.
*/
noItemsMessage: string,
/**
* Whether to paginate the table
*/
isPaginate: bool,
};

handleHeaderClick = ({ target }) => {
Expand All @@ -76,6 +88,14 @@ export default class DataTable extends Component {
}
};

handleChangePage = (event, page) => {
this.setState({ page });
};

handleChangeRowsPerPage = event => {
this.setState({ rowsPerPage: event.target.value });
};

render() {
const {
items,
Expand All @@ -85,8 +105,10 @@ export default class DataTable extends Component {
sortByHeader,
sortDirection,
noItemsMessage,
isPaginate,
} = this.props;
const colSpan = columnsSize || (headers && headers.length) || 0;
const { page, rowsPerPage } = this.state;

return (
<Table>
Expand Down Expand Up @@ -115,9 +137,28 @@ export default class DataTable extends Component {
</TableCell>
</TableRow>
) : (
items.map(renderRow)
items
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(renderRow)
)}
</TableBody>
{isPaginate && (
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={items.length}
rowsPerPage={rowsPerPage}
page={page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
)}
</Table>
);
}
Expand Down
29 changes: 23 additions & 6 deletions src/components/HookForm/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { equals, assocPath } from 'ramda';
import cloneDeep from 'lodash.clonedeep';
import CodeEditor from '@mozilla-frontend-infra/components/CodeEditor';
import Code from '@mozilla-frontend-infra/components/Code';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
Expand Down Expand Up @@ -184,6 +188,8 @@ export default class HookForm extends Component {
validation: {},
};

expandsionSummary = React.createRef();

static getDerivedStateFromProps(props, state) {
if (
equals(props.hook, state.previousHook) &&
Expand Down Expand Up @@ -439,8 +445,8 @@ export default class HookForm extends Component {
hookLastFires,
validation,
} = this.state;
/* eslint-disable-next-line no-underscore-dangle */

/* eslint-disable-next-line no-underscore-dangle */
return (
<Fragment>
<List>
Expand Down Expand Up @@ -544,6 +550,7 @@ export default class HookForm extends Component {
<DataTable
items={hookLastFires}
headers={['Task ID', 'FiredBy', 'Result', 'Attempted', 'Error']}
isPaginate
renderRow={hookFire => (
<TableRow key={hookFire.taskId}>
<TableCell>
Expand All @@ -566,11 +573,21 @@ export default class HookForm extends Component {
</TableCell>
<TableCell className={classes.errorTableCell}>
{(hookFire.result === 'ERROR' && (
<ErrorPanel
className={classes.errorPanel}
error={hookFire.error}
onClose={null}
/>
<ExpansionPanel>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a hook I can see where hookFire.result === 'ERROR'? I want to see how it looks in the UI.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of having an expansion panel for each error, we should instead have a button that opens a drawer with the error on click. This is similar to https://taskcluster-web.netlify.com/provisioners/aws-provisioner-v1 when clicking the info icon. The drawer can display the ErrorPanel component.

screen shot 2019-02-11 at 10 59 46 am

<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>
Show/Hide
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<ErrorPanel
className={classes.errorPanel}
error={hookFire.error}
onClose={null}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
)) || <Typography>N/A</Typography>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use lower case n/a.

</TableCell>
</TableRow>
Expand Down