You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@aurora.apache.org by dm...@apache.org on 2017/10/26 18:49:13 UTC
aurora git commit: Clean up TaskList component layout.
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 <da...@dmclaughlin.com>
Authored: Thu Oct 26 11:45:56 2017 -0700
Committer: David McLaughlin <da...@dmclaughlin.com>
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);
+ });
+});