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

Disable follow mode on scroll

Browse Source
This commit is contained in:
Jake McDermott
2021-05-05 13:33:58 -04:00
committed by Alan Rominger
parent 768ac01f58
commit faded278e3
1 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -183,11 +183,6 @@ const OutputWrapper = styled.div`
Object.keys(cssMap).map(className => `.${className}{${cssMap[className]}}`)} Object.keys(cssMap).map(className => `.${className}{${cssMap[className]}}`)}
`; `;
const ListWrapper = styled(List)`
${({ isFollowModeEnabled }) =>
isFollowModeEnabled ? `overflow: hidden !important;` : ''}
`;
const OutputFooter = styled.div` const OutputFooter = styled.div`
background-color: #ebebeb; background-color: #ebebeb;
border-right: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7;
@@ -315,7 +310,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
const [showCancelModal, setShowCancelModal] = useState(false); const [showCancelModal, setShowCancelModal] = useState(false);
const [remoteRowCount, setRemoteRowCount] = useState(0); const [remoteRowCount, setRemoteRowCount] = useState(0);
const [results, setResults] = useState({}); const [results, setResults] = useState({});
const [isFollowModeEnabled, setIsFollowModeEnabled] = useState(false); const [isFollowEnabled, setIsFollowModeEnabled] = useState(false);
useEffect(() => { useEffect(() => {
loadJobEvents(); loadJobEvents();
@@ -610,7 +605,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
}; };
const handleScrollLast = () => { const handleScrollLast = () => {
scrollToRow(remoteRowCount); scrollToRow(remoteRowCount - 1);
}; };
const handleResize = ({ width }) => { const handleResize = ({ width }) => {
@@ -663,13 +658,25 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
history.push(qs ? `${pathname}?${qs}` : pathname); history.push(qs ? `${pathname}?${qs}` : pathname);
}; };
const handleFollowToggle = () => setIsFollowModeEnabled(!isFollowModeEnabled); const handleFollowToggle = () => {
if (isFollowEnabled) {
setIsFollowModeEnabled(false);
} else {
setIsFollowModeEnabled(true);
scrollToRow(remoteRowCount - 1);
}
};
const handleScroll = () => {
if (listRef?.current?.Grid?._renderedRowStopIndex < remoteRowCount - 1) {
setIsFollowModeEnabled(false);
}
};
useEffect(() => { useEffect(() => {
if (isFollowModeEnabled) { if (isFollowEnabled) {
scrollToRow(remoteRowCount); scrollToRow(remoteRowCount);
} }
}, [remoteRowCount, isFollowModeEnabled]); }, [remoteRowCount, isFollowEnabled]);
const renderSearchComponent = () => ( const renderSearchComponent = () => (
<Search <Search
@@ -778,8 +785,11 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
</ToolbarItem> </ToolbarItem>
</ToolbarToggleGroup> </ToolbarToggleGroup>
{isJobRunning(job.status) ? ( {isJobRunning(job.status) ? (
<Button onClick={handleFollowToggle}> <Button
{isFollowModeEnabled ? t`Unfollow` : t`Follow`} variant={isFollowEnabled ? 'secondary' : 'primary'}
onClick={handleFollowToggle}
>
{isFollowEnabled ? t`Unfollow` : t`Follow`}
</Button> </Button>
) : null} ) : null}
</SearchToolbarContent> </SearchToolbarContent>
@@ -790,10 +800,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
onScrollNext={handleScrollNext} onScrollNext={handleScrollNext}
onScrollPrevious={handleScrollPrevious} onScrollPrevious={handleScrollPrevious}
/> />
<OutputWrapper <OutputWrapper cssMap={cssMap} isFollowEnabled={isFollowEnabled}>
cssMap={cssMap}
isFollowModeEnabled={isFollowModeEnabled}
>
<InfiniteLoader <InfiniteLoader
isRowLoaded={isRowLoaded} isRowLoaded={isRowLoaded}
loadMoreRows={loadMoreRows} loadMoreRows={loadMoreRows}
@@ -809,8 +816,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
<ContentLoading /> <ContentLoading />
</div> </div>
) : ( ) : (
<ListWrapper <List
isFollowModeEnabled={isFollowModeEnabled}
ref={ref => { ref={ref => {
registerChild(ref); registerChild(ref);
listRef.current = ref; listRef.current = ref;
@@ -824,6 +830,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
scrollToAlignment="start" scrollToAlignment="start"
width={width || 1} width={width || 1}
overscanRowCount={20} overscanRowCount={20}
onScroll={handleScroll}
/> />
)} )}
</> </>