Make SAP Instances status icon interactive

assets/js/components/HealthSummary/HomeHealthSummary.jsx

@@ -26,7 +26,14 @@ const healthSummaryTableConfig = {
       title: 'SAP Instances',
       key: 'sapsystemHealth',
       className: 'text-center',
-      render: (content) => <HealthIcon health={content} centered={true} />,
+      render: (content, item) => (
+        <Link to={`/sap_systems/${item.id}`}>
+          {' '}
+          <HealthIcon health={content} centered={true}>
+            {' '}
+          </HealthIcon>
+        </Link>
+      ),
     },
     {
       title: 'Database',

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

@@ -35,6 +35,27 @@ const homeHealthSummaryActionPayload = [
   }),
 ];
 
+describe('HomeHealthSummary component', () => {
+  it('should have a clickable SAP INSTANCE icon with link to the belonging instance', () => {
+    const [StatefulHomeHealthSummary, store] = withState(<HomeHealthSummary />);
+    const { container } = renderWithRouter(StatefulHomeHealthSummary);
+    const [{ id }] = homeHealthSummaryActionPayload;
+
+    act(() => {
+      store.dispatch(
+        setHealthSummary(keysToCamel(homeHealthSummaryActionPayload))
+      );
+      store.dispatch(stopHealthSummaryLoading());
+    });
+
+    expect(
+      container
+        .querySelector(':nth-child(1) > :nth-child(1) > a')
+        .getAttribute('href')
+    ).toContain(`/sap_systems/${id}`);
+  });
+});
+
 describe('HomeHealthSummary component', () => {
   it('should have a working link to the passing checks in the overview component', () => {
     const [StatefulHomeHealthSummary, store] = withState(<HomeHealthSummary />);

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

@@ -22,7 +22,7 @@ export const healthSummaryFactory = Factory.define(() => ({
   hostsHealth: healthEnum,
   id: faker.datatype.uuid(),
   sapsystemHealth: healthEnum,
-  SID: faker.random.alphaNumeric({
+  sid: faker.random.alphaNumeric({
     length: 3,
     casing: 'upper',
   }),

assets/js/state/healthSummary.js

@@ -1,12 +1,14 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 // interface SapSystemHealthSummary {
-//     id: string,
-//     sid: string,
-//     sapsystemHealth: string,
-//     databaseHealth: string,
-//     clustersHealth: string,
-//     hostsHealth: string
+//  clusterId:       string,
+//  clustersHealth:  string,
+//  databaseHealth:  string,
+//  databaseId:      string,
+//  hostsHealth:     string,
+//  id:              string,
+//  sapsystemHealth: string,
+//  sid:             string,
 // }
 
 const initialState = {