HealthCard-Generic-Storage-Overview (#342)

sass/_components.scss

@@ -28,12 +28,12 @@
 @import './components/Dashboard/consumers';
 @import './components/Dashboard/events';
 @import './components/Dashboard/alert';
+@import './components/Dashboard/health.scss';
 @import './components/ClusterOverview/cluster-overview';
 @import './components/ClusterOverview/health';
 @import './components/ClusterOverview/compliance';
 @import './components/ClusterOverview/consumers';
 @import './components/CreateBaremetalHostDialog/create-baremetal-host-dialog';
-@import './components/StorageOverview/ocs-health';
 @import './components/StorageOverview/data-resiliency';
 @import './components/StorageOverview/top-consumer';
 

sass/components/Dashboard/health.scss

@@ -0,0 +1,27 @@
+.kubevirt-dashboard-health__body {
+  max-height: 100px;
+}
+
+.kubevirt-dashboard-health__icon {
+  font-size: 1.333em;
+  line-height: 1.333em;
+  display: inline-flex;
+  align-items: center;
+}
+
+.kubevirt-dashboard-health__icon--ok {
+  color: yellowgreen;
+}
+
+.kubevirt-dashboard-health__icon--warning {
+  color: goldenrod;
+}
+
+.kubevirt-dashboard-health__icon--error {
+  color: red;
+}
+
+.kubevirt-dashboard-health__row-status-item-text {
+  margin-left: 1em;
+  font-size: 1em;
+}

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-dashboard-health__items">{children}</div>;
+
+HealthBody.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+};

src/components/Dashboard/Health/HealthItem.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'patternfly-react';
+
+import { InlineLoading } from '../../Loading';
+
+export const HealthItem = ({ icon, classname, message, isLoading, LoadingComponent }) => {
+  const description = isLoading ? <LoadingComponent /> : message;
+  return (
+    <div className="kubevirt-dashboard-health__icon">
+      <Icon type="fa" size="2x" name={icon} className={`kubevirt-dashboard-health__icon--${classname}`} />
+      <span className="kubevirt-dashboard-health__row-status-item-text">{description}</span>
+    </div>
+  );
+};
+
+HealthItem.defaultProps = {
+  LoadingComponent: InlineLoading,
+  isLoading: false,
+};
+
+HealthItem.propTypes = {
+  message: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  classname: PropTypes.string.isRequired,
+  LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  isLoading: PropTypes.bool,
+};

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/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,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HealthBody /> renders correctly 1`] = `
+<div
+  className="kubevirt-health__items"
+>
+  <HealthItem
+    classname="error"
+    data={
+      Object {
+        "healthy": Object {
+          "classname": "ok",
+          "iconname": "check-circle",
+          "message": "OCS is Healthy",
+        },
+      }
+    }
+    icon="exclamation-triangle"
+    message="Cant get health"
+  />
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HealthItem /> renders correctly 1`] = `
+<Fragment>
+  <div
+    className="kubevirt-ocs-health__icon"
+  >
+    <Icon
+      className="kubevirt-ocs-health__icon--error"
+      name="exclamation-triangle"
+      size="2x"
+      type="fa"
+    />
+    <span
+      className="kubevirt-ocs-health__row-status-item-text"
+    >
+      Cant get health
+    </span>
+  </div>
+</Fragment>
+`;

src/components/StorageOverview/OCSHealth/Health.js

@@ -1,26 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 
 import {
   DashboardCard,
   DashboardCardBody,
   DashboardCardHeader,
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
-import HealthBody from './HealthBody';
 import { StorageOverviewContextGenericConsumer } from '../StorageOverviewContext';
+import { HealthItem } from '../../Dashboard/Health/HealthItem';
+import { HealthBody } from '../../Dashboard/Health/HealthBody';
+
+import { HEALTHY, DEGRADED, ERROR, UNKNOWN } from './strings';
 import { InlineLoading } from '../../Loading';
 
-export const OCSHealth = ({ data, loaded }) => (
-  <DashboardCard>
-    <DashboardCardHeader>
-      <DashboardCardTitle>Health</DashboardCardTitle>
-    </DashboardCardHeader>
-    <DashboardCardBody className="kubevirt-ocs-health__body" isLoading={!loaded} LoadingComponent={InlineLoading}>
-      <HealthBody data={data} />
-    </DashboardCardBody>
-  </DashboardCard>
-);
+const OCSHealthStatus = {
+  0: {
+    message: HEALTHY,
+    iconname: 'check-circle',
+    classname: 'ok',
+  },
+  1: {
+    message: DEGRADED,
+    iconname: 'exclamation-circle',
+    classname: 'warning',
+  },
+  2: {
+    message: ERROR,
+    iconname: 'exclamation-triangle',
+    classname: 'error',
+  },
+  3: {
+    message: UNKNOWN,
+    iconname: 'exclamation-triangle',
+    classname: 'error',
+  },
+};
+
+export const OCSHealth = ({ data, loaded }) => {
+  const value = get(data, 'healthy', '3');
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Health</DashboardCardTitle>
+      </DashboardCardHeader>
+      <DashboardCardBody>
+        <HealthBody>
+          <HealthItem
+            message={data ? OCSHealthStatus[value].message : null}
+            icon={data ? OCSHealthStatus[value].iconname : null}
+            classname={data ? OCSHealthStatus[value].classname : null}
+            isLoading={!loaded}
+            LoadingComponent={InlineLoading}
+          />
+        </HealthBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
 
 OCSHealth.defaultProps = {
   loaded: false,

src/components/StorageOverview/OCSHealth/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 = 'Not available';