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

Merge pull request #11517 from AlexSCorey/11236-ExpandCollapseAll

Browse Source 
Adds expand collapse all functionality on job output page.
This commit is contained in:
Sarah Akus 2022-02-02 09:43:13 -05:00 committed by GitHub
commit 76cfd7784a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 159 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
awx/ui/src/screens/Job/JobOutput/JobOutput.js
View File

@ -168,12 +168,14 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
const {
addEvents,
toggleNodeIsCollapsed,
toggleCollapseAll,
getEventForRow,
getNumCollapsedEvents,
getCounterForRow,
getEvent,
clearLoadedEvents,
rebuildEventsTree,
isAllCollapsed,
} = useJobEvents(
{
fetchEventByUuid,
@ -504,7 +506,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
isCollapsed={node.isCollapsed}
hasChildren={node.children.length}
onToggleCollapsed={() => {
toggleNodeIsCollapsed(event.uuid);
toggleNodeIsCollapsed(event.uuid, !node.isCollapsed);
}}
/>
) : (
@ -653,6 +655,10 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
scrollHeight.current = e.scrollHeight;
};
const handleExpandCollapseAll = () => {
toggleCollapseAll(!isAllCollapsed);
};
if (contentError) {
return <ContentError error={contentError} />;
}
@ -696,6 +702,10 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) {
onScrollLast={handleScrollLast}
onScrollNext={handleScrollNext}
onScrollPrevious={handleScrollPrevious}
toggleExpandCollapseAll={handleExpandCollapseAll}
isFlatMode={isFlatMode}
isTemplateJob={job.type === 'job'}
isAllCollapsed={isAllCollapsed}
/>
<OutputWrapper cssMap={cssMap}>
<InfiniteLoader

107
awx/ui/src/screens/Job/JobOutput/PageControls.js
View File

@ -1,6 +1,6 @@
import 'styled-components/macro';
import React from 'react';
import 'styled-components/macro';
import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core';
import {
@ -8,57 +8,92 @@ import {
AngleDoubleDownIcon,
AngleUpIcon,
AngleDownIcon,
AngleRightIcon,
} from '@patternfly/react-icons';
import styled from 'styled-components';
const Wrapper = styled.div`
const ControllsWrapper = styled.div`
display: flex;
height: 35px;
border: 1px solid #d7d7d7;
width: 100%;
justify-content: space-between;
`;
const ScrollWrapper = styled.div`
display: flex;
justify-content: flex-end;
`;
const ExpandCollapseWrapper = styled.div`
display: flex;
justify-content: flex-start;
& > Button {
padding-left: 8px;
}
`;
const PageControls = ({
onScrollFirst,
onScrollLast,
onScrollNext,
onScrollPrevious,
toggleExpandCollapseAll,
isAllCollapsed,
isFlatMode,
isTemplateJob,
}) => (
<Wrapper>
<Button
ouiaId="job-output-scroll-previous-button"
aria-label={t`Scroll previous`}
onClick={onScrollPrevious}
variant="plain"
>
<AngleUpIcon />
</Button>
<Button
ouiaId="job-output-scroll-next-button"
aria-label={t`Scroll next`}
onClick={onScrollNext}
variant="plain"
>
<AngleDownIcon />
</Button>
<Button
ouiaId="job-output-scroll-first-button"
aria-label={t`Scroll first`}
onClick={onScrollFirst}
variant="plain"
>
<AngleDoubleUpIcon />
</Button>
<Button
ouiaId="job-output-scroll-last-button"
aria-label={t`Scroll last`}
onClick={onScrollLast}
variant="plain"
>
<AngleDoubleDownIcon />
</Button>
</Wrapper>
<>
<ControllsWrapper>
<ExpandCollapseWrapper>
{!isFlatMode && isTemplateJob && (
<Button
aria-label={
isAllCollapsed ? t`Expand job events` : t`Collapse all job events`
}
variant="plain"
type="button"
onClick={toggleExpandCollapseAll}
>
{isAllCollapsed ? <AngleRightIcon /> : <AngleDownIcon />}
</Button>
)}
</ExpandCollapseWrapper>
<ScrollWrapper>
<Button
ouiaId="job-output-scroll-previous-button"
aria-label={t`Scroll previous`}
onClick={onScrollPrevious}
variant="plain"
>
<AngleUpIcon />
</Button>
<Button
ouiaId="job-output-scroll-next-button"
aria-label={t`Scroll next`}
onClick={onScrollNext}
variant="plain"
>
<AngleDownIcon />
</Button>
<Button
ouiaId="job-output-scroll-first-button"
aria-label={t`Scroll first`}
onClick={onScrollFirst}
variant="plain"
>
<AngleDoubleUpIcon />
</Button>
<Button
ouiaId="job-output-scroll-last-button"
aria-label={t`Scroll last`}
onClick={onScrollLast}
variant="plain"
>
<AngleDoubleDownIcon />
</Button>
</ScrollWrapper>
</ControllsWrapper>
</>
);
export default PageControls;

33
awx/ui/src/screens/Job/JobOutput/PageControls.test.js
View File

@ -22,11 +22,42 @@ describe('PageControls', () => {
});
test('should render menu control icons', () => {
wrapper = mountWithContexts(<PageControls />);
wrapper = mountWithContexts(<PageControls isFlatMode />);
findChildren();
expect(AngleDoubleUpIcon.length).toBe(1);
expect(AngleDoubleDownIcon.length).toBe(1);
expect(AngleUpIcon.length).toBe(1);
expect(AngleDownIcon.length).toBe(1);
});
test('should render expand/collapse all', () => {
wrapper = mountWithContexts(
<PageControls isFlatMode={false} isTemplateJob />
);
const expandCollapse = wrapper.find('PageControls__ExpandCollapseWrapper');
expect(expandCollapse).toHaveLength(1);
expect(expandCollapse.find('AngleDownIcon')).toHaveLength(1);
expect(expandCollapse.find('AngleRightIcon')).toHaveLength(0);
});
test('should render correct expand/collapse angle icon', () => {
wrapper = mountWithContexts(
<PageControls isFlatMode={false} isAllCollapsed isTemplateJob />
);
const expandCollapse = wrapper.find('PageControls__ExpandCollapseWrapper');
expect(expandCollapse).toHaveLength(1);
expect(expandCollapse.find('AngleDownIcon')).toHaveLength(0);
expect(expandCollapse.find('AngleRightIcon')).toHaveLength(1);
});
test('Should not render expand/collapse all', () => {
wrapper = mountWithContexts(
<PageControls isFlatMode={false} isAllCollapsed isTemplateJob={false} />
);
const expandCollapse = wrapper.find('PageControls__ExpandCollapseWrapper');
expect(expandCollapse.find('AngleDownIcon')).toHaveLength(0);
expect(expandCollapse.find('AngleRightIcon')).toHaveLength(0);
});
});

53
awx/ui/src/screens/Job/JobOutput/useJobEvents.js
View File

@ -10,12 +10,14 @@ const initialState = {
// events with parent events that aren't yet loaded.
// arrays indexed by parent uuid
eventsWithoutParents: {},
isAllCollapsed: false,
};
export const ADD_EVENTS = 'ADD_EVENTS';
export const TOGGLE_NODE_COLLAPSED = 'TOGGLE_NODE_COLLAPSED';
export const SET_EVENT_NUM_CHILDREN = 'SET_EVENT_NUM_CHILDREN';
export const CLEAR_EVENTS = 'CLEAR_EVENTS';
export const REBUILD_TREE = 'REBUILD_TREE';
export const TOGGLE_COLLAPSE_ALL = 'TOGGLE_COLLAPSE_ALL';
export default function useJobEvents(callbacks, isFlatMode) {
const [actionQueue, setActionQueue] = useState([]);
@ -24,7 +26,6 @@ export default function useJobEvents(callbacks, isFlatMode) {
};
const reducer = jobEventsReducer(callbacks, isFlatMode, enqueueAction);
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
setActionQueue((queue) => {
const action = queue[0];
@ -43,8 +44,10 @@ export default function useJobEvents(callbacks, isFlatMode) {
return {
addEvents: (events) => dispatch({ type: ADD_EVENTS, events }),
getNodeByUuid: (uuid) => getNodeByUuid(state, uuid),
toggleNodeIsCollapsed: (uuid) =>
dispatch({ type: TOGGLE_NODE_COLLAPSED, uuid }),
toggleNodeIsCollapsed: (uuid, isCollapsed) =>
dispatch({ type: TOGGLE_NODE_COLLAPSED, uuid, isCollapsed }),
toggleCollapseAll: (isCollapsed) =>
dispatch({ type: TOGGLE_COLLAPSE_ALL, isCollapsed }),
getEventForRow: (rowIndex) => getEventForRow(state, rowIndex),
getNodeForRow: (rowIndex) => getNodeForRow(state, rowIndex),
getTotalNumChildren: (uuid) => {
@ -57,6 +60,7 @@ export default function useJobEvents(callbacks, isFlatMode) {
getEvent: (eventIndex) => getEvent(state, eventIndex),
clearLoadedEvents: () => dispatch({ type: CLEAR_EVENTS }),
rebuildEventsTree: () => dispatch({ type: REBUILD_TREE }),
isAllCollapsed: state.isAllCollapsed,
};
}
@ -65,6 +69,8 @@ export function jobEventsReducer(callbacks, isFlatMode, enqueueAction) {
switch (action.type) {
case ADD_EVENTS:
return addEvents(state, action.events);
case TOGGLE_COLLAPSE_ALL:
return toggleCollapseAll(state, action.isCollapsed);
case TOGGLE_NODE_COLLAPSED:
return toggleNodeIsCollapsed(state, action.uuid);
case SET_EVENT_NUM_CHILDREN:
@ -135,7 +141,7 @@ export function jobEventsReducer(callbacks, isFlatMode, enqueueAction) {
const eventIndex = event.counter;
const newNode = {
eventIndex,
isCollapsed: false,
isCollapsed: state.isAllCollapsed,
children: [],
};
const index = state.tree.findIndex((node) => node.eventIndex > eventIndex);
@ -167,7 +173,7 @@ export function jobEventsReducer(callbacks, isFlatMode, enqueueAction) {
}
const newNode = {
eventIndex,
isCollapsed: false,
isCollapsed: state.isAllCollapsed,
children: [],
};
const index = parent.children.findIndex(
@ -400,7 +406,6 @@ function getNumCollapsedChildren(node) {
if (node.isCollapsed) {
return getTotalNumChildren(node);
}
let sum = 0;
node.children.forEach((child) => {
sum += getNumCollapsedChildren(child);
@ -409,10 +414,40 @@ function getNumCollapsedChildren(node) {
}
function toggleNodeIsCollapsed(state, eventUuid) {
return updateNodeByUuid(state, eventUuid, (node) => ({
return {
...updateNodeByUuid(state, eventUuid, (node) => ({
...node,
isCollapsed: !node.isCollapsed,
})),
isAllCollapsed: false,
};
}
function toggleCollapseAll(state, isAllCollapsed) {
const newTree = state.tree.map((node) =>
_toggleNestedNodes(state.events, node, isAllCollapsed)
);
return { ...state, tree: newTree, isAllCollapsed };
}
function _toggleNestedNodes(events, node, isCollapsed) {
const {
parent_uuid,
event_data: { playbook_uuid },
uuid,
} = events[node.eventIndex];
const eventShouldNotCollapse = uuid === playbook_uuid || !parent_uuid?.length;
const children = node.children?.map((nestedNode) =>
_toggleNestedNodes(events, nestedNode, isCollapsed)
);
return {
...node,
isCollapsed: !node.isCollapsed,
}));
isCollapsed: eventShouldNotCollapse ? false : isCollapsed,
children,
};
}
function updateNodeByUuid(state, uuid, update) {

1
awx/ui/src/screens/Job/JobOutput/useJobEvents.test.js
View File

@ -167,6 +167,7 @@ describe('useJobEvents', () => {
uuidMap: {},
eventsWithoutParents: {},
eventGaps: [],
isAllCollapsed: false,
};
});