From ee4cfd66ca59036ba01bdd8248cebb5b2c64a5b2 Mon Sep 17 00:00:00 2001
From: Chai Bot <chai-bot@redhat.com>
Date: Thu, 24 Sep 2026 14:57:29 +0000
Subject: [PATCH] OSAC-5615: add networking section to cluster detail page

Add a dedicated Networking tab to the cluster detail page displaying:
- Subnet and security groups from the cluster spec
- Pod CIDR and service CIDR network configuration
- API and Ingress endpoints with provisioning state awareness
- Inline "Auto-provisioned" label next to endpoints when the cluster
  has autoExternalIpAttachment enabled

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Chai Bot <chai-bot@redhat.com>
---
 osac-ui/libs/i18n/locales/en/translation.json |   3 +
 osac-ui/libs/types/src/index.ts               |   1 +
 .../Details/ClusterConfigurationCard.tsx      |  12 --
 .../Details/ClusterDetailsPageContent.tsx     |  19 +-
 .../Details/ClusterNetworkingCard.test.tsx    | 190 ++++++++++++++++++
 .../Cluster/Details/ClusterNetworkingCard.tsx | 119 +++++++++++
 .../Details/ClusterNetworkingDetailsTab.tsx   |  11 +
 .../Cluster/Details/ClusterOverviewTab.tsx    |  10 +-
 .../Primitives/CreateDropdownButton.test.tsx  |   6 +-
 9 files changed, 355 insertions(+), 16 deletions(-)
 create mode 100644 osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.test.tsx
 create mode 100644 osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.tsx
 create mode 100644 osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingDetailsTab.tsx

diff --git a/osac-ui/libs/i18n/locales/en/translation.json b/osac-ui/libs/i18n/locales/en/translation.json
index 064ea8194f..c0326f1832 100644
--- a/osac-ui/libs/i18n/locales/en/translation.json
+++ b/osac-ui/libs/i18n/locales/en/translation.json
@@ -43,6 +43,7 @@
   "Allocated": "Allocated",
   "An external IP is required": "An external IP is required",
   "An external IP pool is required": "An external IP pool is required",
+  "API endpoint": "API endpoint",
   "API URL": "API URL",
   "Architecture": "Architecture",
   "Architecture is required": "Architecture is required",
@@ -72,6 +73,7 @@
   "Auto-provisioned External IPs and External IP Attachments will be permanently deleted.": "Auto-provisioned External IPs and External IP Attachments will be permanently deleted.",
   "Automatically provision external IPs for the cluster API and ingress endpoints.": "Automatically provision external IPs for the cluster API and ingress endpoints.",
   "Available": "Available",
+  "Awaiting provisioning": "Awaiting provisioning",
   "Back": "Back",
   "Backend": "Backend",
   "Backend associations": "Backend associations",
@@ -476,6 +478,7 @@
   "Inbound Rules": "Inbound Rules",
   "Infrastructure": "Infrastructure",
   "Infrastructure Networking": "Infrastructure Networking",
+  "Ingress endpoint": "Ingress endpoint",
   "Instance type": "Instance type",
   "Instance types": "Instance types",
   "Interface": "Interface",
diff --git a/osac-ui/libs/types/src/index.ts b/osac-ui/libs/types/src/index.ts
index 37852ecd9a..181a9bbadc 100644
--- a/osac-ui/libs/types/src/index.ts
+++ b/osac-ui/libs/types/src/index.ts
@@ -39,6 +39,7 @@ export * from './osac/public/v1/external_ip_type_pb.js'
 export * from './osac/public/v1/external_ips_service_pb.js'
 export * from './osac/public/v1/external_ip_attachment_type_pb.js'
 export * from './osac/public/v1/external_ip_attachments_service_pb.js'
