Update ClusterList to use new SapSystemLink component

trento-project · Aug 16, 2023 · bace198 · bace198
1 parent 2e513c5
commit bace198
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx
@@ -5,6 +5,7 @@ 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';
@@ -24,6 +25,26 @@ const getClusterTypeLabel = (type) => {
   }
 };
 
+const getSapSystemLinkBySID = (
+  applicationInstances,
+  databaseInstances,
+  sid
+) => {
+  const foundInstance = applicationInstances
+    .map((instance) => ({ ...instance, type: 'sap_systems' }))
+    .concat(
+      databaseInstances.map((instance) => ({
+        ...instance,
+        type: 'databases',
+      }))
+    )
+    .find((instance) => instance.sid === sid);
+
+  return foundInstance
+    ? { sap_system_id: foundInstance.sap_system_id, type: foundInstance.type }
+    : null;
+};
+
 const addTag = (tag, clusterId) => {
   post(`/clusters/${clusterId}/tags`, {
     value: tag,
@@ -36,6 +57,8 @@ const removeTag = (tag, clusterId) => {
 
 function ClustersList() {
   const clusters = useSelector((state) => state.clustersList.clusters);
+  const { applicationInstances } = useSelector((state) => state.sapSystemsList);
+  const { databaseInstances } = useSelector((state) => state.sapSystemsList);
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -71,7 +94,23 @@ function ClustersList() {
         filterFromParams: true,
         filter: (filter, key) => (element) =>
           element[key].some((sid) => filter.includes(sid)),
-        render: (_, { sid }) => sid.join(', '),
+        render: (_, { sid }) =>
+          sid.map((singleSid) => {
+            const linkData = getSapSystemLinkBySID(
+              applicationInstances,
+              databaseInstances,
+              singleSid
+            );
+
+            return (
+              <SapSystemLink
+                systemType={linkData ? linkData.type : null}
+                sapSystemId={linkData ? linkData.sap_system_id : null}
+              >
+                {singleSid}
+              </SapSystemLink>
+            );
+          }),
       },
       {
         title: 'Hosts',

diff --git a/assets/js/components/ClustersList.test.jsx b/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', () => {