Sap system link cluster details

assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx

@@ -10,10 +10,13 @@ import HostLink from '@components/HostLink';
 
 import ChecksComingSoon from '@static/checks-coming-soon.svg';
 
+import { APPLICATION_TYPE } from '@lib/model';
+
 import SBDDetails from './SBDDetails';
 import SiteDetails from './SiteDetails';
 import StoppedResources from './StoppedResources';
 import { enrichNodes } from './HanaClusterDetails';
+import SapSystemLink from './SapSystemLink';
 
 const nodeDetailsConfig = {
   usePadding: false,
@@ -122,7 +125,14 @@ function AscsErsClusterDetails({
             data={[
               {
                 title: 'SID',
-                content: currentSapSystem?.sid,
+                content: currentSapSystem,
+                render: (content) => (
+                  <SapSystemLink
+                    id={content?.id}
+                    sid={content?.sid}
+                    type={APPLICATION_TYPE}
+                  />
+                ),
               },
               {
                 title: 'ASCS/ERS distributed',

assets/js/components/ClusterDetails/AscsErsClusterDetails.test.jsx

@@ -59,7 +59,13 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
       cibLastWritten
     );
 
-    expect(screen.getByText('SID').nextSibling).toHaveTextContent(sid);
+    const sidContainer = screen.getByText('SID').nextSibling;
+
+    expect(sidContainer).toHaveTextContent(sid);
+    expect(sidContainer.querySelector('a')).toHaveAttribute(
+      'href',
+      `/sap_systems/${sapSystems[0].id}`
+    );
     expect(screen.getByText('ENSA version').nextSibling).toHaveTextContent(
       ensaVersion === 'no_ensa' ? '-' : ensaVersion.toUpperCase()
     );
@@ -165,4 +171,33 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
     expect(screen.getByText(sid2)).toBeInTheDocument();
     expect(screen.getByText(nodeName2)).toBeInTheDocument();
   });
+
+  it('should show the SID even if the sap systems enriched data is not available', () => {
+    const {
+      name,
+      cib_last_written: cibLastWritten,
+      provider,
+      details,
+    } = clusterFactory.build({
+      type: 'ascs_ers',
+    });
+
+    const { sid } = details.sap_systems[0];
+
+    renderWithRouter(
+      <AscsErsClusterDetails
+        clusterName={name}
+        cibLastWritten={cibLastWritten}
+        provider={provider}
+        hosts={buildHostsFromAscsErsClusterDetails(details)}
+        sapSystems={[]}
+        details={details}
+      />
+    );
+
+    const sidContainer = screen.getByText('SID').nextSibling;
+
+    expect(sidContainer).toHaveTextContent(sid);
+    expect(sidContainer.querySelector('a')).toBeNull();
+  });
 });

assets/js/components/ClusterDetails/ClusterDetailsPage.jsx

@@ -52,6 +52,7 @@ export function ClusterDetailsPage() {
           cibLastWritten={cluster.cib_last_written}
           sid={cluster.sid}
           provider={cluster.provider}
+          sapSystems={clusterSapSystems}
           details={cluster.details}
           lastExecution={lastExecution}
           onStartExecution={(_, hostList, checks, navigateFunction) =>

assets/js/components/ClusterDetails/HanaClusterDetails.jsx

@@ -13,12 +13,14 @@ import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionReq
 import HostLink from '@components/HostLink';
 import ChecksResultOverview from '@components/ClusterDetails/ChecksResultOverview';
 import ProviderLabel from '@components/ProviderLabel';
+import { DATABASE_TYPE } from '@lib/model';
 import { EOS_SETTINGS, EOS_CLEAR_ALL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 
 import { RUNNING_STATES } from '@state/lastExecutions';
 import SiteDetails from './SiteDetails';
 import SBDDetails from './SBDDetails';
 import StoppedResources from './StoppedResources';
+import SapSystemLink from './SapSystemLink';
 
 export const enrichNodes = (clusterNodes, hosts) =>
   clusterNodes?.map((node) => ({
@@ -70,12 +72,17 @@ function HanaClusterDetails({
   cibLastWritten,
   sid,
   provider,
+  sapSystems,
   details,
   lastExecution,
   onStartExecution = () => {},
   navigate = () => {},
 }) {
   const enrichedNodes = enrichNodes(details?.nodes, hosts);
+  const enrichedSapSystem = {
+    tenant: sid,
+    ...sapSystems.find(({ tenant }) => tenant === sid),
+  };
 
   const { loading: executionLoading } = lastExecution || { loading: true };
 
@@ -152,7 +159,17 @@ function HanaClusterDetails({
                 content: provider || 'Not defined',
                 render: (content) => <ProviderLabel provider={content} />,
               },
-              { title: 'SID', content: sid },
+              {
+                title: 'SID',
+                content: enrichedSapSystem,
+                render: (content) => (
+                  <SapSystemLink
+                    id={content?.id}
+                    sid={content?.tenant}
+                    type={DATABASE_TYPE}
+                  />
+                ),
+              },
               {
                 title: 'Fencing type',
                 content: details && details.fencing_type,

assets/js/components/ClusterDetails/HanaClusterDetails.stories.jsx

@@ -6,6 +6,7 @@ import {
   hostFactory,
   checksExecutionCompletedFactory,
   checksExecutionRunningFactory,
+  sapSystemFactory,
 } from '@lib/test-utils/factories';
 
 import HanaClusterDetails from './HanaClusterDetails';
@@ -35,6 +36,8 @@ const hosts = [
   hostFactory.build({ hostname: details.nodes[1].name }),
 ];
 
+const sapSystems = sapSystemFactory.buildList(1, { tenant: sid });
+
 function ContainerWrapper({ children }) {
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
@@ -69,6 +72,7 @@ export const Hana = {
     cibLastWritten,
     sid,
     provider,
+    sapSystems,
     details,
     lastExecution,
     onStartExecution: () => {},

assets/js/components/ClusterDetails/HanaClusterDetails.test.jsx

@@ -8,6 +8,7 @@ import {
   hostFactory,
   checksExecutionCompletedFactory,
   checksExecutionRunningFactory,
+  sapSystemFactory,
 } from '@lib/test-utils/factories';
 import { faker } from '@faker-js/faker';
 import HanaClusterDetails from './HanaClusterDetails';
@@ -79,6 +80,8 @@ describe('HanaClusterDetails component', () => {
 
       const hosts = hostFactory.buildList(2, { cluster_id: clusterID });
 
+      const sapSystems = sapSystemFactory.buildList(2, { tenant: sid });
+
       renderWithRouter(
         <HanaClusterDetails
           clusterID={clusterID}
@@ -90,6 +93,7 @@ describe('HanaClusterDetails component', () => {
           cibLastWritten={cibLastWritten}
           sid={sid}
           provider={provider}
+          sapSystems={sapSystems}
           details={details}
           lastExecution={lastExecution}
         />
@@ -100,4 +104,81 @@ describe('HanaClusterDetails component', () => {
       ).toBeDisabled();
     }
   );
+
+  it('should show correctly the SID and a link to the SAP system', () => {
+    const {
+      clusterID,
+      clusterName,
+      cib_last_written: cibLastWritten,
+      type: clusterType,
+      sid,
+      provider,
+      details,
+    } = clusterFactory.build();
+
+    const hosts = hostFactory.buildList(2, { cluster_id: clusterID });
+
+    const sapSystems = sapSystemFactory.buildList(2, { tenant: sid });
+
+    renderWithRouter(
+      <HanaClusterDetails
+        clusterID={clusterID}
+        clusterName={clusterName}
+        selectedChecks={[]}
+        hasSelectedChecks={false}
+        hosts={hosts}
+        clusterType={clusterType}
+        cibLastWritten={cibLastWritten}
+        sid={sid}
+        provider={provider}
+        sapSystems={sapSystems}
+        details={details}
+        lastExecution={null}
+      />
+    );
+
+    const sidContainer = screen.getByText('SID').nextSibling;
+
+    expect(sidContainer).toHaveTextContent(sid);
+    expect(sidContainer.querySelector('a')).toHaveAttribute(
+      'href',
+      `/databases/${sapSystems[0].id}`
+    );
+  });
+
+  it('should show the SID even if the sap systems enriched data is not available', () => {
+    const {
+      clusterID,
+      clusterName,
+      cib_last_written: cibLastWritten,
+      type: clusterType,
+      sid,
+      provider,
+      details,
+    } = clusterFactory.build();
+
+    const hosts = hostFactory.buildList(2, { cluster_id: clusterID });
+
+    renderWithRouter(
+      <HanaClusterDetails
+        clusterID={clusterID}
+        clusterName={clusterName}
+        selectedChecks={[]}
+        hasSelectedChecks={false}
+        hosts={hosts}
+        clusterType={clusterType}
+        cibLastWritten={cibLastWritten}
+        sid={sid}
+        provider={provider}
+        sapSystems={[]}
+        details={details}
+        lastExecution={null}
+      />
+    );
+
+    const sidContainer = screen.getByText('SID').nextSibling;
+
+    expect(sidContainer).toHaveTextContent(sid);
+    expect(sidContainer.querySelector('a')).toBeNull();
+  });
 });

assets/js/components/ClusterDetails/SapSystemLink.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { DATABASE_TYPE } from '@lib/model';
+
+function SapSystemLink({ id, sid, type }) {
+  return id ? (
+    <Link
+      className="text-jungle-green-500 hover:opacity-75"
+      to={`/${type === DATABASE_TYPE ? 'databases' : 'sap_systems'}/${id}`}
+    >
+      <span>{sid}</span>
+    </Link>
+  ) : (
+    <span>{sid}</span>
+  );
+}
+
+export default SapSystemLink;