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
+288 −93
Open

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

Show file tree
Hide file tree
Changes from all commits
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
4 changes: 2 additions & 2 deletions src/components/Button/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default class Button extends Component {
spanProps: object,
};

handleButtonClick = () => {
handleButtonClick = e => {
const { onClick, track } = this.props;

if (track && process.env.GA_TRACKING_ID) {
Expand All @@ -60,7 +60,7 @@ export default class Button extends Component {
}

if (onClick) {
onClick();
onClick(e);
}
};

Expand Down
117 changes: 87 additions & 30 deletions src/components/DataTable/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import {
arrayOf,
func,
Expand All @@ -7,14 +7,28 @@ 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 { withStyles } from '@material-ui/core/styles';
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';

@withStyles(() => ({
noDisplay: {
visibility: 'hidden',
},
table: {
minWidth: 1020,
},
tableWrapper: {
overflowX: 'auto',
},
}))
/**
* A table to display a set of data elements.
*/
Expand All @@ -26,6 +40,11 @@ export default class DataTable extends Component {
sortByHeader: null,
sortDirection: 'desc',
noItemsMessage: 'No items for this page.',
isPaginate: false,
};

state = {
page: 0,
};

static propTypes = {
Expand Down Expand Up @@ -66,6 +85,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,49 +99,83 @@ export default class DataTable extends Component {
}
};

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

render() {
const {
classes,
items,
columnsSize,
renderRow,
headers,
sortByHeader,
sortDirection,
noItemsMessage,
isPaginate,
} = this.props;
const colSpan = columnsSize || (headers && headers.length) || 0;
const { page } = this.state;
const rowsPerPage = 5;

return (
<Table>
{headers && (
<TableHead>
<TableRow>
{headers.map(header => (
<TableCell key={`table-header-${header}`}>
<TableSortLabel
id={header}
active={header === sortByHeader}
direction={sortDirection || 'desc'}
onClick={this.handleHeaderClick}>
{header}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
<Fragment>
<div className={classes.tableWrapper}>
<Table className={classes.table}>
{headers && (
<TableHead>
<TableRow>
{headers.map(header => (
<TableCell key={`table-header-${header}`}>
<TableSortLabel
id={header}
active={header === sortByHeader}
direction={sortDirection || 'desc'}
onClick={this.handleHeaderClick}>
{header}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
)}
<TableBody>
{items.length === 0 ? (
<TableRow>
<TableCell colSpan={colSpan}>
<em>{noItemsMessage}</em>
</TableCell>
</TableRow>
) : (
items
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(renderRow)
)}
</TableBody>
</Table>
</div>
{isPaginate && (
<TablePagination
classes={{
spacer: classes.noDisplay,
caption: classes.noDisplay,
}}
component="div"
count={items.length}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[rowsPerPage]}
page={page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
/>
)}
<TableBody>
{items.length === 0 ? (
<TableRow>
<TableCell colSpan={colSpan}>
<em>{noItemsMessage}</em>
</TableCell>
</TableRow>
) : (
items.map(renderRow)
)}
</TableBody>
</Table>
</Fragment>
);
}
}
Loading