External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 10:00:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Combine host and job status icons into one generic status icon

Browse Source
This commit is contained in:
Marliana Lara 2019-09-10 17:06:53 -04:00
parent 871f2cf9c5
commit 2527a78874
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
12 changed files with 191 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
awx/ui_next/src/components/Sparkline/HostStatusIcon.jsx
View File

@ -1,58 +0,0 @@
import React from 'react';
import { string } from 'prop-types';
import {
ChangedBottom,
ChangedTop,
FailedBottom,
FailedTop,
FinishedJob,
SkippedBottom,
SkippedTop,
SuccessfulBottom,
SuccessfulTop,
UnreachableBottom,
UnreachableTop,
} from './shared/StatusIcon';
const HostStatusIcon = ({ status }) => {
return (
<div>
{status === 'changed' && (
<FinishedJob>
<ChangedTop />
<ChangedBottom />
</FinishedJob>
)}
{status === 'failed' && (
<FinishedJob>
<FailedTop />
<FailedBottom />
</FinishedJob>
)}
{status === 'skipped' && (
<FinishedJob>
<SkippedTop />
<SkippedBottom />
</FinishedJob>
)}
{status === 'ok' && (
<FinishedJob>
<SuccessfulTop />
<SuccessfulBottom />
</FinishedJob>
)}
{status === 'unreachable' && (
<FinishedJob>
<UnreachableTop />
<UnreachableBottom />
</FinishedJob>
)}
</div>
);
};
HostStatusIcon.propTypes = {
status: string.isRequired,
};
export default HostStatusIcon;

36
awx/ui_next/src/components/Sparkline/HostStatusIcon.test.jsx
View File

