Use ClusterNodeLink component for cluster node linking

trento-project · Jul 11, 2023 · f2a6a28 · f2a6a28
1 parent b1bf11b
commit f2a6a28
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 31 deletions.
diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx
@@ -6,7 +6,7 @@ import Table from '@components/Table';
 import ListView from '@components/ListView';
 import ProviderLabel from '@components/ProviderLabel';
 import DottedPagination from '@components/DottedPagination';
-import HostLink from '@components/HostLink';
+import ClusterNodeLink from '@components/ClusterDetails/ClusterNodeLink';
 import SapSystemLink from '@components/SapSystemLink';
 import { renderEnsaVersion } from '@components/SapSystemDetails';
 
@@ -23,7 +23,7 @@ const nodeDetailsConfig = {
     {
       title: 'Hostname',
       key: '',
-      render: (_, { id, name }) => <HostLink hostId={id}>{name}</HostLink>,
+      render: (_, { id, name }) => <ClusterNodeLink name={name} hostId={id} />,
     },
     {
       title: 'Role',

diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.stories.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.stories.jsx
@@ -76,6 +76,18 @@ export const Single = {
   ),
 };
 
+export const WithUnregisteredHost = {
+  args: {
+    ...Single.args,
+    hosts: [buildHostsFromAscsErsClusterDetails(details).pop()],
+  },
+  render: (args) => (
+    <ContainerWrapper>
+      <AscsErsClusterDetails {...args} />
+    </ContainerWrapper>
+  ),
+};
+
 export const MultiSID = {
   args: {
     ...Single.args,

diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.test.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.test.jsx
@@ -200,4 +200,31 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
     expect(sidContainer).toHaveTextContent(sid);
     expect(sidContainer.querySelector('a')).toBeNull();
   });
+
+  it('should display a host link for registered hosts', () => {
+    const {
+      name,
+      cib_last_written: cibLastWritten,
+      provider,
+      details,
+    } = clusterFactory.build({ type: 'ascs_ers' });
+
+    const hosts = buildHostsFromAscsErsClusterDetails(details);
+    renderWithRouter(
+      <AscsErsClusterDetails
+        clusterName={name}
+        hosts={hosts}
+        cibLastWritten={cibLastWritten}
+        provider={provider}
+        sapSystems={[]}
+        details={details}
+      />
+    );
+    const registeredHostContainer = screen.getByText(hosts[0].hostname);
+
+    expect(registeredHostContainer).toHaveAttribute(
+      'href',
+      `/hosts/${hosts[0].id}`
+    );
+  });
 });
diff --git a/assets/js/components/ClusterDetails/HanaClusterDetails.jsx b/assets/js/components/ClusterDetails/HanaClusterDetails.jsx
@@ -10,11 +10,11 @@ import ListView from '@components/ListView';
 import Table from '@components/Table';
 import Tooltip from '@components/Tooltip';
 import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionRequest';
-import HostLink from '@components/HostLink';
+import ClusterNodeLink from '@components/ClusterDetails/ClusterNodeLink';
 import ChecksResultOverview from '@components/ClusterDetails/ChecksResultOverview';
 import ProviderLabel from '@components/ProviderLabel';
 import SapSystemLink from '@components/SapSystemLink';
-import { EOS_SETTINGS, EOS_CLEAR_ALL, EOS_PLAY_CIRCLE, EOS_WARNING_OUTLINED } from 'eos-icons-react';
+import { EOS_SETTINGS, EOS_CLEAR_ALL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 
 import { RUNNING_STATES } from '@state/lastExecutions';
 import SiteDetails from './SiteDetails';
@@ -33,21 +33,9 @@ const siteDetailsConfig = {
     {
       title: 'Hostname',
       key: '',
-      render: (_, hostData) => {
-        if (hostData.id) {
-          return (<HostLink hostId={hostData.id}>{hostData.name}</HostLink>);
-        }
-        return (
-          <span className="group flex items-center relative">
-            <EOS_WARNING_OUTLINED
-              size="base"
-              className="centered fill-yellow-500"
-            />
-            <span className="ml-1 truncate max-w-[100px]">{hostData.name}</span>
-            <Tooltip tooltipText="Host currently not registered." width="w-52 -translate-x-1/3" />
-          </span>
-        );
-      }
+      render: (_, hostData) => (
+        <ClusterNodeLink name={hostData.name} hostId={hostData.id} />
+      ),
     },
     { title: 'Role', key: 'hana_status' },
     {
@@ -86,8 +74,8 @@ function HanaClusterDetails({
   sapSystems,
   details,
   lastExecution,
-  onStartExecution = () => { },
-  navigate = () => { },
+  onStartExecution = () => {},
+  navigate = () => {},
 }) {
   const enrichedNodes = enrichNodes(details?.nodes, hosts);
   const enrichedSapSystem = {

diff --git a/assets/js/components/ClusterDetails/HanaClusterDetails.stories.jsx b/assets/js/components/ClusterDetails/HanaClusterDetails.stories.jsx
@@ -80,6 +80,13 @@ export const Hana = {
   },
 };
 
+export const WithUnregisteredHost = {
+  args: {
+    ...Hana.args,
+    hosts: [hosts.pop()],
+  },
+};
+
 export const WithNoSelectedChecks = {
   args: {
     ...Hana.args,

diff --git a/assets/js/components/ClusterDetails/HanaClusterDetails.test.jsx b/assets/js/components/ClusterDetails/HanaClusterDetails.test.jsx
@@ -184,9 +184,9 @@ describe('HanaClusterDetails component', () => {
   });
 
   it('should display a host link in the site details if the host is registered', () => {
-    const unregisteredClusterNode = hanaClusterDetailsNodesFactory.build({ name: "unknownhost" })
-    const registeredClusterNode = hanaClusterDetailsNodesFactory.build({ name: "registeredhost" })
-
+    const registeredClusterNode = hanaClusterDetailsNodesFactory.build({
+      name: 'registeredhost',
+    });
 
     const {
       clusterID,
@@ -196,9 +196,12 @@ describe('HanaClusterDetails component', () => {
       sid,
       provider,
       details,
-    } = clusterFactory.build({ nodes: [unregisteredClusterNode, registeredClusterNode] });
+    } = clusterFactory.build({ details: { nodes: [registeredClusterNode] } });
 
-    const hosts = hostFactory.buildList(2, { hostname: "registeredhost", cluster_id: clusterID });
+    const host = hostFactory.build({
+      hostname: registeredClusterNode.name,
+      cluster_id: clusterID,
+    });
 
     const sapSystems = sapSystemFactory.buildList(2, { tenant: sid });
 
@@ -208,7 +211,7 @@ describe('HanaClusterDetails component', () => {
         clusterName={clusterName}
         selectedChecks={[]}
         hasSelectedChecks={false}
-        hosts={hosts}
+        hosts={[host]}
         clusterType={clusterType}
         cibLastWritten={cibLastWritten}
         sid={sid}
@@ -219,13 +222,11 @@ describe('HanaClusterDetails component', () => {
       />
     );
 
-    const unregisteredHostContainer = screen.getByText('unknownhost').nextSibling;
     const registeredHostContainer = screen.getByText('registeredhost');
 
-    expect(registeredHostContainer).toBeInTheDocument();
-    expect(unregisteredHostContainer.querySelector('a')).toHaveAttribute(
+    expect(registeredHostContainer).toHaveAttribute(
       'href',
-      `/hosts/registeredhost}`
+      `/hosts/${host.id}`
     );
   });
 });