Repository: aurora Updated Branches: refs/heads/master b7e83a047 -> f820b277d
Role and Environment Page fixes: * Remove env column on environment pages. * Tidy up CSS that caused names to not be lined up properly with long environment name. * Allow you to search across job type, tier and environment. Reviewed at https://reviews.apache.org/r/63117/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/f820b277 Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/f820b277 Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/f820b277 Branch: refs/heads/master Commit: f820b277d6c28ccd64d428b4ba36de7d79e39851 Parents: b7e83a0 Author: David McLaughlin <[email protected]> Authored: Wed Oct 18 13:15:13 2017 -0700 Committer: David McLaughlin <[email protected]> Committed: Wed Oct 18 13:15:13 2017 -0700 ---------------------------------------------------------------------- ui/src/main/js/components/JobList.js | 23 +++++-- ui/src/main/js/components/JobListItem.js | 16 ++--- .../js/components/__tests__/JobList-test.js | 68 +++++++++++++++++++- ui/src/main/js/test-utils/JobBuilders.js | 36 +++++++++++ ui/src/main/sass/components/_job-list-page.scss | 24 +------ 5 files changed, 129 insertions(+), 38 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/f820b277/ui/src/main/js/components/JobList.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/JobList.js b/ui/src/main/js/components/JobList.js index f54615f..bb7f488 100644 --- a/ui/src/main/js/components/JobList.js +++ b/ui/src/main/js/components/JobList.js @@ -7,6 +7,16 @@ import Pagination from 'components/Pagination'; import { isNully } from 'utils/Common'; import { TASK_COUNTS } from 'utils/Job'; +// VisibleForTesting +export function searchJob(job, query) { + const taskConfig = job.job.taskConfig; + const jobType = taskConfig.isService ? 'service' : job.job.cronSchedule ? 'cron' : 'adhoc'; + return (job.job.key.name.startsWith(query) || + taskConfig.tier.startsWith(query) || + job.job.key.environment.startsWith(query) || + jobType.startsWith(query)); +} + export function JobListSortControl({ onClick }) { return (<ul className='job-task-stats job-list-sort-control'> <li>sort by:</li> @@ -33,21 +43,17 @@ export default class JobList extends React.Component { this.setState({sortBy}); } - _renderRow(job) { - return <JobListItem job={job} key={`${job.job.key.environment}/${job.job.key.name}`} />; - } - render() { const that = this; const sortFn = this.state.sortBy ? (j) => j.stats[that.state.sortBy] : (j) => j.job.key.name; - const filterFn = (j) => that.state.filter ? j.job.key.name.startsWith(that.state.filter) : true; + const filterFn = (j) => that.state.filter ? searchJob(j, that.state.filter) : true; return (<div className='job-list'> <div className='table-input-wrapper'> <Icon name='search' /> <input autoFocus onChange={(e) => this.setFilter(e)} - placeholder='Search jobs...' + placeholder='Search jobs by name, environment, type or tier' type='text' /> </div> <JobListSortControl onClick={(key) => this.setSort(key)} /> @@ -58,7 +64,10 @@ export default class JobList extends React.Component { hideIfSinglePage isTable numberPerPage={25} - renderer={this._renderRow} + renderer={(job) => <JobListItem + env={that.props.env} + job={job} + key={`${job.job.key.environment}/${job.job.key.name}`} />} // Always sort task count sorts in descending fashion (for UX reasons) reverseSort={!isNully(this.state.sortBy)} sortBy={sortFn} /> http://git-wip-us.apache.org/repos/asf/aurora/blob/f820b277/ui/src/main/js/components/JobListItem.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/JobListItem.js b/ui/src/main/js/components/JobListItem.js index 5a461dd..eccd227 100644 --- a/ui/src/main/js/components/JobListItem.js +++ b/ui/src/main/js/components/JobListItem.js @@ -19,26 +19,24 @@ export function JobTaskStats({ stats }) { export default function JobListItem(props) { const {job: {job: { cronSchedule, key: {role, name, environment}, taskConfig }, stats}} = props; - const envLink = (props.env) ? '' : (<span className='job-env'> + const envLink = (props.env) ? null : (<td className='job-list-env'> <Link to={`/beta/scheduler/${role}/${environment}`}>{environment}</Link> - </span>); + </td>); return (<tr key={`${environment}/${name}`}> - <td className='job-list-type' column='type'> - <span className='job-tier'> - {taskConfig.isService ? 'service' : (cronSchedule) ? 'cron' : 'adhoc'} - </span> + <td className='job-list-type'> + {taskConfig.isService ? 'service' : (cronSchedule) ? 'cron' : 'adhoc'} </td> - <td className='job-list-name' column='name' value={name}> + {envLink} + <td className='job-list-name' value={name}> <h4> - {envLink} <Link to={`/beta/scheduler/${role}/${environment}/${name}`}> {name} {taskConfig.production ? <Icon name='star' /> : ''} </Link> </h4> </td> - <td className='job-list-stats' column='stats'> + <td className='job-list-stats'> <JobTaskStats stats={stats} /> </td> </tr>); http://git-wip-us.apache.org/repos/asf/aurora/blob/f820b277/ui/src/main/js/components/__tests__/JobList-test.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/components/__tests__/JobList-test.js b/ui/src/main/js/components/__tests__/JobList-test.js index f545c24..deda6fe 100644 --- a/ui/src/main/js/components/__tests__/JobList-test.js +++ b/ui/src/main/js/components/__tests__/JobList-test.js @@ -1,9 +1,12 @@ import React from 'react'; import { shallow } from 'enzyme'; -import JobList from '../JobList'; +import JobList, { searchJob } from '../JobList'; import Pagination from '../Pagination'; +import { JobSummaryBuilder, JobConfigurationBuilder } from 'test-utils/JobBuilders'; +import { TaskConfigBuilder } from 'test-utils/TaskBuilders'; + const jobs = []; // only need referential equality for tests describe('JobList', () => { @@ -23,3 +26,66 @@ describe('JobList', () => { ])).toBe(true); }); }); + +describe('searchJob', () => { + it('Should match jobs by job key properties', () => { + const job = JobSummaryBuilder.job( + JobConfigurationBuilder.key({role: '', environment: 'zzz-env', name: 'yyy-name'}).build() + ).build(); + + expect(searchJob(job, '___notfound__')).toBe(false); + expect(searchJob(job, 'zzz')).toBe(true); + expect(searchJob(job, 'yyy')).toBe(true); + }); + + it('Should match jobs by tier', () => { + const job = JobSummaryBuilder.job( + JobConfigurationBuilder + .key({role: '_', environment: '_', name: '_'}) + .taskConfig(TaskConfigBuilder.tier('zzz-tier').build()) + .build() + ).build(); + + expect(searchJob(job, 'zzz')).toBe(true); + }); + + it('Should allow you to search for services', () => { + const job = JobSummaryBuilder.job( + JobConfigurationBuilder + .key({role: '', environment: 'zzz-env', name: 'yyy-name'}) + .taskConfig(TaskConfigBuilder.isService(true).build()) + .build() + ).build(); + + expect(searchJob(job, 'service')).toBe(true); + expect(searchJob(job, 'adhoc')).toBe(false); + expect(searchJob(job, 'cron')).toBe(false); + }); + + it('Should allow you to search for crons', () => { + const job = JobSummaryBuilder.job( + JobConfigurationBuilder + .key({role: '', environment: 'zzz-env', name: 'yyy-name'}) + .cronSchedule('something-present') + .taskConfig(TaskConfigBuilder.isService(false).build()) + .build() + ).build(); + + expect(searchJob(job, 'service')).toBe(false); + expect(searchJob(job, 'adhoc')).toBe(false); + expect(searchJob(job, 'cron')).toBe(true); + }); + + it('Should allow you to search for adhoc jobs', () => { + const job = JobSummaryBuilder.job( + JobConfigurationBuilder + .key({role: '', environment: 'zzz-env', name: 'yyy-name'}) + .taskConfig(TaskConfigBuilder.isService(false).build()) + .build() + ).build(); + + expect(searchJob(job, 'service')).toBe(false); + expect(searchJob(job, 'adhoc')).toBe(true); + expect(searchJob(job, 'cron')).toBe(false); + }); +}); http://git-wip-us.apache.org/repos/asf/aurora/blob/f820b277/ui/src/main/js/test-utils/JobBuilders.js ---------------------------------------------------------------------- diff --git a/ui/src/main/js/test-utils/JobBuilders.js b/ui/src/main/js/test-utils/JobBuilders.js new file mode 100644 index 0000000..60b7886 --- /dev/null +++ b/ui/src/main/js/test-utils/JobBuilders.js @@ -0,0 +1,36 @@ +import createBuilder from 'test-utils/Builder'; + +import { TaskConfigBuilder } from './TaskBuilders'; + +const ROLE = 'test-role'; +const ENV = 'test-env'; +const NAME = 'test-name'; +const USER = 'test-user'; + +const JOB_KEY = { + role: ROLE, + environment: ENV, + name: NAME +}; + +export const JobConfigurationBuilder = createBuilder({ + key: JOB_KEY, + owner: {user: USER}, + cronSchedule: null, + cronCollisionPolicy: 0, + taskConfig: TaskConfigBuilder.build(), + instanceCount: 1 +}); + +export const JobStatsBuilder = createBuilder({ + activeTaskCount: 0, + pendingTaskCount: 0, + finishedTaskCount: 0, + failedTaskCount: 0 +}); + +export const JobSummaryBuilder = createBuilder({ + job: JobConfigurationBuilder.build(), + stats: JobStatsBuilder.build(), + nextCronRunMs: null +}); http://git-wip-us.apache.org/repos/asf/aurora/blob/f820b277/ui/src/main/sass/components/_job-list-page.scss ---------------------------------------------------------------------- diff --git a/ui/src/main/sass/components/_job-list-page.scss b/ui/src/main/sass/components/_job-list-page.scss index 016bff1..4738de8 100644 --- a/ui/src/main/sass/components/_job-list-page.scss +++ b/ui/src/main/sass/components/_job-list-page.scss @@ -48,27 +48,9 @@ td.job-list-type { background-color: $colors_error !important; } -.job-env { - display: inline-block; +.job-list-env, .job-list-type, .job-list-tier { font-size: 11px; text-transform: uppercase; - overflow: hidden; - margin-right: 20px; -} - -.job-tier { - display: inline-block; - font-size: 11px; - text-transform: uppercase; - color: #777; - padding: 2px; -} - -.job-type { - font-size: 11px; - text-transform: uppercase; - display: inline-block; - width: 50px; text-align: center; - color: $secondary_font_color; -} \ No newline at end of file + padding: 0px 2px; +}
