Skip to content

Commit

Permalink
feat: Expansion support and line relayout (#8661)
Browse files Browse the repository at this point in the history 
Signed-off-by: Keith Chong <kykchong@redhat.com>
  • Loading branch information
@keithchong
keithchong committed May 16, 2022
1 parent c29651d commit 8cd7d47
Show file tree
Hide file tree
Showing 5 changed files with 287 additions and 38 deletions.
6 changes: 6 additions & 0 deletions ui/src/app/applications/components/application-details/application-details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,12 @@ $header: 120px;
}
}

.separator {
border-right: 1px solid $argo-color-gray-4;
padding-top: 6px;
padding-bottom: 6px;
}

.zoom-value {
user-select: none;
margin-top: 3px;
Expand Down
68 changes: 67 additions & 1 deletion ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ interface ApplicationDetailsState {
slidingPanelPage?: number;
filteredGraph?: any[];
truncateNameOnRight?: boolean;
collapsedNodes?: string[];
}

interface FilterInput {
Expand Down Expand Up @@ -70,13 +71,30 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam

constructor(props: RouteComponentProps<{name: string}>) {
super(props);
this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, filteredGraph: [], truncateNameOnRight: false};
this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, filteredGraph: [], truncateNameOnRight: false, collapsedNodes: []};
}

private get showOperationState() {
return new URLSearchParams(this.props.history.location.search).get('operation') === 'true';
}

private setNodeExpansion(node: string, isExpanded: boolean) {
const index = this.state.collapsedNodes.indexOf(node);
if (isExpanded && index >= 0) {
this.state.collapsedNodes.splice(index, 1);
const updatedNodes = this.state.collapsedNodes.slice();
this.setState({collapsedNodes: updatedNodes});
} else if (!isExpanded && index < 0) {
const updatedNodes = this.state.collapsedNodes.slice();
updatedNodes.push(node);
this.setState({collapsedNodes: updatedNodes});
}
}

private getNodeExpansion(node: string): boolean {
return this.state.collapsedNodes.indexOf(node) < 0;
}

private get showConditions() {
return new URLSearchParams(this.props.history.location.search).get('conditions') === 'true';
}
Expand Down Expand Up @@ -229,6 +247,44 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
const toggleNameDirection = () => {
this.setState({truncateNameOnRight: !this.state.truncateNameOnRight});
};
const expandAll = () => {
this.setState({collapsedNodes: []});
};
const collapseAll = () => {
const nodes = new Array<ResourceTreeNode>();
tree.nodes
.map(node => ({...node, orphaned: false}))
.concat((tree.orphanedNodes || []).map(node => ({...node, orphaned: true})))
.forEach(node => {
const resourceNode: ResourceTreeNode = {...node};
nodes.push(resourceNode);
});
const collapsedNodesList = this.state.collapsedNodes.slice();
if (pref.view === 'network') {
const networkNodes = nodes.filter(node => node.networkingInfo);
networkNodes.forEach(parent => {
const parentId = parent.uid;
if (collapsedNodesList.indexOf(parentId) < 0) {
collapsedNodesList.push(parentId);
}
});
this.setState({collapsedNodes: collapsedNodesList});
} else {
const managedKeys = new Set(application.status.resources.map(AppUtils.nodeKey));
nodes.forEach(node => {
if (!((node.parentRefs || []).length === 0 || managedKeys.has(AppUtils.nodeKey(node)))) {
node.parentRefs.forEach(parent => {
const parentId = parent.uid;
if (collapsedNodesList.indexOf(parentId) < 0) {
collapsedNodesList.push(parentId);
}
});
}
});
collapsedNodesList.push(application.kind + '-' + application.metadata.namespace + '-' + application.metadata.name);
this.setState({collapsedNodes: collapsedNodesList});
}
};
return (
<div className='application-details'>
<Page
Expand Down Expand Up @@ -314,6 +370,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
<i className={classNames('fa fa-object-group fa-fw')} />
</a>
)}
<span className={`separator`} />
<a className={`group-nodes-button`} onClick={() => expandAll()} title='Expand all child nodes of all parent nodes'>
<i className='fa fa-plus fa-fw' />
</a>
<a className={`group-nodes-button`} onClick={() => collapseAll()} title='Collapse all child nodes of all parent nodes'>
<i className='fa fa-minus fa-fw' />
</a>
<span className={`separator`} />
<a className={`group-nodes-button`} onClick={() => setZoom(0.1)} title='Zoom in'>
<i className='fa fa-search-plus fa-fw' />
</a>
Expand Down Expand Up @@ -343,6 +407,8 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
nameDirection={this.state.truncateNameOnRight}
filters={pref.resourceFilter}
setTreeFilterGraph={setFilterGraph}
setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)}
getNodeExpansion={node => this.getNodeExpansion(node)}
/>
</Filters>
)) ||
Expand Down
30 changes: 28 additions & 2 deletions ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@
.application-resource-tree__line {
&:last-child {
&:after {
color: $argo-color-teal-6;
top: -8px;
content: none;
}
}
}
Expand Down Expand Up @@ -93,6 +92,33 @@
background-color: $argo-color-teal-2;
}

&--expansion {
position: absolute;
flex-shrink: 0px;
z-index: 10;
font-size: 0.5em;
padding: 2px;
box-shadow: 1px 1px 1px $argo-color-gray-4;
background-color: white;
margin-top: 9px;
margin-left: 215px;
}

&--podgroup--expansion {
position: absolute;
flex-shrink: 0px;
z-index: 10;
font-size: 0.5em;
padding: 2px;
box-shadow: 1px 1px 1px $argo-color-gray-4;
background-color: white;
margin-left: 215px;
}

&--pod {
background-color: lightcyan;
}

&--lower-section {
left: 8px;
right: 10px;
Expand Down
Loading

0 comments on commit 8cd7d47

Please sign in to comment.