From 0a81f5a96623f4288380376d226584e9377a7029 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Wed, 6 Nov 2024 10:23:45 +0100
Subject: [PATCH] Change collapsed view host in networking configuration

---
 .../staticIp/components/CollapsedHost.tsx     | 29 ++++++++++++++++---
 .../FormViewHosts/FormViewHostsFields.tsx     |  5 +++-
 .../components/YamlView/YamlViewFields.tsx    |  2 ++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx
index 505341ee69..addef334cb 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx
@@ -17,6 +17,21 @@ export type HostSummaryProps = {
   numInterfaces: number;
   hostIdx: number;
   hasError: boolean;
+  bondPrimaryInterface: string;
+  bondSecondaryInterface: string;
+};
+
+const getLabelCollapsedHost = (
+  macAddress: string,
+  mappingValue: string,
+  bondPrimaryInterface: string,
+  bondSecondaryInterface: string,
+) => {
+  if (bondPrimaryInterface !== '' && bondSecondaryInterface !== '') {
+    return `${bondPrimaryInterface}/${bondSecondaryInterface} -> ${mappingValue}`;
+  } else {
+    return `${macAddress} -> ${mappingValue}`;
+  }
 };
 
 const HostSummary: React.FC<HostSummaryProps> = ({
@@ -26,6 +41,8 @@ const HostSummary: React.FC<HostSummaryProps> = ({
   numInterfaces,
   hasError,
   hostIdx,
+  bondPrimaryInterface,
+  bondSecondaryInterface,
 }) => {
   return (
     <>
@@ -49,10 +66,14 @@ const HostSummary: React.FC<HostSummaryProps> = ({
           {!hasError && (
             <>
               <FlexItem>
-                <Label
-                  variant="outline"
-                  data-testid="first-mapping-label"
-                >{`${macAddress} -> ${mappingValue}`}</Label>{' '}
+                <Label variant="outline" data-testid="first-mapping-label">
+                  {getLabelCollapsedHost(
+                    macAddress,
+                    mappingValue,
+                    bondPrimaryInterface,
+                    bondSecondaryInterface,
+                  )}
+                </Label>{' '}
               </FlexItem>
               {numInterfaces > 1 && (
                 <FlexItem>
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx
index 0ba7a3c2c7..d598228f90 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx
@@ -123,14 +123,17 @@ const getCollapsedHostComponent = (protocolType: StaticProtocolType) => {
       (protocolVersion) => value.ips[protocolVersion],
     );
     const mapValue = ipAddresses.join(', ');
+
     return (
       <HostSummary
-        title="MAC to IP mapping"
+        title={value.useBond ? 'Bonds to IP mapping' : 'MAC to IP mapping'}
         numInterfaces={1}
         macAddress={value.macAddress}
         mappingValue={mapValue}
         hostIdx={hostIdx}
         hasError={!!error}
+        bondPrimaryInterface={value.bondPrimaryInterface}
+        bondSecondaryInterface={value.bondSecondaryInterface}
       />
     );
   };
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx
index a9303427b6..ce9d85cd18 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx
@@ -34,6 +34,8 @@ const CollapsedHost: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) =>
       mappingValue={mapValue}
       hostIdx={hostIdx}
       hasError={hasError}
+      bondPrimaryInterface=""
+      bondSecondaryInterface=""
     />
   );
 };