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

Move job event line styles into a shared dir

Browse Source 
Set a field to avoid setState warnings

Fix lint errors
This commit is contained in:
Marliana Lara 2019-08-13 12:38:38 -04:00
parent 2a926fffd9
commit 748bf63d4e
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
9 changed files with 152 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
awx/ui_next/src/screens/Job/JobOutput/JobEvent.jsx
View File

@ -1,8 +1,13 @@
import Ansi from 'ansi-to-html';
import hasAnsi from 'has-ansi';
import Entities from 'html-entities';
import styled from 'styled-components';
import React from 'react';
import {
JobEventLine,
JobEventLineToggle,
JobEventLineNumber,
JobEventLineText,
} from './shared';
const EVENT_START_TASK = 'playbook_on_task_start';
const EVENT_START_PLAY = 'playbook_on_play_start';
@ -32,65 +37,6 @@ const ansi = new Ansi({
});
const entities = new Entities.AllHtmlEntities();
const JobEventWrapper = styled.div``;
const JobEventLine = styled.div`
display: flex;
&:hover {
background-color: white;
}
&:hover div {
background-color: white;
}
&--hidden {
display: none;
}
${({ isFirst }) => (isFirst ? 'padding-top: 10px;' : '')}
`;
const JobEventLineToggle = styled.div`
background-color: #ebebeb;
color: #646972;
display: flex;
flex: 0 0 30px;
font-size: 18px;
justify-content: center;
line-height: 12px;
& > i {
cursor: pointer;
}
user-select: none;
`;
const JobEventLineNumber = styled.div`
color: #161b1f;
background-color: #ebebeb;
flex: 0 0 45px;
text-align: right;
vertical-align: top;
padding-right: 5px;
border-right: 1px solid #d7d7d7;
user-select: none;
`;
const JobEventLineText = styled.div`
padding: 0 15px;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
.time {
font-size: 14px;
font-weight: 600;
user-select: none;
background-color: #ebebeb;
border-radius: 12px;
padding: 2px 10px;
margin-left: 15px;
}
`;
function getTimestamp({ created }) {
const date = new Date(created);
@ -127,9 +73,17 @@ function getLineTextHtml({ created, event, start_line, stdout }) {
});
}
function JobEvent({ counter, created, event, stdout, start_line, ...rest }) {
function JobEvent({
counter,
created,
event,
stdout,
start_line,
style,
type,
}) {
return !stdout ? null : (
<JobEventWrapper {...rest}>
<div style={style} type={type}>
{getLineTextHtml({ created, event, start_line, stdout }).map(
({ lineNumber, html }) =>
lineNumber >= 0 && (
@ -148,7 +102,7 @@ function JobEvent({ counter, created, event, stdout, start_line, ...rest }) {
</JobEventLine>
)
)}
</JobEventWrapper>
</div>
);
}

2
awx/ui_next/src/screens/Job/JobOutput/JobEvent.test.jsx
View File

@ -21,7 +21,7 @@ const mockRunnerOnOkEvent = {
stdout: '\u001b[0;32mok: [localhost]\u001b[0m',
};
const selectors = {
lineText: 'JobEvent__JobEventLineText',
lineText: 'JobEventLineText',
};
describe('<JobEvent />', () => {

84
awx/ui_next/src/screens/Job/JobOutput/JobEventSkeleton.jsx
View File

@ -1,83 +1,29 @@
import styled from 'styled-components';
import React from 'react';
const JobEventSkeletonWrapper = styled.div``;
const JobEventSkeletonLine = styled.div`
display: flex;
&:hover {
background-color: white;
}
&:hover div {
background-color: white;
}
&--hidden {
display: none;
}
`;
const JobEventSkeletonLineToggle = styled.div`
background-color: #ebebeb;
color: #646972;
display: flex;
flex: 0 0 30px;
font-size: 18px;
justify-content: center;
line-height: 12px;
& > i {
cursor: pointer;
}
user-select: none;
`;
const JobEventSkeletonLineNumber = styled.div`
color: #161b1f;
background-color: #ebebeb;
flex: 0 0 45px;
text-align: right;
vertical-align: top;
padding-right: 5px;
border-right: 1px solid #b7b7b7;
user-select: none;
`;
const JobEventSkeletonContentWrapper = styled.div`
padding: 0 15px;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
.content {
background: var(--pf-global--disabled-color--200);
background: linear-gradient(
to right,
#f5f5f5 10%,
#e8e8e8 18%,
#f5f5f5 33%
);
border-radius: 5px;
}
`;
import {
JobEventLine,
JobEventLineToggle,
JobEventLineNumber,
JobEventLineText,
} from './shared';
function JobEventSkeletonContent({ contentLength }) {
return (
<JobEventSkeletonContentWrapper>
<JobEventLineText>
<span className="content">{' '.repeat(contentLength)}</span>
</JobEventSkeletonContentWrapper>
</JobEventLineText>
);
}
function JobEventSkeleton({ counter, contentLength, ...rest }) {
function JobEventSkeleton({ counter, contentLength, style }) {
return (
counter > 1 && (
<JobEventSkeletonWrapper {...rest}>
<JobEventSkeletonLine key={counter}>
<JobEventSkeletonLineToggle />
<JobEventSkeletonLineNumber />
<div style={style}>
<JobEventLine key={counter}>
<JobEventLineToggle />
<JobEventLineNumber />
<JobEventSkeletonContent contentLength={contentLength} />
</JobEventSkeletonLine>
</JobEventSkeletonWrapper>
</JobEventLine>
</div>
)
);
}

65
awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
View File

@ -66,6 +66,7 @@ class JobOutput extends Component {
defaultHeight: 25,
});
this._isMounted = false;
this.loadJobEvents = this.loadJobEvents.bind(this);
this.rowRenderer = this.rowRenderer.bind(this);
this.handleScrollFirst = this.handleScrollFirst.bind(this);
@ -79,6 +80,7 @@ class JobOutput extends Component {
}
componentDidMount() {
this._isMounted = true;
this.loadJobEvents();
}
@ -100,14 +102,19 @@ class JobOutput extends Component {
}
}
componentWillUnmount() {
this._isMounted = false;
}
async loadJobEvents() {
const { job } = this.props;
const loadRange = range(1, 50);
this.setState(({ currentlyLoading }) => ({
hasContentLoading: true,
currentlyLoading: currentlyLoading.concat(loadRange),
}));
this._isMounted &&
this.setState(({ currentlyLoading }) => ({
hasContentLoading: true,
currentlyLoading: currentlyLoading.concat(loadRange),
}));
try {
const {
data: { results: newResults = [], count },
@ -115,19 +122,23 @@ class JobOutput extends Component {
page_size: 50,
order_by: 'start_line',
});
this.setState(({ results }) => {
newResults.forEach(jobEvent => {
results[jobEvent.counter] = jobEvent;
this._isMounted &&
this.setState(({ results }) => {
newResults.forEach(jobEvent => {
results[jobEvent.counter] = jobEvent;
});
return { results, remoteRowCount: count + 1 };
});
return { results, remoteRowCount: count + 1 };
});
} catch (err) {
this.setState({ contentError: err });
} finally {
this.setState(({ currentlyLoading }) => ({
hasContentLoading: false,
currentlyLoading: currentlyLoading.filter(n => !loadRange.includes(n)),
}));
this._isMounted &&
this.setState(({ currentlyLoading }) => ({
hasContentLoading: false,
currentlyLoading: currentlyLoading.filter(
n => !loadRange.includes(n)
),
}));
}
}
@ -170,9 +181,10 @@ class JobOutput extends Component {
const { job } = this.props;
const loadRange = range(startIndex, stopIndex);
this.setState(({ currentlyLoading }) => ({
currentlyLoading: currentlyLoading.concat(loadRange),
}));
this._isMounted &&
this.setState(({ currentlyLoading }) => ({
currentlyLoading: currentlyLoading.concat(loadRange),
}));
const params = {
counter__gte: startIndex,
counter__lte: stopIndex,
@ -180,17 +192,18 @@ class JobOutput extends Component {
};
return JobsAPI.readEvents(job.id, job.type, params).then(response => {
this.setState(({ results, currentlyLoading }) => {
response.data.results.forEach(jobEvent => {
results[jobEvent.counter] = jobEvent;
this._isMounted &&
this.setState(({ results, currentlyLoading }) => {
response.data.results.forEach(jobEvent => {
results[jobEvent.counter] = jobEvent;
});
return {
results,
currentlyLoading: currentlyLoading.filter(
n => !loadRange.includes(n)
),
};
});
return {
results,
currentlyLoading: currentlyLoading.filter(
n => !loadRange.includes(n)
),
};
});
});
}

18
awx/ui_next/src/screens/Job/JobOutput/shared/JobEventLine.jsx Normal file
View File

@ -0,0 +1,18 @@
import styled from 'styled-components';
export default styled.div`
display: flex;
&:hover {
background-color: white;
}
&:hover div {
background-color: white;
}
&--hidden {
display: none;
}
${({ isFirst }) => (isFirst ? 'padding-top: 10px;' : '')}
`;

12
awx/ui_next/src/screens/Job/JobOutput/shared/JobEventLineNumber.jsx Normal file
View File

@ -0,0 +1,12 @@
import styled from 'styled-components';
export default styled.div`
color: #161b1f;
background-color: #ebebeb;
flex: 0 0 45px;
text-align: right;
vertical-align: top;
padding-right: 5px;
border-right: 1px solid #d7d7d7;
user-select: none;
`;

29
awx/ui_next/src/screens/Job/JobOutput/shared/JobEventLineText.jsx Normal file
View File

@ -0,0 +1,29 @@
import styled from 'styled-components';
export default styled.div`
padding: 0 15px;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
.time {
font-size: 14px;
font-weight: 600;
user-select: none;
background-color: #ebebeb;
border-radius: 12px;
padding: 2px 10px;
margin-left: 15px;
}
.content {
background: var(--pf-global--disabled-color--200);
background: linear-gradient(
to right,
#f5f5f5 10%,
#e8e8e8 18%,
#f5f5f5 33%
);
border-radius: 5px;
}
`;

17
awx/ui_next/src/screens/Job/JobOutput/shared/JobEventLineToggle.jsx Normal file
View File

@ -0,0 +1,17 @@
import styled from 'styled-components';
export default styled.div`
background-color: #ebebeb;
color: #646972;
display: flex;
flex: 0 0 30px;
font-size: 18px;
justify-content: center;
line-height: 12px;
& > i {
cursor: pointer;
}
user-select: none;
`;

4
awx/ui_next/src/screens/Job/JobOutput/shared/index.jsx Normal file
View File

@ -0,0 +1,4 @@
export { default as JobEventLine } from './JobEventLine';
export { default as JobEventLineToggle } from './JobEventLineToggle';
export { default as JobEventLineNumber } from './JobEventLineNumber';
export { default as JobEventLineText } from './JobEventLineText';