Rename component to HostSummary, fix typos and rename variables

assets/js/components/HostDetails/HostDetails.jsx

@@ -21,7 +21,7 @@ import CheckResultsOverview from '@components/CheckResultsOverview';
 import StatusPill from './StatusPill';
 import ProviderDetails from './ProviderDetails';
 import SaptuneSummary from './SaptuneSummary';
-import HostClusterAgentIpSummary from './HostClusterAgentIpSummary';
+import HostSummary from './HostSummary';
 
 import {
   subscriptionsTableConfiguration,
@@ -158,7 +158,7 @@ function HostDetails({
           <WarningBanner>{versionWarningMessage}</WarningBanner>
         )}
         <div className="flex xl:flex-row flex-col">
-          <HostClusterAgentIpSummary
+          <HostSummary
             agentVersion={agentVersion}
             cluster={cluster}
             ipAddresses={ipAddresses}

assets/js/components/HostDetails/HostSummary.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import ListView from '@components/ListView';
+import HealthIcon from '@components/Health/HealthIcon';
+import Tooltip from '@components/Tooltip';
+import ClusterLink from '@components/ClusterLink';
+
+import { chunk } from 'lodash';
+
+const prepareTooltipContent = (ipAddresses) => {
+  const formattedIpList = chunk(ipAddresses, 2);
+  const preparedTooltipContent = formattedIpList.map((ipPair) => {
+    const key = ipPair.length < 2 ? ipPair[0] : `${ipPair[0]}_${ipPair[1]}`;
+    return (
+      <div key={key} className="flex items-center justify-center">
+        <span>{ipPair[0]}</span>
+        {ipPair[1] && <span>, {ipPair[1]}</span>}
+      </div>
+    );
+  });
+  return preparedTooltipContent;
+};
+
+const renderIpAddresses = (ipAddresses) => {
+  const joinedIpAddresses = ipAddresses.join(', ');
+  if (ipAddresses.length < 3) {
+    return <span>{joinedIpAddresses}</span>;
+  }
+
+  return (
+    <div className="flex flex-row">
+      <Tooltip
+        className="grid grid-flow-row grid-cols-1 grid-rows-1"
+        content={prepareTooltipContent(ipAddresses)}
+      >
+        <HealthIcon health="absent" />
+      </Tooltip>
+      <span className="truncate">{joinedIpAddresses}</span>
+    </div>
+  );
+};
+
+function HostSummary({ agentVersion, cluster, ipAddresses }) {
+  return (
+    <div className="mt-4 bg-white shadow rounded-lg py-4 px-8 xl:w-2/5 mr-4">
+      <ListView
+        className="grid-rows-3"
+        orientation="vertical"
+        titleClassName=""
+        contentClassName="overflow-hidden overflow-ellipsis"
+        data={[
+          {
+            title: 'Cluster',
+            content: <ClusterLink cluster={cluster} />,
+          },
+          { title: 'Agent Version', content: agentVersion },
+          {
+            title: 'IP addresses',
+            render: renderIpAddresses,
+            content: ipAddresses,
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+export default HostSummary;

assets/js/components/HostDetails/HostClusterAgentIpSummary.test.jsx → assets/js/components/HostDetails/HostSummary.test.jsx

@@ -5,22 +5,22 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { faker } from '@faker-js/faker';
 import { clusterFactory } from '@lib/test-utils/factories';
-import HostClusterAgentIpSummary from './HostClusterAgentIpSummary';
+import HostSummary from './HostSummary';
 
-describe('HostClusterAgentIpSummary', () => {
-  it('should render correct cluster name, agent version, ip addresses and a tooltip', async () => {
-    const clusterName = faker.animal.cat();
-    const cluster = clusterFactory.build({ name: clusterName });
+describe('HostSummary', () => {
+  it('should render the content correctly', async () => {
+    const cluster = clusterFactory.build();
+    const { name: clusterName } = cluster;
     const agentVersion = faker.system.semver();
     const ipAddresses = [
       faker.internet.ipv4(),
       faker.internet.ipv4(),
       faker.internet.ipv4(),
     ];
-    const expextedIpAdresses = ipAddresses.join(', ');
+    const expextedIpAddresses = ipAddresses.join(', ');
 
     renderWithRouter(
-      <HostClusterAgentIpSummary
+      <HostSummary
         agentVersion={agentVersion}
         cluster={cluster}
         ipAddresses={ipAddresses}
@@ -34,7 +34,7 @@ describe('HostClusterAgentIpSummary', () => {
       agentVersion
     );
     expect(screen.getByText('IP addresses').nextSibling.textContent).toBe(
-      expextedIpAdresses
+      expextedIpAddresses
     );
 
     const tooltipIcon = screen.getByTestId('eos-svg-component');
@@ -49,15 +49,15 @@ describe('HostClusterAgentIpSummary', () => {
     );
   });
 
-  it('should render summary without a tooltip icon as there are fewer than four IPs', async () => {
-    const clusterName = faker.animal.cat();
-    const cluster = clusterFactory.build({ name: clusterName });
+  it('should render an icon if there are more than 3 ip addresses', () => {
+    const cluster = clusterFactory.build();
+    const { name: clusterName } = cluster;
     const agentVersion = faker.system.semver();
     const ipAddresses = [faker.internet.ipv4(), faker.internet.ipv4()];
-    const expextedIpAdresses = ipAddresses.join(', ');
+    const expextedIpAddresses = ipAddresses.join(', ');
 
     renderWithRouter(
-      <HostClusterAgentIpSummary
+      <HostSummary
         agentVersion={agentVersion}
         cluster={cluster}
         ipAddresses={ipAddresses}
@@ -71,7 +71,7 @@ describe('HostClusterAgentIpSummary', () => {
       agentVersion
     );
     expect(screen.getByText('IP addresses').nextSibling.textContent).toBe(
-      expextedIpAdresses
+      expextedIpAddresses
     );
 
     const tooltipIcon = screen.queryByTestId('eos-svg-component');