Use ClusterTypeLabel in other views

trento-project · Jul 10, 2024 · 27a2a81 · 27a2a81
1 parent 8490cbe
commit 27a2a81
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 12 deletions.
diff --git a/assets/js/common/ClusterInfoBox/ClusterInfoBox.jsx b/assets/js/common/ClusterInfoBox/ClusterInfoBox.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-import { getClusterTypeLabel } from '@lib/model/clusters';
-
 import ListView from '@common/ListView';
 import ProviderLabel from '@common/ProviderLabel';
+import ClusterTypeLabel from '@common/ClusterTypeLabel';
 
-// eslint-disable-next-line import/prefer-default-export
-function ClusterInfoBox({ haScenario, provider }) {
+function ClusterInfoBox({ haScenario, provider, architectureType }) {
   return (
     <div className="tn-cluster-details w-full my-6 mr-4 bg-white shadow rounded-lg px-8 py-4">
       <ListView
@@ -16,7 +14,13 @@ function ClusterInfoBox({ haScenario, provider }) {
         data={[
           {
             title: 'HA Scenario',
-            content: getClusterTypeLabel(haScenario),
+            content: haScenario,
+            render: (content) => (
+              <ClusterTypeLabel
+                clusterType={content}
+                architectureType={architectureType}
+              />
+            ),
           },
           {
             title: 'Provider',

diff --git a/assets/js/common/ClusterInfoBox/ClusterInfoBox.test.jsx b/assets/js/common/ClusterInfoBox/ClusterInfoBox.test.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import { renderWithRouter } from '@lib/test-utils';
+
 import ClusterInfoBox from './ClusterInfoBox';
 
 describe('Cluster Info Box', () => {
@@ -62,4 +66,29 @@ describe('Cluster Info Box', () => {
       expect(getByText(haScenarioText)).toBeTruthy();
     });
   });
+
+  it.each([
+    { architectureType: 'classic', tooltip: 'Classic architecture' },
+    { architectureType: 'angi', tooltip: 'Angi architecture' },
+  ])('should display architecture type icon', async ({ architectureType, tooltip }) => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <ClusterInfoBox
+        haScenario="hana_scale_up"
+        provider="azure"
+        architectureType={architectureType}
+      />
+    );
+
+    const icon = screen.getByTestId('eos-svg-component');
+
+    await user.hover(icon);
+    expect(screen.getByText(tooltip, { exact: false })).toBeInTheDocument();
+  });
+
+  it('should not display architecture type icon if architecture is unknown', () => {
+    render(<ClusterInfoBox haScenario="ascs_ers" provider="azure" />);
+    expect(screen.queryByTestId('eos-svg-component')).not.toBeInTheDocument();
+  });
 });
diff --git a/assets/js/lib/test-utils/factories/clusters.js b/assets/js/lib/test-utils/factories/clusters.js
@@ -17,6 +17,9 @@ const hanaStatus = () => faker.helpers.arrayElement(['Primary', 'Failed']);
 
 const ascsErsRole = () => faker.helpers.arrayElement(['ascs', 'ers']);
 
+const hanaArchitectureTypeEnum = () =>
+  faker.helpers.arrayElement(['classic', 'angi']);
+
 export const sbdDevicesFactory = Factory.define(() => ({
   device: faker.system.filePath(),
   status: faker.helpers.arrayElement(['healthy', 'unhealthy']),
@@ -72,6 +75,7 @@ export const hanaClusterDetailsFactory = Factory.define(() => {
     system_replication_mode: 'sync',
     system_replication_operation_mode: 'logreplay',
     maintenance_mode: false,
+    architecture_type: hanaArchitectureTypeEnum(),
   };
 });
 

diff --git a/assets/js/pages/ClusterDetails/ClusterDetailsPage.jsx b/assets/js/pages/ClusterDetails/ClusterDetailsPage.jsx
@@ -32,6 +32,7 @@ export function ClusterDetailsPage() {
 
   const provider = get(cluster, 'provider');
   const type = get(cluster, 'type');
+  const architectureType = get(cluster, 'details.architecture_type');
 
   const catalog = useSelector(getCatalog());
 
@@ -51,13 +52,14 @@ export function ClusterDetailsPage() {
       cluster_type: type,
       ensa_version: ensaVersion,
       filesystem_type: filesystemType,
+      architecture_type: architectureType,
     });
 
     if (provider && type) {
       dispatch(updateCatalog(env));
       dispatch(updateLastExecution(clusterID));
     }
-  }, [dispatch, provider, type, ensaVersion, filesystemType]);
+  }, [dispatch, provider, type, ensaVersion, filesystemType, architectureType]);
 
   const clusterHosts = useSelector((state) =>
     getClusterHosts(state, clusterID)

diff --git a/assets/js/pages/ClusterDetails/HanaClusterDetails.jsx b/assets/js/pages/ClusterDetails/HanaClusterDetails.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { get, capitalize, sortBy } from 'lodash';
 import classNames from 'classnames';
 
-import { getClusterTypeLabel } from '@lib/model/clusters';
 import { RUNNING_STATES } from '@state/lastExecutions';
 
 import BackButton from '@common/BackButton';
 import Button from '@common/Button';
 import ListView from '@common/ListView';
 import PageHeader from '@common/PageHeader';
 import ProviderLabel from '@common/ProviderLabel';
+import ClusterTypeLabel from '@common/ClusterTypeLabel';
 import SapSystemLink from '@common/SapSystemLink';
 import Tooltip from '@common/Tooltip';
 import DisabledGuard from '@common/DisabledGuard';
@@ -162,7 +162,13 @@ function HanaClusterDetails({
               },
               {
                 title: 'Cluster type',
-                content: getClusterTypeLabel(clusterType),
+                content: clusterType,
+                render: (content) => (
+                  <ClusterTypeLabel
+                    clusterType={content}
+                    architectureType={details.architecture_type}
+                  />
+                ),
               },
               {
                 title: 'Cluster maintenance',

diff --git a/assets/js/pages/ClusterDetails/HanaClusterDetails.stories.jsx b/assets/js/pages/ClusterDetails/HanaClusterDetails.stories.jsx
@@ -27,11 +27,15 @@ const {
   provider,
   cib_last_written: cibLastWritten,
   details,
-} = clusterFactory.build({ type: 'hana_scale_up' });
+} = clusterFactory.build({
+  type: 'hana_scale_up',
+  details: { architecture_type: 'classic' },
+});
 
 const scaleOutSites = hanaClusterSiteFactory.buildList(2);
 
 const scaleOutDetails = hanaClusterDetailsFactory.build({
+  architecture_type: 'classic',
   sites: scaleOutSites,
   nodes: [
     hanaClusterDetailsNodesFactory.build({
@@ -213,3 +217,13 @@ export const WithNoSBDDevices = {
     },
   },
 };
+
+export const AngiArchitecture = {
+  args: {
+    ...Hana.args,
+    details: {
+      ...Hana.args.details,
+      architecture_type: 'angi',
+    },
+  },
+};
diff --git a/assets/js/pages/ClusterDetails/HanaClusterDetails.test.jsx b/assets/js/pages/ClusterDetails/HanaClusterDetails.test.jsx
@@ -466,6 +466,53 @@ describe('HanaClusterDetails component', () => {
     }
   );
 
+  it.each([
+    { arch: 'angi', tooltip: 'Angi architecture' },
+    { arch: 'classic', tooltip: 'Classic architecture' },
+  ])(
+    'should show cluster type with $arch architecture',
+    async ({ arch, tooltip }) => {
+      const user = userEvent.setup();
+
+      const {
+        clusterID,
+        clusterName,
+        cib_last_written: cibLastWritten,
+        type: clusterType,
+        sid,
+        provider,
+        details,
+      } = clusterFactory.build({
+        type: 'hana_scale_up',
+        details: { architecture_type: arch },
+      });
+
+      const hosts = hostFactory.buildList(2, { cluster_id: clusterID });
+
+      renderWithRouter(
+        <HanaClusterDetails
+          clusterID={clusterID}
+          clusterName={clusterName}
+          selectedChecks={[]}
+          hasSelectedChecks={false}
+          hosts={hosts}
+          clusterType={clusterType}
+          cibLastWritten={cibLastWritten}
+          sid={sid}
+          provider={provider}
+          sapSystems={[]}
+          details={details}
+          lastExecution={null}
+          userAbilities={userAbilities}
+        />
+      );
+
+      const icon = screen.getByText('HANA Scale Up').children.item(0);
+      await user.hover(icon);
+      expect(screen.getByText(tooltip, { exact: false })).toBeInTheDocument();
+    }
+  );
+
   describe('forbidden actions', () => {
     it('should disable the check execution button when the user abilities are not compatible', async () => {
       const user = userEvent.setup();

diff --git a/assets/js/pages/ClusterSettingsPage/ClusterSettingsPage.jsx b/assets/js/pages/ClusterSettingsPage/ClusterSettingsPage.jsx
@@ -78,6 +78,7 @@ function ClusterSettingsPage() {
 
   const provider = get(cluster, 'provider');
   const type = get(cluster, 'type');
+  const architectureType = get(cluster, 'details.architecture_type');
 
   const refreshCatalog = () => {
     const env = buildEnv({
@@ -86,6 +87,7 @@ function ClusterSettingsPage() {
       cluster_type: type,
       ensa_version: ensaVersion,
       filesystem_type: filesystemType,
+      architecture_type: architectureType,
     });
 
     dispatch(updateCatalog(env));
@@ -130,7 +132,11 @@ function ClusterSettingsPage() {
         onStartExecution={requestChecksExecution}
       />
       {catalogBanner[provider]}
-      <ClusterInfoBox haScenario={type} provider={provider} />
+      <ClusterInfoBox
+        haScenario={type}
+        provider={provider}
+        architectureType={architectureType}
+      />
       <ChecksSelection
         catalog={catalog}
         catalogError={catalogError}

diff --git a/assets/js/pages/ExecutionResults/TargetInfoBox.jsx b/assets/js/pages/ExecutionResults/TargetInfoBox.jsx
@@ -1,15 +1,22 @@
 import React from 'react';
+import { get } from 'lodash';
 
 import { TARGET_CLUSTER, TARGET_HOST } from '@lib/model';
 
 import ClusterInfoBox from '@common/ClusterInfoBox';
 import HostInfoBox from '@common/HostInfoBox';
 
 function TargetInfoBox({ targetType, target }) {
+  const architectureType = get(target, 'details.architecture_type');
+
   switch (targetType) {
     case TARGET_CLUSTER:
       return (
-        <ClusterInfoBox haScenario={target.type} provider={target.provider} />
+        <ClusterInfoBox
+          haScenario={target.type}
+          provider={target.provider}
+          architectureType={architectureType}
+        />
       );
     case TARGET_HOST:
       return (