Add Pods Tab to Details page in Dev Console (#7709)

Signed-off-by: Keith Chong <[email protected]>

Author: keithchong

src/gitops/components/rollout/RolloutDetailsTab.tsx

@@ -1,25 +1,20 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom-v5-compat';
 import classNames from 'classnames';
 
 import Conditions from '@gitops/utils/components/Conditions/Conditions';
 import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
 import { useObjectModifyPermissions } from '@gitops/utils/utils';
 import { k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
 import {
-  Button,
   DescriptionList,
   Flex,
   FlexItem,
-  Icon,
   NumberInput,
   PageSection,
   PageSectionVariants,
   Title,
-  Tooltip,
 } from '@patternfly/react-core';
-import { TopologyIcon } from '@patternfly/react-icons';
 
 import BaseDetailsSummary, {
   DetailsDescriptionGroup,
@@ -28,6 +23,7 @@ import BaseDetailsSummary, {
 import { RolloutModel } from './model/RolloutModel';
 import BlueGreenServices from './strategy/BlueGreenServices';
 import CanaryServices from './strategy/CanaryServices';
+import { topologyLink } from './utils/TopologyLink';
 import { RolloutStatusFragment } from './RolloutStatus';
 
 type RolloutDetailsTabProps = RouteComponentProps<{
@@ -90,31 +86,7 @@ const RolloutDetailsTab: React.FC<RolloutDetailsTabProps> = ({ obj }) => {
               <BaseDetailsSummary
                 obj={obj}
                 model={RolloutModel}
-                nameLink={
-                  <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-                    <Tooltip position="top" content={'Topology view'}>
-                      <Link
-                        className="pf-v5-c-content"
-                        rel="noopener noreferrer"
-                        to={topologyUrl}
-                        role="button"
-                        aria-label={t('Topology view')}
-                      >
-                        <Button
-                          icon={
-                            <Icon size="md">
-                              <TopologyIcon />
-                            </Icon>
-                          }
-                          variant="plain"
-                          aria-label={t('Topology view')}
-                          className="pf-m-plain odc-topology__view-switcher"
-                          data-test-id="topology-switcher-view"
-                        ></Button>
-                      </Link>
-                    </Tooltip>
-                  </span>
-                }
+                nameLink={topologyLink(topologyUrl, t)}
               />
             </FlexItem>
           </Flex>

src/gitops/components/rollout/RolloutList.tsx

@@ -28,25 +28,18 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { ErrorState } from '@patternfly/react-component-groups';
-import {
-  Button,
-  EmptyState,
-  EmptyStateBody,
-  Icon,
-  LabelGroup,
-  Spinner,
-  Tooltip,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, LabelGroup, Spinner } from '@patternfly/react-core';
 import { Label as PfLabel } from '@patternfly/react-core';
 import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/DataViewTable';
-import { CubesIcon, SearchIcon, TopologyIcon } from '@patternfly/react-icons';
+import { CubesIcon, SearchIcon } from '@patternfly/react-icons';
 import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
 import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
 
 import { useRolloutActionsProvider } from './hooks/useRolloutActionsProvider';
 import { RolloutKind, RolloutModel } from './model/RolloutModel';
 import { RolloutStatus } from './utils/rollout-utils';
+import { topologyLink } from './utils/TopologyLink';
 import { RolloutStatusFragment } from './RolloutStatus';
 
 import './rollout-list.scss';
@@ -198,28 +191,7 @@ const RolloutList: React.FC<RolloutListTabProps> = ({
             </span>
             {rows.length > 0 && !loadError && (
               <span className="rollout-list-page__topology-link pf-m-mb-sm">
-                <Tooltip position="top" content={t('Topology view')}>
-                  <Link
-                    className="pf-v5-c-content"
-                    rel="noopener noreferrer"
-                    to={topologyUrl}
-                    role="button"
-                    aria-label={t('Graph view')}
-                  >
-                    <Button
-                      icon={
-                        <Icon size="md">
-                          <TopologyIcon />
-                        </Icon>
-                      }
-                      variant="plain"
-                      aria-label={t('Topology view')}
-                      className="pf-m-plain odc-topology__view-switcher"
-                      data-test-id="topology-switcher-view"
-                      onClick={() => console.log('Topology view')}
-                    ></Button>
-                  </Link>
-                </Tooltip>
+                {topologyLink(topologyUrl, t)}
               </span>
             )}
           </span>

src/gitops/components/rollout/RolloutNavPage.tsx

@@ -12,6 +12,7 @@ import ResourceYAMLTab from '../shared/ResourceYAMLTab/ResourceYAMLTab';
 import { useRolloutActionsProvider } from './hooks/useRolloutActionsProvider';
 import { RolloutKind, RolloutModel } from './model/RolloutModel';
 import RolloutDetailsTab from './RolloutDetailsTab';
+import RolloutPodsTab from './RolloutPodsTab';
 
 type RolloutPageProps = {
   name: string;
@@ -46,6 +47,11 @@ const RolloutNavPage: React.FC<RolloutPageProps> = ({ name, namespace, kind }) =
         name: t('YAML'),
         component: ResourceYAMLTab,
       },
+      {
+        href: 'pods',
+        name: t('Pods'),
+        component: RolloutPodsTab,
+      },
       {
         href: 'events',
         name: t('Events'),

src/gitops/components/rollout/RolloutPodsTab.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+
+import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
+import { PageSection, Title } from '@patternfly/react-core';
+
+import { PodList } from './components/PodList/PodList';
+import { RolloutKind } from './model/RolloutModel';
+
+type RolloutPodsTabProps = RouteComponentProps<{
+  ns: string;
+  name: string;
+}> & {
+  obj?: RolloutKind;
+};
+
+const RolloutPodsTab: React.FC<RolloutPodsTabProps> = ({ obj: rollout }) => {
+  const { t } = useGitOpsTranslation();
+  return !rollout ? (
+    <div>
+      <PageSection>
+        <Title headingLevel="h2" className="co-section-heading">
+          {t('Rollout details')}
+        </Title>
+      </PageSection>
+    </div>
+  ) : (
+    <PodList
+      rollout={rollout}
+      namespace={rollout.metadata.namespace}
+      selector={rollout.spec.selector}
+    />
+  );
+};
+
+export default RolloutPodsTab;