Socket Initialization on user login

assets/js/lib/api/wanda.js

@@ -13,4 +13,4 @@ export const getLastExecutionByGroupID = (groupID) =>
   wandaClient.get(`/api/checks/groups/${groupID}/executions/last`);
 
 export const getCatalog = (env) =>
-  wandaClient.get(`/api/checks/catalog`, { params: env })
+  wandaClient.get(`/api/checks/catalog`, { params: env });

assets/js/state/registerSocketEvents.js → assets/js/lib/network/socket.js

@@ -1,3 +1,6 @@
+// safe to disable phoenix stuff
+// eslint-disable-next-line
+import { Socket } from 'phoenix';
 import { logMessage, logError } from '@lib/log';
 
 export const joinChannel = (channel) => {
@@ -8,16 +11,9 @@ export const joinChannel = (channel) => {
     .receive('timeout', () => logMessage('Networking issue. Still waiting...'));
 };
 
-const registerEvents = (store, socket, channelName, events) => {
-  const channel = socket.channel(channelName, {});
+export const initSocketConnection = () => {
+  const socket = new Socket('/socket', {});
+  socket.connect();
 
-  events.forEach((event) => {
-    channel.on(event, (payload) =>
-      store.dispatch({ type: event.toUpperCase(), payload })
-    );
-  });
-
-  joinChannel(channel);
+  return socket;
 };
-
-export default registerEvents;

assets/js/state/actions/catalog.js

@@ -3,4 +3,4 @@ export const UPDATE_CATALOG = 'UPDATE_CATALOG_NEW';
 export const updateCatalog = (env = {}) => ({
   type: UPDATE_CATALOG,
   payload: env,
-});
+});

assets/js/state/channels.js

@@ -0,0 +1,58 @@
+// TODO remove dependency from the store when the fixme is fixed
+import { updateLastExecution } from '@state/actions/lastExecutions';
+import { joinChannel } from '@lib/network/socket';
+
+const registerEvents = (store, socket, channelName, events) => {
+  const channel = socket.channel(channelName, {});
+
+  events.forEach((event) => {
+    channel.on(event, (payload) =>
+      store.dispatch({ type: event.toUpperCase(), payload })
+    );
+  });
+
+  joinChannel(channel);
+};
+
+const processChannelEvents = (reduxStore, socket) => {
+  registerEvents(reduxStore, socket, 'monitoring:hosts', [
+    'host_registered',
+    'host_details_updated',
+    'heartbeat_succeded',
+    'heartbeat_failed',
+  ]);
+  registerEvents(reduxStore, socket, 'monitoring:clusters', [
+    'cluster_registered',
+    'cluster_details_updated',
+    'checks_execution_started',
+    'checks_execution_completed',
+    'checks_results_updated',
+    'cluster_health_changed',
+    'cluster_cib_last_written_updated',
+  ]);
+  registerEvents(reduxStore, socket, 'monitoring:sap_systems', [
+    'sap_system_registered',
+    'sap_system_health_changed',
+    'application_instance_registered',
+    'application_instance_health_changed',
+  ]);
+  registerEvents(reduxStore, socket, 'monitoring:databases', [
+    'database_registered',
+    'database_health_changed',
+    'database_instance_registered',
+    'database_instance_health_changed',
+    'database_instance_system_replication_changed',
+  ]);
+
+  // FIXME: This is to overcome the fact that we are generating names with registerEvents
+  // in the future we want to remove this and use the constants directly,
+  // since events and actions may have different names and parameters.
+  const channel = socket.channel('monitoring:executions', {});
+  channel.on('execution_completed', ({ group_id: groupID }) => {
+    reduxStore.dispatch(updateLastExecution(groupID));
+  });
+
+  joinChannel(channel);
+};
+
+export default processChannelEvents;

assets/js/state/index.js

@@ -1,10 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
 import createSagaMiddleware from 'redux-saga';
-// safe to disable phoenix stuff
-// eslint-disable-next-line
-import { Socket } from 'phoenix';
-
-import { updateLastExecution } from '@state/actions/lastExecutions';
 import sapSystemsHealthSummaryReducer from './healthSummary';
 import hostsListReducer from './hosts';
 import clustersListReducer from './clusters';
@@ -18,8 +13,6 @@ import lastExecutionsReducer from './lastExecutions';
 import liveFeedReducer from './liveFeed';
 import settingsReducer from './settings';
 import userReducer from './user';
-import registerEvents, { joinChannel } from './registerSocketEvents';
-
 import rootSaga from './sagas';
 
 const sagaMiddleware = createSagaMiddleware();
@@ -44,49 +37,3 @@ export const store = configureStore({
 });
 
 sagaMiddleware.run(rootSaga);
-
-const processChannelEvents = (reduxStore) => {
-  const socket = new Socket('/socket', {});
-  socket.connect();
-
-  registerEvents(reduxStore, socket, 'monitoring:hosts', [
-    'host_registered',
-    'host_details_updated',
-    'heartbeat_succeded',
-    'heartbeat_failed',
-  ]);
-  registerEvents(reduxStore, socket, 'monitoring:clusters', [
-    'cluster_registered',
-    'cluster_details_updated',
-    'checks_execution_started',
-    'checks_execution_completed',
-    'checks_results_updated',
-    'cluster_health_changed',
-    'cluster_cib_last_written_updated',
-  ]);
-  registerEvents(reduxStore, socket, 'monitoring:sap_systems', [
-    'sap_system_registered',
-    'sap_system_health_changed',
-    'application_instance_registered',
-    'application_instance_health_changed',
-  ]);
-  registerEvents(reduxStore, socket, 'monitoring:databases', [
-    'database_registered',
-    'database_health_changed',
-    'database_instance_registered',
-    'database_instance_health_changed',
-    'database_instance_system_replication_changed',
-  ]);
-
-  // FIXME: This is to overcome the fact that we are generating names with registerEvents
-  // in the future we want to remove this and use the constants directly,
-  // since events and actions may have different names and parameters.
-  const channel = socket.channel('monitoring:executions', {});
-  channel.on('execution_completed', ({ group_id: groupID }) => {
-    store.dispatch(updateLastExecution(groupID));
-  });
-
-  joinChannel(channel);
-};
-
-processChannelEvents(store);

assets/js/state/sagas/index.js

@@ -96,6 +96,9 @@ import {
 
 import { CHECKS_SELECTED } from '@state/actions/cluster';
 import { EXECUTION_REQUESTED } from '@state/actions/lastExecutions';
+import { initSocketConnection } from '@lib/network/socket';
+import processChannelEvents from '@state/channels';
+import { store } from '@state';
 
 const notify = ({ text, icon }) => ({
   type: 'NOTIFICATION',
@@ -154,8 +157,16 @@ function* initialDataFetch() {
   yield put(stopDatabasesLoading());
 }
 
-function* watchInitialDataFetching() {
-  yield takeLatest('user/setUserAsLogged', initialDataFetch);
+function* setupSocketEvents() {
+  const socket = initSocketConnection();
+  yield call(processChannelEvents, store, socket);
+}
+
+function* watchUserLoggedIn() {
+  yield all([
+    takeLatest('user/setUserAsLogged', initialDataFetch),
+    takeLatest('user/setUserAsLogged', setupSocketEvents),
+  ]);
 }
 
 function* watchResetState() {
@@ -637,7 +648,7 @@ function* watchClustrConnectionSettings() {
 
 export default function* rootSaga() {
   yield all([
-    watchInitialDataFetching(),
+    watchUserLoggedIn(),
     watchResetState(),
     watchHostRegistered(),
     watchHostDetailsUpdated(),