Dashboard-Health

src/components/Dashboard/Health/HealthBody.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const HealthBody = ({ children }) => <div className="kubevirt-health__items">{children}</div>;
+
+HealthBody.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+};

src/components/StorageOverview/OCSHealth/HealthBody.js → src/components/Dashboard/Health/HealthItem.js

@@ -3,31 +3,33 @@ import PropTypes from 'prop-types';
 import { Icon } from 'patternfly-react';
 import { get } from 'lodash';
 
+import { HEALTHY, DEGRADED, ERROR, UNKNOWN } from './strings';
+
 const HealthStatus = {
   0: {
-    message: 'OCS is Healthy',
+    message: HEALTHY,
     iconname: 'check-circle',
     classname: 'ok',
   },
   1: {
-    message: 'OCS health is Degraded',
+    message: DEGRADED,
     iconname: 'exclamation-circle',
     classname: 'warning',
   },
   2: {
-    message: 'OCS health is in Error State',
+    message: ERROR,
     iconname: 'exclamation-triangle',
     classname: 'error',
   },
   3: {
-    message: 'Cannot get OCS health',
+    message: UNKNOWN,
     iconname: 'exclamation-triangle',
     classname: 'error',
   },
 };
 
-const HealthBody = ({ data }) => {
-  const status = get(data, 'healthy.data.result[0].value[1]', '3');
+export const HealthItem = ({ data }) => {
+  const status = get(data, 'healthy', '3');
   const klass = HealthStatus[+status];
   return klass ? (
     <React.Fragment>
@@ -39,8 +41,6 @@ const HealthBody = ({ data }) => {
   ) : null;
 };
 
-HealthBody.propTypes = {
+HealthItem.propTypes = {
   data: PropTypes.object.isRequired,
 };
-
-export default HealthBody;

src/components/Dashboard/Health/fixtures/HealthBody.fixture.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { HealthBody } from '../HealthBody';
+import { HealthItem } from '../HealthItem';
+import { default as HealthItemFixture } from './HealthItem.fixture';
+
+export default {
+  component: HealthBody,
+  props: {
+    children: <HealthItem {...HealthItemFixture[0].props} />,
+  },
+};

src/components/Dashboard/Health/fixtures/HealthItem.fixture.js

@@ -0,0 +1,16 @@
+import { HealthItem } from '../HealthItem';
+
+export default [
+  {
+    component: HealthItem,
+    props: {
+      data: {
+        healthy: {
+          message: 'OCS is Healthy',
+          iconname: 'check-circle',
+          classname: 'ok',
+        },
+      },
+    },
+  },
+];

src/components/Dashboard/Health/strings.js

@@ -0,0 +1,4 @@
+export const HEALTHY= 'OCS is Healthy';
+export const DEGRADED= 'OCS health is Degraded';
+export const ERROR= 'OCS health is in Error State';
+export const UNKNOWN= 'Cannot get OCS health';

src/components/Dashboard/Health/tests/HealthBody.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { HealthBody } from '../HealthBody';
+import { default as HealthItemFixture } from '../fixtures/HealthItem.fixture';
+import { HealthItem } from '../HealthItem';
+
+const testHealthBody = () => (
+  <HealthBody>
+    <HealthItem {...HealthItemFixture[0].props} />
+  </HealthBody>
+);
+
+describe('<HealthBody />', () => {
+  it('renders correctly', () => {
+    const component = shallow(testHealthBody());
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/Dashboard/Health/tests/HealthItem.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { HealthItem } from '../HealthItem';
+import { default as HealthItemFixtures } from '../fixtures/HealthItem.fixture';
+
+// eslint-disable-next-line react/prop-types
+const testHealthItem = ({ props }) => <HealthItem {...props} />;
+
+describe('<HealthItem />', () => {
+  it('renders correctly', () => {
+    HealthItemFixtures.forEach(fixture => {
+      const component = shallow(testHealthItem(fixture));
+      expect(component).toMatchSnapshot();
+    });
+  });
+});

src/components/Dashboard/Health/tests/__snapshots__/HealthBody.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HealthBody /> renders correctly 1`] = `
+<div
+  className="kubevirt-health__items"
+>
+  <HealthItem
+    data={
+      Object {
+        "healthy": Object {
+          "classname": "ok",
+          "iconname": "check-circle",
+          "message": "OCS is Healthy",
+        },
+      }
+    }
+  />
+</div>
+`;

src/components/Dashboard/Health/tests/__snapshots__/HealthItem.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HealthItem /> renders correctly 1`] = `""`;

src/components/StorageOverview/OCSHealth/Health.js

@@ -7,28 +7,25 @@ import {
   DashboardCardHeader,
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
-import HealthBody from './HealthBody';
 import { StorageOverviewContextGenericConsumer } from '../StorageOverviewContext';
-import { InlineLoading } from '../../Loading';
+import { HealthItem } from '../../Dashboard/Health/HealthItem';
+import { HealthBody } from '../../Dashboard/Health/HealthBody';
 
-export const OCSHealth = ({ data, loaded }) => (
+export const OCSHealth = ({ data }) => (
   <DashboardCard>
     <DashboardCardHeader>
       <DashboardCardTitle>Health</DashboardCardTitle>
     </DashboardCardHeader>
-    <DashboardCardBody className="kubevirt-ocs-health__body" isLoading={!loaded} LoadingComponent={InlineLoading}>
-      <HealthBody data={data} />
+    <DashboardCardBody>
+      <HealthBody>
+        <HealthItem data={data} />
+      </HealthBody>
     </DashboardCardBody>
   </DashboardCard>
 );
 
-OCSHealth.defaultProps = {
-  loaded: false,
-};
-
 OCSHealth.propTypes = {
   data: PropTypes.object.isRequired,
-  loaded: PropTypes.bool,
 };
 
 const OCSHealthConnected = () => (

src/components/StorageOverview/OCSHealth/fixtures/Health.fixture.js

@@ -5,7 +5,6 @@ export const ocsHealthData = {
     healthy: 0,
     message: 'Error message',
   },
-  loaded: true,
 };
 
 export default [

src/components/StorageOverview/OCSHealth/tests/__snapshots__/Health.test.js.snap

@@ -14,20 +14,24 @@ exports[`<Health /> renders correctly 1`] = `
     </h2>
   </div>
   <div
-    class="card-pf-body kubevirt-ocs-health__body"
+    class="card-pf-body"
   >
     <div
-      class="kubevirt-ocs-health__icon"
+      class="kubevirt-health__items"
     >
-      <span
-        aria-hidden="true"
-        class="fa fa-exclamation-triangle fa-2x kubevirt-ocs-health__icon--error"
-      />
-      <span
-        class="kubevirt-ocs-health__row-status-item-text"
+      <div
+        class="kubevirt-ocs-health__icon"
       >
-        Cannot get OCS health
-      </span>
+        <span
+          aria-hidden="true"
+          class="fa fa-check-circle fa-2x kubevirt-ocs-health__icon--ok"
+        />
+        <span
+          class="kubevirt-ocs-health__row-status-item-text"
+        >
+          OCS is Healthy
+        </span>
+      </div>
     </div>
   </div>
 </div>