Sid linking from clusters

assets/js/components/ClustersList.jsx

@@ -5,11 +5,13 @@ import Tags from '@components/Tags';
 import PageHeader from '@components/PageHeader';
 import { addTagToCluster, removeTagFromCluster } from '@state/clusters';
 import ClusterLink from '@components/ClusterLink';
+import SapSystemLink from '@components/SapSystemLink';
 import { ExecutionIcon } from '@components/ClusterDetails';
 import { post, del } from '@lib/network';
 import { useSearchParams } from 'react-router-dom';
 import HealthSummary from '@components/HealthSummary/HealthSummary';
 import { getCounters } from '@components/HealthSummary/summarySelection';
+import { getAllSAPInstances } from '@state/selectors';
 
 const getClusterTypeLabel = (type) => {
   switch (type) {
@@ -24,6 +26,9 @@ const getClusterTypeLabel = (type) => {
   }
 };
 
+const getSapSystemBySID = (instances, sid) =>
+  instances.find((instance) => instance.sid === sid);
+
 const addTag = (tag, clusterId) => {
   post(`/clusters/${clusterId}/tags`, {
     value: tag,
@@ -36,6 +41,7 @@ const removeTag = (tag, clusterId) => {
 
 function ClustersList() {
   const clusters = useSelector((state) => state.clustersList.clusters);
+  const allInstances = useSelector(getAllSAPInstances());
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -71,7 +77,24 @@ function ClustersList() {
         filterFromParams: true,
         filter: (filter, key) => (element) =>
           element[key].some((sid) => filter.includes(sid)),
-        render: (_, { sid }) => sid.join(', '),
+        render: (_, { sid, id }) => {
+          const sidsArray = sid.map((singleSid, index) => {
+            const sapSystemData = getSapSystemBySID(allInstances, singleSid);
+
+            return [
+              index > 0 && ', ',
+              <SapSystemLink
+                key={`${id}-${singleSid}`}
+                systemType={sapSystemData?.type}
+                sapSystemId={sapSystemData?.sap_system_id}
+              >
+                {singleSid}
+              </SapSystemLink>,
+            ];
+          });
+
+          return sidsArray;
+        },
       },
       {
         title: 'Hosts',

assets/js/components/ClustersList.test.jsx

@@ -143,7 +143,8 @@ describe('ClustersList component', () => {
 
       renderWithRouter(StatefulClustersList);
 
-      expect(screen.getByText('HA1, HA2')).toBeVisible();
+      expect(screen.getByText('HA1')).toBeVisible();
+      expect(screen.getByText('HA2')).toBeVisible();
     });
 
     it('should put the filters values in the query string when filters are selected', () => {

assets/js/components/HostsList.jsx

@@ -20,20 +20,13 @@ import Tooltip from '@components/Tooltip';
 import CleanUpButton from '@components/CleanUpButton';
 
 import { addTagToHost, removeTagFromHost, deregisterHost } from '@state/hosts';
+import { getAllSAPInstances } from '@state/selectors';
 
 import { post, del } from '@lib/network';
 import { agentVersionWarning } from '@lib/agent';
 
-const getInstancesByHost = (applicationInstances, databaseInstances, hostId) =>
-  applicationInstances
-    .map((instance) => ({ ...instance, type: 'sap_systems' }))
-    .concat(
-      databaseInstances.map((instance) => ({
-        ...instance,
-        type: 'databases',
-      }))
-    )
-    .filter((instance) => instance.host_id === hostId);
+const getInstancesByHost = (instances, hostId) =>
+  instances.filter((instance) => instance.host_id === hostId);
 
 const addTag = (tag, hostId) => {
   post(`/hosts/${hostId}/tags`, {
@@ -48,8 +41,7 @@ const removeTag = (tag, hostId) => {
 function HostsList() {
   const hosts = useSelector((state) => state.hostsList.hosts);
   const clusters = useSelector((state) => state.clustersList.clusters);
-  const { applicationInstances } = useSelector((state) => state.sapSystemsList);
-  const { databaseInstances } = useSelector((state) => state.databasesList);
+  const allInstances = useSelector(getAllSAPInstances());
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [cleanUpModalOpen, setCleanUpModalOpen] = useState(false);
@@ -212,11 +204,7 @@ function HostsList() {
 
   const data = hosts.map((host) => {
     const cluster = clusters.find((c) => c.id === host.cluster_id);
-    const sapSystemList = getInstancesByHost(
-      applicationInstances,
-      databaseInstances,
-      host.id
-    );
+    const sapSystemList = getInstancesByHost(allInstances, host.id);
 
     return {
       heartbeat: host.heartbeat,

assets/js/components/SapSystemLink.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { EOS_WARNING_OUTLINED } from 'eos-icons-react';
 
+import Tooltip from '@components/Tooltip';
 import { Link } from 'react-router-dom';
 
 function SapSystemLink({ systemType, sapSystemId, children }) {
-  return sapSystemId ? (
+  return sapSystemId && systemType ? (
     <Link
       key={sapSystemId}
       className="text-jungle-green-500 hover:opacity-75"
@@ -12,7 +14,15 @@ function SapSystemLink({ systemType, sapSystemId, children }) {
       {children}
     </Link>
   ) : (
-    <span>{children}</span>
+    <Tooltip content="SAP System currently not registered." place="bottom">
+      <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]">{children}</span>
+      </span>
+    </Tooltip>
   );
 }
 

assets/js/components/SapSystemLink.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { act, screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { renderWithRouter } from '@lib/test-utils';
+import { sapSystemFactory } from '@lib/test-utils/factories';
+import SapSystemLink from '@components/SapSystemLink';
+
+describe('SapSystemLink', () => {
+  it('renders Link when sapSystemId and systemType are provided', () => {
+    const { id, sid } = sapSystemFactory.build();
+
+    renderWithRouter(
+      <SapSystemLink systemType="databases" sapSystemId={id}>
+        {sid}
+      </SapSystemLink>
+    );
+
+    const sapSystemLinkElement = screen.getByRole('link', { sid });
+
+    expect(sapSystemLinkElement).toBeInTheDocument();
+    expect(sapSystemLinkElement).toHaveAttribute('href', `/databases/${id}`);
+  });
+
+  it('renders tooltip when sapSystemId or systemType are not provided', async () => {
+    const user = userEvent.setup();
+    const { sid } = sapSystemFactory.build();
+
+    render(<SapSystemLink>{sid}</SapSystemLink>);
+
+    const sidElement = screen.getByText(sid);
+
+    await act(async () => user.hover(sidElement));
+
+    expect(
+      screen.getByText('SAP System currently not registered.')
+    ).toBeInTheDocument();
+  });
+});

assets/js/state/selectors/index.js

@@ -91,3 +91,16 @@ export const getInstancesOnHost = (hostId) => (state) => {
 
   return [...foundApplicationInstances, ...foundDatabaseInstances];
 };
+
+export const getAllSAPInstances = () => (state) => {
+  const { databaseInstances, applicationInstances } = state.sapSystemsList;
+
+  return applicationInstances
+    .map((instance) => ({ ...instance, type: 'sap_systems' }))
+    .concat(
+      databaseInstances.map((instance) => ({
+        ...instance,
+        type: 'databases',
+      }))
+    );
+};

assets/js/state/selectors/index.test.js

@@ -0,0 +1,27 @@
+import { getAllSAPInstances } from '.';
+
+describe('getAllSAPInstances selector', () => {
+  it('should correctly merge and format applicationInstances and databaseInstances', () => {
+    const state = {
+      sapSystemsList: {
+        applicationInstances: [
+          { id: 1, name: 'APP1' },
+          { id: 2, name: 'APP2' },
+        ],
+        databaseInstances: [
+          { id: 3, name: 'DB1' },
+          { id: 4, name: 'DB2' },
+        ],
+      },
+    };
+
+    const expectedOutput = [
+      { id: 1, name: 'APP1', type: 'sap_systems' },
+      { id: 2, name: 'APP2', type: 'sap_systems' },
+      { id: 3, name: 'DB1', type: 'databases' },
+      { id: 4, name: 'DB2', type: 'databases' },
+    ];
+
+    expect(getAllSAPInstances()(state)).toEqual(expectedOutput);
+  });
+});