fix(ui): Display error msg when live state is empty (#13031)

* fix: disply error when live state is empty Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * fix: disply error when live state is empty Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * fix: disply error when live state is empty Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> --------- Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> Signed-off-by: asingh <11219262+ashutosh16@users.noreply.github.com>
argoproj · May 28, 2023 · cd46c76 · cd46c76
1 parent 64e718c
commit cd46c76
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.scss b/ui/src/app/applications/components/application-node-info/application-node-info.scss
@@ -39,7 +39,10 @@
             color: $argo-color-gray-8;
         }
     }
-
+    &__err_msg {
+        padding-right: 2em;
+        color: $argo-failed-color;
+    }
     &__container {
         display: flex;
         align-items: center;
@@ -66,4 +69,4 @@
             border-bottom: none;
         }
     }
-}
+}
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.tsx b/ui/src/app/applications/components/application-node-info/application-node-info.tsx
@@ -115,6 +115,7 @@ export const ApplicationNodeInfo = (props: {
             )
         });
     }
+
     if (props.live) {
         if (props.node.kind === 'Pod') {
             const {reason, message, netContainerStatuses} = getPodStateReason(props.live);
@@ -184,7 +185,7 @@ export const ApplicationNodeInfo = (props: {
             } as any);
         }
     }
-
+    let showLiveState = true;
     if (props.links) {
         attributes.push({
             title: 'LINKS',
@@ -200,35 +201,62 @@ export const ApplicationNodeInfo = (props: {
                 <DataLoader load={() => services.viewPreferences.getPreferences()}>
                     {pref => {
                         const live = deepMerge(props.live, {}) as any;
+                        if (Object.keys(live).length === 0) {
+                            showLiveState = false;
+                        }
+
                         if (live?.metadata?.managedFields && pref.appDetails.hideManagedFields) {
                             delete live.metadata.managedFields;
                         }
                         return (
-                            <>
-                                <div className='application-node-info__checkboxes'>
-                                    <Checkbox
-                                        id='hideManagedFields'
-                                        checked={!!pref.appDetails.hideManagedFields}
-                                        onChange={() =>
-                                            services.viewPreferences.updatePreferences({
-                                                appDetails: {
-                                                    ...pref.appDetails,
-                                                    hideManagedFields: !pref.appDetails.hideManagedFields
+                            <React.Fragment>
+                                {showLiveState ? (
+                                    <React.Fragment>
+                                        <div className='application-node-info__checkboxes'>
+                                            <Checkbox
+                                                id='hideManagedFields'
+                                                checked={!!pref.appDetails.hideManagedFields}
+                                                onChange={() =>
+                                                    services.viewPreferences.updatePreferences({
+                                                        appDetails: {
+                                                            ...pref.appDetails,
+                                                            hideManagedFields: !pref.appDetails.hideManagedFields
+                                                        }
+                                                    })
                                                 }
-                                            })
-                                        }
-                                    />
-                                    <label htmlFor='hideManagedFields'>Hide Managed Fields</label>
-                                </div>
-                                <YamlEditor
-                                    input={live}
-                                    hideModeButtons={!live}
-                                    vScrollbar={live}
-                                    onSave={(patch, patchType) =>
-                                        services.applications.patchResource(props.application.metadata.name, props.application.metadata.namespace, props.node, patch, patchType)
-                                    }
-                                />
-                            </>
+                                            />
+                                            <label htmlFor='hideManagedFields'>Hide Managed Fields</label>
+                                        </div>
+                                        <YamlEditor
+                                            input={live}
+                                            hideModeButtons={!live}
+                                            vScrollbar={live}
+                                            onSave={(patch, patchType) =>
+                                                services.applications.patchResource(
+                                                    props.application.metadata.name,
+                                                    props.application.metadata.namespace,
+                                                    props.node,
+                                                    patch,
+                                                    patchType
+                                                )
+                                            }
+                                        />
+                                    </React.Fragment>
+                                ) : (
+                                    <div className='application-node-info__err_msg'>
+                                        Resource not found in cluster:{' '}
+                                        {`${props?.controlled?.state?.targetState?.apiVersion}/${props?.controlled?.state?.targetState?.kind}:${props.node.name}`}
+                                        <br />
+                                        {props?.controlled?.state?.normalizedLiveState?.apiVersion && (
+                                            <span>
+                                                Please update your resource specification to use the latest Kubernetes API resources supported by the target cluster. The
+                                                recommended syntax is{' '}
+                                                {`${props.controlled.state.normalizedLiveState.apiVersion}/${props?.controlled.state.normalizedLiveState?.kind}:${props.node.name}`}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                            </React.Fragment>
                         );
                     }}
                 </DataLoader>