mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 05:01:19 -03:30
Run prettier
This commit is contained in:
parent
37e5b6b134
commit
a57f2ca2bf
@ -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 = {
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export { default as Sparkline } from './Sparkline';
|
||||
export { default as JobStatusIcon } from './JobStatusIcon';
|
||||
export { default as JobStatusIcon } from './JobStatusIcon';
|
||||
|
||||
@ -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' && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user