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

Add host status icon and pull status styles into separate file

Browse Source
This commit is contained in:
Marliana Lara 2019-09-06 12:43:17 -04:00
parent ffbce2611a
commit 5babab7af4
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
4 changed files with 140 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,58 @@
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;

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

@ -1,60 +1,14 @@
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 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.div`
border: 1px solid #b7b7b7;
border-top: 0;
background: #ffffff;
`;
const FailedTop = styled.div`
border: 1px solid #b7b7b7;
border-bottom: 0;
background: #ffffff;
`;
const FailedBottom = styled.div`
background-color: #d9534f;
`;
import {
RunningJob,
WaitingJob,
FinishedJob,
SuccessfulTop,
SuccessfulBottom,
FailedBottom,
FailedTop,
} from './shared/StatusIcon';
const JobStatusIcon = ({ status, ...props }) => {
return (

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

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

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

@ -0,0 +1,72 @@
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;
`;