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/18 20:19:46 UTC
aurora git commit: Role and Environment Page fixes:
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 <da...@dmclaughlin.com>
Authored: Wed Oct 18 13:15:13 2017 -0700
Committer: David McLaughlin <da...@dmclaughlin.com>
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;
+}