Display ENSA version frontend (#1515)

* Add cluster selector to get associated sap systems * Display ensa version in details view * Update tests, stories and factories * Adapt tests to work with updated factories * Fix selector to use main app and db instances * Handle no_ensa value in frontend
trento-project · Jun 15, 2023 · 06ffd5a · 06ffd5a
1 parent 8648eaa
commit 06ffd5a
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 43 deletions.
diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx
@@ -58,20 +58,22 @@ function AscsErsClusterDetails({
   cibLastWritten,
   provider,
   hosts,
+  sapSystems,
   details,
 }) {
-  const [sapSystems, setSapSystems] = useState([]);
+  const [enrichedSapSystems, setEnrichedSapSystems] = useState([]);
   const [currentSapSystem, setCurrentSapSystem] = useState(null);
 
   useEffect(() => {
-    const enrichedSapSystems = details?.sap_systems.map((sapSystem) => ({
-      ...sapSystem,
-      nodes: enrichNodes(sapSystem?.nodes, hosts),
+    const systems = details?.sap_systems.map((system) => ({
+      ...system,
+      ...sapSystems.find(({ sid }) => sid === system.sid),
+      nodes: enrichNodes(system?.nodes, hosts),
     }));
 
-    setSapSystems(enrichedSapSystems);
-    setCurrentSapSystem(enrichedSapSystems[0]);
-  }, [hosts, details]);
+    setEnrichedSapSystems(systems);
+    setCurrentSapSystem(systems[0]);
+  }, [hosts, sapSystems, details]);
 
   return (
     <div>
@@ -127,8 +129,10 @@ function AscsErsClusterDetails({
                 content: currentSapSystem?.distributed ? 'Yes' : 'No',
               },
               {
-                title: 'ENSA type',
-                content: '_',
+                title: 'ENSA version',
+                content: currentSapSystem?.ensa_version || '-',
+                render: (content) =>
+                  content === 'no_ensa' ? '-' : content.toUpperCase(),
               },
               {
                 title: 'Filesystem resource based',
@@ -140,7 +144,7 @@ function AscsErsClusterDetails({
           />
           <div className="flex justify-center mt-auto pt-8 mb-2">
             <DottedPagination
-              pages={sapSystems}
+              pages={enrichedSapSystems}
               onChange={setCurrentSapSystem}
             />
           </div>

diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.stories.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.stories.jsx
@@ -4,7 +4,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { faker } from '@faker-js/faker';
 
 import {
-  addHostsToAscsErsClusterDetails,
+  buildHostsFromAscsErsClusterDetails,
+  buildSapSystemsFromAscsErsClusterDetails,
   ascsErsClusterDetailsFactory,
   ascsErsClusterNodeFactory,
   ascsErsSapSystemFactory,
@@ -64,7 +65,8 @@ export const Single = {
     clusterName,
     cibLastWritten,
     provider,
-    hosts: addHostsToAscsErsClusterDetails(details),
+    hosts: buildHostsFromAscsErsClusterDetails(details),
+    sapSystems: buildSapSystemsFromAscsErsClusterDetails(details),
     details,
   },
   render: (args) => (
@@ -77,7 +79,8 @@ export const Single = {
 export const MultiSID = {
   args: {
     ...Single.args,
-    hosts: addHostsToAscsErsClusterDetails(multiSidDetails),
+    hosts: buildHostsFromAscsErsClusterDetails(multiSidDetails),
+    sapSystems: buildSapSystemsFromAscsErsClusterDetails(multiSidDetails),
     details: multiSidDetails,
   },
   render: (args) => (
@@ -92,7 +95,8 @@ export const Failover = {
     clusterName,
     cibLastWritten,
     provider,
-    hosts: addHostsToAscsErsClusterDetails(failoverDetails),
+    hosts: buildHostsFromAscsErsClusterDetails(failoverDetails),
+    sapSystems: buildSapSystemsFromAscsErsClusterDetails(failoverDetails),
     details: failoverDetails,
   },
   render: (args) => (

diff --git a/assets/js/components/ClusterDetails/AscsErsClusterDetails.test.jsx b/assets/js/components/ClusterDetails/AscsErsClusterDetails.test.jsx
@@ -6,7 +6,8 @@ import { renderWithRouter } from '@lib/test-utils';
 import userEvent from '@testing-library/user-event';
 
 import {
-  addHostsToAscsErsClusterDetails,
+  buildHostsFromAscsErsClusterDetails,
+  buildSapSystemsFromAscsErsClusterDetails,
   ascsErsClusterDetailsFactory,
   clusterFactory,
 } from '@lib/test-utils/factories';
@@ -32,12 +33,16 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
       filesystem_resource_based: filesystemResourceBased,
     } = details.sap_systems[0];
 
+    const sapSystems = buildSapSystemsFromAscsErsClusterDetails(details);
+    const { ensa_version: ensaVersion } = sapSystems[0];
+
     renderWithRouter(
       <AscsErsClusterDetails
         clusterName={name}
         cibLastWritten={cibLastWritten}
         provider={provider}
-        hosts={addHostsToAscsErsClusterDetails(details)}
+        hosts={buildHostsFromAscsErsClusterDetails(details)}
+        sapSystems={sapSystems}
         details={details}
       />
     );
@@ -55,6 +60,9 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
     );
 
     expect(screen.getByText('SID').nextSibling).toHaveTextContent(sid);
+    expect(screen.getByText('ENSA version').nextSibling).toHaveTextContent(
+      ensaVersion === 'no_ensa' ? '-' : ensaVersion.toUpperCase()
+    );
     expect(
       screen.getByText('ASCS/ERS distributed').nextSibling
     ).toHaveTextContent(distributed ? 'Yes' : 'No');
@@ -80,7 +88,8 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
         clusterName={name}
         cibLastWritten={cibLastWritten}
         provider={provider}
-        hosts={addHostsToAscsErsClusterDetails(details)}
+        hosts={buildHostsFromAscsErsClusterDetails(details)}
+        sapSystems={buildSapSystemsFromAscsErsClusterDetails(details)}
         details={details}
       />
     );
@@ -144,7 +153,8 @@ describe('ClusterDetails AscsErsClusterDetails component', () => {
         clusterName={name}
         cibLastWritten={cibLastWritten}
         provider={provider}
-        hosts={addHostsToAscsErsClusterDetails(details)}
+        hosts={buildHostsFromAscsErsClusterDetails(details)}
+        sapSystems={buildSapSystemsFromAscsErsClusterDetails(details)}
         details={details}
       />
     );

diff --git a/assets/js/components/ClusterDetails/ClusterDetailsPage.jsx b/assets/js/components/ClusterDetails/ClusterDetailsPage.jsx
@@ -2,7 +2,11 @@ import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { getCluster, getClusterHosts } from '@state/selectors/cluster';
+import {
+  getCluster,
+  getClusterHosts,
+  getClusterSapSystems,
+} from '@state/selectors/cluster';
 import {
   updateLastExecution,
   executionRequested,
@@ -26,6 +30,8 @@ export function ClusterDetailsPage() {
 
   const clusterHosts = useSelector(getClusterHosts(clusterID));
 
+  const clusterSapSystems = useSelector(getClusterSapSystems(clusterID));
+
   if (!cluster) {
     return <div>Loading...</div>;
   }
@@ -63,6 +69,7 @@ export function ClusterDetailsPage() {
           cibLastWritten={cluster.cib_last_written}
           provider={cluster.provider}
           hosts={clusterHosts}
+          sapSystems={clusterSapSystems}
           details={cluster.details}
         />
       );

diff --git a/assets/js/components/ClusterDetails/ClusterDetailsPage.test.jsx b/assets/js/components/ClusterDetails/ClusterDetailsPage.test.jsx
@@ -20,6 +20,7 @@ describe('ClusterDetails ClusterDetailsPage component', () => {
       const initialState = {
         clustersList: { clusters: [cluster] },
         hostsList: { hosts: [] },
+        sapSystemsList: { sapSystems: [] },
         lastExecutions: {
           [cluster.id]: { data: null, loading: false, error: null },
         },

diff --git a/assets/js/components/SapSystemDetails/GenericSystemDetails.test.jsx b/assets/js/components/SapSystemDetails/GenericSystemDetails.test.jsx
@@ -2,19 +2,21 @@ import React from 'react';
 import { faker } from '@faker-js/faker';
 import { screen } from '@testing-library/react';
 
+import { keysToCamel } from '@lib/serialization';
 import { APPLICATION_TYPE } from '@lib/model';
 import { renderWithRouter } from '@lib/test-utils';
-import { sapSystemFactory } from '@lib/test-utils/factories';
+import { hostFactory, sapSystemFactory } from '@lib/test-utils/factories';
 
 import { GenericSystemDetails } from './GenericSystemDetails';
 
 describe('GenericSystemDetails', () => {
   it('should render correctly', () => {
     const title = faker.datatype.uuid();
-    const sapSystem = sapSystemFactory.build();
+    const sapSystem = keysToCamel(sapSystemFactory.build());
+    sapSystem.hosts = hostFactory.buildList(5);
 
-    const { sid, instances } = sapSystem;
-    const { features } = instances[0];
+    const { sid, applicationInstances } = sapSystem;
+    const { features } = applicationInstances[0];
 
     renderWithRouter(
       <GenericSystemDetails

diff --git a/assets/js/lib/test-utils/factories/clusters.js b/assets/js/lib/test-utils/factories/clusters.js
@@ -3,7 +3,12 @@ import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
 import day from 'dayjs';
 
-import { resultEnum, cloudProviderEnum, hostFactory } from '.';
+import {
+  resultEnum,
+  cloudProviderEnum,
+  hostFactory,
+  sapSystemFactory,
+} from '.';
 
 const clusterTypeEnum = () =>
   faker.helpers.arrayElement(['unknown', 'hana_scale_up']);
@@ -112,7 +117,10 @@ export const clusterFactory = Factory.define(({ sequence, params }) => {
   };
 });
 
-export const addHostsToAscsErsClusterDetails = (details) =>
+export const buildHostsFromAscsErsClusterDetails = (details) =>
   details.sap_systems
     .flatMap(({ nodes }) => nodes)
     .map(({ name }) => hostFactory.build({ hostname: name }));
+
+export const buildSapSystemsFromAscsErsClusterDetails = (details) =>
+  details.sap_systems.map(({ sid }) => sapSystemFactory.build({ sid }));
diff --git a/assets/js/lib/test-utils/factories/databases.js b/assets/js/lib/test-utils/factories/databases.js
@@ -5,6 +5,7 @@ import { Factory } from 'fishery';
 const healthEnum = () => faker.helpers.arrayElement(['passing', 'critical']);
 
 export const databaseInstanceFactory = Factory.define(() => ({
+  host_id: faker.datatype.uuid(),
   sap_system_id: faker.datatype.uuid(),
   sid: faker.random.alpha({ casing: 'upper', count: 3 }),
 }));

diff --git a/assets/js/lib/test-utils/factories/sapSystems.js b/assets/js/lib/test-utils/factories/sapSystems.js
@@ -2,8 +2,10 @@
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
 
-import { hostFactory } from './hosts';
+import { databaseInstanceFactory } from './databases';
 
+const ensaVersion = () =>
+  faker.helpers.arrayElement(['no_ensa', 'ensa1', 'ensa2']);
 const healthEnum = () => faker.helpers.arrayElement(['passing', 'critical']);
 const roles = () =>
   faker.helpers.arrayElements([
@@ -18,31 +20,36 @@ const roles = () =>
 export const sapSystemApplicationInstanceFactory = Factory.define(() => ({
   features: roles().join('|'),
   health: healthEnum(),
-  hostId: faker.datatype.uuid(),
-  httpPort: faker.internet.port(),
-  httpsPort: faker.internet.port(),
-  instanceHostname: faker.hacker.noun(),
-  instanceNumber: faker.datatype.number({ min: 10, max: 99 }).toString(),
+  host_id: faker.datatype.uuid(),
+  http_port: faker.internet.port(),
+  https_port: faker.internet.port(),
+  instance_hostname: faker.hacker.noun(),
+  instance_number: faker.datatype.number({ min: 10, max: 99 }).toString(),
   sid: faker.random.alphaNumeric(3, { casing: 'upper' }),
-  startPriority: faker.datatype.number({ min: 1, max: 9 }).toString(),
-  sapSystemId: faker.datatype.uuid(),
+  start_priority: faker.datatype.number({ min: 1, max: 9 }).toString(),
+  sap_system_id: faker.datatype.uuid(),
 }));
 
 export const sapSystemFactory = Factory.define(({ params }) => {
-  const sapSystemId = params.sapSystemId || faker.datatype.uuid();
-  const sid = faker.random.alphaNumeric(3, { casing: 'upper' });
+  const sapSystemID = params.sapSystemId || faker.datatype.uuid();
+  const sid = params.sid || faker.random.alphaNumeric(3, { casing: 'upper' });
 
   return {
-    dbHost: faker.internet.ip(),
-    health: healthEnum(),
-    id: sapSystemId,
-    instances: sapSystemApplicationInstanceFactory.buildList(2, {
-      sapSystemId,
+    application_instances: sapSystemApplicationInstanceFactory.buildList(2, {
+      sap_system_id: sapSystemID,
       sid,
     }),
+    database_instances: databaseInstanceFactory.buildList(2, {
+      sap_system_id: sapSystemID,
+      sid: faker.random.alphaNumeric(3, { casing: 'upper' }),
+    }),
+    db_host: faker.internet.ip(),
+    deregistered_at: null,
+    ensa_version: ensaVersion(),
+    health: healthEnum(),
+    id: sapSystemID,
     sid,
     tags: [],
     tenant: faker.random.alphaNumeric(3, { casing: 'upper' }),
-    hosts: hostFactory.buildList(5),
   };
 });
diff --git a/assets/js/state/selectors/cluster.js b/assets/js/state/selectors/cluster.js
@@ -17,3 +17,20 @@ export const getClusterName =
   (clusterID) =>
   ({ clustersList }) =>
     getCluster(clusterID)({ clustersList })?.name || '';
+
+export const getClusterSapSystems = (clusterID) => (state) => {
+  const clusterHostIDs = getClusterHostIDs(clusterID)(state);
+  const {
+    sapSystemsList: { sapSystems, applicationInstances, databaseInstances },
+  } = state;
+
+  return sapSystems.filter((sapSystem) =>
+    clusterHostIDs.some((hostID) =>
+      applicationInstances
+        .concat(databaseInstances)
+        .filter(({ sap_system_id }) => sap_system_id === sapSystem.id)
+        .map(({ host_id }) => host_id)
+        .includes(hostID)
+    )
+  );
+};