From 73f91dca23b50266544b02bced0a3299dfcdfde8 Mon Sep 17 00:00:00 2001
From: Nelson Kopliku <nelson.kopliku@suse.com>
Date: Thu, 13 Jul 2023 14:57:46 +0200
Subject: [PATCH] Host Checks selection saga (#1618)

* Move cluster check selection action next to the state

* Move cluster check selection saga in dedicated saga file

* Use cluster specific action name for checks selection

* Add a new checksSelection slice for host checks selection

* Add reducer to hosts to update checks selection

* Add host checks selection saga

* Use redux state in HostSettingsPage

* Improve imports and faked test data

* Simplify host check selection state

* Add tests for current cluster checks selection saga

* Extract callback functions to component functions

* Add targetName prop to ChecksSelection

* Rename checksSelection to hostChecksSelection

* Use useCallback when passing saving function

* Improve name for the new check selection emitted by the ChecksSelection component
---
 .../ChecksSelection/ChecksSelection.jsx       |  3 +-
 .../ChecksSelection/ChecksSelection.test.jsx  |  4 +-
 .../ClusterDetails/ChecksSelection.jsx        | 17 ++--
 .../ClusterDetails/ChecksSelection.test.jsx   |  2 +-
 .../HostDetails/HostChecksSelection.jsx       | 13 +--
 .../HostDetails/HostSettingsPage.jsx          | 33 ++++++--
 assets/js/lib/test-utils/index.jsx            |  1 +
 assets/js/state/actions/cluster.js            |  6 --
 assets/js/state/clusters.js                   |  5 +-
 assets/js/state/hostChecksSelection.js        | 26 ++++++
 assets/js/state/hostChecksSelection.test.js   | 38 +++++++++
 assets/js/state/hosts.js                      |  9 +++
 assets/js/state/hosts.test.js                 | 25 ++++++
 assets/js/state/index.js                      |  2 +
 assets/js/state/sagas/clusters.js             | 52 +++++++++++-
 assets/js/state/sagas/clusters.test.js        | 81 ++++++++++++++++++-
 assets/js/state/sagas/hosts.js                | 41 +++++++++-
 assets/js/state/sagas/hosts.test.js           | 57 +++++++++++++
 assets/js/state/sagas/index.js                | 54 ++-----------
 .../js/state/selectors/hostChecksSelection.js |  4 +
 .../selectors/hostChecksSelection.test.js     | 15 ++++
 21 files changed, 408 insertions(+), 80 deletions(-)
 delete mode 100644 assets/js/state/actions/cluster.js
 create mode 100644 assets/js/state/hostChecksSelection.js
 create mode 100644 assets/js/state/hostChecksSelection.test.js
 create mode 100644 assets/js/state/selectors/hostChecksSelection.js
 create mode 100644 assets/js/state/selectors/hostChecksSelection.test.js

diff --git a/assets/js/components/ChecksSelection/ChecksSelection.jsx b/assets/js/components/ChecksSelection/ChecksSelection.jsx
index fae680de52..2e4e7840bb 100644
--- a/assets/js/components/ChecksSelection/ChecksSelection.jsx
+++ b/assets/js/components/ChecksSelection/ChecksSelection.jsx
@@ -34,6 +34,7 @@ const defaultSelectedChecks = [];
 function ChecksSelection({
   className,
   targetID,
+  targetName,
   catalog,
   selected = defaultSelectedChecks,
   loading = false,
@@ -119,7 +120,7 @@ function ChecksSelection({
             <button
               className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
               disabled={saving}
-              onClick={() => onSave(selectedChecks, targetID)}
+              onClick={() => onSave(selectedChecks, targetID, targetName)}
               type="button"
               data-testid="save-selection-button"
             >
diff --git a/assets/js/components/ChecksSelection/ChecksSelection.test.jsx b/assets/js/components/ChecksSelection/ChecksSelection.test.jsx
index 526e85357a..ab02b4b03b 100644
--- a/assets/js/components/ChecksSelection/ChecksSelection.test.jsx
+++ b/assets/js/components/ChecksSelection/ChecksSelection.test.jsx
@@ -123,6 +123,7 @@ describe('ChecksSelection component', () => {
     const onClear = jest.fn();
     const user = userEvent.setup();
     const targetID = faker.datatype.uuid();
+    const targetName = faker.lorem.word();
 
     const group = faker.animal.cat();
     const catalog = catalogCheckFactory.buildList(2, { group });
@@ -132,6 +133,7 @@ describe('ChecksSelection component', () => {
       <ChecksSelection
         catalog={catalog}
         targetID={targetID}
+        targetName={targetName}
         onSave={onSave}
         onUpdateCatalog={onUpdateCatalog}
         onClear={onClear}
@@ -143,7 +145,7 @@ describe('ChecksSelection component', () => {
     await user.click(switches[0]);
     await user.click(screen.getByText('Save Check Selection'));
 
-    expect(onSave).toBeCalledWith([checkID1, checkID2], targetID);
+    expect(onSave).toBeCalledWith([checkID1, checkID2], targetID, targetName);
     expect(onUpdateCatalog).toBeCalled();
     expect(onClear).toBeCalled();
   });
diff --git a/assets/js/components/ClusterDetails/ChecksSelection.jsx b/assets/js/components/ClusterDetails/ChecksSelection.jsx
index 6e1e885111..ee59911e8d 100644
--- a/assets/js/components/ClusterDetails/ChecksSelection.jsx
+++ b/assets/js/components/ClusterDetails/ChecksSelection.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
@@ -8,7 +8,7 @@ import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 import { remove, uniq, toggle, groupBy } from '@lib/lists';
 import { getCatalog } from '@state/selectors/catalog';
 import { updateCatalog } from '@state/actions/catalog';
-import { checksSelected } from '@state/actions/cluster';
+import { checksSelected } from '@state/clusters';
 import { executionRequested } from '@state/actions/lastExecutions';
 
 import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
@@ -101,6 +101,15 @@ function ChecksSelection({ clusterId, cluster }) {
     }
   }, [loading]);
 
+  const saveSelection = useCallback(() =>
+    dispatch(
+      checksSelected({
+        checks: selectedChecks,
+        clusterID: clusterId,
+      })
+    )
+  );
+
   return (
     <div className="bg-white rounded p-3">
       <CatalogContainer
@@ -148,9 +157,7 @@ function ChecksSelection({ clusterId, cluster }) {
           <div className="place-items-end flex">
             <button
               className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
-              onClick={() =>
-                dispatch(checksSelected(selectedChecks, clusterId))
-              }
+              onClick={saveSelection}
               type="button"
               data-testid="save-selection-button"
             >
diff --git a/assets/js/components/ClusterDetails/ChecksSelection.test.jsx b/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
index bf2e2df975..0cfb4b3220 100644
--- a/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
+++ b/assets/js/components/ClusterDetails/ChecksSelection.test.jsx
@@ -132,7 +132,7 @@ describe('ClusterDetails ChecksSelection component', () => {
         },
       },
       {
-        type: 'CHECKS_SELECTED',
+        type: 'CLUSTER_CHECKS_SELECTED',
         payload: {
           checks: selectedChecks,
           clusterID: cluster.id,
diff --git a/assets/js/components/HostDetails/HostChecksSelection.jsx b/assets/js/components/HostDetails/HostChecksSelection.jsx
index 93fca55d57..40176af9a1 100644
--- a/assets/js/components/HostDetails/HostChecksSelection.jsx
+++ b/assets/js/components/HostDetails/HostChecksSelection.jsx
@@ -15,6 +15,8 @@ function HostChecksSelection({
   catalogError,
   catalogLoading,
   onUpdateCatalog,
+  onSaveSelection,
+  isSavingSelection,
 }) {
   return (
     <div className="w-full px-2 sm:px-0">
@@ -25,20 +27,19 @@ function HostChecksSelection({
       <HostInfoBox provider={provider} agentVersion={agentVersion} />
       <ChecksSelection
         targetID={hostID}
+        targetName={hostName}
         catalog={catalog}
         catalogError={catalogError}
         loading={catalogLoading}
         selected={selectedChecks}
-        onSave={(_selectedChecks, _hostID) => {
-          // TODO: dispatch check selection for a host
-        }}
+        onSave={(newSelectedChecks, targetID, targetName) =>
+          onSaveSelection(newSelectedChecks, targetID, targetName)
+        }
         onUpdateCatalog={() => onUpdateCatalog()}
         onClear={() => {
           // TODO
         }}
-        saving={false}
-        error={null}
-        success={false}
+        saving={isSavingSelection}
       />
     </div>
   );
diff --git a/assets/js/components/HostDetails/HostSettingsPage.jsx b/assets/js/components/HostDetails/HostSettingsPage.jsx
index 2b148ef6f5..85a2174750 100644
--- a/assets/js/components/HostDetails/HostSettingsPage.jsx
+++ b/assets/js/components/HostDetails/HostSettingsPage.jsx
@@ -4,9 +4,11 @@ import { useParams } from 'react-router-dom';
 
 import LoadingBox from '@components/LoadingBox';
 
+import { checksSelected } from '@state/hostChecksSelection';
 import { updateCatalog } from '@state/actions/catalog';
 import { getCatalog } from '@state/selectors/catalog';
 import { getHost } from '@state/selectors';
+import { getCheckSelection } from '@state/selectors/hostChecksSelection';
 import HostChecksSelection from './HostChecksSelection';
 
 function HostSettingsPage() {
@@ -21,9 +23,12 @@ function HostSettingsPage() {
     loading: catalogLoading,
   } = useSelector(getCatalog());
 
+  const { saving } = useSelector(getCheckSelection());
+
   if (!host) {
     return <LoadingBox text="Loading..." />;
   }
+
   const {
     hostname: hostName,
     provider,
@@ -31,6 +36,23 @@ function HostSettingsPage() {
     selected_checks: selectedChecks,
   } = host;
 
+  const refreshCatalog = () =>
+    dispatch(
+      updateCatalog({
+        provider: host.provider,
+        target_type: 'host',
+      })
+    );
+
+  const saveSelection = (selection, targetID, targetName) =>
+    dispatch(
+      checksSelected({
+        hostID: targetID,
+        hostName: targetName,
+        checks: selection,
+      })
+    );
+
   return (
     <HostChecksSelection
       hostID={hostID}
@@ -41,14 +63,9 @@ function HostSettingsPage() {
       catalog={catalog}
       catalogError={catalogError}
       catalogLoading={catalogLoading}
-      onUpdateCatalog={() =>
-        dispatch(
-          updateCatalog({
-            provider: host.provider,
-            target_type: 'host',
-          })
-        )
-      }
+      onUpdateCatalog={refreshCatalog}
+      isSavingSelection={saving}
+      onSaveSelection={saveSelection}
     />
   );
 }
diff --git a/assets/js/lib/test-utils/index.jsx b/assets/js/lib/test-utils/index.jsx
index 0723d77d37..afebecb3c1 100644
--- a/assets/js/lib/test-utils/index.jsx
+++ b/assets/js/lib/test-utils/index.jsx
@@ -27,6 +27,7 @@ export const defaultInitialState = {
     ),
   },
   clusterChecksSelection: {},
+  hostChecksSelection: {},
   catalog: { loading: false, data: [], error: null },
 };
 
diff --git a/assets/js/state/actions/cluster.js b/assets/js/state/actions/cluster.js
deleted file mode 100644
index 488c7b6ada..0000000000
--- a/assets/js/state/actions/cluster.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const CHECKS_SELECTED = 'CHECKS_SELECTED';
-
-export const checksSelected = (selectedChecks, clusterID) => ({
-  type: CHECKS_SELECTED,
-  payload: { checks: selectedChecks, clusterID },
-});
diff --git a/assets/js/state/clusters.js b/assets/js/state/clusters.js
index d2d5159d08..e251b76f13 100644
--- a/assets/js/state/clusters.js
+++ b/assets/js/state/clusters.js
@@ -1,4 +1,4 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createAction, createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   loading: false,
@@ -103,6 +103,9 @@ export const clustersListSlice = createSlice({
 
 export const CLUSTER_DEREGISTERED = 'CLUSTER_DEREGISTERED';
 
+export const CLUSTER_CHECKS_SELECTED = 'CLUSTER_CHECKS_SELECTED';
+export const checksSelected = createAction(CLUSTER_CHECKS_SELECTED);
+
 export const {
   setClusters,
   appendCluster,
diff --git a/assets/js/state/hostChecksSelection.js b/assets/js/state/hostChecksSelection.js
new file mode 100644
index 0000000000..2e206611e7
--- /dev/null
+++ b/assets/js/state/hostChecksSelection.js
@@ -0,0 +1,26 @@
+import { createAction, createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  saving: false,
+};
+
+export const hostChecksSelectionSlice = createSlice({
+  name: 'hostChecksSelection',
+  initialState,
+  reducers: {
+    startSavingChecksSelection: (state) => {
+      state.saving = true;
+    },
+    stopSavingChecksSelection: (state) => {
+      state.saving = false;
+    },
+  },
+});
+
+export const HOST_CHECKS_SELECTED = 'HOST_CHECKS_SELECTED';
+export const checksSelected = createAction(HOST_CHECKS_SELECTED);
+
+export const { startSavingChecksSelection, stopSavingChecksSelection } =
+  hostChecksSelectionSlice.actions;
+
+export default hostChecksSelectionSlice.reducer;
diff --git a/assets/js/state/hostChecksSelection.test.js b/assets/js/state/hostChecksSelection.test.js
new file mode 100644
index 0000000000..176f2f1a19
--- /dev/null
+++ b/assets/js/state/hostChecksSelection.test.js
@@ -0,0 +1,38 @@
+import hostChecksSelectionReducer, {
+  startSavingChecksSelection,
+  stopSavingChecksSelection,
+} from '@state/hostChecksSelection';
+
+describe('Checks Selection reducer', () => {
+  it('should mark a check selection as saving', () => {
+    const initialState = {
+      saving: false,
+    };
+
+    const action = startSavingChecksSelection();
+
+    const expectedState = {
+      saving: true,
+    };
+
+    expect(hostChecksSelectionReducer(initialState, action)).toEqual(
+      expectedState
+    );
+  });
+
+  it('should mark a check selection as completed', () => {
+    const initialState = {
+      saving: true,
+    };
+
+    const action = stopSavingChecksSelection();
+
+    const expectedState = {
+      saving: false,
+    };
+
+    expect(hostChecksSelectionReducer(initialState, action)).toEqual(
+      expectedState
+    );
+  });
+});
diff --git a/assets/js/state/hosts.js b/assets/js/state/hosts.js
index d9ac4cb7c2..5e37755e85 100644
--- a/assets/js/state/hosts.js
+++ b/assets/js/state/hosts.js
@@ -43,6 +43,14 @@ export const hostsListSlice = createSlice({
         return host;
       });
     },
+    updateSelectedChecks: (state, action) => {
+      state.hosts = state.hosts.map((host) => {
+        if (host.id === action.payload.hostID) {
+          host.selected_checks = action.payload.checks;
+        }
+        return host;
+      });
+    },
     setHeartbeatPassing: (state, action) => {
       state.hosts = state.hosts.map((host) => {
         if (host.id === action.payload.id) {
@@ -127,6 +135,7 @@ export const {
   updateHost,
   addTagToHost,
   removeTagFromHost,
+  updateSelectedChecks,
   setHeartbeatPassing,
   setHeartbeatCritical,
   setHostListDeregisterable,
diff --git a/assets/js/state/hosts.test.js b/assets/js/state/hosts.test.js
index fd3c0bb66b..00b55d77b0 100644
--- a/assets/js/state/hosts.test.js
+++ b/assets/js/state/hosts.test.js
@@ -1,9 +1,11 @@
+import { faker } from '@faker-js/faker';
 import hostsReducer, {
   removeHost,
   setHostListDeregisterable,
   setHostNotDeregisterable,
   setHostDeregistering,
   setHostNotDeregistering,
+  updateSelectedChecks,
 } from '@state/hosts';
 import { hostFactory } from '@lib/test-utils/factories';
 
@@ -83,4 +85,27 @@ describe('Hosts reducer', () => {
 
     expect(hostsReducer(initialState, action)).toEqual(expectedState);
   });
+
+  it('should update the check selection for a host', () => {
+    const initialCheckSelection = [
+      faker.datatype.uuid(),
+      faker.datatype.uuid(),
+    ];
+    const host1 = hostFactory.build({ selected_checks: initialCheckSelection });
+    const host2 = hostFactory.build();
+    const initialState = { hosts: [host1, host2] };
+
+    const newChecksSelection = [faker.datatype.uuid(), faker.datatype.uuid()];
+
+    const action = updateSelectedChecks({
+      hostID: host1.id,
+      checks: newChecksSelection,
+    });
+
+    const expectedState = {
+      hosts: [{ ...host1, selected_checks: newChecksSelection }, host2],
+    };
+
+    expect(hostsReducer(initialState, action)).toEqual(expectedState);
+  });
 });
diff --git a/assets/js/state/index.js b/assets/js/state/index.js
index 3d92a4585d..cc4ab7802b 100644
--- a/assets/js/state/index.js
+++ b/assets/js/state/index.js
@@ -5,6 +5,7 @@ import sapSystemsHealthSummaryReducer from './healthSummary';
 import hostsListReducer from './hosts';
 import clustersListReducer from './clusters';
 import clusterChecksSelectionReducer from './clusterChecksSelection';
+import hostChecksSelectionReducer from './hostChecksSelection';
 import checksResultsFiltersReducer from './checksResultsFilters';
 import sapSystemListReducer from './sapSystems';
 import databasesListReducer from './databases';
@@ -23,6 +24,7 @@ export const store = configureStore({
     hostsList: hostsListReducer,
     clustersList: clustersListReducer,
     clusterChecksSelection: clusterChecksSelectionReducer,
+    hostChecksSelection: hostChecksSelectionReducer,
     checksResultsFilters: checksResultsFiltersReducer,
     sapSystemsList: sapSystemListReducer,
     databasesList: databasesListReducer,
diff --git a/assets/js/state/sagas/clusters.js b/assets/js/state/sagas/clusters.js
index a302c4dedd..ae2bcf8e50 100644
--- a/assets/js/state/sagas/clusters.js
+++ b/assets/js/state/sagas/clusters.js
@@ -1,6 +1,50 @@
-import { put, takeEvery } from 'redux-saga/effects';
-import { CLUSTER_DEREGISTERED, removeCluster } from '@state/clusters';
+import { call, put, select, takeEvery } from 'redux-saga/effects';
+import { post } from '@lib/network';
+
 import { notify } from '@state/actions/notifications';
+import {
+  CLUSTER_DEREGISTERED,
+  CLUSTER_CHECKS_SELECTED,
+  removeCluster,
+  updateSelectedChecks,
+} from '@state/clusters';
+import {
+  setClusterChecksSelectionSavingError,
+  setClusterChecksSelectionSavingSuccess,
+  startSavingClusterChecksSelection,
+  stopSavingClusterChecksSelection,
+} from '@state/clusterChecksSelection';
+import { getClusterName } from '@state/selectors/cluster';
+
+export function* checksSelected({ payload }) {
+  yield put(startSavingClusterChecksSelection());
+
+  const clusterName = yield select(getClusterName(payload.clusterID));
+
+  try {
+    yield call(post, `/clusters/${payload.clusterID}/checks`, {
+      checks: payload.checks,
+    });
+    yield put(updateSelectedChecks(payload));
+
+    yield put(
+      notify({
+        text: `Checks selection for ${clusterName} saved`,
+        icon: '💾',
+      })
+    );
+    yield put(setClusterChecksSelectionSavingSuccess());
+  } catch (error) {
+    yield put(
+      notify({
+        text: `Unable to save selection for ${clusterName}`,
+        icon: '❌',
+      })
+    );
+    yield put(setClusterChecksSelectionSavingError());
+  }
+  yield put(stopSavingClusterChecksSelection());
+}
 
 export function* clusterDeregistered({ payload: { name, id } }) {
   yield put(removeCluster({ id }));
@@ -12,6 +56,10 @@ export function* clusterDeregistered({ payload: { name, id } }) {
   );
 }
 
+export function* watchClusterChecksSelection() {
+  yield takeEvery(CLUSTER_CHECKS_SELECTED, checksSelected);
+}
+
 export function* watchClusterDeregistered() {
   yield takeEvery(CLUSTER_DEREGISTERED, clusterDeregistered);
 }
diff --git a/assets/js/state/sagas/clusters.test.js b/assets/js/state/sagas/clusters.test.js
index d5e9cf2d3f..ad9745279f 100644
--- a/assets/js/state/sagas/clusters.test.js
+++ b/assets/js/state/sagas/clusters.test.js
@@ -1,8 +1,24 @@
+import { faker } from '@faker-js/faker';
+import MockAdapter from 'axios-mock-adapter';
 import { recordSaga } from '@lib/test-utils';
-import { clusterDeregistered } from '@state/sagas/clusters';
-import { removeCluster } from '@state/clusters';
+
+import { networkClient } from '@lib/network';
+
 import { clusterFactory } from '@lib/test-utils/factories';
 
+import { notify } from '@state/actions/notifications';
+import { clusterDeregistered, checksSelected } from '@state/sagas/clusters';
+import { removeCluster, updateSelectedChecks } from '@state/clusters';
+
+import {
+  setClusterChecksSelectionSavingError,
+  setClusterChecksSelectionSavingSuccess,
+  startSavingClusterChecksSelection,
+  stopSavingClusterChecksSelection,
+} from '@state/clusterChecksSelection';
+
+const axiosMock = new MockAdapter(networkClient);
+
 describe('Clusters sagas', () => {
   it('should remove the cluster', async () => {
     const { id, name } = clusterFactory.build();
@@ -13,4 +29,65 @@ describe('Clusters sagas', () => {
 
     expect(dispatched).toContainEqual(removeCluster({ id }));
   });
+
+  it('should save check selection for a cluster', async () => {
+    const cluster = clusterFactory.build();
+
+    axiosMock.onPost(`/clusters/${cluster.id}/checks`).reply(202, {});
+
+    const actionPayload = {
+      clusterID: cluster.id,
+      checks: [faker.datatype.uuid(), faker.datatype.uuid()],
+    };
+    const dispatched = await recordSaga(
+      checksSelected,
+      {
+        payload: actionPayload,
+      },
+      {
+        clustersList: { clusters: [cluster] },
+      }
+    );
+
+    expect(dispatched).toEqual([
+      startSavingClusterChecksSelection(),
+      updateSelectedChecks(actionPayload),
+      notify({
+        text: `Checks selection for ${cluster.name} saved`,
+        icon: '💾',
+      }),
+      setClusterChecksSelectionSavingSuccess(),
+      stopSavingClusterChecksSelection(),
+    ]);
+  });
+
+  it('should notify an error when saving a cluster check selection fails', async () => {
+    const cluster = clusterFactory.build();
+
+    axiosMock.onPost(`/clusters/${cluster.id}/checks`).reply(400, {});
+
+    const actionPayload = {
+      clusterID: cluster.id,
+      checks: [faker.datatype.uuid(), faker.datatype.uuid()],
+    };
+    const dispatched = await recordSaga(
+      checksSelected,
+      {
+        payload: actionPayload,
+      },
+      {
+        clustersList: { clusters: [cluster] },
+      }
+    );
+
+    expect(dispatched).toEqual([
+      startSavingClusterChecksSelection(),
+      notify({
+        text: `Unable to save selection for ${cluster.name}`,
+        icon: '❌',
+      }),
+      setClusterChecksSelectionSavingError(),
+      stopSavingClusterChecksSelection(),
+    ]);
+  });
 });
diff --git a/assets/js/state/sagas/hosts.js b/assets/js/state/sagas/hosts.js
index fcd9eb4be2..bff6729895 100644
--- a/assets/js/state/sagas/hosts.js
+++ b/assets/js/state/sagas/hosts.js
@@ -1,4 +1,6 @@
 import { delay, put, race, call, take, takeEvery } from 'redux-saga/effects';
+import { post, del } from '@lib/network';
+
 import {
   CHECK_HOST_IS_DEREGISTERABLE,
   CANCEL_CHECK_HOST_IS_DEREGISTERABLE,
@@ -8,9 +10,15 @@ import {
   setHostListDeregisterable,
   setHostDeregistering,
   setHostNotDeregistering,
+  updateSelectedChecks,
 } from '@state/hosts';
 
-import { del } from '@lib/network';
+import {
+  startSavingChecksSelection,
+  stopSavingChecksSelection,
+  HOST_CHECKS_SELECTED,
+} from '@state/hostChecksSelection';
+
 import { notify } from '@state/actions/notifications';
 
 export function* markDeregisterableHosts(hosts) {
@@ -64,6 +72,33 @@ export function* deregisterHost({ payload }) {
   }
 }
 
+export function* checksSelected({ payload }) {
+  const { hostID, hostName, checks } = payload;
+  yield put(startSavingChecksSelection());
+
+  try {
+    yield call(post, `/hosts/${hostID}/checks`, {
+      checks,
+    });
+
+    yield put(updateSelectedChecks(payload));
+    yield put(
+      notify({
+        text: `Checks selection for ${hostName} saved`,
+        icon: '💾',
+      })
+    );
+  } catch (error) {
+    yield put(
+      notify({
+        text: `Unable to save selection for ${hostName}`,
+        icon: '❌',
+      })
+    );
+  }
+  yield put(stopSavingChecksSelection());
+}
+
 export function* watchHostDeregisterable() {
   yield takeEvery(CHECK_HOST_IS_DEREGISTERABLE, checkHostDeregisterable);
 }
@@ -75,3 +110,7 @@ export function* watchHostDeregistered() {
 export function* watchDeregisterHost() {
   yield takeEvery(DEREGISTER_HOST, deregisterHost);
 }
+
+export function* watchHostChecksSelection() {
+  yield takeEvery(HOST_CHECKS_SELECTED, checksSelected);
+}
diff --git a/assets/js/state/sagas/hosts.test.js b/assets/js/state/sagas/hosts.test.js
index c3fab6e42a..74fe1c3b5e 100644
--- a/assets/js/state/sagas/hosts.test.js
+++ b/assets/js/state/sagas/hosts.test.js
@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import MockAdapter from 'axios-mock-adapter';
 
 import { recordSaga } from '@lib/test-utils';
@@ -7,6 +8,7 @@ import {
   checkHostDeregisterable,
   hostDeregistered,
   deregisterHost,
+  checksSelected,
 } from '@state/sagas/hosts';
 
 import {
@@ -15,8 +17,14 @@ import {
   removeHost,
   setHostDeregistering,
   setHostNotDeregistering,
+  updateSelectedChecks,
 } from '@state/hosts';
 
+import {
+  startSavingChecksSelection,
+  stopSavingChecksSelection,
+} from '@state/hostChecksSelection';
+
 import { networkClient } from '@lib/network';
 import { notify } from '@state/actions/notifications';
 import { hostFactory } from '@lib/test-utils/factories';
@@ -114,4 +122,53 @@ describe('Hosts sagas', () => {
       setHostNotDeregistering(host),
     ]);
   });
+
+  it('should save check selection for a host', async () => {
+    const host = hostFactory.build();
+
+    axiosMock.onPost(`/hosts/${host.id}/checks`).reply(202, {});
+
+    const actionPayload = {
+      hostID: host.id,
+      hostName: host.hostname,
+      checks: [faker.datatype.uuid(), faker.datatype.uuid()],
+    };
+    const dispatched = await recordSaga(checksSelected, {
+      payload: actionPayload,
+    });
+
+    expect(dispatched).toEqual([
+      startSavingChecksSelection(),
+      updateSelectedChecks(actionPayload),
+      notify({
+        text: `Checks selection for ${host.hostname} saved`,
+        icon: '💾',
+      }),
+      stopSavingChecksSelection(),
+    ]);
+  });
+
+  it('should notify an error when saving check selection fails', async () => {
+    const host = hostFactory.build();
+
+    axiosMock.onPost(`/hosts/${host.id}/checks`).reply(400, {});
+
+    const actionPayload = {
+      hostID: host.id,
+      hostName: host.hostname,
+      checks: [faker.datatype.uuid(), faker.datatype.uuid()],
+    };
+    const dispatched = await recordSaga(checksSelected, {
+      payload: actionPayload,
+    });
+
+    expect(dispatched).toEqual([
+      startSavingChecksSelection(),
+      notify({
+        text: `Unable to save selection for ${host.hostname}`,
+        icon: '❌',
+      }),
+      stopSavingChecksSelection(),
+    ]);
+  });
 });
diff --git a/assets/js/state/sagas/index.js b/assets/js/state/sagas/index.js
index df723c7e1d..e9c898639d 100644
--- a/assets/js/state/sagas/index.js
+++ b/assets/js/state/sagas/index.js
@@ -1,4 +1,4 @@
-import { get, post } from '@lib/network';
+import { get } from '@lib/network';
 import {
   put,
   all,
@@ -29,7 +29,6 @@ import {
   appendCluster,
   updateCluster,
   updateCibLastWritten,
-  updateSelectedChecks,
   updateChecksResults,
   updateClusterHealth,
   startClustersLoading,
@@ -71,9 +70,12 @@ import {
   watchHostDeregistered,
   watchHostDeregisterable,
   watchDeregisterHost,
+  watchHostChecksSelection,
 } from '@state/sagas/hosts';
-import { watchClusterDeregistered } from '@state/sagas/clusters';
-
+import {
+  watchClusterDeregistered,
+  watchClusterChecksSelection,
+} from '@state/sagas/clusters';
 import {
   watchUpdateLastExecution,
   watchRequestExecution,
@@ -81,14 +83,7 @@ import {
 import { watchPerformLogin } from '@state/sagas/user';
 
 import { getClusterName } from '@state/selectors/cluster';
-import {
-  setClusterChecksSelectionSavingError,
-  setClusterChecksSelectionSavingSuccess,
-  startSavingClusterChecksSelection,
-  stopSavingClusterChecksSelection,
-} from '@state/clusterChecksSelection';
 
-import { CHECKS_SELECTED } from '@state/actions/cluster';
 import { notify } from '@state/actions/notifications';
 import { initSocketConnection } from '@lib/network/socket';
 import processChannelEvents from '@state/channels';
@@ -257,40 +252,6 @@ function* watchClusterDetailsUpdated() {
   yield takeEvery('CLUSTER_DETAILS_UPDATED', clusterDetailsUpdated);
 }
 
-function* checksSelected({ payload }) {
-  yield put(startSavingClusterChecksSelection());
-
-  try {
-    yield call(post, `/clusters/${payload.clusterID}/checks`, {
-      checks: payload.checks,
-    });
-    yield put(updateSelectedChecks(payload));
-
-    const clusterName = yield select(getClusterName(payload.clusterID));
-    yield put(
-      appendEntryToLiveFeed({
-        source: clusterName,
-        message: 'Checks selection changed.',
-      })
-    );
-
-    yield put(
-      notify({
-        text: 'Checks selection saved',
-        icon: '💾',
-      })
-    );
-    yield put(setClusterChecksSelectionSavingSuccess());
-  } catch (error) {
-    yield put(setClusterChecksSelectionSavingError());
-  }
-  yield put(stopSavingClusterChecksSelection());
-}
-
-function* watchChecksSelected() {
-  yield takeEvery(CHECKS_SELECTED, checksSelected);
-}
-
 function* checksExecutionStarted({ payload }) {
   const clusterName = yield select(getClusterName(payload.cluster_id));
 
@@ -415,7 +376,8 @@ export default function* rootSaga() {
     watchClusterCibLastWrittenUpdated(),
     watchClusterDeregistered(),
     watchNotifications(),
-    watchChecksSelected(),
+    watchClusterChecksSelection(),
+    watchHostChecksSelection(),
     watchChecksExecutionStarted(),
     watchChecksExecutionCompleted(),
     watchChecksResultsUpdated(),
diff --git a/assets/js/state/selectors/hostChecksSelection.js b/assets/js/state/selectors/hostChecksSelection.js
new file mode 100644
index 0000000000..d70b114a13
--- /dev/null
+++ b/assets/js/state/selectors/hostChecksSelection.js
@@ -0,0 +1,4 @@
+export const getCheckSelection =
+  () =>
+  ({ hostChecksSelection }) =>
+    hostChecksSelection;
diff --git a/assets/js/state/selectors/hostChecksSelection.test.js b/assets/js/state/selectors/hostChecksSelection.test.js
new file mode 100644
index 0000000000..2c20f6b96d
--- /dev/null
+++ b/assets/js/state/selectors/hostChecksSelection.test.js
@@ -0,0 +1,15 @@
+import { getCheckSelection } from './hostChecksSelection';
+
+describe('Checks Selection selector', () => {
+  it('should get the state of the check selection', () => {
+    expect(
+      getCheckSelection()({
+        hostChecksSelection: {
+          saving: false,
+        },
+      })
+    ).toEqual({
+      saving: false,
+    });
+  });
+});