fix(ui): soften readiness gate failure message (#13972) (#14076)

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

@@ -8,17 +8,9 @@ import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
 import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';
-import {
-    ComparisonStatusIcon,
-    formatCreationTimestamp,
-    getPodReadinessGatesState,
-    getPodReadinessGatesState as _getPodReadinessGatesState,
-    getPodStateReason,
-    HealthStatusIcon
-} from '../utils';
-
+import {ComparisonStatusIcon, formatCreationTimestamp, getPodReadinessGatesState, getPodStateReason, HealthStatusIcon} from '../utils';
 import './application-node-info.scss';
-import {ReadinessGatesFailedWarning} from './readiness-gates-failed-warning';
+import {ReadinessGatesNotPassedWarning} from './readiness-gates-not-passed-warning';
 
 export const ApplicationNodeInfo = (props: {
     application: models.Application;
@@ -175,6 +167,14 @@ export const ApplicationNodeInfo = (props: {
     }
 
     const readinessGatesState = React.useMemo(() => {
+        // If containers are not ready then readiness gate status is not important.
+        if (!props.live?.status?.containerStatuses?.length) {
+            return null;
+        }
+        if (props.live?.status?.containerStatuses?.some((containerStatus: {ready: boolean}) => !containerStatus.ready)) {
+            return null;
+        }
+
         if (props.live && props.node?.kind === 'Pod') {
             return getPodReadinessGatesState(props.live);
         }
@@ -184,7 +184,7 @@ export const ApplicationNodeInfo = (props: {
 
     return (
         <div>
-            {Boolean(readinessGatesState) && <ReadinessGatesFailedWarning readinessGatesState={readinessGatesState} />}
+            {Boolean(readinessGatesState) && <ReadinessGatesNotPassedWarning readinessGatesState={readinessGatesState} />}
             <div className='white-box'>
                 <div className='white-box__details'>
                     {attributes.map(attr => (

ui/src/app/applications/components/application-node-info/readiness-gates-failed-warning.scss → ui/src/app/applications/components/application-node-info/readiness-gates-not-passed-warning.scss

@@ -3,7 +3,7 @@
 .white-box {
     &__readiness-gates-alert {
         padding: 20px;
-        border-left: 6px solid $argo-status-failed-color !important;
+        border-left: 6px solid $argo-status-warning-color !important;
 
         ul {
             margin-bottom: 0;

ui/src/app/applications/components/application-node-info/readiness-gates-failed-warning.tsx → ui/src/app/applications/components/application-node-info/readiness-gates-not-passed-warning.tsx

@@ -1,29 +1,29 @@
 import * as React from 'react';
 import {selectPostfix} from '../utils';
 
-import './readiness-gates-failed-warning.scss';
+import './readiness-gates-not-passed-warning.scss';
 
-export interface ReadinessGatesFailedWarningProps {
+export interface ReadinessGatesNotPassedWarningProps {
     readinessGatesState: {
         nonExistingConditions: string[];
-        failedConditions: string[];
+        notPassedConditions: string[];
     };
 }
 
-export const ReadinessGatesFailedWarning = ({readinessGatesState}: ReadinessGatesFailedWarningProps) => {
-    if (readinessGatesState.failedConditions.length > 0 || readinessGatesState.nonExistingConditions.length > 0) {
+export const ReadinessGatesNotPassedWarning = ({readinessGatesState}: ReadinessGatesNotPassedWarningProps) => {
+    if (readinessGatesState.notPassedConditions.length > 0 || readinessGatesState.nonExistingConditions.length > 0) {
         return (
             <div className='white-box white-box__readiness-gates-alert'>
-                <h5>Readiness Gates Failing: </h5>
+                <h5>Readiness Gates Not Passing: </h5>
                 <ul>
-                    {readinessGatesState.failedConditions.length > 0 && (
+                    {readinessGatesState.notPassedConditions.length > 0 && (
                         <li>
-                            The status of pod readiness gate{selectPostfix(readinessGatesState.failedConditions, '', 's')}{' '}
-                            {readinessGatesState.failedConditions
+                            The status of pod readiness gate{selectPostfix(readinessGatesState.notPassedConditions, '', 's')}{' '}
+                            {readinessGatesState.notPassedConditions
                                 .map(t => `"${t}"`)
                                 .join(', ')
                                 .trim()}{' '}
-                            {selectPostfix(readinessGatesState.failedConditions, 'is', 'are')} False.
+                            {selectPostfix(readinessGatesState.notPassedConditions, 'is', 'are')} False.
                         </li>
                     )}
                     {readinessGatesState.nonExistingConditions.length > 0 && (

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

@@ -942,11 +942,12 @@ export function getPodStateReason(pod: appModels.State): {message: string; reaso
     return {reason, message};
 }
 
-export const getPodReadinessGatesState = (pod: appModels.State): {nonExistingConditions: string[]; failedConditions: string[]} => {
+export const getPodReadinessGatesState = (pod: appModels.State): {nonExistingConditions: string[]; notPassedConditions: string[]} => {
+    // if pod does not have readiness gates then return empty status
     if (!pod.spec?.readinessGates?.length) {
         return {
             nonExistingConditions: [],
-            failedConditions: []
+            notPassedConditions: []
         };
     }
 
@@ -985,7 +986,7 @@ export const getPodReadinessGatesState = (pod: appModels.State): {nonExistingCon
 
     return {
         nonExistingConditions,
-        failedConditions
+        notPassedConditions: failedConditions
     };
 };