Add ensa version to sap systems overview entries (#1561)

assets/js/components/SapSystemsOverview/SapSystemsOverview.jsx

@@ -1,18 +1,20 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useSearchParams } from 'react-router-dom';
+
 import PageHeader from '@components/PageHeader';
 import HealthIcon from '@components/Health';
 import Table from '@components/Table';
 import SAPSystemItemOverview from '@components/SapSystemsOverview/SapSystemItemOverview';
 import Tags from '@components/Tags';
+import HealthSummary from '@components/HealthSummary/HealthSummary';
+import { getCounters } from '@components/HealthSummary/summarySelection';
+import { renderEnsaVersion } from '@components/SapSystemDetails';
 
 import { addTagToSAPSystem, removeTagFromSAPSystem } from '@state/sapSystems';
 
 import { post, del } from '@lib/network';
-import HealthSummary from '@components/HealthSummary/HealthSummary';
-import { getCounters } from '@components/HealthSummary/summarySelection';
 
 const bySapSystem = (id) => (instance) => instance.sap_system_id === id;
 
@@ -82,6 +84,11 @@ function SapSystemsOverview() {
         title: 'DB Address',
         key: 'dbAddress',
       },
+      {
+        title: 'ENSA version',
+        key: 'ensaVersion',
+        render: (content) => renderEnsaVersion(content),
+      },
       {
         title: 'Tags',
         key: 'tags',
@@ -122,6 +129,7 @@ function SapSystemsOverview() {
     attachedRdbms: sapSystem.tenant,
     tenant: sapSystem.tenant,
     dbAddress: sapSystem.db_host,
+    ensaVersion: sapSystem.ensa_version || '-',
     applicationInstances: applicationInstances.filter(
       bySapSystem(sapSystem.id)
     ),

assets/js/components/SapSystemsOverview/SapSystemsOverview.test.jsx

@@ -2,28 +2,202 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import 'intersection-observer';
 import '@testing-library/jest-dom';
-import { sapSystemFactory } from '@lib/test-utils/factories';
+import {
+  clusterFactory,
+  hostFactory,
+  sapSystemFactory,
+} from '@lib/test-utils/factories';
 import { renderWithRouter, withState } from '@lib/test-utils';
 import { filterTable, clearFilter } from '@components/Table/Table.test';
 
 import SapSystemsOverview from './SapSystemsOverview';
 
+const cleanInitialState = {
+  hostsList: {
+    hosts: [],
+  },
+  clustersList: {
+    clusters: [],
+  },
+  sapSystemsList: {
+    sapSystems: [],
+    applicationInstances: [],
+    databaseInstances: [],
+  },
+};
+
 describe('SapSystemsOverviews component', () => {
-  describe('filtering', () => {
-    const cleanInitialState = {
-      hostsList: {
-        hosts: [],
-      },
-      clustersList: {
-        clusters: [],
-      },
-      sapSystemsList: {
-        sapSystems: [],
-        applicationInstances: [],
-        databaseInstances: [],
-      },
-    };
+  describe('overview content', () => {
+    it('should display the correct number of SAP systems', () => {
+      const sapSystemCount = 3;
+      const expectedRowCount = sapSystemCount * 2;
+      const state = {
+        ...cleanInitialState,
+        sapSystemsList: {
+          sapSystems: sapSystemFactory.buildList(sapSystemCount),
+          applicationInstances: [],
+          databaseInstances: [],
+        },
+      };
+
+      const [StatefulSapSystemList] = withState(<SapSystemsOverview />, state);
+
+      renderWithRouter(StatefulSapSystemList);
+
+      expect(
+        screen.getByRole('table').querySelectorAll('tbody > tr')
+      ).toHaveLength(expectedRowCount);
+    });
 
+    it('should display the correct content for a SAP system main row', () => {
+      const sapSystem = sapSystemFactory.build({ ensa_version: 'ensa1' });
+      const {
+        id: sapSystemID,
+        sid,
+        tenant,
+        db_host: dbAddress,
+        application_instances: applicationInstances,
+        database_instances: databaseInstances,
+      } = sapSystem;
+
+      const state = {
+        ...cleanInitialState,
+        sapSystemsList: {
+          sapSystems: [sapSystem],
+          applicationInstances,
+          databaseInstances,
+        },
+      };
+
+      const [StatefulSapSystemList] = withState(<SapSystemsOverview />, state);
+
+      renderWithRouter(StatefulSapSystemList);
+
+      const rows = screen.getByRole('table').querySelectorAll('tbody > tr');
+      const mainRow = rows[0];
+
+      expect(mainRow.querySelector('td:nth-child(2)')).toHaveTextContent(sid);
+      expect(mainRow.querySelector('td:nth-child(2) > a')).toHaveAttribute(
+        'href',
+        `/sap_systems/${sapSystemID}`
+      );
+      expect(mainRow.querySelector('td:nth-child(3)')).toHaveTextContent(
+        tenant
+      );
+      expect(mainRow.querySelector('td:nth-child(3) > a')).toHaveAttribute(
+        'href',
+        `/databases/${sapSystemID}`
+      );
+      expect(mainRow.querySelector('td:nth-child(4)')).toHaveTextContent(
+        tenant
+      );
+      expect(mainRow.querySelector('td:nth-child(5)')).toHaveTextContent(
+        dbAddress
+      );
+      expect(mainRow.querySelector('td:nth-child(6)')).toHaveTextContent(
+        'ENSA1'
+      );
+    });
+
+    it('should display the correct content for a SAP system instances', () => {
+      const sapSystem = sapSystemFactory.build();
+      const {
+        application_instances: applicationInstances,
+        database_instances: databaseInstances,
+      } = sapSystem;
+
+      const hosts = applicationInstances
+        .concat(databaseInstances)
+        .map(({ host_id: hostID }) => hostFactory.build({ id: hostID }));
+
+      const clusters = hosts.map(({ cluster_id: clusterID }) =>
+        clusterFactory.build({ id: clusterID, type: 'hana_scale_up' })
+      );
+
+      const state = {
+        ...cleanInitialState,
+        sapSystemsList: {
+          sapSystems: [sapSystem],
+          applicationInstances,
+          databaseInstances,
+        },
+        hostsList: {
+          hosts,
+        },
+        clustersList: {
+          clusters,
+        },
+      };
+
+      const [StatefulSapSystemList] = withState(<SapSystemsOverview />, state);
+
+      renderWithRouter(StatefulSapSystemList);
+
+      const detailsRow = screen
+        .getByRole('table')
+        .querySelectorAll('tbody > tr')[1];
+      const appTable = detailsRow.querySelectorAll('div.table')[0];
+      const dbTable = detailsRow.querySelectorAll('div.table')[1];
+
+      const appInstanceRows = appTable.querySelectorAll(
+        '.table-row-group > .table-row'
+      );
+
+      const dbInstanceRows = dbTable.querySelectorAll(
+        '.table-row-group > .table-row'
+      );
+
+      applicationInstances.forEach((instance, index) => {
+        expect(
+          appInstanceRows[index].querySelector('.table-cell:nth-child(2)')
+        ).toHaveTextContent(instance.instance_number);
+        expect(
+          appInstanceRows[index].querySelector('.table-cell:nth-child(4)')
+        ).toHaveTextContent(clusters[index].name);
+        expect(
+          appInstanceRows[index].querySelector('.table-cell:nth-child(4) > a')
+        ).toHaveAttribute('href', `/clusters/${clusters[index].id}`);
+        expect(
+          appInstanceRows[index].querySelector('.table-cell:nth-child(5)')
+        ).toHaveTextContent(hosts[index].hostname);
+        expect(
+          appInstanceRows[index].querySelector(
+            '.table-cell:nth-child(5) > span > a'
+          )
+        ).toHaveAttribute('href', `/hosts/${hosts[index].id}`);
+      });
+
+      databaseInstances.forEach((instance, index) => {
+        expect(
+          dbInstanceRows[index].querySelector('.table-cell:nth-child(2)')
+        ).toHaveTextContent(instance.instance_number);
+        expect(
+          dbInstanceRows[index].querySelector('.table-cell:nth-child(5)')
+        ).toHaveTextContent(clusters[applicationInstances.length + index].name);
+        expect(
+          dbInstanceRows[index].querySelector('.table-cell:nth-child(5) > a')
+        ).toHaveAttribute(
+          'href',
+          `/clusters/${clusters[applicationInstances.length + index].id}`
+        );
+        expect(
+          dbInstanceRows[index].querySelector('.table-cell:nth-child(6)')
+        ).toHaveTextContent(
+          hosts[applicationInstances.length + index].hostname
+        );
+        expect(
+          dbInstanceRows[index].querySelector(
+            '.table-cell:nth-child(6) > span > a'
+          )
+        ).toHaveAttribute(
+          'href',
+          `/hosts/${hosts[applicationInstances.length + index].id}`
+        );
+      });
+    });
+  });
+
+  describe('filtering', () => {
     const scenarios = [
       {
         filter: 'Health',