Skip to content

Commit

Permalink
bug: add parent ref node info on resource list
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashutosh16
ashutosh16 committed Oct 30, 2023
1 parent 1da3a42 commit 1e3f194
Showing 1 changed file with 42 additions and 35 deletions.
77 changes: 42 additions & 35 deletions ui/src/app/applications/components/application-details/application-resource-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const ApplicationResourceList = ({
resources,
onNodeClick,
nodeMenu,
tree
tree,
}: {
resources: models.ResourceStatus[];
onNodeClick?: (fullName: string) => any;
Expand All @@ -30,36 +30,43 @@ export const ApplicationResourceList = ({
}
return null;
}
const parentNode = ((resources || []).length > 0 && (getResNode(tree.nodes, nodeKey(resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
const parentNode = resources?.length > 0 && (getResNode(tree.nodes, nodeKey(resources[0]))?.parentRefs?.[0] || ({} as ResourceRef));

const ParenRefDetails = () => {
return (
<div className='resource-parent-node-info-title'>
<div>Parent Node Info</div>
<div className='resource-parent-node-info-title__label'>
<div>Name:</div>
<div>{parentNode?.name}</div>
</div>
<div className='resource-parent-node-info-title__label'>
<div>Kind:</div>
<div>{parentNode?.kind}</div>
</div>
</div>
);
};
return (
<div>
<div className='resource-details__header' style={{paddingTop: '20px'}}>
{Object.keys(parentNode).length > 0 && (
<div className='resource-parent-node-info-title'>
<div> Parent Node Info</div>
<div className='resource-parent-node-info-title__label'>
<div>Name:</div>
<div>{parentNode?.name}</div>
</div>
<div className='resource-parent-node-info-title__label'>
<div>Kind:</div>
<div> {parentNode?.kind}</div>
</div>
</div>
)}
</div>
{/*Display only when the resource list is of the same type*/}
{resources.every(res => res.kind === resources[0].kind) && (
<div className='resource-details__header' style={{paddingTop: '20px'}}>
<ParenRefDetails />
</div>
)}

<div className='argo-table-list argo-table-list--clickable'>
<div className='argo-table-list__head'>
<div className='row'>
<div className='columns small-1 xxxlarge-1' />
<div className='columns small-2 xxxlarge-2'>NAME</div>
<div className='columns small-1 xxxlarge-1'>GROUP/KIND</div>
<div className='columns small-1 xxxlarge-1'>SYNC ORDER</div>
<div className='columns small-2 xxxlarge-2'>NAMESPACE</div>
{(parentNode.kind === 'Rollout' || parentNode.kind === 'Deployment') && <div className='columns small-1 xxxlarge-1'>REVISION</div>}
<div className='columns small-2 xxxlarge-2'>CREATED AT</div>
<div className='columns small-2 xxxlarge-2'>STATUS</div>
<div className='columns small-2 xxxlarge-1' />
<div className='columns small-2 xxxlarge-1'>NAME</div>
<div className='columns small-2 xxxlarge-1'>GROUP/KIND</div>
<div className='columns small-2 xxxlarge-1'>SYNC ORDER</div>
<div className='columns small-2 xxxlarge-1'>NAMESPACE</div>
{(parentNode.kind === 'Rollout' || parentNode.kind === 'Deployment') && <div className='columns small-2 xxxlarge-1'>REVISION</div>}
<div className='columns small-2 xxxlarge-1'>CREATED AT</div>
<div className='columns small-2 xxxlarge-1'>STATUS</div>
</div>
</div>
{resources
Expand All @@ -68,18 +75,18 @@ export const ApplicationResourceList = ({
<div
key={nodeKey(res)}
className={classNames('argo-table-list__row', {
'application-resource-tree__node--orphaned': res.orphaned
'application-resource-tree__node--orphaned': res.orphaned,
})}
onClick={() => onNodeClick(nodeKey(res))}>
<div className='row'>
<div className='columns small-1 xxxlarge-1'>
<div className='columns small-2 xxxlarge-1'>
<div className='application-details__resource-icon'>
<ResourceIcon kind={res.kind} />
<br />
<div>{ResourceLabel({kind: res.kind})}</div>
</div>
</div>
<div className='columns small-2 xxxlarge-2'>
<div className='columns small-2 xxxlarge-1'>
{res.name}
{res.kind === 'Application' && (
<Consumer>
Expand All @@ -93,22 +100,22 @@ export const ApplicationResourceList = ({
</Consumer>
)}
</div>
<div className='columns small-1 xxxlarge-1'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
<div className='columns small-1 xxxlarge-1'>{res.syncWave || '-'}</div>
<div className='columns small-2 xxxlarge-2'>{res.namespace}</div>
<div className='columns small-2 xxxlarge-1'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
<div className='columns small-2 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 || [])
.filter(tag => !tag.name.includes('Node'))
.slice(0, 4)
.map((tag, i) => {
return (
<div key={i} className='columns small-1 xxxlarge-1'>
<div key={i} className='columns small-2 xxxlarge-1'>
{tag?.value?.split(':')[1] || '-'}
</div>
);
})}

<div className='columns small-2 xxxlarge-2'>
<div className='columns small-2 xxxlarge-1'>
{res.createdAt && (
<span>
<Moment fromNow={true} ago={true}>
Expand All @@ -118,7 +125,7 @@ export const ApplicationResourceList = ({
</span>
)}
</div>
<div className='columns small-2 xxxlarge-2'>
<div className='columns small-2 columns small-2 xxxlarge-1'>
{res.health && (
<React.Fragment>
<HealthStatusIcon state={res.health} /> {res.health.status} &nbsp;
Expand All @@ -143,7 +150,7 @@ export const ApplicationResourceList = ({
info: null,
uid: '',
resourceVersion: null,
parentRefs: []
parentRefs: [],
})}
</DropDown>
</div>
Expand Down

0 comments on commit 1e3f194

Please sign in to comment.