Health Change (#364)

src/components/Dashboard/Health/HealthItem.js

@@ -2,32 +2,15 @@ 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-health__icon kubevirt-dashboard-health__icon--${classname}`}
-      />
-      <span className="kubevirt-health__text">{description}</span>
-    </div>
-  );
-};
-
-HealthItem.defaultProps = {
-  LoadingComponent: InlineLoading,
-  isLoading: false,
-};
+export const HealthItem = ({ icon, classname, message }) => (
+  <div className="kubevirt-health__body">
+    <Icon type="fa" size="2x" name={icon} className={`kubevirt-health__icon kubevirt-health__icon--${classname}`} />
+    <span className="kubevirt-health__text">{message}</span>
+  </div>
+);
 
 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/tests/__snapshots__/HealthBody.test.js.snap

@@ -5,10 +5,8 @@ exports[`<HealthBody /> renders correctly 1`] = `
   className="kubevirt-health__body"
 >
   <HealthItem
-    LoadingComponent={[Function]}
     classname="ok"
     icon="check-circle"
-    isLoading={false}
     message="OCS is Healthy"
   />
 </div>

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

@@ -2,10 +2,10 @@
 
 exports[`<HealthItem /> renders correctly 1`] = `
 <div
-  className="kubevirt-dashboard-health__icon"
+  className="kubevirt-health__body"
 >
   <Icon
-    className="kubevirt-health__icon kubevirt-dashboard-health__icon--ok"
+    className="kubevirt-health__icon kubevirt-health__icon--ok"
     name="check-circle"
     size="2x"
     type="fa"

src/components/StorageOverview/OCSHealth/Health.js

@@ -39,21 +39,19 @@ const OCSHealthStatus = {
 };
 
 export const OCSHealth = ({ data, loaded }) => {
-  const value = get(data, 'healthy');
+  const value = get(data, 'healthy.data.result[0].value[1]');
   const status = OCSHealthStatus[value] || OCSHealthStatus[3];
   return (
     <DashboardCard>
       <DashboardCardHeader>
         <DashboardCardTitle>Health</DashboardCardTitle>
       </DashboardCardHeader>
-      <DashboardCardBody>
+      <DashboardCardBody isLoading={!loaded} LoadingComponent={InlineLoading}>
         <HealthBody>
           <HealthItem
             message={data ? status.message : null}
             icon={data ? status.iconname : null}
             classname={data ? status.classname : null}
-            isLoading={!loaded}
-            LoadingComponent={InlineLoading}
           />
         </HealthBody>
       </DashboardCardBody>

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

@@ -20,16 +20,16 @@ exports[`<Health /> renders correctly 1`] = `
       class="kubevirt-health__body"
     >
       <div
-        class="kubevirt-dashboard-health__icon"
+        class="kubevirt-health__body"
       >
         <span
           aria-hidden="true"
-          class="fa fa-check-circle fa-2x kubevirt-health__icon kubevirt-dashboard-health__icon--ok"
+          class="fa fa-exclamation-triangle fa-2x kubevirt-health__icon kubevirt-health__icon--error"
         />
         <span
           class="kubevirt-health__text"
         >
-          OCS is Healthy
+          Not available
         </span>
       </div>
     </div>