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
+288
−93
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import React, { Component, Fragment } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { string, bool, func, oneOfType, object, array } from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
| import { equals, assocPath } from 'ramda'; | ||
| import cloneDeep from 'lodash.clonedeep'; | ||
|
|
@@ -11,6 +11,8 @@ import List from '@material-ui/core/List'; | |
| import ListItem from '@material-ui/core/ListItem'; | ||
| import ListItemText from '@material-ui/core/ListItemText'; | ||
| import ListSubheader from '@material-ui/core/ListSubheader'; | ||
| import TableRow from '@material-ui/core/TableRow'; | ||
| import TableCell from '@material-ui/core/TableCell'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
| import Switch from '@material-ui/core/Switch'; | ||
| import FormGroup from '@material-ui/core/FormGroup'; | ||
|
|
@@ -21,17 +23,19 @@ import Typography from '@material-ui/core/Typography'; | |
| import FlashIcon from 'mdi-react/FlashIcon'; | ||
| import PlusIcon from 'mdi-react/PlusIcon'; | ||
| import DeleteIcon from 'mdi-react/DeleteIcon'; | ||
| import ContentSaveIcon from 'mdi-react/ContentSaveIcon'; | ||
| import { docs } from 'taskcluster-lib-urls'; | ||
| import Label from '@mozilla-frontend-infra/components/Label'; | ||
| import ErrorPanel from '../ErrorPanel'; | ||
| import DataTable from '../DataTable'; | ||
| import Button from '../Button'; | ||
| import SpeedDial from '../SpeedDial'; | ||
| import SpeedDialAction from '../SpeedDialAction'; | ||
| import DialogAction from '../DialogAction'; | ||
| import DateDistance from '../DateDistance'; | ||
| import { hook } from '../../utils/prop-types'; | ||
| import removeKeys from '../../utils/removeKeys'; | ||
| import ToggleView from '../ToggleView'; | ||
|
|
||
| const initialHook = { | ||
| metadata: { | ||
|
|
@@ -114,12 +118,24 @@ const initialHook = { | |
| subheader: { | ||
| fontSize: theme.typography.pxToRem(16), | ||
| }, | ||
| displayBlock: { | ||
| display: 'block', | ||
| }, | ||
| errorTableCell: { | ||
| whiteSpace: 'normal', | ||
| }, | ||
| errorPanel: { | ||
| maxHeight: '300px', | ||
|
There was a problem hiding this comment. No need to put quotations when the units are
|
||
| maxWidth: '75ch', | ||
| overflowY: 'scroll', | ||
| }, | ||
| })) | ||
| /** A form to view/edit/create a hook */ | ||
| export default class HookForm extends Component { | ||
| static defaultProps = { | ||
| isNewHook: false, | ||
| hook: initialHook, | ||
| hookLastFires: null, | ||
| onTriggerHook: null, | ||
| onCreateHook: null, | ||
| onUpdateHook: null, | ||
|
|
@@ -129,8 +145,12 @@ export default class HookForm extends Component { | |
| }; | ||
|
|
||
| static propTypes = { | ||
| /** Part of a GraphQL hook response containing info about that hook. | ||
| Not needed when creating a new hook */ | ||
| hook: hook.isRequired, | ||
| /** Part of the same Grahql hook response as above containing info | ||
| about some last hook fired attempts */ | ||
| hookLastFires: array, | ||
| /** Set to `true` when creating a new hook. */ | ||
| isNewHook: bool, | ||
| /** Callback function fired when a hook is triggered. */ | ||
|
|
@@ -153,6 +173,7 @@ export default class HookForm extends Component { | |
|
|
||
| state = { | ||
| hook: null, | ||
| hookLastFires: null, | ||
| // eslint-disable-next-line react/no-unused-state | ||
| previousHook: null, | ||
| taskInput: '', | ||
|
|
@@ -165,14 +186,18 @@ export default class HookForm extends Component { | |
| }; | ||
|
|
||
| static getDerivedStateFromProps(props, state) { | ||
| if ( | ||
| equals(props.hook, state.previousHook) && | ||
| equals(props.hookLastFires, state.hookLastFires) | ||
| ) { | ||
| return null; | ||
| } | ||
|
|
||
| const hook = props.isNewHook ? initialHook : props.hook; | ||
|
|
||
| return { | ||
| hook: props.hook, | ||
| hookLastFires: props.hookLastFires, | ||
| previousHook: props.hook, | ||
| taskInput: JSON.stringify( | ||
| removeKeys(cloneDeep(hook.task), ['__typename']), | ||
|
|
@@ -412,10 +437,9 @@ export default class HookForm extends Component { | |
| triggerSchemaInput, | ||
| triggerContextInput, | ||
| hook, | ||
| hookLastFires, | ||
| validation, | ||
| } = this.state; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
|
|
@@ -508,61 +532,70 @@ export default class HookForm extends Component { | |
| /> | ||
| </FormGroup> | ||
| </ListItem> | ||
| <ListItem className={classes.displayBlock}> | ||
| <ListItemText | ||
| primary={ | ||
| <Typography variant="subtitle1"> | ||
| Last Hook Fire Attempts | ||
| </Typography> | ||
| } | ||
| /> | ||
| {hookLastFires && ( | ||
| <DataTable | ||
| items={hookLastFires} | ||
| headers={['Task ID', 'FiredBy', 'Result', 'Attempted', 'Error']} | ||
| isPaginate | ||
| renderRow={hookFire => ( | ||
| <TableRow key={hookFire.taskId}> | ||
| <TableCell> | ||
| {(hookFire.result === 'SUCCESS' && ( | ||
| <Link to={`/tasks/${hookFire.taskId}`}> | ||
| <Typography>{hookFire.taskId}</Typography> | ||
| </Link> | ||
|
There was a problem hiding this comment. Right now it looks like:
It should look like this:
This will make it look like any other link in a table to the rest of the app. Here's an example: The Worker ID column in the Workers view. There was a problem hiding this comment. If the lastfire result is There was a problem hiding this comment. From https://github.com/taskcluster/taskcluster-web/pull/413/files#r254810845, we could remove the link icon when the task has an error. |
||
| )) || <Typography>{hookFire.taskId}</Typography>} | ||
| </TableCell> | ||
| <TableCell> | ||
| <Typography>{hookFire.firedBy}</Typography> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Label mini status={hookFire.result.toLowerCase()}> | ||
| {hookFire.result} | ||
| </Label> | ||
| </TableCell> | ||
| <TableCell> | ||
| <DateDistance from={hookFire.taskCreateTime} /> | ||
| </TableCell> | ||
| <TableCell className={classes.errorTableCell}> | ||
| {(hookFire.result === 'ERROR' && ( | ||
| <ToggleView | ||
| panel={ | ||
| <ErrorPanel | ||
| className={classes.errorPanel} | ||
| error={hookFire.error} | ||
| onClose={null} | ||
| /> | ||
| } | ||
| /> | ||
| )) || <Typography>n/a</Typography>} | ||
| </TableCell> | ||
| </TableRow> | ||
| )} | ||
| /> | ||
| )} | ||
| </ListItem> | ||
| {!isNewHook && ( | ||
| <ListItem> | ||
| <ListItemText | ||
| primary="Next Scheduled Fire" | ||
| secondary={ | ||
| hook.status.nextScheduledDate ? ( | ||
| <DateDistance from={hook.status.nextScheduledDate} /> | ||
| ) : ( | ||
| 'n/a' | ||
| ) | ||
| } | ||
| /> | ||
| </ListItem> | ||
| )} | ||
| <List> | ||
| <ListItem> | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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)?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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!