Skip to content

Commit

Permalink
fix: Excessive HTTP requests when navigating in list view (#17757)
Browse files Browse the repository at this point in the history
Signed-off-by: Adrian Berger <[email protected]>
Co-authored-by: pasha-codefresh <[email protected]>
  • Loading branch information
adberger and pasha-codefresh authored Apr 16, 2024
1 parent 4d527f8 commit e12fae8
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 32 deletions.
1 change: 1 addition & 0 deletions USERS.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ Currently, the following organizations are **officially** using Argo CD:
1. [BCDevExchange DevOps Platform](https://bcdevexchange.org/DevOpsPlatform)
1. [Beat](https://thebeat.co/en/)
1. [Beez Innovation Labs](https://www.beezlabs.com/)
1. [Bedag Informatik AG](https://www.bedag.ch/)
1. [Beleza Na Web](https://www.belezanaweb.com.br/)
1. [BigPanda](https://bigpanda.io)
1. [BioBox Analytics](https://biobox.io)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,14 @@ import {format} from 'date-fns';
import {ResourceNode, ResourceRef} from '../../../shared/models';
import './application-resource-list.scss';

export const ApplicationResourceList = ({
resources,
onNodeClick,
nodeMenu,
tree
}: {
export interface ApplicationResourceListProps {
resources: models.ResourceStatus[];
onNodeClick?: (fullName: string) => any;
nodeMenu?: (node: models.ResourceNode) => React.ReactNode;
tree?: models.ApplicationTree;
}) => {
}

export const ApplicationResourceList = (props: ApplicationResourceListProps) => {
function getResNode(nodes: ResourceNode[], nodeId: string): models.ResourceNode {
for (const node of nodes) {
if (nodeKey(node) === nodeId) {
Expand All @@ -31,7 +28,7 @@ export const ApplicationResourceList = ({
}
return null;
}
const parentNode = ((resources || []).length > 0 && (getResNode(tree.nodes, nodeKey(resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
const parentNode = ((props.resources || []).length > 0 && (getResNode(props.tree.nodes, nodeKey(props.resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
const searchParams = new URLSearchParams(window.location.search);
const view = searchParams.get('view');

Expand Down Expand Up @@ -73,15 +70,15 @@ export const ApplicationResourceList = ({
<div className='columns small-2 xxxlarge-1'>STATUS</div>
</div>
</div>
{resources
{props.resources
.sort((first, second) => -createdOrNodeKey(first).localeCompare(createdOrNodeKey(second)))
.map(res => (
<div
key={nodeKey(res)}
className={classNames('argo-table-list__row', {
'application-resource-tree__node--orphaned': res.orphaned
})}
onClick={() => onNodeClick(nodeKey(res))}>
onClick={() => props.onNodeClick && props.onNodeClick(nodeKey(res))}>
<div className='row'>
<div className='columns small-1 xxxlarge-1'>
<div className='application-details__resource-icon'>
Expand Down Expand Up @@ -111,7 +108,7 @@ export const ApplicationResourceList = ({
<div className='columns small-1 xxxlarge-1'>{res.syncWave || '-'}</div>
<div className='columns small-2 xxxlarge-1'>{res.namespace}</div>
{res.kind === 'ReplicaSet' &&
((getResNode(tree.nodes, nodeKey(res)) as ResourceNode).info || [])
((getResNode(props.tree.nodes, nodeKey(res)) as ResourceNode).info || [])
.filter(tag => !tag.name.includes('Node'))
.slice(0, 4)
.map((tag, i) => {
Expand Down Expand Up @@ -140,27 +137,31 @@ export const ApplicationResourceList = ({
)}
{res.status && <ComparisonStatusIcon status={res.status} resource={res} label={true} />}
{res.hook && <i title='Resource lifecycle hook' className='fa fa-anchor' />}
<div className='application-details__node-menu'>
<DropDown
isMenu={true}
anchor={() => (
<button className='argo-button argo-button--light argo-button--lg argo-button--short'>
<i className='fa fa-ellipsis-v' />
</button>
)}>
{nodeMenu({
name: res.name,
version: res.version,
kind: res.kind,
namespace: res.namespace,
group: res.group,
info: null,
uid: '',
resourceVersion: null,
parentRefs: []
})}
</DropDown>
</div>
{props.nodeMenu && (
<div className='application-details__node-menu'>
<DropDown
isMenu={true}
anchor={() => (
<button className='argo-button argo-button--light argo-button--lg argo-button--short'>
<i className='fa fa-ellipsis-v' />
</button>
)}>
{() =>
props.nodeMenu({
name: res.name,
version: res.version,
kind: res.kind,
namespace: res.namespace,
group: res.group,
info: null,
uid: '',
resourceVersion: null,
parentRefs: []
})
}
</DropDown>
</div>
)}
</div>
</div>
</div>
Expand Down

0 comments on commit e12fae8

Please sign in to comment.