fix(ui): add exec check to avoid API calls (argoproj#16168)

* bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> * bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> * bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> * bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> * bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> * bug: add parent ref node info on resource list Signed-off-by: ashutosh16 <[email protected]> --------- Signed-off-by: ashutosh16 <[email protected]>
JulienFuix · Feb 6, 2024 · 7b3641a · 7b3641a
1 parent bcce87e
commit 7b3641a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-resource-list.tsx b/ui/src/app/applications/components/application-details/application-resource-list.tsx
@@ -31,35 +31,45 @@ export const ApplicationResourceList = ({
         return null;
     }
     const parentNode = ((resources || []).length > 0 && (getResNode(tree.nodes, nodeKey(resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
+    const searchParams = new URLSearchParams(window.location.search);
+    const view = searchParams.get('view');
 
+    const ParentRefDetails = () => {
+        return 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 />
+        );
+    };
     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 view is set to  or network */}
+            {(view === 'tree' || view === 'network') && (
+                <div className='resource-details__header' style={{paddingTop: '20px'}}>
+                    <ParentRefDetails />
+                </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-2 xxxlarge-1'>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>
+                        <div className='columns small-2 xxxlarge-1'>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'>CREATED AT</div>
+                        <div className='columns small-2 xxxlarge-1'>STATUS</div>
                     </div>
                 </div>
                 {resources
@@ -79,7 +89,7 @@ export const ApplicationResourceList = ({
                                         <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>
@@ -98,7 +108,7 @@ export const ApplicationResourceList = ({
                                 </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.namespace}</div>
                                 {res.kind === 'ReplicaSet' &&
                                     ((getResNode(tree.nodes, nodeKey(res)) as ResourceNode).info || [])
                                         .filter(tag => !tag.name.includes('Node'))
@@ -111,7 +121,7 @@ export const ApplicationResourceList = ({
                                             );
                                         })}
 
-                                <div className='columns small-2 xxxlarge-2'>
+                                <div className='columns small-2 xxxlarge-1'>
                                     {res.createdAt && (
                                         <span>
                                             <Moment fromNow={true} ago={true}>
@@ -121,7 +131,7 @@ export const ApplicationResourceList = ({
                                         </span>
                                     )}
                                 </div>
-                                <div className='columns small-2 xxxlarge-2'>
+                                <div className='columns small-2 xxxlarge-1'>
                                     {res.health && (
                                         <React.Fragment>
                                             <HealthStatusIcon state={res.health} /> {res.health.status} &nbsp;

diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -280,7 +280,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                         const settings = await services.authService.settings();
                         const execEnabled = settings.execEnabled;
                         const logsAllowed = await services.accounts.canI('logs', 'get', application.spec.project + '/' + application.metadata.name);
-                        const execAllowed = await services.accounts.canI('exec', 'create', application.spec.project + '/' + application.metadata.name);
+                        const execAllowed = execEnabled && (await services.accounts.canI('exec', 'create', application.spec.project + '/' + application.metadata.name));
                         const links = await services.applications.getResourceLinks(application.metadata.name, application.metadata.namespace, selectedNode).catch(() => null);
                         return {controlledState, liveState, events, podState, execEnabled, execAllowed, logsAllowed, links};
                     }}>

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -473,8 +473,8 @@ function getActionItems(
     const execAction = services.authService
         .settings()
         .then(async settings => {
-            const execAllowed = await services.accounts.canI('exec', 'create', application.spec.project + '/' + application.metadata.name);
-            if (resource.kind === 'Pod' && settings.execEnabled && execAllowed) {
+            const execAllowed = settings.execEnabled && (await services.accounts.canI('exec', 'create', application.spec.project + '/' + application.metadata.name));
+            if (resource.kind === 'Pod' && execAllowed) {
                 return [
                     {
                         title: 'Exec',