From 8534d6529aa41cd43a4090aa886f4a4b57bc8bc6 Mon Sep 17 00:00:00 2001
From: AyushAmbastha <ambastha.ayush@gmail.com>
Date: Mon, 15 Apr 2019 20:01:53 +0530
Subject: [PATCH] HealthCard-Generic-Storage-Overview (#342)

---
 sass/_components.scss                         |  2 +-
 sass/components/Dashboard/health.scss         | 27 +++++++++
 .../StorageOverview/ocs-health.scss           | 27 ---------
 src/components/Dashboard/Health/HealthBody.js |  8 +++
 src/components/Dashboard/Health/HealthItem.js | 28 +++++++++
 .../Health/fixtures/HealthBody.fixture.js     | 12 ++++
 .../Health/fixtures/HealthItem.fixture.js     | 16 +++++
 .../Dashboard/Health/tests/HealthBody.test.js | 19 ++++++
 .../Dashboard/Health/tests/HealthItem.test.js | 17 ++++++
 .../__snapshots__/HealthBody.test.js.snap     | 22 +++++++
 .../__snapshots__/HealthItem.test.js.snap     | 21 +++++++
 .../StorageOverview/OCSHealth/Health.js       | 60 +++++++++++++++----
 .../StorageOverview/OCSHealth/HealthBody.js   | 46 --------------
 .../OCSHealth/fixtures/HealthBody.fixture.js  | 10 ----
 .../StorageOverview/OCSHealth/strings.js      |  4 ++
 .../OCSHealth/tests/HealthBody.test.js        | 14 -----
 .../tests/__snapshots__/Health.test.js.snap   | 24 ++++----
 .../__snapshots__/HealthBody.test.js.snap     | 34 -----------
 18 files changed, 238 insertions(+), 153 deletions(-)
 create mode 100644 sass/components/Dashboard/health.scss
 delete mode 100644 sass/components/StorageOverview/ocs-health.scss
 create mode 100644 src/components/Dashboard/Health/HealthBody.js
 create mode 100644 src/components/Dashboard/Health/HealthItem.js
 create mode 100644 src/components/Dashboard/Health/fixtures/HealthBody.fixture.js
 create mode 100644 src/components/Dashboard/Health/fixtures/HealthItem.fixture.js
 create mode 100644 src/components/Dashboard/Health/tests/HealthBody.test.js
 create mode 100644 src/components/Dashboard/Health/tests/HealthItem.test.js
 create mode 100644 src/components/Dashboard/Health/tests/__snapshots__/HealthBody.test.js.snap
 create mode 100644 src/components/Dashboard/Health/tests/__snapshots__/HealthItem.test.js.snap
 delete mode 100644 src/components/StorageOverview/OCSHealth/HealthBody.js
 delete mode 100644 src/components/StorageOverview/OCSHealth/fixtures/HealthBody.fixture.js
 create mode 100644 src/components/StorageOverview/OCSHealth/strings.js
 delete mode 100644 src/components/StorageOverview/OCSHealth/tests/HealthBody.test.js
 delete mode 100644 src/components/StorageOverview/OCSHealth/tests/__snapshots__/HealthBody.test.js.snap

diff --git a/sass/_components.scss b/sass/_components.scss
index 63ee30e9b..7eaff64fc 100644
--- a/sass/_components.scss
+++ b/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';
 
diff --git a/sass/components/Dashboard/health.scss b/sass/components/Dashboard/health.scss
new file mode 100644
index 000000000..247daf1b6
--- /dev/null
+++ b/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;
+}
diff --git a/sass/components/StorageOverview/ocs-health.scss b/sass/components/StorageOverview/ocs-health.scss
deleted file mode 100644
index cfb8dfd0b..000000000
--- a/sass/components/StorageOverview/ocs-health.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.kubevirt-ocs-health__body {
-  max-height: 100px;
-}
-
-.kubevirt-ocs-health__icon {
-  font-size: 1.333em;
-  line-height: 1.333em;
-  display: inline-flex;
-  align-items: center;
-}
-
-.kubevirt-ocs-health__icon--ok {
-  color: yellowgreen;
-}
-
-.kubevirt-ocs-health__icon--warning {
-  color: goldenrod;
-}
-
-.kubevirt-ocs-health__icon--error {
-  color: red;
-}
-
-.kubevirt-ocs-health__row-status-item-text {
-  margin-left: 1em;
-  font-size: 1em;
-}
diff --git a/src/components/Dashboard/Health/HealthBody.js b/src/components/Dashboard/Health/HealthBody.js
new file mode 100644
index 000000000..e50771685
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/Dashboard/Health/HealthItem.js b/src/components/Dashboard/Health/HealthItem.js
new file mode 100644
index 000000000..847d4f7ba
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/Dashboard/Health/fixtures/HealthBody.fixture.js b/src/components/Dashboard/Health/fixtures/HealthBody.fixture.js
new file mode 100644
index 000000000..e9c1d6ad4
--- /dev/null
+++ b/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} />,
+  },
+};
diff --git a/src/components/Dashboard/Health/fixtures/HealthItem.fixture.js b/src/components/Dashboard/Health/fixtures/HealthItem.fixture.js
new file mode 100644
index 000000000..665951a37
--- /dev/null
+++ b/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',
+        },
+      },
+    },
+  },
+];
diff --git a/src/components/Dashboard/Health/tests/HealthBody.test.js b/src/components/Dashboard/Health/tests/HealthBody.test.js
new file mode 100644
index 000000000..54a0b7213
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/Dashboard/Health/tests/HealthItem.test.js b/src/components/Dashboard/Health/tests/HealthItem.test.js
new file mode 100644
index 000000000..bf3c75aff
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/src/components/Dashboard/Health/tests/__snapshots__/HealthBody.test.js.snap b/src/components/Dashboard/Health/tests/__snapshots__/HealthBody.test.js.snap
new file mode 100644
index 000000000..1ed0d458d
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/Dashboard/Health/tests/__snapshots__/HealthItem.test.js.snap b/src/components/Dashboard/Health/tests/__snapshots__/HealthItem.test.js.snap
new file mode 100644
index 000000000..e235076d1
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/StorageOverview/OCSHealth/Health.js b/src/components/StorageOverview/OCSHealth/Health.js
index c3d13b7b2..cbb8ab7ab 100644
--- a/src/components/StorageOverview/OCSHealth/Health.js
+++ b/src/components/StorageOverview/OCSHealth/Health.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 
 import {
   DashboardCard,
@@ -7,20 +8,57 @@ import {
   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,
diff --git a/src/components/StorageOverview/OCSHealth/HealthBody.js b/src/components/StorageOverview/OCSHealth/HealthBody.js
deleted file mode 100644
index f08ffee0f..000000000
--- a/src/components/StorageOverview/OCSHealth/HealthBody.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon } from 'patternfly-react';
-import { get } from 'lodash';
-
-const HealthStatus = {
-  0: {
-    message: 'OCS is healthy',
-    iconname: 'check-circle',
-    classname: 'ok',
-  },
-  1: {
-    message: 'OCS is degraded',
-    iconname: 'exclamation-circle',
-    classname: 'warning',
-  },
-  2: {
-    message: 'OCS health is in error state',
-    iconname: 'exclamation-triangle',
-    classname: 'error',
-  },
-  3: {
-    message: 'Cannot get OCS health',
-    iconname: 'exclamation-triangle',
-    classname: 'error',
-  },
-};
-
-const HealthBody = ({ data }) => {
-  const status = get(data, 'healthy.data.result[0].value[1]', '3');
-  const klass = HealthStatus[+status];
-  return klass ? (
-    <React.Fragment>
-      <div className="kubevirt-ocs-health__icon">
-        <Icon type="fa" size="2x" name={klass.iconname} className={`kubevirt-ocs-health__icon--${klass.classname}`} />
-        <span className="kubevirt-ocs-health__row-status-item-text">{klass.message}</span>
-      </div>
-    </React.Fragment>
-  ) : null;
-};
-
-HealthBody.propTypes = {
-  data: PropTypes.object.isRequired,
-};
-
-export default HealthBody;
diff --git a/src/components/StorageOverview/OCSHealth/fixtures/HealthBody.fixture.js b/src/components/StorageOverview/OCSHealth/fixtures/HealthBody.fixture.js
deleted file mode 100644
index a35f3aa75..000000000
--- a/src/components/StorageOverview/OCSHealth/fixtures/HealthBody.fixture.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ocsHealthData } from './Health.fixture';
-
-import HealthBody from '../HealthBody';
-
-export default [
-  {
-    component: HealthBody,
-    props: { ...ocsHealthData },
-  },
-];
diff --git a/src/components/StorageOverview/OCSHealth/strings.js b/src/components/StorageOverview/OCSHealth/strings.js
new file mode 100644
index 000000000..e7095a562
--- /dev/null
+++ b/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';
diff --git a/src/components/StorageOverview/OCSHealth/tests/HealthBody.test.js b/src/components/StorageOverview/OCSHealth/tests/HealthBody.test.js
deleted file mode 100644
index 9b61b991b..000000000
--- a/src/components/StorageOverview/OCSHealth/tests/HealthBody.test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-
-import { OCSHealth } from '../Health';
-import { default as HealthFixtures } from '../fixtures/Health.fixture';
-
-const testHealthOverview = () => <OCSHealth {...HealthFixtures[0].props} />;
-
-describe('<Health />', () => {
-  it('renders correctly', () => {
-    const component = render(testHealthOverview());
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/src/components/StorageOverview/OCSHealth/tests/__snapshots__/Health.test.js.snap b/src/components/StorageOverview/OCSHealth/tests/__snapshots__/Health.test.js.snap
index a1d87a169..e46316841 100644
--- a/src/components/StorageOverview/OCSHealth/tests/__snapshots__/Health.test.js.snap
+++ b/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>
diff --git a/src/components/StorageOverview/OCSHealth/tests/__snapshots__/HealthBody.test.js.snap b/src/components/StorageOverview/OCSHealth/tests/__snapshots__/HealthBody.test.js.snap
deleted file mode 100644
index a1d87a169..000000000
--- a/src/components/StorageOverview/OCSHealth/tests/__snapshots__/HealthBody.test.js.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Health /> renders correctly 1`] = `
-<div
-  class="card-pf kubevirt-dashboard__card"
->
-  <div
-    class="card-pf-heading kubevirt-dashboard__card-heading"
-  >
-    <h2
-      class="card-pf-title"
-    >
-      Health
-    </h2>
-  </div>
-  <div
-    class="card-pf-body kubevirt-ocs-health__body"
-  >
-    <div
-      class="kubevirt-ocs-health__icon"
-    >
-      <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"
-      >
-        Cannot get OCS health
-      </span>
-    </div>
-  </div>
-</div>
-`;