Repository: aurora Updated Branches: refs/heads/master def6e4338 -> b7e83a047
Clean up Job Page CSS. * Make update list smaller (was too dominant on the page). * Show update progress/size of history. * Tidy up whitespace. * Move expander to end of task list item. * Wrap the main job overview loading element in a panel group to prevent jarring page change as content loads. Reviewed at https://reviews.apache.org/r/63098/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/b7e83a04 Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/b7e83a04 Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/b7e83a04 Branch: refs/heads/master Commit: b7e83a04708b6ff3c6010b90236f1ff75608e973 Parents: def6e43 Author: David McLaughlin <[email protected]> Authored: Wed Oct 18 10:26:17 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Wed Oct 18 10:26:17 2017 -0700 ---------------------------------------------------------------------- ui/src/main/js/components/TaskConfigSummary.js | 2 +- ui/src/main/js/components/TaskList.js | 6 +-- ui/src/main/js/components/UpdateList.js | 32 ++++++++++++-- ui/src/main/js/pages/Job.js | 6 +-- ui/src/main/js/pages/__tests__/Job-test.js | 2 +- ui/src/main/sass/components/_instance-page.scss | 1 + ui/src/main/sass/components/_task-list.scss | 2 +- ui/src/main/sass/components/_update-list.scss | 45 ++++++++++++++++++++ 8 files changed, 84 insertions(+), 12 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/js/components/TaskConfigSummary.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/TaskConfigSummary.js b/ui/src/main/js/components/TaskConfigSummary.js index 43b50d9..5c00d1e 100644 --- a/ui/src/main/js/components/TaskConfigSummary.js +++ b/ui/src/main/js/components/TaskConfigSummary.js @@ -46,7 +46,7 @@ export default function TaskConfigSummary({ config, instances }) { <tr> <th>Metadata</th> <td colSpan='2'> - {config.metadata.map((m) => <span key={m.key}>{m.key}: {m.value}</span>)} + {config.metadata.map((m, i) => <span key={`${m.key}-${i}`}>{m.key}: {m.value}</span>)} </td> </tr> <tr> http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/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 5a61de8..dd34c62 100644 --- a/ui/src/main/js/components/TaskList.js +++ b/ui/src/main/js/components/TaskList.js @@ -37,9 +37,6 @@ export class TaskListItem extends React.Component { <div className='task-list-item'> <span className='task-list-item-status'> {SCHEDULE_STATUS[task.status]} - <span className='task-list-item-expander' onClick={(e) => this.toggleExpand()}> - ... - </span> </span> <span className={`img-circle ${getClassForScheduleStatus(task.status)}`} /> <span className='task-list-item-time'> @@ -47,6 +44,9 @@ export class TaskListItem extends React.Component { </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> http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/js/components/UpdateList.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/UpdateList.js b/ui/src/main/js/components/UpdateList.js index 2df2839..464c59d 100644 --- a/ui/src/main/js/components/UpdateList.js +++ b/ui/src/main/js/components/UpdateList.js @@ -7,7 +7,7 @@ import { RelativeTime } from 'components/Time'; import { isNully } from 'utils/Common'; import { UPDATE_STATUS } from 'utils/Thrift'; -import { getClassForUpdateStatus } from 'utils/Update'; +import { getClassForUpdateStatus, updateStats } from 'utils/Update'; function UpdateListItem({ summary, titleFn }) { const {job: {role, environment, name}, id} = summary.key; @@ -35,13 +35,39 @@ function UpdateListItem({ summary, titleFn }) { </div>); } +function JobUpdateListItem({ update }) { + const summary = update.update.summary; + const {job: {role, environment, name}, id} = summary.key; + const stats = updateStats(update); + return (<div className='job-update-list-item'> + <span className={`img-circle ${getClassForUpdateStatus(summary.state.status)}`} /> + <div className='job-update-list-item-details'> + <span> + <Link + className='job-update-list-id' + to={`/beta/scheduler/${role}/${environment}/${name}/update/${id}`}> + {id} + </Link> • <span className='job-update-list-status'> + {UPDATE_STATUS[summary.state.status]} + </span> + </span> + </div> + <span className='job-update-list-stats'> + {stats.instancesUpdated} / {stats.totalInstancesToBeUpdated} + </span> + <span className='job-update-list-last-updated'> + <RelativeTime ts={summary.state.lastModifiedTimestampMs} /> + </span> + </div>); +} + export function JobUpdateList({ updates }) { if (isNully(updates)) { return <Loading />; } - return (<div className='update-list'> - {updates.map((u) => <UpdateListItem key={u.key.id} summary={u} titleFn={(u) => u.key.id} />)} + return (<div className='job-update-list'> + {updates.map((u) => <JobUpdateListItem key={u.update.summary.key.id} update={u} />)} </div>); } http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/js/pages/Job.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/pages/Job.js b/ui/src/main/js/pages/Job.js index 5f92ad0..6a9bd7e 100644 --- a/ui/src/main/js/pages/Job.js +++ b/ui/src/main/js/pages/Job.js @@ -87,8 +87,7 @@ export default class Job extends React.Component { } const terminalUpdates = this.state.updates - .filter((u) => !isInProgressUpdate(u)) - .map((u) => u.update.summary); + .filter((u) => !isInProgressUpdate(u)); if (terminalUpdates.length === 0) { return ''; @@ -152,8 +151,9 @@ export default class Job extends React.Component { jobOverview() { if (isNully(this.state.tasks)) { - return <Loading />; + return <PanelGroup><Loading /></PanelGroup>; } + return <Tabs activeTab={queryString.parse(this.props.location.search).jobView} className='job-overview' http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/js/pages/__tests__/Job-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/pages/__tests__/Job-test.js b/ui/src/main/js/pages/__tests__/Job-test.js index 2b126b6..09dd54e 100644 --- a/ui/src/main/js/pages/__tests__/Job-test.js +++ b/ui/src/main/js/pages/__tests__/Job-test.js @@ -76,7 +76,7 @@ describe('Job', () => { ]; const el = shallow(<Job {...props()} updates={updates} />); expect(el.contains(<JobUpdateList - updates={[updates[1].update.summary, updates[2].update.summary]} />)).toBe(true); + updates={[updates[1], updates[2]]} />)).toBe(true); }); it('Should not render JobUpdateList if no terminal updates', () => { http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/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 99204fd..4d8618c 100644 --- a/ui/src/main/sass/components/_instance-page.scss +++ b/ui/src/main/sass/components/_instance-page.scss @@ -86,6 +86,7 @@ margin-left: auto; list-style-type: none; padding: 0; + white-space: nowrap; li { display: inline-block; http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/sass/components/_task-list.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_task-list.scss b/ui/src/main/sass/components/_task-list.scss index a6e2f0a..42b9cac 100644 --- a/ui/src/main/sass/components/_task-list.scss +++ b/ui/src/main/sass/components/_task-list.scss @@ -63,7 +63,7 @@ .task-list-item { align-items: center; - padding: 10px 0; + padding: 5px 0; .task-list-item-time { color: $secondary_font_color; http://git-wip-us.apache.org/repos/asf/aurora/blob/b7e83a04/ui/src/main/sass/components/_update-list.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_update-list.scss b/ui/src/main/sass/components/_update-list.scss index 83a1f5a..8394f76 100644 --- a/ui/src/main/sass/components/_update-list.scss +++ b/ui/src/main/sass/components/_update-list.scss @@ -36,3 +36,48 @@ } } } + +.job-update-list { + .job-update-list-item { + display: flex; + align-items: center; + padding: 10px 20px; + border-bottom: 1px solid $grid_color; + + .img-circle { + margin-right: 10px; + } + + a { + font-size: 16px; + font-weight: 600; + } + + .job-update-list-item-status { + display: block; + } + + &:hover { + background-color: #edf5fd; + } + + .update-list-status { + color: $secondary_font_color; + } + + .job-update-list-stats { + margin-left: auto; + width: 120px; + text-align: center; + font-weight: 700; + color: $secondary_font_color; + background-color: rgba(0, 0, 0, 0.02); + } + + .job-update-list-last-updated { + width: 120px; + text-align: center; + color: $secondary_font_color; + } + } +}