+export * from './osac/public/v1/external_ip_attribution_type_pb.js'
 
 export * from './osac/public/v1/nat_gateway_type_pb.js'
 export * from './osac/public/v1/nat_gateways_service_pb.js'
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterConfigurationCard.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterConfigurationCard.tsx
index afe0305845..884ea31ccf 100644
--- a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterConfigurationCard.tsx
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterConfigurationCard.tsx
@@ -59,18 +59,6 @@ export const ClusterConfigurationCard = ({ cluster }: ClusterConfigurationCardPr
             </DescriptionListDescription>
           </DescriptionListGroup>
 
-          <DescriptionListGroup>
-            <DescriptionListTerm>Pod CIDR</DescriptionListTerm>
-            <DescriptionListDescription>
-              {displayValue(cluster.spec?.network?.podCidr)}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Service CIDR</DescriptionListTerm>
-            <DescriptionListDescription>
-              {displayValue(cluster.spec?.network?.serviceCidr)}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>Created</DescriptionListTerm>
             <DescriptionListDescription>
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterDetailsPageContent.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterDetailsPageContent.tsx
index b42c0c197f..c08d3730d7 100644
--- a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterDetailsPageContent.tsx
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterDetailsPageContent.tsx
@@ -22,6 +22,7 @@ import type { Cluster } from '@osac/types';
 
 import ClusterDetailsActionButtons from './ClusterDetailsActionButtons';
 import ClusterDetailsSummary from './ClusterDetailsSummary';
+import { ClusterNetworkingDetailsTab } from './ClusterNetworkingDetailsTab';
 import ClusterNodeSetsTab from './ClusterNetworkingTab';
 import { ClusterOverviewTab } from './ClusterOverviewTab';
 import { useTranslation } from '../../../hooks/useTranslation';
@@ -34,6 +35,7 @@ interface ClusterDetailViewProps {
 }
 
 const CLUSTER_DETAIL_OVERVIEW_TAB_ID = 'cluster-detail-overview';
+const CLUSTER_DETAIL_NETWORKING_TAB_ID = 'cluster-detail-networking';
 const CLUSTER_DETAIL_NODE_SETS_TAB_ID = 'cluster-detail-node-sets';
 
 const ClusterDetailsPageContent = ({ cluster }: ClusterDetailViewProps) => {
@@ -83,6 +85,11 @@ const ClusterDetailsPageContent = ({ cluster }: ClusterDetailViewProps) => {
               />
               <Tab
                 eventKey={1}
+                title={<TabTitleText>{t('Networking')}</TabTitleText>}
+                tabContentId={CLUSTER_DETAIL_NETWORKING_TAB_ID}
+              />
+              <Tab
+                eventKey={2}
                 title={<TabTitleText>{t('Node sets')}</TabTitleText>}
                 tabContentId={CLUSTER_DETAIL_NODE_SETS_TAB_ID}
               />
@@ -106,9 +113,19 @@ const ClusterDetailsPageContent = ({ cluster }: ClusterDetailViewProps) => {
             </TabContent>
             <TabContent
               eventKey={1}
-              id={CLUSTER_DETAIL_NODE_SETS_TAB_ID}
+              id={CLUSTER_DETAIL_NETWORKING_TAB_ID}
               activeKey={activeTabKey}
               hidden={1 !== activeTabKey}
+            >
+              <TabContentBody>
+                <ClusterNetworkingDetailsTab cluster={cluster} />
+              </TabContentBody>
+            </TabContent>
+            <TabContent
+              eventKey={2}
+              id={CLUSTER_DETAIL_NODE_SETS_TAB_ID}
+              activeKey={activeTabKey}
+              hidden={2 !== activeTabKey}
             >
               <TabContentBody>
                 <ClusterNodeSetsTab cluster={cluster} />
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.test.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.test.tsx
new file mode 100644
index 0000000000..a62535ffde
--- /dev/null
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.test.tsx
@@ -0,0 +1,190 @@
+import { create } from '@bufbuild/protobuf';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ClusterSchema, ClusterState } from '@osac/types';
+
+import ClusterNetworkingCard from './ClusterNetworkingCard';
+
+describe('ClusterNetworkingCard', () => {
+  it('displays the resolved subnet name', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-1',
+      spec: {
+        networkAttachment: {
+          subnet: { id: 'subnet-1', name: 'my-subnet' },
+          securityGroups: [],
+        },
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.getByText('my-subnet')).toBeInTheDocument();
+  });
+
+  it('displays a comma-separated list of security group names', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-2',
+      spec: {
+        networkAttachment: {
+          subnet: { id: 'subnet-1', name: 'subnet-a' },
+          securityGroups: [
+            { id: 'sg-1', name: 'sg-alpha' },
+            { id: 'sg-2', name: 'sg-beta' },
+          ],
+        },
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.getByText('sg-alpha, sg-beta')).toBeInTheDocument();
+  });
+
+  it('shows dash for empty networking fields', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-3',
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    const dashes = screen.getAllByText('—');
+    expect(dashes.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('displays pod CIDR and service CIDR', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-cidr',
+      spec: {
+        network: {
+          podCidr: '10.128.0.0/14',
+          serviceCidr: '172.30.0.0/16',
+        },
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.getByText('10.128.0.0/14')).toBeInTheDocument();
+    expect(screen.getByText('172.30.0.0/16')).toBeInTheDocument();
+  });
+
+  it('shows "Awaiting provisioning" for endpoints while cluster is progressing', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-4',
+      spec: {
+        networkAttachment: {
+          subnet: { id: 'subnet-1', name: 'my-subnet' },
+          securityGroups: [],
+        },
+      },
+      status: {
+        state: ClusterState.PROGRESSING,
+        apiEndpoint: '',
+        ingressEndpoint: '',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    const awaitingElements = screen.getAllByText('Awaiting provisioning');
+    expect(awaitingElements).toHaveLength(2);
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  });
+
+  it('shows dash for endpoints when cluster is in FAILED state', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-failed',
+      status: {
+        state: ClusterState.FAILED,
+        apiEndpoint: '',
+        ingressEndpoint: '',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    const dashes = screen.getAllByText('—');
+    expect(dashes.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('shows resolved API and ingress endpoints when ready', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-5',
+      spec: {
+        networkAttachment: {
+          subnet: { id: 'subnet-1', name: 'my-subnet' },
+          securityGroups: [],
+        },
+      },
+      status: {
+        state: ClusterState.READY,
+        apiEndpoint: '10.0.0.10',
+        ingressEndpoint: '10.0.0.42',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.getByText('10.0.0.10')).toBeInTheDocument();
+    expect(screen.getByText('10.0.0.42')).toBeInTheDocument();
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  });
+
+  it('shows "Auto-provisioned" label next to endpoints when autoExternalIpAttachment is true', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-auto',
+      spec: {
+        autoExternalIpAttachment: true,
+      },
+      status: {
+        state: ClusterState.READY,
+        apiEndpoint: '10.0.0.10',
+        ingressEndpoint: '10.0.0.42',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    const labels = screen.getAllByText('Auto-provisioned');
+    expect(labels).toHaveLength(2);
+    expect(screen.getByText('10.0.0.10')).toBeInTheDocument();
+    expect(screen.getByText('10.0.0.42')).toBeInTheDocument();
+  });
+
+  it('does not show "Auto-provisioned" label when autoExternalIpAttachment is false', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-no-auto',
+      spec: {
+        autoExternalIpAttachment: false,
+      },
+      status: {
+        state: ClusterState.READY,
+        apiEndpoint: '10.0.0.10',
+        ingressEndpoint: '10.0.0.42',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.queryByText('Auto-provisioned')).not.toBeInTheDocument();
+    expect(screen.getByText('10.0.0.10')).toBeInTheDocument();
+    expect(screen.getByText('10.0.0.42')).toBeInTheDocument();
+  });
+
+  it('does not show "Auto-provisioned" label when autoExternalIpAttachment is undefined', () => {
+    const cluster = create(ClusterSchema, {
+      id: 'cl-undef',
+      status: {
+        state: ClusterState.READY,
+        apiEndpoint: '10.0.0.10',
+        ingressEndpoint: '10.0.0.42',
+      },
+    });
+
+    render(<ClusterNetworkingCard cluster={cluster} />);
+
+    expect(screen.queryByText('Auto-provisioned')).not.toBeInTheDocument();
+  });
+});
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.tsx
new file mode 100644
index 0000000000..b60eb8f794
--- /dev/null
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingCard.tsx
@@ -0,0 +1,119 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  Label,
+} from '@patternfly/react-core';
+
+import { type Cluster, ClusterState } from '@osac/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { displayValue } from '../../../utils/detailFormatters';
+
+interface ClusterNetworkingCardProps {
+  cluster: Cluster;
+}
+
+const formatSecurityGroups = (securityGroups?: Array<{ id: string; name?: string }>): string => {
+  if (!securityGroups || securityGroups.length === 0) {
+    return '—';
+  }
+  return securityGroups.map((sg) => sg.name?.trim() || sg.id).join(', ');
+};
+
+const isTerminalFailedState = (state: ClusterState | undefined): boolean =>
+  state === ClusterState.FAILED || state === ClusterState.DELETE_FAILED;
+
+const ClusterNetworkingCard = ({ cluster }: ClusterNetworkingCardProps) => {
+  const { t } = useTranslation();
+
+  const subnetName = cluster.spec?.networkAttachment?.subnet?.name;
+  const securityGroups = cluster.spec?.networkAttachment?.securityGroups;
+  const podCidr = cluster.spec?.network?.podCidr;
+  const serviceCidr = cluster.spec?.network?.serviceCidr;
+  const apiEndpoint = cluster.status?.apiEndpoint;
+  const ingressEndpoint = cluster.status?.ingressEndpoint;
+  const clusterState = cluster.status?.state;
+  const autoProvisioned = cluster.spec?.autoExternalIpAttachment === true;
+
+  const isProvisioning = clusterState === ClusterState.PROGRESSING;
+  const isFailed = isTerminalFailedState(clusterState);
+
+  const renderEndpointValue = (value: string | undefined) => {
+    if (value?.trim()) {
+      return value.trim();
+    }
+    if (isFailed) {
+      return '—';
+    }
+    if (isProvisioning) {
+      return t('Awaiting provisioning');
+    }
+    return '—';
+  };
+
+  const renderEndpointDescription = (value: string | undefined) => {
+    const displayText = renderEndpointValue(value);
+    if (autoProvisioned) {
+      return (
+        <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem>{displayText}</FlexItem>
+          <FlexItem>
+            <Label color="blue" isCompact>
+              {t('Auto-provisioned')}
+            </Label>
+          </FlexItem>
+        </Flex>
+      );
+    }
+    return displayText;
+  };
+
+  return (
+    <Card isFullHeight>
+      <CardTitle>{t('Networking')}</CardTitle>
+      <CardBody>
+        <DescriptionList isCompact>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Subnet')}</DescriptionListTerm>
+            <DescriptionListDescription>{displayValue(subnetName)}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Security groups')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatSecurityGroups(securityGroups)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Pod CIDR')}</DescriptionListTerm>
+            <DescriptionListDescription>{displayValue(podCidr)}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Service CIDR')}</DescriptionListTerm>
+            <DescriptionListDescription>{displayValue(serviceCidr)}</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('API endpoint')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {renderEndpointDescription(apiEndpoint)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Ingress endpoint')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {renderEndpointDescription(ingressEndpoint)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ClusterNetworkingCard;
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingDetailsTab.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingDetailsTab.tsx
new file mode 100644
index 0000000000..1ed0202ffd
--- /dev/null
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterNetworkingDetailsTab.tsx
@@ -0,0 +1,11 @@
+import type { Cluster } from '@osac/types';
+
+import ClusterNetworkingCard from './ClusterNetworkingCard';
+
+interface ClusterNetworkingDetailsTabProps {
+  cluster: Cluster;
+}
+
+export const ClusterNetworkingDetailsTab = ({ cluster }: ClusterNetworkingDetailsTabProps) => {
+  return <ClusterNetworkingCard cluster={cluster} />;
+};
diff --git a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterOverviewTab.tsx b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterOverviewTab.tsx
index 4574a92dea..2ec805b0ae 100644
--- a/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterOverviewTab.tsx
+++ b/osac-ui/libs/ui-components/src/components/Cluster/Details/ClusterOverviewTab.tsx
@@ -1,3 +1,5 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
 import type { Cluster } from '@osac/types';
 
 import { ClusterConfigurationCard } from './ClusterConfigurationCard';
@@ -7,5 +9,11 @@ interface ClusterOverviewTabProps {
 }
 
 export const ClusterOverviewTab = ({ cluster }: ClusterOverviewTabProps) => {
-  return <ClusterConfigurationCard cluster={cluster} />;
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ClusterConfigurationCard cluster={cluster} />
+      </StackItem>
+    </Stack>
+  );
 };
diff --git a/osac-ui/libs/ui-components/src/components/Primitives/CreateDropdownButton.test.tsx b/osac-ui/libs/ui-components/src/components/Primitives/CreateDropdownButton.test.tsx
index 5234211c8c..b38dbd8661 100644
--- a/osac-ui/libs/ui-components/src/components/Primitives/CreateDropdownButton.test.tsx
+++ b/osac-ui/libs/ui-components/src/components/Primitives/CreateDropdownButton.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import CreateDropdownButton from './CreateDropdownButton';
@@ -26,6 +26,8 @@ describe('CreateDropdownButton', () => {
 
     await user.click(item);
 
-    expect(screen.queryByRole('menuitem', { name: 'Project' })).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByRole('menuitem', { name: 'Project' })).not.toBeInTheDocument();
+    });
   });
 });