Skip to content

Commit

Permalink
feat: Zoom in and out on resource view (#7183) (#8290)
Browse files Browse the repository at this point in the history 
Signed-off-by: Keith Chong <kykchong@redhat.com>
  • Loading branch information
@keithchong
keithchong authored Jan 27, 2022
1 parent 6dc544d commit f387ab8
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 11 deletions.
61 changes: 61 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 @@ -206,4 +206,65 @@ $header: 120px;
top: 280px;
}
}

.graph-options-panel {
margin-left: 10px;
z-index: 10;
padding: 5px;
display: inline-block;
background-color: $argo-color-gray-1;
box-shadow: 1px 1px 3px $argo-color-gray-5;
position: fixed;

a {
padding: 5px;
margin: 2px;
color: $argo-color-gray-6;
border: 1px solid transparent;
border-radius: 5px;

&.group-nodes-button {
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-align: center;
user-select: none;
transition: background-color .2s, border .2s, color .2s;
text-transform: uppercase;
&:hover {
background-color: #d1d5d9;
}
&:active {
transition: background-color .2s, border .2s, color .2s;
border: 1px $argo-color-teal-5 solid;
}
}

&.group-nodes-button-on {
color: $argo-color-gray-1;
background-color: $argo-color-gray-6;
&:hover {
background-color: $argo-color-gray-5;
}
}
}

.zoom-value {
user-select: none;
margin-top: 3px;
margin-right: 6px;
margin-left: 4px;
font-size: 14px;
text-align-last: right;
float: right;
width: 40px;
border: 1px $argo-color-gray-5 solid;
background-color: $argo-color-gray-3;
padding: 2px;
}
}
}
40 changes: 30 additions & 10 deletions ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface ApplicationDetailsState {
revision?: string;
groupedResources?: ResourceStatus[];
slidingPanelPage?: number;
zoom?: number;
}

interface FilterInput {
Expand Down Expand Up @@ -68,7 +69,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam

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

private get showOperationState() {
Expand Down Expand Up @@ -211,6 +212,16 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
)
);
const {Tree, Pods, Network, List} = AppsDetailsViewKey;
const zoomNum = (this.state.zoom * 100).toFixed(0);
const setZoom = (s: number) => {
let targetZoom: number = this.state.zoom + s;
if (targetZoom <= 0.05) {
targetZoom = 0.1;
} else if (targetZoom > 2.0) {
targetZoom = 2.0;
}
this.setState({zoom: targetZoom});
};
return (
<div className='application-details'>
<Page
Expand Down Expand Up @@ -274,15 +285,23 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
{refreshing && <p className='application-details__refreshing-label'>Refreshing</p>}
{((pref.view === 'tree' || pref.view === 'network') && (
<Filters pref={pref} tree={tree} onSetFilter={setFilter} onClearFilter={clearFilter}>
{pref.view === 'tree' && (
<button
className={`argo-button argo-button--base${!pref.groupNodes ? '-o' : ''}`}
style={{border: 'none', width: '160px'}}
onClick={() => this.toggleCompactView(pref)}>
<i className={classNames('fa fa-object-group')} style={{width: '15px', marginRight: '5px'}} />
Group Nodes
</button>
)}
<div className='graph-options-panel'>
{pref.view === 'tree' && (
<a
className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
title='Group Nodes'
onClick={() => this.toggleCompactView(pref)}>
<i className={classNames('fa fa-object-group fa-fw')} />
</a>
)}
<a className={`group-nodes-button`} onClick={() => setZoom(0.1)} title='Zoom in'>
<i className='fa fa-search-plus fa-fw' />
</a>
<a className={`group-nodes-button`} onClick={() => setZoom(-0.1)} title='Zoom out'>
<i className='fa fa-search-minus fa-fw' />
</a>
<div className={`zoom-value`}>{zoomNum}%</div>
</div>
<ApplicationResourceTree
nodeFilter={node => this.filterTreeNode(node, treeFilter)}
selectedNodeFullName={this.selectedNodeKey}
Expand All @@ -299,6 +318,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
useNetworkingHierarchy={pref.view === 'network'}
onClearFilter={clearFilter}
onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)}
zoom={this.state.zoom}
/>
</Filters>
)) ||
Expand Down
3 changes: 2 additions & 1 deletion ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface ApplicationResourceTreeProps {
onClearFilter: () => any;
showOrphanedResources: boolean;
showCompactNodes: boolean;
zoom: number;
}

interface Line {
Expand Down Expand Up @@ -644,7 +645,7 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
)) || (
<div
className={classNames('application-resource-tree', {'application-resource-tree--network': props.useNetworkingHierarchy})}
style={{width: size.width + 150, height: size.height + 250}}>
style={{width: size.width + 150, height: size.height + 250, transformOrigin: '0% 0%', transform: `scale(${props.zoom})`}}>
{graphNodes.map(key => {
const node = graph.node(key);
const nodeType = node.type;
Expand Down

0 comments on commit f387ab8

Please sign in to comment.