Add ensa version sap system details

assets/js/components/ClusterDetails/AscsErsClusterDetails.jsx

@@ -8,6 +8,7 @@ import ProviderLabel from '@components/ProviderLabel';
 import DottedPagination from '@components/DottedPagination';
 import HostLink from '@components/HostLink';
 import SapSystemLink from '@components/SapSystemLink';
+import { renderEnsaVersion } from '@components/SapSystemDetails';
 
 import ChecksComingSoon from '@static/checks-coming-soon.svg';
 
@@ -140,8 +141,7 @@ function AscsErsClusterDetails({
               {
                 title: 'ENSA version',
                 content: currentSapSystem?.ensa_version || '-',
-                render: (content) =>
-                  content === 'no_ensa' ? '-' : content.toUpperCase(),
+                render: (content) => renderEnsaVersion(content),
               },
               {
                 title: 'Filesystem resource based',

assets/js/components/DatabaseDetails/DatabaseDetails.stories.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  clusterFactory,
+  databaseInstanceFactory,
+  databaseFactory,
+  hostFactory,
+} from '@lib/test-utils/factories';
+import { DATABASE_TYPE } from '@lib/model';
+import { keysToCamel } from '@lib/serialization';
+
+import { GenericSystemDetails } from '@components/SapSystemDetails';
+
+const system = {
+  ...keysToCamel(
+    databaseFactory.build({ instances: databaseInstanceFactory.buildList(2) })
+  ),
+  hosts: hostFactory.buildList(2, { cluster: clusterFactory.build() }),
+};
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export default {
+  title: 'DatabaseDetails',
+  components: GenericSystemDetails,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: (args) => (
+    <ContainerWrapper>
+      <GenericSystemDetails {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const Database = {
+  args: {
+    title: 'Database Details',
+    type: DATABASE_TYPE,
+    system,
+  },
+};

assets/js/components/SapSystemDetails/GenericSystemDetails.jsx

@@ -12,6 +12,9 @@ import {
   systemInstancesTableConfiguration,
 } from './tableConfigs';
 
+export const renderEnsaVersion = (ensaVersion) =>
+  ensaVersion === 'no_ensa' ? '-' : ensaVersion.toUpperCase();
+
 const renderType = (t) =>
   t === APPLICATION_TYPE ? 'Application server' : 'HANA Database';
 
@@ -43,6 +46,15 @@ export function GenericSystemDetails({ title, type, system }) {
               title: 'Type',
               content: renderType(type),
             },
+            ...(type === APPLICATION_TYPE
+              ? [
+                  {
+                    title: 'ENSA version',
+                    content: system.ensaVersion || '-',
+                    render: (content) => renderEnsaVersion(content),
+                  },
+                ]
+              : []),
             {
               title: '',
               content: type,

assets/js/components/SapSystemDetails/GenericSystemDetails.test.jsx

@@ -1,18 +1,28 @@
 import React from 'react';
 import { faker } from '@faker-js/faker';
 import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { keysToCamel } from '@lib/serialization';
 import { APPLICATION_TYPE } from '@lib/model';
 import { renderWithRouter } from '@lib/test-utils';
-import { hostFactory, sapSystemFactory } from '@lib/test-utils/factories';
+import {
+  hostFactory,
+  sapSystemApplicationInstanceFactory,
+  sapSystemFactory,
+} from '@lib/test-utils/factories';
 
 import { GenericSystemDetails } from './GenericSystemDetails';
 
 describe('GenericSystemDetails', () => {
   it('should render correctly', () => {
     const title = faker.datatype.uuid();
-    const sapSystem = keysToCamel(sapSystemFactory.build());
+    const sapSystem = keysToCamel(
+      sapSystemFactory.build({
+        ensa_version: 'ensa1',
+        instances: sapSystemApplicationInstanceFactory.buildList(5),
+      })
+    );
     sapSystem.hosts = hostFactory.buildList(5);
 
     const { sid, applicationInstances } = sapSystem;
@@ -29,6 +39,7 @@ describe('GenericSystemDetails', () => {
     expect(screen.getByText(title)).toBeTruthy();
     expect(screen.getByText('Application server')).toBeTruthy();
     expect(screen.getByText(sid)).toBeTruthy();
+    expect('ENSA1').toBeTruthy();
     features.split('|').forEach((role) => {
       expect(screen.queryAllByText(role)).toBeTruthy();
     });
@@ -42,4 +53,24 @@ describe('GenericSystemDetails', () => {
 
     expect(screen.getByText('Not Found')).toBeTruthy();
   });
+
+  it('should not render ENSA version if it is not available', () => {
+    const sapSystem = keysToCamel(
+      sapSystemFactory.build({
+        ensa_version: 'no_ensa',
+        instances: sapSystemApplicationInstanceFactory.buildList(5),
+      })
+    );
+    sapSystem.hosts = hostFactory.buildList(5);
+
+    renderWithRouter(
+      <GenericSystemDetails
+        title={faker.datatype.uuid()}
+        system={sapSystem}
+        type={APPLICATION_TYPE}
+      />
+    );
+
+    expect(screen.getByText('ENSA version').nextSibling).toHaveTextContent('-');
+  });
 });

assets/js/components/SapSystemDetails/SapSystemDetails.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  clusterFactory,
+  hostFactory,
+  sapSystemApplicationInstanceFactory,
+  sapSystemFactory,
+} from '@lib/test-utils/factories';
+import { APPLICATION_TYPE } from '@lib/model';
+import { keysToCamel } from '@lib/serialization';
+
+import { GenericSystemDetails } from './GenericSystemDetails';
+
+const system = {
+  ...keysToCamel(
+    sapSystemFactory.build({
+      instances: sapSystemApplicationInstanceFactory.buildList(2),
+    })
+  ),
+  hosts: hostFactory.buildList(2, { cluster: clusterFactory.build() }),
+};
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export default {
+  title: 'SapSystemDetails',
+  components: GenericSystemDetails,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: (args) => (
+    <ContainerWrapper>
+      <GenericSystemDetails {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const SapSystem = {
+  args: {
+    title: 'SAP System Details',
+    type: APPLICATION_TYPE,
+    system,
+  },
+};

assets/js/components/SapSystemDetails/index.js

@@ -2,7 +2,10 @@ import SapSystemDetails from './SapSystemDetails';
 import InstanceStatus from './InstanceStatus';
 import Features from './Features';
 
-export { GenericSystemDetails } from './GenericSystemDetails';
+export {
+  GenericSystemDetails,
+  renderEnsaVersion,
+} from './GenericSystemDetails';
 
 export { Features, InstanceStatus };
 

assets/js/lib/test-utils/factories/databases.js

@@ -2,12 +2,22 @@
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
 
-const healthEnum = () => faker.helpers.arrayElement(['passing', 'critical']);
+const healthEnum = () =>
+  faker.helpers.arrayElement(['passing', 'critical', 'warning', 'unknown']);
+const features = () =>
+  faker.helpers.arrayElements(['HDB', 'HDB_WORKER', 'HDB_STANDBY']);
 
 export const databaseInstanceFactory = Factory.define(() => ({
-  host_id: faker.datatype.uuid(),
   sap_system_id: faker.datatype.uuid(),
+  health: healthEnum(),
+  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.alpha({ casing: 'upper', count: 3 }),
+  features: features().join('|'),
+  start_priority: faker.datatype.number({ min: 1, max: 9 }).toString(),
 }));
 
 export const databaseFactory = Factory.define(({ params }) => {

assets/js/lib/test-utils/factories/sapSystems.js

@@ -6,7 +6,8 @@ import { databaseInstanceFactory } from './databases';
 
 const ensaVersion = () =>
   faker.helpers.arrayElement(['no_ensa', 'ensa1', 'ensa2']);
-const healthEnum = () => faker.helpers.arrayElement(['passing', 'critical']);
+const healthEnum = () =>
+  faker.helpers.arrayElement(['passing', 'critical', 'warning', 'unknown']);
 const roles = () =>
   faker.helpers.arrayElements([
     'MESSAGESERVER',