Repository: aurora Updated Branches: refs/heads/master 2edd34ba2 -> 7229711eb
Expose list of neighbors in the instance page Reviewed at https://reviews.apache.org/r/63062/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/7229711e Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/7229711e Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/7229711e Branch: refs/heads/master Commit: 7229711eb6e4ccbd5a7753a985b8936e46db2eab Parents: 2edd34b Author: Reza Motamedi <[email protected]> Authored: Fri Oct 20 10:44:50 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Fri Oct 20 10:44:50 2017 -0700 ---------------------------------------------------------------------- ui/src/main/js/components/TaskNeighbors.js | 27 ++++++++++++++++++++ ui/src/main/js/components/TaskStatus.js | 6 ++++- .../components/__tests__/TaskNeighbors-test.js | 22 ++++++++++++++++ ui/src/main/js/pages/Instance.js | 24 +++++++++++++++-- ui/src/main/js/utils/Common.js | 4 +++ ui/src/main/sass/components/_instance-page.scss | 14 ++++++++++ 6 files changed, 94 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/js/components/TaskNeighbors.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskNeighbors.js b/ui/src/main/js/components/TaskNeighbors.js new file mode 100644 index 0000000..72d49bb --- /dev/null +++ b/ui/src/main/js/components/TaskNeighbors.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { isNullyOrEmpty } from 'utils/Common'; + +export function NeighborTaskItem({ assignedTask }) { + const { role, environment, name } = assignedTask.task.job; + const taskKey = `${role}/${environment}/${name}/${assignedTask.instanceId}`; + return ( + <div> + <span className='task-neighbors-task-key'> + <Link to={`/beta/scheduler/${taskKey}`}> + {taskKey} + </Link> + </span> + </div> + ); +} + +export default function TaskNeighbors({ tasks }) { + return (isNullyOrEmpty(tasks) ? <div /> + : (<div className='active-task-neighbors'> + <h5>host neighbors</h5> + {tasks.map((t) => + <NeighborTaskItem assignedTask={t.assignedTask} key={t.assignedTask.taskId} />)} + </div>)); +} http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/js/components/TaskStatus.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskStatus.js b/ui/src/main/js/components/TaskStatus.js index b514918..2e5a2b4 100644 --- a/ui/src/main/js/components/TaskStatus.js +++ b/ui/src/main/js/components/TaskStatus.js @@ -3,11 +3,12 @@ import React from 'react'; import PanelGroup, { Container, StandardPanelTitle } from 'components/Layout'; import StateMachine from 'components/StateMachine'; import TaskDetails from 'components/TaskDetails'; +import TaskNeighbors from 'components/TaskNeighbors'; import { isNully } from 'utils/Common'; import { getClassForScheduleStatus, taskToStateMachine } from 'utils/Task'; -export default function TaskStatus({ task }) { +export default function TaskStatus({ task, neighbors }) { if (isNully(task)) { return (<Container> <PanelGroup title={<StandardPanelTitle title='Active Task' />}> @@ -27,6 +28,9 @@ export default function TaskStatus({ task }) { className={getClassForScheduleStatus(task.status)} states={taskToStateMachine(task)} /> </div> + <div className='col-md-12'> + <TaskNeighbors tasks={neighbors} /> + </div> </div> </PanelGroup> </Container>); http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/js/components/__tests__/TaskNeighbors-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/__tests__/TaskNeighbors-test.js b/ui/src/main/js/components/__tests__/TaskNeighbors-test.js new file mode 100644 index 0000000..dfe8ac6 --- /dev/null +++ b/ui/src/main/js/components/__tests__/TaskNeighbors-test.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import TaskNeighbors, { NeighborTaskItem } from '../TaskNeighbors'; + +describe('TaskNeighbors', () => { + it('Should contain empty div if empty', () => { + const tasks = []; + const el = shallow(<TaskNeighbors tasks={tasks} />); + expect(el.find(NeighborTaskItem).length).toBe(0); + expect(el.contains(<div />)).toBe(true); + }); + + it('Should be visible if not empty', () => { + const tasks = [ + {assignedTask: {taskId: 0}, job: {role: 'test-role', env: 'test-env', name: 'test-name'}}, + {assignedTask: {taskId: 1}, job: {role: 'test-role', env: 'test-env', name: 'test-name'}} + ]; + const el = shallow(<TaskNeighbors tasks={tasks} />); + expect(el.find(NeighborTaskItem).length).toBe(2); + }); +}); http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/js/pages/Instance.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/pages/Instance.js b/ui/src/main/js/pages/Instance.js index c4d625c..4b85545 100644 --- a/ui/src/main/js/pages/Instance.js +++ b/ui/src/main/js/pages/Instance.js @@ -10,7 +10,7 @@ import { isActive } from 'utils/Task'; export default class Instance extends React.Component { constructor(props) { super(props); - this.state = {cluster: '', tasks: [], loading: true}; + this.state = {cluster: '', tasks: [], loading: true, loadingNeighbors: true}; } componentWillMount(props) { @@ -31,6 +31,26 @@ export default class Instance extends React.Component { }); } + componentWillUpdate(nextProps, nextState) { + if (this.state.loading && !nextState.loading) { + const activeTask = nextState.tasks.find(isActive); + + const query = new TaskQuery(); + query.statuses = [ScheduleStatus.RUNNING]; + query.slaveHosts = [activeTask.assignedTask.slaveHost]; + + const that = this; + this.props.api.getTasksWithoutConfigs(query, (rsp) => { + const tasksOnAgent = rsp.result.scheduleStatusResult.tasks; + that.setState({ + neighborTasks: tasksOnAgent.filter(function (el) { + return el.assignedTask.taskId !== activeTask.assignedTask.taskId; + }) + }); + }); + } + } + render() { const { role, environment, name, instance } = this.props.match.params; if (this.state.loading) { @@ -46,7 +66,7 @@ export default class Instance extends React.Component { instance={instance} name={name} role={role} /> - <TaskStatus task={activeTask} /> + <TaskStatus neighbors={this.state.neighborTasks} task={activeTask} /> <InstanceHistory tasks={terminalTasks} /> </div>); } http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/js/utils/Common.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/utils/Common.js b/ui/src/main/js/utils/Common.js index 8f2da7c..603a11b 100644 --- a/ui/src/main/js/utils/Common.js +++ b/ui/src/main/js/utils/Common.js @@ -2,6 +2,10 @@ export function isNully(value) { return typeof value === 'undefined' || value === null; } +export function isNullyOrEmpty(value) { + return isNully(value) || value.length === 0; +} + export function invert(obj) { const inverted = {}; Object.keys(obj).forEach((key) => { http://git-wip-us.apache.org/repos/asf/aurora/blob/7229711e/ui/src/main/sass/components/_instance-page.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_instance-page.scss b/ui/src/main/sass/components/_instance-page.scss index 4d8618c..1da87dc 100644 --- a/ui/src/main/sass/components/_instance-page.scss +++ b/ui/src/main/sass/components/_instance-page.scss @@ -20,6 +20,20 @@ } } + .active-task-neighbors { + h5 { + text-transform: uppercase; + margin: 0; + margin-bottom: 3px; + font-weight: 700; + } + + .task-neighbors-task-key { + margin: 10; + margin-bottom: 3px; + } + } + .instance-history { .state-machine, .state-machine ul, .state-machine li { margin: 0 !important;