@ -1,36 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import HostStatusIcon from './HostStatusIcon';
describe('HostStatusIcon', () => {
test('renders the "ok" host status', () => {
const wrapper = mount(<HostStatusIcon status="ok" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulBottom')).toHaveLength(1);
});
test('renders "failed" host status', () => {
const wrapper = mount(<HostStatusIcon status="failed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedBottom')).toHaveLength(1);
});
test('renders "changed" host status', () => {
const wrapper = mount(<HostStatusIcon status="changed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__ChangedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__ChangedBottom')).toHaveLength(1);
});
test('renders "skipped" host status', () => {
const wrapper = mount(<HostStatusIcon status="skipped" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SkippedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SkippedBottom')).toHaveLength(1);
});
test('renders "unreachable" host status', () => {
const wrapper = mount(<HostStatusIcon status="unreachable" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__UnreachableTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__UnreachableBottom')).toHaveLength(1);
});
});

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

@ -1,40 +0,0 @@
import React from 'react';
import { string } from 'prop-types';
import {
RunningJob,
WaitingJob,
FinishedJob,
SuccessfulTop,
SuccessfulBottom,
FailedBottom,
FailedTop,
} from './shared/StatusIcon';
const JobStatusIcon = ({ status, ...props }) => {
return (
<div {...props}>
{status === 'running' && <RunningJob />}
{(status === 'new' || status === 'pending' || status === 'waiting') && (
<WaitingJob />
)}
{(status === 'failed' || status === 'error' || status === 'canceled') && (
<FinishedJob>
<FailedTop />
<FailedBottom />
</FinishedJob>
)}
{status === 'successful' && (
<FinishedJob>
<SuccessfulTop />
<SuccessfulBottom />
</FinishedJob>
)}
</div>
);
};
JobStatusIcon.propTypes = {
status: string.isRequired,
};
export default JobStatusIcon;

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

@ -1,28 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import JobStatusIcon from './JobStatusIcon';
describe('JobStatusIcon', () => {
test('renders the successful job', () => {
const wrapper = mount(<JobStatusIcon status="successful" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulBottom')).toHaveLength(1);
});
test('renders running job', () => {
const wrapper = mount(<JobStatusIcon status="running" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__RunningJob')).toHaveLength(1);
});
test('renders waiting job', () => {
const wrapper = mount(<JobStatusIcon status="waiting" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__WaitingJob')).toHaveLength(1);
});
test('renders failed job', () => {
const wrapper = mount(<JobStatusIcon status="failed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedBottom')).toHaveLength(1);
});
});

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

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import { arrayOf, object } from 'prop-types';
import { withI18n } from '@lingui/react';
import { Link as _Link } from 'react-router-dom';
import { JobStatusIcon } from '@components/Sparkline';
import { StatusIcon } from '@components/Sparkline';
import { Tooltip } from '@patternfly/react-core';
import styled from 'styled-components';
import { t } from '@lingui/macro';
@ -34,7 +34,7 @@ const Sparkline = ({ i18n, jobs }) => {
return jobs.map(job => (
<Tooltip position="top" content={generateTooltip(job)} key={job.id}>
<Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
<JobStatusIcon status={job.status} />
<StatusIcon status={job.status} />
</Link>
</Tooltip>
));

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

@ -23,7 +23,7 @@ describe('Sparkline', () => {
},
];
const wrapper = mountWithContexts(<Sparkline jobs={jobs} />);
expect(wrapper.find('JobStatusIcon')).toHaveLength(2);
expect(wrapper.find('StatusIcon')).toHaveLength(2);
expect(wrapper.find('Tooltip')).toHaveLength(2);
expect(wrapper.find('Link')).toHaveLength(2);
});

121
awx/ui_next/src/components/Sparkline/StatusIcon.jsx Normal file
View File

@ -0,0 +1,121 @@
import React from 'react';
import { string } from 'prop-types';
import styled, { keyframes } from 'styled-components';
const Pulse = keyframes`
from {
-webkit-transform:scale(1);
}
to {
-webkit-transform:scale(0);
}
`;
const Wrapper = styled.div`
width: 14px;
height: 14px;
`;
const WhiteTop = styled.div`
border: 1px solid #b7b7b7;
border-bottom: 0;
background: #ffffff;
`;
const WhiteBottom = styled.div`
border: 1px solid #b7b7b7;
border-top: 0;
background: #ffffff;
`;
const RunningJob = styled(Wrapper)`
background-color: #5cb85c;
padding-right: 0px;
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;
`;
const WaitingJob = styled(Wrapper)`
border: 1px solid #d7d7d7;
`;
const FinishedJob = styled(Wrapper)`
flex: 0 1 auto;
> * {
width: 14px;
height: 7px;
}
`;
const SuccessfulTop = styled.div`
background-color: #5cb85c;
`;
const SuccessfulBottom = styled(WhiteBottom)``;
const FailedTop = styled(WhiteTop)``;
const FailedBottom = styled.div`
background-color: #d9534f;
`;
const UnreachableTop = styled(WhiteTop)``;
const UnreachableBottom = styled.div`
background-color: #ff0000;
`;
const ChangedTop = styled(WhiteTop)``;
const ChangedBottom = styled.div`
background-color: #ff9900;
`;
const SkippedTop = styled(WhiteTop)``;
const SkippedBottom = styled.div`
background-color: #2dbaba;
`;
const StatusIcon = ({ status, ...props }) => {
return (
<div {...props}>
{status === 'running' && <RunningJob />}
{(status === 'new' || status === 'pending' || status === 'waiting') && (
<WaitingJob />
)}
{(status === 'failed' || status === 'error' || status === 'canceled') && (
<FinishedJob>
<FailedTop />
<FailedBottom />
</FinishedJob>
)}
{(status === 'successful' || status === 'ok') && (
<FinishedJob>
<SuccessfulTop />
<SuccessfulBottom />
</FinishedJob>
)}
{status === 'changed' && (
<FinishedJob>
<ChangedTop />
<ChangedBottom />
</FinishedJob>
)}
{status === 'skipped' && (
<FinishedJob>
<SkippedTop />
<SkippedBottom />
</FinishedJob>
)}
{status === 'unreachable' && (
<FinishedJob>
<UnreachableTop />
<UnreachableBottom />
</FinishedJob>
)}
</div>
);
};
StatusIcon.propTypes = {
status: string.isRequired,
};
export default StatusIcon;

59
awx/ui_next/src/components/Sparkline/StatusIcon.test.jsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import { mount } from 'enzyme';
import StatusIcon from './StatusIcon';
describe('StatusIcon', () => {
test('renders the successful status', () => {
const wrapper = mount(<StatusIcon status="successful" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulBottom')).toHaveLength(1);
});
test('renders running status', () => {
const wrapper = mount(<StatusIcon status="running" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__RunningJob')).toHaveLength(1);
});
test('renders waiting status', () => {
const wrapper = mount(<StatusIcon status="waiting" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__WaitingJob')).toHaveLength(1);
});
test('renders failed status', () => {
const wrapper = mount(<StatusIcon status="failed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedBottom')).toHaveLength(1);
});
test('renders a successful status when host status is "ok"', () => {
const wrapper = mount(<StatusIcon status="ok" />);
wrapper.debug();
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SuccessfulBottom')).toHaveLength(1);
});
test('renders "failed" host status', () => {
const wrapper = mount(<StatusIcon status="failed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__FailedBottom')).toHaveLength(1);
});
test('renders "changed" host status', () => {
const wrapper = mount(<StatusIcon status="changed" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__ChangedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__ChangedBottom')).toHaveLength(1);
});
test('renders "skipped" host status', () => {
const wrapper = mount(<StatusIcon status="skipped" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__SkippedTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__SkippedBottom')).toHaveLength(1);
});
test('renders "unreachable" host status', () => {
const wrapper = mount(<StatusIcon status="unreachable" />);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('StatusIcon__UnreachableTop')).toHaveLength(1);
expect(wrapper.find('StatusIcon__UnreachableBottom')).toHaveLength(1);
});
});

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

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

72
awx/ui_next/src/components/Sparkline/shared/StatusIcon.jsx
View File

@ -1,72 +0,0 @@
import styled, { keyframes } from 'styled-components';
const Pulse = keyframes`
from {
-webkit-transform:scale(1);
}
to {
-webkit-transform:scale(0);
}
`;
const Wrapper = styled.div`
width: 14px;
height: 14px;
`;
const WhiteTop = styled.div`
border: 1px solid #b7b7b7;
border-bottom: 0;
background: #ffffff;
`;
const WhiteBottom = styled.div`
border: 1px solid #b7b7b7;
border-top: 0;
background: #ffffff;
`;
export const RunningJob = styled(Wrapper)`
background-color: #5cb85c;
padding-right: 0px;
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;
`;
export const WaitingJob = styled(Wrapper)`
border: 1px solid #d7d7d7;
`;
export const FinishedJob = styled(Wrapper)`
flex: 0 1 auto;
> * {
width: 14px;
height: 7px;
}
`;
export const SuccessfulTop = styled.div`
background-color: #5cb85c;
`;
export const SuccessfulBottom = styled(WhiteBottom)``;
export const FailedTop = styled(WhiteTop)``;
export const FailedBottom = styled.div`
background-color: #d9534f;
`;
export const UnreachableTop = styled(WhiteTop)``;
export const UnreachableBottom = styled.div`
background-color: #ff0000;
`;
export const ChangedTop = styled(WhiteTop)``;
export const ChangedBottom = styled.div`
background-color: #ff9900;
`;
export const SkippedTop = styled(WhiteTop)``;
export const SkippedBottom = styled.div`
background-color: #2dbaba;
`;

6
awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
View File

@ -9,7 +9,7 @@ import CodeMirrorInput from '@components/CodeMirrorInput';
import ContentEmpty from '@components/ContentEmpty';
import PropTypes from 'prop-types';
import { DetailList, Detail } from '@components/DetailList';
import { HostStatusIcon } from '@components/Sparkline';
import { StatusIcon } from '@components/Sparkline';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
@ -76,7 +76,7 @@ const processEventStatus = event => {
) {
status = 'ok';
}
// catch the 'changed' case after 'ok', because both can be true
// if 'ok' and 'changed' are both true, show 'changed'
if (event.changed) {
status = 'changed';
}
@ -160,7 +160,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
label={i18n._(t`Host Name`)}
value={
<HostNameDetailValue>
{hostStatus ? <HostStatusIcon status={hostStatus} /> : null}
{hostStatus ? <StatusIcon status={hostStatus} /> : null}
{hostEvent.host_name}
</HostNameDetailValue>
}

8
awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx
View File

@ -128,7 +128,7 @@ describe('HostEventModal', () => {
isOpen
/>
);
const icon = wrapper.find('HostStatusIcon');
const icon = wrapper.find('StatusIcon');
expect(icon.prop('status')).toBe('ok');
expect(icon.find('StatusIcon__SuccessfulTop').length).toBe(1);
expect(icon.find('StatusIcon__SuccessfulBottom').length).toBe(1);
@ -140,7 +140,7 @@ describe('HostEventModal', () => {
<HostEventModal hostEvent={skippedHostEvent} onClose={() => {}} isOpen />
);
const icon = wrapper.find('HostStatusIcon');
const icon = wrapper.find('StatusIcon');
expect(icon.prop('status')).toBe('skipped');
expect(icon.find('StatusIcon__SkippedTop').length).toBe(1);
expect(icon.find('StatusIcon__SkippedBottom').length).toBe(1);
@ -160,7 +160,7 @@ describe('HostEventModal', () => {
/>
);
const icon = wrapper.find('HostStatusIcon');
const icon = wrapper.find('StatusIcon');
expect(icon.prop('status')).toBe('unreachable');
expect(icon.find('StatusIcon__UnreachableTop').length).toBe(1);
expect(icon.find('StatusIcon__UnreachableBottom').length).toBe(1);
@ -181,7 +181,7 @@ describe('HostEventModal', () => {
/>
);
const icon = wrapper.find('HostStatusIcon');
const icon = wrapper.find('StatusIcon');
expect(icon.prop('status')).toBe('failed');
expect(icon.find('StatusIcon__FailedTop').length).toBe(1);
expect(icon.find('StatusIcon__FailedBottom').length).toBe(1);