Repository: aurora Updated Branches: refs/heads/master 5201cf16a -> 1d386a32e
Clean up TaskList component layout. Reviewed at https://reviews.apache.org/r/63281/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/1d386a32 Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/1d386a32 Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/1d386a32 Branch: refs/heads/master Commit: 1d386a32ee2c524eb62573ad6d76c84a9aab80f6 Parents: 5201cf1 Author: David McLaughlin <[email protected]> Authored: Thu Oct 26 11:45:56 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Thu Oct 26 11:45:56 2017 -0700 ---------------------------------------------------------------------- ui/src/main/js/components/TaskList.js | 62 +------------------- ui/src/main/js/components/TaskListItem.js | 61 +++++++++++++++++++ .../main/js/components/TaskListItemActions.js | 9 +++ .../js/components/__tests__/TaskList-test.js | 17 ------ .../components/__tests__/TaskListItem-test.js | 22 +++++++ 5 files changed, 94 insertions(+), 77 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/1d386a32/ui/src/main/js/components/TaskList.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskList.js b/ui/src/main/js/components/TaskList.js index e1685ce..c0815cf 100644 --- a/ui/src/main/js/components/TaskList.js +++ b/ui/src/main/js/components/TaskList.js @@ -1,71 +1,13 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import Icon from 'components/Icon'; import Pagination from 'components/Pagination'; -import { RelativeTime } from 'components/Time'; -import TaskStateMachine from 'components/TaskStateMachine'; +import TaskListItem from 'components/TaskListItem'; import { pluralize } from 'utils/Common'; -import { getClassForScheduleStatus, getDuration, getLastEventTime, isActive } from 'utils/Task'; +import { getClassForScheduleStatus, getLastEventTime } from 'utils/Task'; import { SCHEDULE_STATUS } from 'utils/Thrift'; -export class TaskListItem extends React.Component { - constructor(props) { - super(props); - this.state = {expand: props.expand || false}; - } - - toggleExpand() { - this.setState({expanded: !this.state.expanded}); - } - - render() { - const task = this.props.task; - const { role, environment, name } = task.assignedTask.task.job; - const latestEvent = task.taskEvents[task.taskEvents.length - 1]; - const active = isActive(task); - const stateMachine = (this.state.expanded) ? <TaskStateMachine task={task} /> : ''; - return (<tr className={this.state.expanded ? 'expanded' : ''}> - <td> - <div className='task-list-item-instance'> - <Link - to={`/scheduler/${role}/${environment}/${name}/${task.assignedTask.instanceId}`}> - {task.assignedTask.instanceId} - </Link> - </div> - </td> - <td className='task-list-item-col'> - <div className='task-list-item'> - <span className='task-list-item-status'> - {SCHEDULE_STATUS[task.status]} - </span> - <span className={`img-circle ${getClassForScheduleStatus(task.status)}`} /> - <span className='task-list-item-time'> - {active ? 'since' : ''} <RelativeTime ts={getLastEventTime(task)} /> - </span> - {active ? '' - : <span className='task-list-item-duration'>(ran for {getDuration(task)})</span>} - <span className='task-list-item-expander' onClick={(e) => this.toggleExpand()}> - ... - </span> - <span className='task-list-item-message'> - {latestEvent.message} - </span> - </div> - {stateMachine} - </td> - <td> - <div className='task-list-item-host'> - <a href={`http://${task.assignedTask.slaveHost}:1338/task/${task.assignedTask.taskId}`}> - {task.assignedTask.slaveHost} - </a> - </div> - </td> - </tr>); - } -} - // VisibleForTesting export function searchTask(task, userQuery) { const query = userQuery.toLowerCase(); http://git-wip-us.apache.org/repos/asf/aurora/blob/1d386a32/ui/src/main/js/components/TaskListItem.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskListItem.js b/ui/src/main/js/components/TaskListItem.js new file mode 100644 index 0000000..ab8a23f --- /dev/null +++ b/ui/src/main/js/components/TaskListItem.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import TaskListItemActions from 'components/TaskListItemActions'; +import TaskStateMachine from 'components/TaskStateMachine'; +import { RelativeTime } from 'components/Time'; + +import { getClassForScheduleStatus, getDuration, getLastEventTime, isActive } from 'utils/Task'; +import { SCHEDULE_STATUS } from 'utils/Thrift'; + +export default class TaskListItem extends React.Component { + constructor(props) { + super(props); + this.state = {expand: props.expand || false}; + } + + toggleExpand() { + this.setState({expanded: !this.state.expanded}); + } + + render() { + const task = this.props.task; + const { role, environment, name } = task.assignedTask.task.job; + const latestEvent = task.taskEvents[task.taskEvents.length - 1]; + const active = isActive(task); + const stateMachine = (this.state.expanded) ? <TaskStateMachine task={task} /> : ''; + return (<tr className={this.state.expanded ? 'expanded' : ''}> + <td> + <div className='task-list-item-instance'> + <Link + to={`/scheduler/${role}/${environment}/${name}/${task.assignedTask.instanceId}`}> + {task.assignedTask.instanceId} + </Link> + </div> + </td> + <td className='task-list-item-col'> + <div className='task-list-item'> + <span className='task-list-item-status'> + {SCHEDULE_STATUS[task.status]} + </span> + <span className={`img-circle ${getClassForScheduleStatus(task.status)}`} /> + <span className='task-list-item-time'> + {active ? 'since' : ''} <RelativeTime ts={getLastEventTime(task)} /> + </span> + {active ? '' + : <span className='task-list-item-duration'>(ran for {getDuration(task)})</span>} + <span className='task-list-item-expander' onClick={(e) => this.toggleExpand()}> + ... + </span> + <span className='task-list-item-message'> + {latestEvent.message} + </span> + </div> + {stateMachine} + </td> + <td> + <TaskListItemActions task={task} /> + </td> + </tr>); + } +} http://git-wip-us.apache.org/repos/asf/aurora/blob/1d386a32/ui/src/main/js/components/TaskListItemActions.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskListItemActions.js b/ui/src/main/js/components/TaskListItemActions.js new file mode 100644 index 0000000..781a86d --- /dev/null +++ b/ui/src/main/js/components/TaskListItemActions.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function ({ task }) { + return (<div className='task-list-item-host'> + <a href={`http://${task.assignedTask.slaveHost}:1338/task/${task.assignedTask.taskId}`}> + {task.assignedTask.slaveHost} + </a> + </div>); +} http://git-wip-us.apache.org/repos/asf/aurora/blob/1d386a32/ui/src/main/js/components/__tests__/TaskList-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/__tests__/TaskList-test.js b/ui/src/main/js/components/__tests__/TaskList-test.js index c222b61..948e86b 100644 --- a/ui/src/main/js/components/__tests__/TaskList-test.js +++ b/ui/src/main/js/components/__tests__/TaskList-test.js @@ -4,29 +4,12 @@ import { shallow } from 'enzyme'; import { TaskListControls, TaskListStatusFilter, - TaskListItem, TaskListStatus, searchTask } from '../TaskList'; -import TaskStateMachine from '../TaskStateMachine'; import { AssignedTaskBuilder, ScheduledTaskBuilder } from 'test-utils/TaskBuilders'; -describe('TaskListItem', () => { - it('Should not show any state machine element by default', () => { - const el = shallow(<TaskListItem task={ScheduledTaskBuilder.build()} />); - expect(el.find(TaskStateMachine).length).toBe(0); - expect(el.find('tr.expanded').length).toBe(0); - }); - - it('Should show the state machine and add expanded to row when expand link is clicked', () => { - const el = shallow(<TaskListItem task={ScheduledTaskBuilder.build()} />); - el.find('.task-list-item-expander').simulate('click'); - expect(el.find(TaskStateMachine).length).toBe(1); - expect(el.find('tr.expanded').length).toBe(1); - }); -}); - describe('TaskListControls', () => { it('Should attach active to default list element', () => { const el = shallow(<TaskListControls http://git-wip-us.apache.org/repos/asf/aurora/blob/1d386a32/ui/src/main/js/components/__tests__/TaskListItem-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/__tests__/TaskListItem-test.js b/ui/src/main/js/components/__tests__/TaskListItem-test.js new file mode 100644 index 0000000..e191a44 --- /dev/null +++ b/ui/src/main/js/components/__tests__/TaskListItem-test.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import TaskListItem from '../TaskListItem'; +import TaskStateMachine from '../TaskStateMachine'; + +import { ScheduledTaskBuilder } from 'test-utils/TaskBuilders'; + +describe('TaskListItem', () => { + it('Should not show any state machine element by default', () => { + const el = shallow(<TaskListItem task={ScheduledTaskBuilder.build()} />); + expect(el.find(TaskStateMachine).length).toBe(0); + expect(el.find('tr.expanded').length).toBe(0); + }); + + it('Should show the state machine and add expanded to row when expand link is clicked', () => { + const el = shallow(<TaskListItem task={ScheduledTaskBuilder.build()} />); + el.find('.task-list-item-expander').simulate('click'); + expect(el.find(TaskStateMachine).length).toBe(1); + expect(el.find('tr.expanded').length).toBe(1); + }); +});
