GitOps: Add error handling (#1278)

frontend/packages/gitops-plugin/locales/en/gitops-plugin.json

@@ -1,7 +1,9 @@
 {
   "Environments": "Environments",
+  "Error cannot retrieve environments": "Cannot retrieve environments. Ensure the Argo CD applications are available and check the log for the 'cluster' pod created by the GitOps Operator.",
   "Compatibility Issue": "Compatibility Issue",
   "Compatibility Issue Message": "It is detected that an older version of the GitOps Operator is installed. Please upgrade the GitOps Operator",
+  "Error Encountered": "Error Encountered",
   "Cluster URL not available": "Cluster URL not available",
   "{{message}}": "{{message}}",
   "by {{author}}": "by {{author}}",
@@ -32,6 +34,7 @@
   "Environment": "Environment",
   "Last deployment": "Last deployment",
   "No GitOps manifest URLs found": "No GitOps manifest URLs found",
+  "Error cannot retrieve applications": "Cannot retrieve applications. Ensure the Argo CD applications are available and check the log for the 'cluster' pod created by the GitOps Operator.",
   "No Application groups found": "No Application groups found",
   "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator."
 }

frontend/packages/gitops-plugin/src/components/GitOpsDetailsPage.tsx

@@ -26,6 +26,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
   const environmentBaseURI = `/api/gitops/environments`;
   const environmentBaseURIV2 = `/api/gitops/environment`;
   const [envs, emptyStateMsg] = useEnvDetails(appName, manifestURL, pipelinesBaseURI);
+  const [error, setError] = React.useState<Error>(null);
 
   React.useEffect(() => {
     const getEnvsData = async () => {
@@ -37,13 +38,15 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
               getEnvData(environmentBaseURIV2, environmentBaseURI, env, applicationBaseURI),
             ),
           );
-        } catch {} // eslint-disable-line no-empty
+        } catch (err) {
+          setError(err);
+        }
         setEnvsData(data);
       }
     };
 
     getEnvsData();
-  }, [applicationBaseURI, environmentBaseURIV2, environmentBaseURI, envs, manifestURL]);
+  }, [applicationBaseURI, environmentBaseURIV2, environmentBaseURI, envs, manifestURL, error]);
 
   return (
     <>
@@ -57,7 +60,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
         badge={<DevPreviewBadge />}
       />
       {!emptyStateMsg ? (
-        <GitOpsDetails envs={envsData} appName={appName} />
+        <GitOpsDetails envs={envsData} appName={appName} error={error} />
       ) : (
         <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
       )}

frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.scss

@@ -95,7 +95,7 @@
       vertical-align: middle;
     }
   }
-  &__operator-upgrade-alert {
+  &__special-message-alert {
     margin-bottom: var(--pf-global--spacer--xl);
   }
 }

frontend/packages/gitops-plugin/src/components/details/GitOpsDetails.tsx

@@ -27,9 +27,10 @@ import './GitOpsDetails.scss';
 interface GitOpsDetailsProps {
   envs: GitOpsEnvironment[];
   appName: string;
+  error: Error;
 }
 
-const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
+const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName, error }) => {
   const { t } = useTranslation();
   const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
     isList: true,
@@ -46,19 +47,29 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
   if (envs && envs.length > 0) {
     oldAPI = envs[0] && envs[0].deployments ? envs[0].deployments === null : true;
   }
-
+  let errMsg = '';
+  if (error != null) {
+    errMsg = t('gitops-plugin~Error cannot retrieve environments');
+  }
   return (
     <div className="gop-gitops-details">
       {oldAPI && (
-        <>
-          <Alert
-            isInline
-            title={t('gitops-plugin~Compatibility Issue')}
-            className="gop-gitops-details__operator-upgrade-alert"
-          >
-            {t('gitops-plugin~Compatibility Issue Message')}
-          </Alert>
-        </>
+        <Alert
+          isInline
+          title={t('gitops-plugin~Compatibility Issue')}
+          className="gop-gitops-details__special-message-alert"
+        >
+          {t('gitops-plugin~Compatibility Issue Message')}
+        </Alert>
+      )}
+      {error != null && (
+        <Alert
+          isInline
+          title={t('gitops-plugin~Error Encountered')}
+          className="gop-gitops-details__special-message-alert"
+        >
+          {errMsg}
+        </Alert>
       )}
       {_.map(
         envs,

frontend/packages/gitops-plugin/src/components/utils/gitops-utils.ts

@@ -33,6 +33,7 @@ export const fetchAppGroups = async (
     try {
       data = await coFetchJSON(`${baseURL}&url=${manifestURL}`);
     } catch {} // eslint-disable-line no-empty
+    // Ignore and let empty data be handled by fetchAllAppGroups
   }
   return data?.applications ?? [];
 };
@@ -53,7 +54,10 @@ export const fetchAllAppGroups = async (baseURL: string, manifestURLs: string[],
           ),
           ['name'],
         );
-      } catch {} // eslint-disable-line no-empty
+      } catch {
+        emptyMsg = t('gitops-plugin~Error cannot retrieve applications');
+        return [allAppGroups, emptyMsg];
+      }
       if (_.isEmpty(allAppGroups)) {
         emptyMsg = t('gitops-plugin~No Application groups found');
       }
@@ -69,7 +73,9 @@ export const getEnvData = async (v2EnvURI: string, envURI: string, env: string,
   } catch {
     try {
       data = await coFetchJSON(`${envURI}/${env}${appURI}`);
-    } catch {} // eslint-disable-line no-empty
+    } catch (error) {
+      throw error;
+    }
   }
   return data;
 };