Merge pull request #7288 from reginapizza/reginascott-GitOpsEnvArgoLinks

Add ArgoCD application links to GitOpsDetailsPage cards

Author: openshift-merge-robot

frontend/packages/dev-console/src/components/gitops/GitOpsDetailsPage.tsx

@@ -89,7 +89,11 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
       {!envsData && !emptyStateMsg ? (
         <LoadingBox />
       ) : (
-        <GitOpsDetailsController envsData={envsData} emptyStateMsg={emptyStateMsg} />
+        <GitOpsDetailsController
+          envsData={envsData}
+          emptyStateMsg={emptyStateMsg}
+          appName={appName}
+        />
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.scss

@@ -7,6 +7,12 @@
     margin-right: 35px;
     min-width: 285px;
     max-width: 285px;
+    &__argocd-link {
+      margin-top: var(--pf-global--spacer--md)
+    }
+    &__co-resource-item {
+      margin-top: var(--pf-global--spacer--sm)
+    }
     &__header {
       display: flex;
       flex-direction: column;

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.tsx

@@ -1,18 +1,41 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Stack, StackItem, Card, CardTitle, SplitItem, Split, Label } from '@patternfly/react-core';
+import {
+  Stack,
+  StackItem,
+  Card,
+  CardTitle,
+  CardBody,
+  SplitItem,
+  Split,
+  Label,
+} from '@patternfly/react-core';
 import { ExternalLink, ResourceIcon } from '@console/internal/components/utils';
+import { ConsoleLinkModel } from '@console/internal/models';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
 import GitOpsServiceDetailsSection from './GitOpsServiceDetailsSection';
 import { GitOpsEnvironment } from '../utils/gitops-types';
 import './GitOpsDetails.scss';
 
 interface GitOpsDetailsProps {
   envs: GitOpsEnvironment[];
+  appName: string;
 }
 
-const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
+const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs, appName }) => {
   const { t } = useTranslation();
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
+  const argocdLink = _.find(
+    consoleLinks,
+    (link: K8sResourceKind) =>
+      link.metadata?.name === 'argocd' && link.spec?.location === 'ApplicationMenu',
+  );
   return (
     <div className="odc-gitops-details">
       {_.map(
@@ -23,27 +46,24 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
               <StackItem>
                 <Card>
                   <CardTitle className="odc-gitops-details__env-section__header">
-                    <Stack hasGutter>
-                      <StackItem>
-                        <Split style={{ alignItems: 'center' }} hasGutter>
-                          <SplitItem
-                            className="odc-gitops-details__env-section__title co-truncate co-nowrap"
-                            isFilled
-                          >
-                            {env.environment}
-                          </SplitItem>
-                          <SplitItem>
-                            <Label
-                              className="odc-gitops-details__env-section__timestamp"
-                              color="grey"
-                            >
-                              <span style={{ color: 'var(--pf-global--palette--black-600)' }}>
-                                {env.timestamp}
-                              </span>
-                            </Label>
-                          </SplitItem>
-                        </Split>
-                      </StackItem>
+                    <Split style={{ alignItems: 'center' }} hasGutter>
+                      <SplitItem
+                        className="odc-gitops-details__env-section__title co-truncate co-nowrap"
+                        isFilled
+                      >
+                        {env.environment}
+                      </SplitItem>
+                      <SplitItem>
+                        <Label className="odc-gitops-details__env-section__timestamp" color="grey">
+                          <span style={{ color: 'var(--pf-global--palette--black-600)' }}>
+                            {env.timestamp}
+                          </span>
+                        </Label>
+                      </SplitItem>
+                    </Split>
+                  </CardTitle>
+                  <CardBody>
+                    <Stack>
                       <StackItem className="co-truncate co-nowrap">
                         {env.cluster ? (
                           <ExternalLink
@@ -58,13 +78,22 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
                         )}
                       </StackItem>
                       <StackItem className="co-truncate co-nowrap">
-                        <span className="co-resource-item">
+                        <span className="co-resource-item odc-gitops-details__env-section__co-resource-item">
                           <ResourceIcon kind="Project" />
                           <span className="co-resource-item__resource-name">{env.environment}</span>
                         </span>
                       </StackItem>
+                      {env.environment && argocdLink && (
+                        <StackItem className="co-truncate co-nowrap">
+                          <ExternalLink
+                            href={`${argocdLink.spec.href}/applications/${env.environment}-${appName}`}
+                            text="Argo CD"
+                            additionalClassName="odc-gitops-details__env-section__argocd-link"
+                          />
+                        </StackItem>
+                      )}
                     </Stack>
-                  </CardTitle>
+                  </CardBody>
                 </Card>
               </StackItem>
               <GitOpsServiceDetailsSection services={env.services} />

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsController.tsx

@@ -13,6 +13,7 @@ import GitOpsEmptyState from '../GitOpsEmptyState';
 interface GitOpsDetailsControllerProps {
   envsData: GitOpsEnvironment[];
   emptyStateMsg: string;
+  appName: string;
 }
 
 const getWorkLoad = (resources: GitOpsResource[]) => {
@@ -59,14 +60,15 @@ const getTransformedEnvsData = (originalEnvsData: GitOpsEnvironment[], t: TFunct
 const GitOpsDetailsController: React.FC<GitOpsDetailsControllerProps> = ({
   envsData,
   emptyStateMsg,
+  appName,
 }) => {
   const { t } = useTranslation();
   const envs = React.useMemo(() => getTransformedEnvsData(envsData, t), [envsData, t]);
 
   return emptyStateMsg ? (
     <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
   ) : (
-    <GitOpsDetails envs={envs} />
+    <GitOpsDetails envs={envs} appName={appName} />
   );
 };