Sid linking from clusters

assets/js/components/ClustersList.jsx

@@ -5,11 +5,15 @@ 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 { getConcatenatedInstances } from '@state/selectors';
+
+import { get } from 'lodash';
 
 const getClusterTypeLabel = (type) => {
   switch (type) {
@@ -24,6 +28,12 @@ const getClusterTypeLabel = (type) => {
   }
 };
 
+const getSapSystemLinkBySID = (instances, sid) => {
+  const foundInstance = instances.find((instance) => instance.sid === sid);
+
+  return foundInstance;
+};
+
 const addTag = (tag, clusterId) => {
   post(`/clusters/${clusterId}/tags`, {
     value: tag,
@@ -36,6 +46,7 @@ const removeTag = (tag, clusterId) => {
 
 function ClustersList() {
   const clusters = useSelector((state) => state.clustersList.clusters);
+  const concatenatedInstances = useSelector(getConcatenatedInstances());
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -71,7 +82,26 @@ function ClustersList() {
         filterFromParams: true,
         filter: (filter, key) => (element) =>
           element[key].some((sid) => filter.includes(sid)),
-        render: (_, { sid }) => sid.join(', '),
+        render: (_, { sid, id }) =>
+          sid.map((singleSid, index) => {
+            const linkData = getSapSystemLinkBySID(
+              concatenatedInstances,
+              singleSid
+            );
+            return (
+              <Fragment key={singleSid}>
+                <SapSystemLink
+                  key={id + singleSid}
+                  systemType={get(linkData, 'type', null)}
+                  sapSystemId={get(linkData, 'sap_system_id', null)}
+                >
+                  {singleSid}
+                </SapSystemLink>
+
+                {index !== sid.length - 1 && ', '}
+              </Fragment>
+            );
+          }),
       },
       {
         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 { getConcatenatedInstances } 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 concatenatedInstances = useSelector(getConcatenatedInstances());
 
   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(concatenatedInstances, 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,35 @@
+import React from 'react';
+import { screen, render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithRouter } from '@lib/test-utils';
+import SapSystemLink from '@components/SapSystemLink';
+import { sapSystemFactory } from '@lib/test-utils/factories';
+
+describe('SapSystemLink', () => {
+  it('renders Link when sapSystemId and systemType is 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 warning span when sapSystemId or systemType are not provided', () => {
+    const { sid } = sapSystemFactory.build();
+
+    render(<SapSystemLink>{sid}</SapSystemLink>);
+
+    const sidElement = screen.getByText(sid);
+    fireEvent.mouseOver(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 getConcatenatedInstances = () => (state) => {
+  const { databaseInstances, applicationInstances } = state.sapSystemsList;
+
+  return applicationInstances
+    .map((instance) => ({ ...instance, type: 'sap_systems' }))
+    .concat(
+      databaseInstances.map((instance) => ({
+        ...instance,
+        type: 'databases',
+      }))
+    );
+};