feat: Container statuses on summary tab of pod and detailed info in tooltip for pod on resource tree

ui/src/app/applications/components/application-node-info/application-node-info.scss

@@ -39,4 +39,31 @@
             color: $argo-color-gray-8;
         }
     }
+
+    &__container {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        line-height: 1.8;
+        border-bottom: 1px solid rgba(222, 230, 235, 0.7);
+
+        &--name {
+            width: 15%;
+        }
+        &--highlight {
+            font-style: italic;
+        }
+
+        &--hint {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+            cursor: pointer;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+        &:last-child {
+            border-bottom: none;
+        }
+    }
 }

ui/src/app/applications/components/application-node-info/application-node-info.tsx

@@ -1,4 +1,5 @@
 import {Checkbox, DataLoader, Tab, Tabs} from 'argo-ui';
+import classNames from 'classnames';
 import * as deepMerge from 'deepmerge';
 import * as React from 'react';
 
@@ -16,10 +17,72 @@ import {
     getPodStateReason,
     HealthStatusIcon
 } from '../utils';
-
 import './application-node-info.scss';
 import {ReadinessGatesFailedWarning} from './readiness-gates-failed-warning';
 
+const RenderContainerState = (props: {container: any}) => {
+    const state = (props.container.state?.waiting && 'waiting') || (props.container.state?.terminated && 'terminated') || (props.container.state?.running && 'running');
+    const status = props.container.state.waiting?.reason || props.container.state.terminated?.reason || props.container.state.running?.reason;
+    const lastState = props.container.lastState?.terminated;
+    const msg = props.container.state.waiting?.message || props.container.state.terminated?.message || props.container.state.running?.message;
+
+    return (
+        <div className='application-node-info__container'>
+            <div className='application-node-info__container--name'>{props.container.name}</div>
+            <div>
+                {state && (
+                    <>
+                        Container is <span className='application-node-info__container--highlight'>{state}</span>
+                        {status && ' because of '}
+                    </>
+                )}
+                <span title={msg || ''}>
+                    {status && (
+                        <span
+                            className={classNames('application-node-info__container--highlight', {
+                                'application-node-info__container--hint': !!msg
+                            })}>
+                            {status}
+                        </span>
+                    )}
+                </span>
+                {'.'}
+                {(props.container.state.terminated?.exitCode === 0 || props.container.state.terminated?.exitCode) && (
+                    <>
+                        {' '}
+                        It exited with <span className='application-node-info__container--highlight'>exit code {props.container.state.terminated.exitCode}.</span>
+                    </>
+                )}
+                <>
+                    {' '}
+                    It is <span className='application-node-info__container--highlight'>{props.container?.started ? 'started' : 'not started'}</span> and
+                    <span className='application-node-info__container--highlight'>{props.container?.ready ? ' ready.' : ' not ready.'}</span>
+                </>
+                <br />
+                {lastState && (
+                    <>
+                        <>
+                            The container last terminated with <span className='application-node-info__container--highlight'>exit code {lastState?.exitCode}</span>
+                        </>
+                        {lastState?.reason && ' because of '}
+                        <span title={props.container.lastState?.message || ''}>
+                            {lastState?.reason && (
+                                <span
+                                    className={classNames('application-node-info__container--highlight', {
+                                        'application-node-info__container--hint': !!props.container.lastState?.message
+                                    })}>
+                                    {lastState?.reason}
+                                </span>
+                            )}
+                        </span>
+                        {'.'}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
 export const ApplicationNodeInfo = (props: {
     application: models.Application;
     node: models.ResourceNode;
@@ -54,11 +117,23 @@ export const ApplicationNodeInfo = (props: {
     }
     if (props.live) {
         if (props.node.kind === 'Pod') {
-            const {reason, message} = getPodStateReason(props.live);
+            const {reason, message, netContainerStatuses} = getPodStateReason(props.live);
             attributes.push({title: 'STATE', value: reason});
             if (message) {
                 attributes.push({title: 'STATE DETAILS', value: message});
             }
+            if (netContainerStatuses.length > 0) {
+                attributes.push({
+                    title: 'CONTAINER STATE',
+                    value: (
+                        <div className='application-node-info__labels'>
+                            {netContainerStatuses.map((container, i) => {
+                                return <RenderContainerState key={i} container={container} />;
+                            })}
+                        </div>
+                    )
+                });
+            }
         } else if (props.node.kind === 'Service') {
             attributes.push({title: 'TYPE', value: props.live.spec.type});
             let hostNames = '';

ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx

@@ -3,6 +3,7 @@ import * as classNames from 'classnames';
 import * as dagre from 'dagre';
 import * as React from 'react';
 import Moment from 'react-moment';
+import * as moment from 'moment';
 
 import * as models from '../../../shared/models';
 
@@ -603,6 +604,61 @@ function expandCollapse(node: ResourceTreeNode, props: ApplicationResourceTreePr
     props.setNodeExpansion(node.uid, isExpanded);
 }
 
+function NodeInfoDetails({tag: tag, kind: kind}: {tag: models.InfoItem; kind: string}) {
+    if (kind === 'Pod') {
+        const val = `${tag.name}`;
+        if (val === 'Status Reason') {
+            if (`${tag.value}` !== 'ImagePullBackOff')
+                return (
+                    <span className='application-resource-tree__node-label' title={`Status: ${tag.value}`}>
+                        {tag.value}
+                    </span>
+                );
+            else {
+                return (
+                    <span
+                        className='application-resource-tree__node-label'
+                        title='One of the containers may have the incorrect image name/tag, or you may be fetching from the incorrect repository, or the repository requires authentication.'>
+                        {tag.value}
+                    </span>
+                );
+            }
+        } else if (val === 'Containers') {
+            const arr = `${tag.value}`.split('/');
+            const title = `Number of containers in total: ${arr[1]} \nNumber of ready containers: ${arr[0]}`;
+            return (
+                <span className='application-resource-tree__node-label' title={`${title}`}>
+                    {tag.value}
+                </span>
+            );
+        } else if (val === 'Restart Count') {
+            return (
+                <span className='application-resource-tree__node-label' title={`The total number of restarts of the containers: ${tag.value}`}>
+                    {tag.value}
+                </span>
+            );
+        } else if (val === 'Revision') {
+            return (
+                <span className='application-resource-tree__node-label' title={`The revision in which pod present is: ${tag.value}`}>
+                    {tag.value}
+                </span>
+            );
+        } else {
+            return (
+                <span className='application-resource-tree__node-label' title={`${tag.name}: ${tag.value}`}>
+                    {tag.value}
+                </span>
+            );
+        }
+    } else {
+        return (
+            <span className='application-resource-tree__node-label' title={`${tag.name}: ${tag.value}`}>
+                {tag.value}
+            </span>
+        );
+    }
+}
+
 function renderResourceNode(props: ApplicationResourceTreeProps, id: string, node: ResourceTreeNode & dagre.Node, nodesHavingChildren: Map<string, number>) {
     const fullName = nodeKey(node);
     let comparisonStatus: models.SyncStatusCode = null;
@@ -677,18 +733,18 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
             </div>
             <div className='application-resource-tree__node-labels'>
                 {node.createdAt || rootNode ? (
-                    <Moment className='application-resource-tree__node-label' fromNow={true} ago={true}>
-                        {node.createdAt || props.app.metadata.creationTimestamp}
-                    </Moment>
+                    <span title={`${node.kind} was created ${moment(node.createdAt).fromNow()}`}>
+                        <Moment className='application-resource-tree__node-label' fromNow={true} ago={true}>
+                            {node.createdAt || props.app.metadata.creationTimestamp}
+                        </Moment>
+                    </span>
                 ) : null}
                 {(node.info || [])
                     .filter(tag => !tag.name.includes('Node'))
                     .slice(0, 4)
-                    .map((tag, i) => (
-                        <span className='application-resource-tree__node-label' title={`${tag.name}:${tag.value}`} key={i}>
-                            {tag.value}
-                        </span>
-                    ))}
+                    .map((tag, i) => {
+                        return <NodeInfoDetails tag={tag} kind={node.kind} key={i} />;
+                    })}
                 {(node.info || []).length > 4 && (
                     <Tooltip
                         content={(node.info || []).map(i => (

ui/src/app/applications/components/utils.tsx

@@ -872,14 +872,18 @@ export const OperationState = ({app, quiet}: {app: appModels.Application; quiet?
     );
 };
 
-export function getPodStateReason(pod: appModels.State): {message: string; reason: string} {
+export function getPodStateReason(pod: appModels.State): {message: string; reason: string; netContainerStatuses: any[]} {
     let reason = pod.status.phase;
     let message = '';
     if (pod.status.reason) {
         reason = pod.status.reason;
     }
 
     let initializing = false;
+
+    let netContainerStatuses = pod.status.initContainerStatuses || [];
+    netContainerStatuses = netContainerStatuses.concat(pod.status.containerStatuses || []);
+
     for (const container of (pod.status.initContainerStatuses || []).slice().reverse()) {
         if (container.state.terminated && container.state.terminated.exitCode === 0) {
             continue;
@@ -939,7 +943,7 @@ export function getPodStateReason(pod: appModels.State): {message: string; reaso
         message = '';
     }
 
-    return {reason, message};
+    return {reason, message, netContainerStatuses};
 }
 
 export const getPodReadinessGatesState = (pod: appModels.State): {nonExistingConditions: string[]; failedConditions: string[]} => {