Run prettier

This commit is contained in:
mabashian 2019-08-07 14:46:41 -04:00
parent 37e5b6b134
commit a57f2ca2bf
6 changed files with 59 additions and 69 deletions

View File

@ -21,10 +21,7 @@ const Wrapper = styled.div`
const RunningJob = styled(Wrapper)`
background-color: #5cb85c;
padding-right: 0px;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
animation: ${Pulse} 1.5s linear infinite alternate;
`;
@ -58,43 +55,35 @@ const FailedTop = styled.div`
`;
const FailedBottom = styled.div`
background-color: #D9534F;
background-color: #d9534f;
`;
const JobStatusIcon = ({ job, link, tooltip, ...props }) => {
let Icon = (
<Fragment>
{ job.status === 'running' && <RunningJob /> }
{ (job.status === 'new'
|| job.status === 'pending'
|| job.status === 'waiting')
&& <WaitingJob />
}
{ (job.status === 'failed'
|| job.status === 'error'
|| job.status === 'canceled')
&& (
<FinishedJob>
<FailedTop />
<FailedBottom />
</FinishedJob>
)
}
{ job.status === 'successful' && (
<FinishedJob>
<SuccessfulTop />
<SuccessfulBottom />
</FinishedJob>
)}
</Fragment>
{job.status === 'running' && <RunningJob />}
{(job.status === 'new' ||
job.status === 'pending' ||
job.status === 'waiting') && <WaitingJob />}
{(job.status === 'failed' ||
job.status === 'error' ||
job.status === 'canceled') && (
<FinishedJob>
<FailedTop />
<FailedBottom />
</FinishedJob>
)}
{job.status === 'successful' && (
<FinishedJob>
<SuccessfulTop />
<SuccessfulBottom />
</FinishedJob>
)}
</Fragment>
);
if (link) {
Icon = (
<Link to={link}>
{Icon}
</Link>
);
Icon = <Link to={link}>{Icon}</Link>;
}
if (tooltip) {
@ -107,17 +96,13 @@ const JobStatusIcon = ({ job, link, tooltip, ...props }) => {
);
}
return (
<div {...props}>
{Icon}
</div>
);
}
return <div {...props}>{Icon}</div>;
};
JobStatusIcon.propTypes = {
job: object.isRequired,
link: string,
tooltip: node
tooltip: node,
};
JobStatusIcon.defaultProps = {

View File

@ -7,7 +7,7 @@ import JobStatusIcon from './JobStatusIcon';
describe('JobStatusIcon', () => {
const job = {
id: 1,
status: 'successful'
status: 'successful',
};
test('renders the expected content', () => {
@ -23,7 +23,9 @@ describe('JobStatusIcon', () => {
expect(wrapper.find('Link')).toHaveLength(0);
});
test('renders with link if link passed', () => {
const wrapper = mountWithContexts(<JobStatusIcon job={job} link="/jobs/playbook/1" />);
const wrapper = mountWithContexts(
<JobStatusIcon job={job} link="/jobs/playbook/1" />
);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('Tooltip')).toHaveLength(0);
expect(wrapper.find('Link')).toHaveLength(1);
@ -31,7 +33,7 @@ describe('JobStatusIcon', () => {
test('renders running job', () => {
const runningJob = {
id: 2,
status: 'running'
status: 'running',
};
const wrapper = mount(<JobStatusIcon job={runningJob} />);
expect(wrapper.find('JobStatusIcon__RunningJob')).toHaveLength(1);
@ -39,7 +41,7 @@ describe('JobStatusIcon', () => {
test('renders waiting job', () => {
const waitingJob = {
id: 3,
status: 'waiting'
status: 'waiting',
};
const wrapper = mount(<JobStatusIcon job={waitingJob} />);
expect(wrapper.find('JobStatusIcon__WaitingJob')).toHaveLength(1);
@ -47,7 +49,7 @@ describe('JobStatusIcon', () => {
test('renders failed job', () => {
const failedJob = {
id: 4,
status: 'failed'
status: 'failed',
};
const wrapper = mount(<JobStatusIcon job={failedJob} />);
expect(wrapper.find('JobStatusIcon__FailedTop')).toHaveLength(1);
@ -58,4 +60,4 @@ describe('JobStatusIcon', () => {
expect(wrapper.find('JobStatusIcon__SuccessfulTop')).toHaveLength(1);
expect(wrapper.find('JobStatusIcon__SuccessfulBottom')).toHaveLength(1);
});
});
});

View File

@ -11,24 +11,28 @@ const JobStatusIcon = styled(props => <_JobStatusIcon {...props} />)`
`;
const Sparkline = ({ i18n, jobs }) => {
const generateTooltip = (job) => (
const generateTooltip = job => (
<Fragment>
<div>{i18n._(t`JOB ID:`)} {job.id}</div>
<div>{i18n._(t`STATUS:`)} {job.status.toUpperCase()}</div>
<div>{i18n._(t`FINISHED:`)} {job.finished}</div>
<div>
{i18n._(t`JOB ID:`)} {job.id}
</div>
<div>
{i18n._(t`STATUS:`)} {job.status.toUpperCase()}
</div>
<div>
{i18n._(t`FINISHED:`)} {job.finished}
</div>
</Fragment>
);
return (
(jobs.map(job => (
<JobStatusIcon
key={job.id}
job={job}
link={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
tooltip={generateTooltip(job)}
/>
)))
)
return jobs.map(job => (
<JobStatusIcon
key={job.id}
job={job}
link={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
tooltip={generateTooltip(job)}
/>
));
};
Sparkline.propTypes = {

View File

@ -13,12 +13,13 @@ describe('Sparkline', () => {
const jobs = [
{
id: 1,
status: 'successful'
}, {
status: 'successful',
},
{
id: 2,
status: 'failed'
}
]
status: 'failed',
},
];
const wrapper = mountWithContexts(<Sparkline jobs={jobs} />);
expect(wrapper.find('JobStatusIcon')).toHaveLength(2);
});

View File

@ -1,2 +1,2 @@
export { default as Sparkline } from './Sparkline';
export { default as JobStatusIcon } from './JobStatusIcon';
export { default as JobStatusIcon } from './JobStatusIcon';

View File

@ -58,9 +58,7 @@ class TemplateListItem extends Component {
{toTitleCase(template.type)}
</DataListCell>,
<DataListCell key="sparkline">
<Sparkline
jobs={template.summary_fields.recent_jobs}
/>
<Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>,
<DataListCell lastcolumn="true" key="launch">
{canLaunch && template.type === 'job_template' && (