Add enhancements to GitOpsDetailsPage

Co-Authored-By: Keith Chong <kykchong@redhat.com>

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

@@ -1,15 +1,23 @@
 {
   "Environments": "Environments",
+  "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",
+  "Cluster URL not available": "Cluster URL not available",
+  "{{message}}": "{{message}}",
   "by {{author}}": "by {{author}}",
   "Commit details not available": "Commit details not available",
-  "Cluster URL not available": "Cluster URL not available",
+  "Last deployed": "Last deployed",
   "Application environments": "Application environments",
-  "Manifest file repo": "Manifest file repo",
-  "Image not available": "Image not available",
-  "Service source URL not available": "Service source URL not available",
-  "Pod info not available": "Pod info not available",
+  "{{x}} of {{total}} degraded": "{{x}} of {{total}} degraded",
+  "Resources": "Resources",
+  "Deployments": "Deployments",
+  "Secrets": "Secrets",
+  "Services": "Services",
+  "Routes": "Routes",
+  "Role Bindings": "Role Bindings",
+  "Cluster Roles": "Cluster Roles",
+  "Cluster Role Bindings": "Cluster Role Bindings",
   "Info not available": "Info not available",
-  "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.",
   "{{appName}} · Details": "{{appName}} · Details",
   "Select an application to view the environment it's deployed in.": "Select an application to view the environment it's deployed in.",
   "by name": "by name",
@@ -23,5 +31,6 @@
   "OutOfSync": "OutOfSync",
   "Unknown": "Unknown",
   "No GitOps manifest URLs found": "No GitOps manifest URLs found",
-  "No Application groups found": "No Application groups found"
+  "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

@@ -3,77 +3,47 @@ import * as _ from 'lodash';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
-import { LoadingBox } from '@console/internal/components/utils';
 import { DevPreviewBadge } from '@console/shared';
-import GitOpsDetailsController from './details/GitOpsDetailsController';
+import GitOpsDetails from './details/GitOpsDetails';
 import GitOpsDetailsPageHeading from './details/GitOpsDetailsPageHeading';
-import { GitOpsAppGroupData, GitOpsEnvironment } from './utils/gitops-types';
-import {
-  fetchAppGroups,
-  getEnvData,
-  getPipelinesBaseURI,
-  getApplicationsBaseURI,
-} from './utils/gitops-utils';
+import GitOpsEmptyState from './GitOpsEmptyState';
+import { GitOpsEnvironment } from './utils/gitops-types';
+import { getEnvData, getPipelinesBaseURI, getApplicationsBaseURI } from './utils/gitops-utils';
 import useDefaultSecret from './utils/useDefaultSecret';
+import useEnvDetails from './utils/useEnvDetails';
 
 type GitOpsDetailsPageProps = RouteComponentProps<{ appName?: string }>;
 
 const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }) => {
   const { t } = useTranslation();
-  const [envs, setEnvs] = React.useState<string[]>(null);
   const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
-  const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
   const [secretNS, secretName] = useDefaultSecret();
   const { appName } = match.params;
   const searchParams = new URLSearchParams(location.search);
   const manifestURL = searchParams.get('url');
   const pipelinesBaseURI = getPipelinesBaseURI(secretNS, secretName);
   const applicationBaseURI = getApplicationsBaseURI(appName, secretNS, secretName, manifestURL);
   const environmentBaseURI = `/api/gitops/environments`;
-
-  React.useEffect(() => {
-    let ignore = false;
-
-    const getEnvs = async () => {
-      if (!pipelinesBaseURI) return;
-      let appGroups: GitOpsAppGroupData[];
-      let emptyMsg = null;
-      try {
-        appGroups = await fetchAppGroups(pipelinesBaseURI, manifestURL);
-      } catch {} // eslint-disable-line no-empty
-      if (ignore) return;
-      const app = _.find(appGroups, (appObj) => appName === appObj?.name);
-      if (!app?.environments) {
-        emptyMsg = t(
-          'gitops-plugin~Environment details were not found. Try reloading the page or contacting an administrator.',
-        );
-      }
-      setEmptyStateMsg(emptyMsg);
-      setEnvs(app?.environments);
-    };
-
-    getEnvs();
-
-    return () => {
-      ignore = true;
-    };
-  }, [appName, manifestURL, pipelinesBaseURI, t]);
+  const environmentBaseURIV2 = `/api/gitops/environment`;
+  const [envs, emptyStateMsg] = useEnvDetails(appName, manifestURL, pipelinesBaseURI);
 
   React.useEffect(() => {
     const getEnvsData = async () => {
       if (!_.isEmpty(envs) && applicationBaseURI) {
         let data;
         try {
           data = await Promise.all(
-            _.map(envs, (env) => getEnvData(environmentBaseURI, env, applicationBaseURI)),
+            _.map(envs, (env) =>
+              getEnvData(environmentBaseURIV2, environmentBaseURI, env, applicationBaseURI),
+            ),
           );
         } catch {} // eslint-disable-line no-empty
         setEnvsData(data);
       }
     };
 
     getEnvsData();
-  }, [applicationBaseURI, environmentBaseURI, envs, manifestURL]);
+  }, [applicationBaseURI, environmentBaseURIV2, environmentBaseURI, envs, manifestURL]);
 
   return (
     <>
@@ -86,14 +56,10 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
         manifestURL={manifestURL}
         badge={<DevPreviewBadge />}
       />
-      {!envsData && !emptyStateMsg ? (
-        <LoadingBox />
+      {!emptyStateMsg ? (
+        <GitOpsDetails envs={envsData} appName={appName} />
       ) : (
-        <GitOpsDetailsController
-          envsData={envsData}
-          emptyStateMsg={emptyStateMsg}
-          appName={appName}
-        />
+        <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
       )}
     </>
   );