Use centralized checks selection for both hosts and clusters

assets/js/components/ClusterDetails/ChecksSelection.jsx

@@ -8,8 +8,14 @@ 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/clusters';
 import { executionRequested } from '@state/actions/lastExecutions';
+import { getClusterCheckSelection } from '@state/selectors/checksSelection';
+import {
+  clusterChecksSelected,
+  isSaving,
+  isSuccessfullySaved,
+  isSavingFailed,
+} from '@state/checksSelection';
 
 import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
 import {
@@ -40,9 +46,12 @@ const getGroupSelectedState = (checks, selectedChecks) => {
 function ChecksSelection({ clusterId, cluster }) {
   const dispatch = useDispatch();
 
-  const { saving, savingError, savingSuccess } = useSelector(
-    (state) => state.clusterChecksSelection
-  );
+  const { status } = useSelector(getClusterCheckSelection(clusterId));
+  const { saving, savingError, savingSuccess } = {
+    saving: isSaving(status),
+    savingSuccess: isSuccessfullySaved(status),
+    savingError: isSavingFailed(status),
+  };
 
   const {
     data: catalogData,
@@ -84,7 +93,11 @@ function ChecksSelection({ clusterId, cluster }) {
   }, [catalogData, selectedChecks]);
 
   useEffect(() => {
-    setLocalSavingError(savingError);
+    if (savingError === true) {
+      setLocalSavingError(
+        'An unexpected error happened while selecting your desired checks'
+      );
+    }
     setLocalSavingSuccess(savingSuccess);
   }, [savingError, savingSuccess]);
 
@@ -103,9 +116,10 @@ function ChecksSelection({ clusterId, cluster }) {
 
   const saveSelection = useCallback(() =>
     dispatch(
-      checksSelected({
-        checks: selectedChecks,
+      clusterChecksSelected({
         clusterID: clusterId,
+        clusterName: cluster.name,
+        checks: selectedChecks,
       })
     )
   );
@@ -158,6 +172,7 @@ function ChecksSelection({ clusterId, cluster }) {
             <button
               className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
               onClick={saveSelection}
+              disabled={saving}
               type="button"
               data-testid="save-selection-button"
             >
@@ -169,9 +184,9 @@ function ChecksSelection({ clusterId, cluster }) {
                 'Select Checks for Execution'
               )}
             </button>
-            {localSavingError && (
+            {savingError && (
               <SavingFailedAlert onClose={() => setLocalSavingError(null)}>
-                <p>{savingError}</p>
+                <p>{localSavingError}</p>
               </SavingFailedAlert>
             )}
             {localSavingSuccess && selectedChecks.length > 0 && (

assets/js/components/ClusterDetails/ChecksSelection.test.jsx

@@ -20,7 +20,6 @@ describe('ClusterDetails ChecksSelection component', () => {
 
     const initialState = {
       catalog: { loading: false, data: catalog, error: null },
-      clusterChecksSelection: {},
     };
     const [statefulChecksSelection] = withState(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -64,7 +63,6 @@ describe('ClusterDetails ChecksSelection component', () => {
 
     const initialState = {
       catalog: { loading: false, data: catalog, error: null },
-      clusterChecksSelection: {},
     };
     const [statefulChecksSelection] = withState(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -106,7 +104,6 @@ describe('ClusterDetails ChecksSelection component', () => {
 
     const initialState = {
       catalog: { loading: false, data: catalog, error: null },
-      clusterChecksSelection: {},
     };
     const [statefulChecksSelection, store] = withState(
       <ChecksSelection clusterId={cluster.id} cluster={cluster} />,
@@ -136,6 +133,7 @@ describe('ClusterDetails ChecksSelection component', () => {
         payload: {
           checks: selectedChecks,
           clusterID: cluster.id,
+          clusterName: cluster.name,
         },
       },
     ];

assets/js/components/HostDetails/HostSettingsPage.jsx

@@ -4,11 +4,13 @@ import { useParams } from 'react-router-dom';
 
 import LoadingBox from '@components/LoadingBox';
 
-import { checksSelected } from '@state/hostChecksSelection';
+import { TARGET_HOST } from '@lib/model';
+
+import { hostChecksSelected, isSaving } from '@state/checksSelection';
 import { updateCatalog } from '@state/actions/catalog';
 import { getCatalog } from '@state/selectors/catalog';
 import { getHost } from '@state/selectors';
-import { getCheckSelection } from '@state/selectors/hostChecksSelection';
+import { getHostCheckSelection } from '@state/selectors/checksSelection';
 import HostChecksSelection from './HostChecksSelection';
 
 function HostSettingsPage() {
@@ -23,7 +25,7 @@ function HostSettingsPage() {
     loading: catalogLoading,
   } = useSelector(getCatalog());
 
-  const { saving } = useSelector(getCheckSelection());
+  const { status } = useSelector(getHostCheckSelection(hostID));
 
   if (!host) {
     return <LoadingBox text="Loading..." />;
@@ -40,16 +42,16 @@ function HostSettingsPage() {
     dispatch(
       updateCatalog({
         provider: host.provider,
-        target_type: 'host',
+        target_type: TARGET_HOST,
       })
     );
 
-  const saveSelection = (selection, targetID, targetName) =>
+  const saveSelection = (newSelection, targetID, targetName) =>
     dispatch(
-      checksSelected({
+      hostChecksSelected({
         hostID: targetID,
         hostName: targetName,
-        checks: selection,
+        checks: newSelection,
       })
     );
 
@@ -64,7 +66,7 @@ function HostSettingsPage() {
       catalogError={catalogError}
       catalogLoading={catalogLoading}
       onUpdateCatalog={refreshCatalog}
-      isSavingSelection={saving}
+      isSavingSelection={isSaving(status)}
       onSaveSelection={saveSelection}
     />
   );

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

@@ -33,8 +33,6 @@ export const defaultInitialState = {
       (database) => database.database_instances
     ),
   },
-  clusterChecksSelection: {},
-  hostChecksSelection: {},
   checksSelection: { host: {}, cluster: {} },
   catalog: { loading: false, data: [], error: null },
 };

assets/js/state/checksSelection.js

@@ -5,6 +5,10 @@ const SAVING = 'SAVING';
 const SUCCESSFULLY_SAVED = 'SUCCESSFULLY_SAVED';
 const SAVING_FAILED = 'SAVING_FAILED';
 
+export const isSaving = (status) => SAVING === status;
+export const isSuccessfullySaved = (status) => SUCCESSFULLY_SAVED === status;
+export const isSavingFailed = (status) => SAVING_FAILED === status;
+
 const supportsTarget = (target) =>
   [TARGET_CLUSTER, TARGET_HOST].includes(target);
 

assets/js/state/index.js

@@ -4,8 +4,7 @@ import createSagaMiddleware from 'redux-saga';
 import sapSystemsHealthSummaryReducer from './healthSummary';
 import hostsListReducer from './hosts';
 import clustersListReducer from './clusters';
-import clusterChecksSelectionReducer from './clusterChecksSelection';
-import hostChecksSelectionReducer from './hostChecksSelection';
+import checksSelectionReducer from './checksSelection';
 import checksResultsFiltersReducer from './checksResultsFilters';
 import sapSystemListReducer from './sapSystems';
 import databasesListReducer from './databases';
@@ -23,8 +22,7 @@ export const store = configureStore({
     sapSystemsHealthSummary: sapSystemsHealthSummaryReducer,
     hostsList: hostsListReducer,
     clustersList: clustersListReducer,
-    clusterChecksSelection: clusterChecksSelectionReducer,
-    hostChecksSelection: hostChecksSelectionReducer,
+    checksSelection: checksSelectionReducer,
     checksResultsFilters: checksResultsFiltersReducer,
     sapSystemsList: sapSystemListReducer,
     databasesList: databasesListReducer,

assets/js/state/sagas/checksSelection.js

@@ -1,18 +1,20 @@
 import { put, call, takeEvery } from 'redux-saga/effects';
 import { post } from '@lib/network';
 
-import { TARGET_HOST } from '@lib/model';
+import { TARGET_HOST, TARGET_CLUSTER } from '@lib/model';
 
 import { notify } from '@state/actions/notifications';
 
 import {
   HOST_CHECKS_SELECTED,
+  CLUSTER_CHECKS_SELECTED,
   startSavingChecksSelection,
   setSavingSuccessful,
   setSavingFailed,
 } from '@state/checksSelection';
 
 import { updateSelectedChecks as updateHostSelectedChecks } from '@state/hosts';
+import { updateSelectedChecks as updateClusterSelectedChecks } from '@state/clusters';
 
 function* saveHostChecksSelection({ hostID, checks }) {
   yield call(post, `/hosts/${hostID}/checks`, {
@@ -26,6 +28,18 @@ function* saveHostChecksSelection({ hostID, checks }) {
   );
 }
 
+function* saveClusterChecksSelection({ clusterID, checks }) {
+  yield call(post, `/clusters/${clusterID}/checks`, {
+    checks,
+  });
+  yield put(
+    updateClusterSelectedChecks({
+      clusterID,
+      checks,
+    })
+  );
+}
+
 function* saveChecksSelection(targetID, targetType, checks) {
   switch (targetType) {
     case TARGET_HOST:
@@ -34,6 +48,12 @@ function* saveChecksSelection(targetID, targetType, checks) {
         checks,
       });
       break;
+    case TARGET_CLUSTER:
+      yield saveClusterChecksSelection({
+        clusterID: targetID,
+        checks,
+      });
+      break;
     default:
   }
 }
@@ -71,6 +91,18 @@ export function* selectHostChecks({ payload: { hostID, hostName, checks } }) {
   });
 }
 
+export function* selectClusterChecks({
+  payload: { clusterID, clusterName, checks },
+}) {
+  yield checksSelected({
+    targetID: clusterID,
+    targetType: TARGET_CLUSTER,
+    targetName: clusterName,
+    checks,
+  });
+}
+
 export function* watchChecksSelection() {
   yield takeEvery(HOST_CHECKS_SELECTED, selectHostChecks);
+  yield takeEvery(CLUSTER_CHECKS_SELECTED, selectClusterChecks);
 }