Add icons to health status indicators (#677)

* Add icons to health status indicators

* Add Jest test for HealthIcon component

assets/js/components/Health/HealthIcon.jsx

@@ -1,27 +1,32 @@
 import React from 'react';
 import { computedIconCssClass } from '@lib/icon';
 
-import { EOS_LENS_FILLED } from 'eos-icons-react';
+import {
+  EOS_CHECK_CIRCLE_OUTLINED,
+  EOS_ERROR_OUTLINED,
+  EOS_WARNING_OUTLINED,
+  EOS_LENS_FILLED,
+} from 'eos-icons-react';
 
 import Spinner from '@components/Spinner';
 
 const HealthIcon = ({ health = undefined, centered = false }) => {
   switch (health) {
     case 'passing':
       return (
-        <EOS_LENS_FILLED
+        <EOS_CHECK_CIRCLE_OUTLINED
           className={computedIconCssClass('fill-jungle-green-500', centered)}
         />
       );
     case 'warning':
       return (
-        <EOS_LENS_FILLED
+        <EOS_WARNING_OUTLINED
           className={computedIconCssClass('fill-yellow-500', centered)}
         />
       );
     case 'critical':
       return (
-        <EOS_LENS_FILLED
+        <EOS_ERROR_OUTLINED
           className={computedIconCssClass('fill-red-500', centered)}
         />
       );

assets/js/components/Health/HealthIcon.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import HealthIcon from './';
+
+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');
+  });
+  it('should display a yellow svg when the health is warning', () => {
+    const { container } = render(<HealthIcon health={'warning'} />);
+    const svgEl = container.querySelector("[data-testid='eos-svg-component']");
+    expect(svgEl.classList.toString()).toContain('fill-yellow-500');
+  });
+  it('should display a red svg when the health is critical', () => {
+    const { container } = render(<HealthIcon health={'critical'} />);
+    const svgEl = container.querySelector("[data-testid='eos-svg-component']");
+    expect(svgEl.classList.toString()).toContain('fill-red-500');
+  });
+  it('should display a grey circle when the health is unknown', () => {
+    const { container } = render(<HealthIcon health={''} />);
+    const svgEl = container.querySelector("[data-testid='eos-svg-component']");
+    expect(svgEl.classList.toString()).toContain('fill-gray-500');
+  });
+});

assets/js/components/HostsList.jsx

@@ -1,28 +1,16 @@
 import React, { Fragment } from 'react';
 import Table from './Table';
+import HealthIcon from '@components/Health/HealthIcon';
 import Tags from './Tags';
 import { addTagToHost, removeTagFromHost } from '@state/hosts';
 import HostLink from '@components/HostLink';
 import ClusterLink from '@components/ClusterLink';
 import SapSystemLink from '@components/SapSystemLink';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { EOS_LENS_FILLED } from 'eos-icons-react';
-
 import { post, del } from '@lib/network';
 import { ComponentHealthSummary } from '@components/HealthSummary';
 
-const getHeartbeatIcon = ({ heartbeat }) => {
-  switch (heartbeat) {
-    case 'passing':
-      return <EOS_LENS_FILLED className="fill-jungle-green-500" />;
-    case 'critical':
-      return <EOS_LENS_FILLED className="fill-red-500" />;
-    default:
-      return <EOS_LENS_FILLED className="fill-gray-500" />;
-  }
-};
-
 const getInstancesByHost = (
   applicationInstances,
   databaseInstances,
@@ -66,9 +54,9 @@ const HostsList = () => {
         title: 'Health',
         key: 'heartbeat',
         filter: true,
-        render: (_content, item) => (
-          <div className="tn-healthicon ml-4">{getHeartbeatIcon(item)}</div>
-        ),
+        render: (_content, item) => {
+          return <HealthIcon health={item.heartbeat} centered={true} />;
+        },
       },
       {
         title: 'Hostname',

test/e2e/cypress/integration/hosts_overview.js

@@ -147,9 +147,7 @@ context('Hosts Overview', () => {
       });
 
       it('should show a passing health on the hosts when the agents are sending the heartbeat', () => {
-        cy.get('.tn-healthicon > svg.fill-jungle-green-500')
-          .its('length')
-          .should('eq', 10);
+        cy.get('svg.fill-jungle-green-500').its('length').should('eq', 10);
       });
     });
     describe('Health is changed to critical when the heartbeat is not sent', () => {
@@ -163,9 +161,7 @@ context('Hosts Overview', () => {
       });
 
       it('should show a critical health on the hosts when the agents are not sending the heartbeat', () => {
-        cy.get('.tn-healthicon > svg.fill-red-500')
-          .its('length')
-          .should('eq', 10);
+        cy.get('svg.fill-red-500').its('length').should('eq', 10);
       });
     });
   });