Dashboard change

sass/components/Dashboard/dashboard.scss

@@ -26,3 +26,7 @@
 .kubevirt-dashboard__card--top-border {
   border-top: 1px solid #d1d1d1;
 }
+
+.kubevirt-dashboard__card--left-border {
+  border-left: 1px solid #d1d1d1;
+}

src/components/ClusterOverview/ClusterOverview.js

@@ -20,12 +20,12 @@ const MainCards = () => (
   <GridItem lg={6} md={12} sm={12}>
     <Grid>
       <GridItem span={12}>
-        <Grid className="kubevirt-dashbord__health-grid">
+        <Grid className="kubevirt-dashboard__health-grid">
           <GridItem span={6}>
             <HealthConnected />
           </GridItem>
           <GridItem span={6}>
-            <ComplianceConnected />
+          <ComplianceConnected className="kubevirt-dashboard__card--left-border" />
           </GridItem>
           <GridItem span={12}>
             <AlertsConnected className="kubevirt-dashbord__card--top-border" />

src/components/ClusterOverview/Compliance/Compliance.js

@@ -7,7 +7,7 @@ import {
   DashboardCardHeader,
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
-import HealthBody from '../Health/HealthBody';
+import ComplianceBody from './ComplianceBody';
 import { ClusterOverviewContextGenericConsumer } from '../ClusterOverviewContext';
 import { InlineLoading } from '../../Loading';
 
@@ -16,8 +16,8 @@ export const Compliance = ({ data, loaded }) => (
     <DashboardCardHeader>
       <DashboardCardTitle>Cluster Compliance</DashboardCardTitle>
     </DashboardCardHeader>
-    <DashboardCardBody className="kubevirt-compliance__body" isLoading={!loaded} LoadingComponent={InlineLoading}>
-      <HealthBody data={data} />
+    <DashboardCardBody isLoading={!loaded} LoadingComponent={InlineLoading}>
+      <ComplianceBody data={data} />
     </DashboardCardBody>
   </DashboardCard>
 );

src/components/ClusterOverview/Compliance/ComplianceBody.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'patternfly-react';
+
+const healtyIcon = <Icon type="fa" size="2x" name="check-circle" className="kubevirt-ocs-health__icon--ok" />;
+
+const errorIcon = <Icon type="fa" size="2x" name="exclamation-triangle" className="kubevirt-ocs-health__icon--error" />;
+
+const ComplianceBody = ({ data }) => (
+  <React.Fragment>
+    <div className="kubevirt-ocs-health__icon">
+      {data.healthy ? healtyIcon : errorIcon}
+      <span className="kubevirt-ocs-health__row-status-item-text">{data.message}</span>
+    </div>
+  </React.Fragment>
+);
+
+ComplianceBody.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+export default ComplianceBody;

src/components/ClusterOverview/Compliance/fixtures/Compliance.fixture.js

@@ -1,6 +1,12 @@
 import { Compliance } from '../Compliance';
 
-import { complianceData } from '../..';
+export const complianceData = {
+  data: {
+    healthy: true,
+    message: 'All nodes compliant',
+  },
+  loaded: true,
+};
 
 export default [
   {

src/components/ClusterOverview/Compliance/fixtures/ComplianceBody.fixture.js

@@ -0,0 +1,10 @@
+import { complianceData } from './Compliance.fixture';
+
+import ComplianceBody from '../ComplianceBody';
+
+export default [
+  {
+    component: ComplianceBody,
+    props: { ...complianceData },
+  },
+];

src/components/ClusterOverview/Compliance/tests/ComplianceBody.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from 'enzyme';
+
+import { Compliance } from '../Compliance';
+import { default as ComplianceFixtures } from '../fixtures/Compliance.fixture';
+
+const testComplianceOverview = () => <Compliance {...ComplianceFixtures[0].props} />;
+
+describe('<Compliance />', () => {
+  it('renders correctly', () => {
+    const component = render(testComplianceOverview());
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/ClusterOverview/Health/Health.js

@@ -1,26 +1,55 @@
 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 { ClusterOverviewContextGenericConsumer } from '../ClusterOverviewContext';
 import { InlineLoading } from '../../Loading';
+import { HEALTHY, ERROR, UNKNOWN } from './strings';
+import { HealthItem } from '../../Dashboard/Health/HealthItem';
+import { HealthBody } from '../../Dashboard/Health/HealthBody';
 
-export const Health = ({ data, loaded }) => (
-  <DashboardCard>
+const HealthStatus = {
+  0: {
+    message: HEALTHY,
+    iconname: 'check-circle',
+    classname: 'ok',
+  },
+  1: {
+    message: ERROR,
+    iconname: 'exclamation-triangle',
+    classname: 'error',
+  },
+  2: {
+    message: UNKNOWN,
+    iconname: 'exclamation-triangle',
+    classname: 'error',
+  },
+};
+
+export const Health = ({ data, loaded }) => {
+  const value = get(data, 'healthy', '2');
+  return <DashboardCard>
     <DashboardCardHeader>
       <DashboardCardTitle>Cluster Health</DashboardCardTitle>
     </DashboardCardHeader>
-    <DashboardCardBody className="kubevirt-health__body" isLoading={!loaded} LoadingComponent={InlineLoading}>
-      <HealthBody data={data} />
+    <DashboardCardBody isLoading={!loaded} LoadingComponent={InlineLoading}>
+      <HealthBody>
+        <HealthItem
+          message={data ? HealthStatus[value].message : null}
+          icon={data ? HealthStatus[value].iconname : null}
+          classname={data ? HealthStatus[value].classname : null}
+        />
+      </HealthBody>
     </DashboardCardBody>
   </DashboardCard>
-);
+  };
+
 
 Health.defaultProps = {
   loaded: false,

src/components/ClusterOverview/Health/fixtures/Health.fixture.js

@@ -2,7 +2,7 @@ import { Health } from '../Health';
 
 export const healthData = {
   data: {
-    healthy: false,
+    healthy: 0,
     message: 'Error message',
   },
   loaded: true,

src/components/ClusterOverview/Health/strings.js

@@ -0,0 +1,3 @@
+export const HEALTHY = 'Cluster is Healthy';
+export const ERROR = 'Cluster health is in Error State';
+export const UNKNOWN = 'Cannot get Cluster health';

src/components/ClusterOverview/fixtures/ClusterOverview.fixture.js

@@ -7,8 +7,7 @@ import { consumersData } from '../TopConsumers/fixtures/TopConsumers.fixture';
 import { capacityStats } from '../Capacity/fixtures/Capacity.fixture';
 import { utilizationStats } from '../Utilization/fixtures/Utilization.fixture';
 import { clusterDetailsData } from '../Details/fixtures/Details.fixture';
-
-import { complianceData } from '..';
+import { complianceData } from '../Compliance/fixtures/Compliance.fixture';
 
 import { ClusterOverviewContext } from '../ClusterOverviewContext';
 

src/components/ClusterOverview/index.js

@@ -1,12 +1,2 @@
 export { ClusterOverview } from './ClusterOverview';
 export { ClusterOverviewContext } from './ClusterOverviewContext';
-
-// TODO move all these mocked data to component fixtures once they are not needed in web-ui
-// we do not include fixture files in build so we cannot reuse their mocked data
-export const complianceData = {
-  data: {
-    healthy: true,
-    message: 'All nodes compliant',
-  },
-  loaded: true,
-};

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/Dashboard/Health/HealthItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'patternfly-react';
+
+export const HealthItem = ({ icon, classname, message }) => (
+  <React.Fragment>
+    <div className="kubevirt-ocs-health__icon">
+      <Icon type="fa" size="2x" name={icon} className={`kubevirt-ocs-health__icon--${classname}`} />
+      <span className="kubevirt-ocs-health__row-status-item-text">{message}</span>
+    </div>
+  </React.Fragment>
+);
+
+HealthItem.defaultProps = {
+  message: 'Cant get health',
+  icon: 'exclamation-triangle',
+  classname: 'error',
+};
+
+HealthItem.propTypes = {
+  message: PropTypes.string,
+  icon: PropTypes.string,
+  classname: PropTypes.string,
+};

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',
+        },
+      },
+    },
+  },
+];