Add HomeHealthSummary storybook

assets/js/components/HealthSummary/HomeHealthSummary.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import Table from '@components/Table';
 import HealthIcon from '@components/Health/HealthIcon';
 import { Link } from 'react-router-dom';
-import { useSelector } from 'react-redux';
 import PageHeader from '@components/PageHeader';
 import HealthSummary from '@components/HealthSummary';
 import useQueryStringValues from '@hooks/useQueryStringValues';
@@ -78,11 +77,7 @@ const healthSummaryTableConfig = {
   ],
 };
 
-export function HomeHealthSummary() {
-  const { loading, sapSystemsHealth } = useSelector(
-    (state) => state.sapSystemsHealthSummary
-  );
-
+function HomeHealthSummary({ sapSystemsHealth, loading }) {
   const {
     extractedParams: { health: healthFilters = [] },
     setQueryValues,
@@ -146,3 +141,5 @@ export function HomeHealthSummary() {
     </div>
   );
 }
+
+export default HomeHealthSummary;

assets/js/components/HealthSummary/HomeHealthSummary.stories.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { healthSummaryFactory } from '@lib/test-utils/factories';
+
+import HomeHealthSummary from './HomeHealthSummary';
+
+const randomSummary = healthSummaryFactory.buildList(3);
+const healthySummary = healthSummaryFactory.buildList(3, {
+  clustersHealth: 'passing',
+  databaseHealth: 'passing',
+  hostsHealth: 'passing',
+  sapsystemHealth: 'passing',
+});
+
+export default {
+  title: 'HomeHealthSummary',
+  components: HomeHealthSummary,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export const Random = {
+  args: {
+    sapSystemsHealth: randomSummary,
+    loading: false,
+  },
+  render: (args) => (
+    <ContainerWrapper>
+      <HomeHealthSummary {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const Healthy = {
+  args: {
+    ...Random.args,
+    sapSystemsHealth: healthySummary,
+  },
+  render: (args) => (
+    <ContainerWrapper>
+      <HomeHealthSummary {...args} />
+    </ContainerWrapper>
+  ),
+};

assets/js/components/HealthSummary/HomeHealthSummaryPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import HomeHealthSummary from './HomeHealthSummary';
+
+export function HomeHealthSummaryPage() {
+  const { loading, sapSystemsHealth } = useSelector(
+    (state) => state.sapSystemsHealthSummary
+  );
+
+  return (
+    <HomeHealthSummary sapSystemsHealth={sapSystemsHealth} loading={loading} />
+  );
+}

assets/js/components/HealthSummary/index.js

@@ -1,5 +1,5 @@
 import HealthSummary from './HealthSummary';
 
-export { HomeHealthSummary } from './HomeHealthSummary';
+export { HomeHealthSummaryPage } from './HomeHealthSummaryPage';
 
 export default HealthSummary;

assets/js/components/Home/Home.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { HomeHealthSummary } from '@components/HealthSummary';
+import { HomeHealthSummaryPage } from '@components/HealthSummary';
 
 function Home() {
-  return <HomeHealthSummary />;
+  return <HomeHealthSummaryPage />;
 }
 
 export default Home;

assets/js/lib/test-utils/factories/clusters.js

@@ -2,7 +2,7 @@
 import { faker } from '@faker-js/faker';
 import { Factory } from 'fishery';
 
-import { resultEnum } from '.';
+import { healthEnum } from '.';
 
 const clusterTypeEnum = () =>
   faker.helpers.arrayElement(['unknown', 'hana_scale_up']);
@@ -15,6 +15,6 @@ export const clusterFactory = Factory.define(({ sequence }) => ({
   hosts_number: faker.datatype.number(),
   resources_number: faker.datatype.number(),
   type: clusterTypeEnum(),
-  health: resultEnum(),
+  health: healthEnum(),
   selected_checks: [],
 }));

assets/js/lib/test-utils/factories/index.js

@@ -8,16 +8,16 @@ export * from './sapSystems';
 export * from './clusters';
 export * from './databases';
 
-const healthEnum = () =>
+const executionStateEnum = () =>
   faker.helpers.arrayElement(['requested', 'running', 'not_running']);
 
-export const resultEnum = () =>
-  faker.helpers.arrayElement(['passing', 'critical', 'warning']);
+export const healthEnum = () =>
+  faker.helpers.arrayElement(['passing', 'critical', 'warning', 'unknown']);
 
 export const checkFactory = Factory.define(() => ({
   id: faker.datatype.uuid(),
   description: faker.lorem.paragraph(),
-  executionState: healthEnum,
+  executionState: executionStateEnum,
   health: healthEnum,
 }));
 
@@ -29,10 +29,8 @@ export const healthSummaryFactory = Factory.define(() => ({
   hostsHealth: healthEnum(),
   id: faker.datatype.uuid(),
   sapsystemHealth: healthEnum(),
-  sid: faker.random.alphaNumeric({
-    length: 3,
-    casing: 'upper',
-  }),
+  sid: faker.random.alphaNumeric(3, { casing: 'upper' }),
+  tenant: faker.random.alphaNumeric(3, { casing: 'upper' }),
 }));
 
 export const catalogCheckFactory = Factory.define(() => ({