Disable link to pacemaker cluster detail from the home/health summary…

… when a cluster is not available
trento-project · Nov 24, 2022 · 7cd7586 · 7cd7586
1 parent e0aae7b
commit 7cd7586
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/assets/js/components/Health/HealthIcon.jsx b/assets/js/components/Health/HealthIcon.jsx
@@ -11,13 +11,21 @@ import {
 import Spinner from '@components/Spinner';
 import classNames from 'classnames';
 
-const HealthIcon = ({ health = undefined, centered = false }) => {
+const HealthIcon = ({
+  health = undefined,
+  centered = false,
+  hoverOpacity = true,
+}) => {
+  const hoverOpacityClass = hoverOpacity
+    ? 'hover:opacity-75'
+    : 'hover:opacity-100';
+
   switch (health) {
     case 'passing':
       return (
         <EOS_CHECK_CIRCLE_OUTLINED
           className={classNames(
-            'hover:opacity-75',
+            hoverOpacityClass,
             computedIconCssClass('fill-jungle-green-500', centered)
           )}
         />
@@ -26,7 +34,7 @@ const HealthIcon = ({ health = undefined, centered = false }) => {
       return (
         <EOS_WARNING_OUTLINED
           className={classNames(
-            'hover:opacity-75',
+            hoverOpacityClass,
             computedIconCssClass('fill-yellow-500', centered)
           )}
         />
@@ -35,7 +43,7 @@ const HealthIcon = ({ health = undefined, centered = false }) => {
       return (
         <EOS_ERROR_OUTLINED
           className={classNames(
-            'hover:opacity-75',
+            hoverOpacityClass,
             computedIconCssClass('fill-red-500', centered)
           )}
         />
@@ -46,7 +54,7 @@ const HealthIcon = ({ health = undefined, centered = false }) => {
       return (
         <EOS_LENS_FILLED
           className={classNames(
-            'hover:opacity-75',
+            hoverOpacityClass,
             computedIconCssClass('fill-gray-500', centered)
           )}
         />

diff --git a/assets/js/components/Health/HealthIcon.test.jsx b/assets/js/components/Health/HealthIcon.test.jsx
@@ -8,7 +8,9 @@ describe('HealthIcon', () => {
   it('should display a green svg when the health is passing', () => {
     const { container } = render(<HealthIcon health={'passing'} />);
     const svgEl = container.querySelector("[data-testid='eos-svg-component']");
-    expect(svgEl.classList.toString()).toContain('fill-jungle-green-500');
+    expect(svgEl.classList.toString()).toContain(
+      'hover:opacity-75 fill-jungle-green-500'
+    );
   });
   it('should display a yellow svg when the health is warning', () => {
     const { container } = render(<HealthIcon health={'warning'} />);
@@ -25,4 +27,11 @@ describe('HealthIcon', () => {
     const svgEl = container.querySelector("[data-testid='eos-svg-component']");
     expect(svgEl.classList.toString()).toContain('fill-gray-500');
   });
+  it('should display an svg without hovering effect', () => {
+    const { container } = render(
+      <HealthIcon health={''} hoverOpacity={false} />
+    );
+    const svgEl = container.querySelector("[data-testid='eos-svg-component']");
+    expect(svgEl.classList.toString()).toContain('hover:opacity-100');
+  });
 });
diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.jsx
@@ -51,10 +51,13 @@ const healthSummaryTableConfig = {
       className: 'text-center',
       render: (content, item) => {
         const linkToCluster = `/clusters/${item.clusterId}`;
-        return (
+
+        return item?.clusterId ? (
           <Link to={linkToCluster}>
             <HealthIcon health={content} centered={true} />
           </Link>
+        ) : (
+          <HealthIcon health={content} centered={true} hoverOpacity={false} />
         );
       },
     },

diff --git a/assets/js/components/HealthSummary/HomeHealthSummary.test.jsx b/assets/js/components/HealthSummary/HomeHealthSummary.test.jsx
@@ -29,6 +29,13 @@ const homeHealthSummaryActionPayload = [
     hostsHealth: 'critical',
     sapsystemHealth: 'passing',
   }),
+  healthSummaryFactory.build({
+    clusterId: null,
+    clustersHealth: 'unknown',
+    databaseHealth: 'passing',
+    hostsHealth: 'critical',
+    sapsystemHealth: 'passing',
+  }),
 ];
 
 const initialState = {
@@ -53,6 +60,28 @@ describe('HomeHealthSummary component', () => {
         .getAttribute('href')
     ).toContain(`/sap_systems/${id}`);
   });
+
+  it('should have a clickable PACEMAKER CLUSTER icon with link to the belonging cluster when available', () => {
+    const [StatefulHomeHealthSummary] = withState(
+      <HomeHealthSummary />,
+      initialState
+    );
+    const { container } = renderWithRouter(StatefulHomeHealthSummary);
+
+    const [{ clusterId }] = homeHealthSummaryActionPayload;
+
+    expect(
+      container
+        .querySelector(':nth-child(1) > :nth-child(4) > a')
+        .getAttribute('href')
+    ).toContain(`/clusters/${clusterId}`);
+
+    expect(
+      container
+        .querySelector(':nth-child(4) > :nth-child(4) > svg')
+        .classList.toString()
+    ).toContain('hover:opacity-100');
+  });
 });
 
 describe('HomeHealthSummary component', () => {
@@ -78,12 +107,12 @@ describe('HomeHealthSummary component', () => {
       );
       const { container } = renderWithRouter(StatefulHomeHealthSummary);
 
-      expect(container.querySelector('tbody').childNodes.length).toEqual(3);
+      expect(container.querySelector('tbody').childNodes.length).toEqual(4);
 
       const cases = [
         ['passing', 0],
         ['warning', 0],
-        ['critical', 3],
+        ['critical', 4],
       ];
 
       cases.forEach(([health, results]) => {