Add subsystem health

sass/components/ClusterOverview/compliance.scss

@@ -1,4 +1,5 @@
 .kubevirt-compliance__body {
-  text-align: center;
-  max-height: 130px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 }

sass/components/ClusterOverview/health.scss

@@ -4,9 +4,3 @@
     grid-gap: 0;
   }
 }
-
-.kubevirt-compliance__body {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}

sass/components/Dashboard/health.scss

@@ -1,15 +1,43 @@
-.kubevirt-health__body {
+.kubevirt-health__item {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
 
+/* stylelint-disable plugin/selector-bem-pattern */
+.kubevirt-health__body--subsystem {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  .kubevirt-health__item {
+    border-bottom: 1px solid #ededed;
+    padding-top: 5px;
+  }
+}
+/* stylelint-enable */
+
 .kubevirt-health__text {
   font-size: 0.875rem;
   margin-left: 1rem;
 }
 
+.kubevirt-health__message {
+  font-size: 0.875rem;
+  display: table-cell;
+}
+
+.kubevirt-health__title {
+  padding-left: 0.6rem;
+}
+
+.kubevirt-health__subtitle {
+  font-size: 0.6rem;
+  color: grey;
+}
+
 .kubevirt-health__icon {
+  display: table-cell;
   font-size: 1.5rem;
 }
 

src/components/ClusterOverview/ClusterOverview.js

@@ -7,7 +7,7 @@ import { Dashboard, DashboardBody } from '../Dashboard';
 import { MEDIA_QUERY_EXCLUSIVE_DEVIATION, MEDIA_QUERY_LG } from '../../utils';
 
 import { DetailsConnected } from './Details/Details';
-import HealthConnected from './Health/Health';
+import { HealthConnected } from './Health/Health';
 import ComplianceConnected from './Compliance/Compliance';
 import EventsConnected from './Events/Events';
 import { InventoryConnected } from './Inventory/Inventory';

src/components/ClusterOverview/Health/Health.js

@@ -6,31 +6,93 @@ import {
   DashboardCardBody,
   DashboardCardHeader,
   DashboardCardTitle,
+  DashboardCardTitleSeeAll,
 } from '../../Dashboard/DashboardCard';
-import HealthBody from './HealthBody';
-import { ClusterOverviewContextGenericConsumer } from '../ClusterOverviewContext';
+import { ClusterOverviewContext } from '../ClusterOverviewContext';
 import { InlineLoading } from '../../Loading';
+import { SubsystemHealth } from '../../SubsystemHealth';
+import { HealthItem, OK_STATE, ERROR_STATE, WARNING_STATE } from '../../Dashboard/Health/HealthItem';
+import { HealthBody } from '../../Dashboard/Health/HealthBody';
+import { getK8sHealthState, getKubevirtHealthState, getOCSHealthState } from '../../Dashboard/Health/utils';
 
-export const Health = ({ data, loaded }) => (
-  <DashboardCard>
-    <DashboardCardHeader>
-      <DashboardCardTitle>Cluster Health</DashboardCardTitle>
-    </DashboardCardHeader>
-    <DashboardCardBody className="kubevirt-health__body" isLoading={!loaded} LoadingComponent={InlineLoading}>
-      <HealthBody data={data} />
-    </DashboardCardBody>
-  </DashboardCard>
-);
+const getClusterHealth = subsystemStates => {
+  let healthState = { state: OK_STATE, message: 'Cluster is healthy' };
+  const sortedStates = {
+    errorStates: [],
+    warningStates: [],
+  };
+
+  subsystemStates.forEach(state => {
+    switch (state.state) {
+      case ERROR_STATE:
+        sortedStates.errorStates.push(state);
+        break;
+      case WARNING_STATE:
+        sortedStates.warningStates.push(state);
+        break;
+      default:
+        break;
+    }
+  });
+
+  if (sortedStates.errorStates.length > 0) {
+    healthState =
+      sortedStates.errorStates.length === 1
+        ? sortedStates.errorStates[0]
+        : { state: ERROR_STATE, message: 'Multiple errors', details: 'Cluster health is degrated' };
+  } else if (sortedStates.warningStates.length > 0) {
+    healthState =
+      sortedStates.warningStates.length === 1
+        ? sortedStates.warningStates[0]
+        : { state: WARNING_STATE, message: 'Multiple warnings', details: 'Cluster health is degrated' };
+  }
+
+  return healthState;
+};
+
+export const Health = ({ k8sHealth, kubevirtHealth, cephHealth, LoadingComponent }) => {
+  const k8sHealthState = getK8sHealthState(k8sHealth);
+  const kubevirtHealthState = getKubevirtHealthState(kubevirtHealth);
+  const cephHealthState = getOCSHealthState(cephHealth);
+
+  const healthState = getClusterHealth([k8sHealthState, kubevirtHealthState, cephHealthState]);
+
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Cluster Health</DashboardCardTitle>
+        <DashboardCardTitleSeeAll title="Subsystem health">
+          <SubsystemHealth
+            k8sHealth={k8sHealthState}
+            kubevirtHealth={kubevirtHealthState}
+            cephHealth={cephHealthState}
+            LoadingComponent={LoadingComponent}
+          />
+        </DashboardCardTitleSeeAll>
+      </DashboardCardHeader>
+      <DashboardCardBody isLoading={!(k8sHealth && kubevirtHealth && cephHealth)} LoadingComponent={LoadingComponent}>
+        <HealthBody>
+          <HealthItem state={healthState.state} message={healthState.message} details={healthState.details} />
+        </HealthBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
 
 Health.defaultProps = {
-  loaded: false,
+  k8sHealth: null,
+  kubevirtHealth: null,
+  cephHealth: null,
+  LoadingComponent: InlineLoading,
 };
 
 Health.propTypes = {
-  data: PropTypes.object.isRequired,
-  loaded: PropTypes.bool,
+  k8sHealth: PropTypes.object,
+  kubevirtHealth: PropTypes.object,
+  cephHealth: PropTypes.object,
+  LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
-const HealthConnected = () => <ClusterOverviewContextGenericConsumer Component={Health} dataPath="healthData" />;
-
-export default HealthConnected;
+export const HealthConnected = () => (
+  <ClusterOverviewContext.Consumer>{props => <Health {...props} />}</ClusterOverviewContext.Consumer>
+);

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

@@ -1,16 +1,48 @@
 import { Health } from '../Health';
 
 export const healthData = {
-  data: {
-    healthy: false,
-    message: 'Error message',
+  k8sHealth: {
+    response: 'ok',
+  },
+  cephHealth: {
+    result: [
+      {
+        value: [null, 0],
+      },
+    ],
+  },
+  kubevirtHealth: {
+    apiserver: {
+      connectivity: 'ok',
+    },
+  },
+};
+
+export const healthDataErrors = {
+  k8sHealth: {
+    response: 'error',
+  },
+  cephHealth: {
+    result: [
+      {
+        value: [null, 0],
+      },
+    ],
+  },
+  kubevirtHealth: {
+    apiserver: {
+      connectivity: 'error',
+    },
   },
-  loaded: true,
 };
 
 export default [
   {
     component: Health,
     props: { ...healthData },
   },
+  {
+    component: Health,
+    props: { ...healthDataErrors },
+  },
 ];

src/components/ClusterOverview/Health/tests/Health.test.js

@@ -5,10 +5,15 @@ import { Health } from '../Health';
 import { default as HealthFixtures } from '../fixtures/Health.fixture';
 
 const testHealthOverview = () => <Health {...HealthFixtures[0].props} />;
+const testHealthErrorsOverview = () => <Health {...HealthFixtures[1].props} />;
 
 describe('<Health />', () => {
   it('renders correctly', () => {
     const component = render(testHealthOverview());
     expect(component).toMatchSnapshot();
   });
+  it('renders multiple erros correctly', () => {
+    const component = render(testHealthErrorsOverview());
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/ClusterOverview/Health/tests/__snapshots__/Health.test.js.snap

@@ -12,23 +12,93 @@ exports[`<Health /> renders correctly 1`] = `
     >
       Cluster Health
     </h2>
+    <button
+      class="btn btn-link"
+      type="button"
+    >
+      See all
+    </button>
   </div>
   <div
-    class="card-pf-body kubevirt-health__body"
+    class="card-pf-body"
   >
-    <div
-      class="kubevirt-health__icon--error kubevirt-health__icon"
-    >
-      <span
-        aria-hidden="true"
-        class="fa fa-exclamation-circle"
-      />
+    <div>
+      <div
+        class="kubevirt-health__item"
+      >
+        <div
+          class="kubevirt-health__icon kubevirt-health__icon--ok"
+        >
+          <span
+            aria-hidden="true"
+            class="fa fa-check-circle"
+          />
+        </div>
+        <div
+          class="kubevirt-health__message"
+        >
+          <span
+            class="kubevirt-health__text"
+          >
+            Cluster is healthy
+          </span>
+        </div>
+      </div>
     </div>
-    <span
-      class="kubevirt-health__text"
+  </div>
+</div>
+`;
+
+exports[`<Health /> renders multiple erros correctly 1`] = `
+<div
+  class="card-pf kubevirt-dashboard__card"
+>
+  <div
+    class="card-pf-heading kubevirt-dashboard__card-heading"
+  >
+    <h2
+      class="card-pf-title kubevirt-dashboard__card-title"
+    >
+      Cluster Health
+    </h2>
+    <button
+      class="btn btn-link"
+      type="button"
     >
-      Error message
-    </span>
+      See all
+    </button>
+  </div>
+  <div
+    class="card-pf-body"
+  >
+    <div>
+      <div
+        class="kubevirt-health__item"
+      >
+        <div
+          class="kubevirt-health__icon kubevirt-health__icon--error"
+        >
+          <span
+            aria-hidden="true"
+            class="fa fa-exclamation-circle"
+          />
+        </div>
+        <div
+          class="kubevirt-health__message"
+        >
+          <span
+            class="kubevirt-health__text"
+          >
+            Multiple errors
+          </span>
+          <div
+            class="kubevirt-health__text kubevirt-health__subtitle"
+          >
+            Cluster health is degrated
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;