External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-05 18:51:06 -03:30
Code Issues Packages Projects Releases Wiki Activity

Run prettier

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

65
awx/ui_next/src/components/Sparkline/JobStatusIcon.jsx
View File

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

14
awx/ui_next/src/components/Sparkline/JobStatusIcon.test.jsx
View File

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

32
awx/ui_next/src/components/Sparkline/Sparkline.jsx
View File

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

11
awx/ui_next/src/components/Sparkline/Sparkline.test.jsx
View File

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

2
awx/ui_next/src/components/Sparkline/index.js
View File

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

4
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

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