feat(ui): auto updates services in cockpit

embark-ui/src/actions/index.js

@@ -427,6 +427,7 @@ export const removeEditorTabs = {
 // Web Socket
 export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS';
 export const STOP_NEW_PROCESS_LOGS = 'STOP_NEW_PROCESS_LOGS';
+export const WATCH_SERVICES = 'WATCH_SERVICES';
 export const WATCH_NEW_CONTRACT_LOGS = 'WATCH_NEW_CONTRACT_LOGS';
 export const WATCH_NEW_CONTRACT_EVENTS = 'WATCH_NEW_CONTRACT_EVENTS';
 export const INIT_BLOCK_HEADER = 'INIT_BLOCK_HEADER';
@@ -449,6 +450,12 @@ export function stopProcessLogs(processName) {
   };
 }
 
+export function listenToServices(){
+  return {
+    type: WATCH_SERVICES
+  };
+}
+
 export function listenToContractLogs() {
   return {
     type: WATCH_NEW_CONTRACT_LOGS

embark-ui/src/containers/AppContainer.js

@@ -13,6 +13,7 @@ import {
   processes as processesAction,
   versions as versionsAction,
   plugins as pluginsAction,
+  listenToServices as listenToServicesAction,
   changeTheme, fetchTheme
 } from '../actions';
 
@@ -75,6 +76,7 @@ class AppContainer extends Component {
     if (this.props.credentials.authenticated && !this.props.initialized) {
       this.props.fetchProcesses();
       this.props.fetchServices();
+      this.props.listenToServices();
       this.props.fetchPlugins();
     }
   }
@@ -137,7 +139,8 @@ AppContainer.propTypes = {
   theme: PropTypes.string,
   changeTheme: PropTypes.func,
   fetchTheme: PropTypes.func,
-  history: PropTypes.object
+  history: PropTypes.object,
+  listenToServices: PropTypes.func
 };
 
 function mapStateToProps(state) {
@@ -157,6 +160,7 @@ export default withRouter(connect(
     fetchCredentials: fetchCredentials.request,
     fetchProcesses: processesAction.request,
     fetchServices: processesAction.request,
+    listenToServices: listenToServicesAction,
     fetchVersions: versionsAction.request,
     fetchPlugins: pluginsAction.request,
     changeTheme: changeTheme.request,

embark-ui/src/sagas/index.js

@@ -405,6 +405,20 @@ export function *watchListenToProcessLogs() {
   yield takeEvery(actions.WATCH_NEW_PROCESS_LOGS, listenToProcessLogs);
 }
 
+export function *listenServices() {
+  const credentials = yield select(getCredentials);
+  const socket = api.webSocketServices(credentials);
+  const channel = yield call(createChannel, socket);
+  while (true) {
+    const services = yield take(channel);
+    yield put(actions.services.success(services));
+  }
+}
+
+export function *watchListenServices() {
+  yield takeEvery(actions.WATCH_SERVICES, listenServices);
+}
+
 export function *listenToContractLogs() {
   const credentials = yield select(getCredentials);
   const socket = api.webSocketContractLogs(credentials);
@@ -498,6 +512,7 @@ export default function *root() {
     fork(watchFetchContractLogs),
     fork(watchFetchContractEvents),
     fork(watchListenToProcessLogs),
+    fork(watchListenServices),
     fork(watchListenToContractLogs),
     fork(watchListenToContractEvents),
     fork(watchFetchBlock),

embark-ui/src/services/api.js

@@ -233,6 +233,10 @@ export function webSocketProcess(credentials, processName) {
   return new WebSocket(`ws://${credentials.host}/embark-api/process-logs/${processName}`, [credentials.token]);
 }
 
+export function webSocketServices(credentials) {
+  return new WebSocket(`ws://${credentials.host}/embark-api/services`, [credentials.token]);
+}
+
 export function webSocketContractLogs(credentials) {
   return new WebSocket(`ws://${credentials.host}/embark-api/contracts/logs`, [credentials.token]);
 }

src/lib/core/processes/processManager.js

@@ -12,6 +12,11 @@ class ProcessManager {
     this.events = options.events;
     this.plugins = options.plugins;
     this.processes = {};
+    this.servicesState = {};
+
+    this.events.on("servicesState", (servicesState) => {
+      this.servicesState = servicesState;
+    });
 
     this._registerAsPlugin();
     this._registerEvents();
@@ -21,21 +26,21 @@ class ProcessManager {
     const self = this;
     self.plugin = this.plugins.createPlugin('processManager', {});
 
-    this.servicesState = {};
-    this.events.on("servicesState", (servicesState) => {
-      this.servicesState = servicesState;
-    });
-
     self.plugin.registerAPICall(
       'get',
       '/embark-api/services',
       (req, res) => {
-        let processList = [];
-        for (let serviceName in this.servicesState) {
-          let service = this.servicesState[serviceName];
-          processList.push({state: service.status, name: serviceName, description: service.name});
-        }
-        res.send(processList);
+        res.send(this._sevicesForApi(this.servicesState));
+      }
+    );
+
+    self.plugin.registerAPICall(
+      'ws',
+      '/embark-api/services',
+      (ws, _res) => {
+        this.events.on('servicesState', (servicesState) => {
+          ws.send(JSON.stringify(this._sevicesForApi(servicesState)), () => undefined);
+        });
       }
     );
 
@@ -52,6 +57,15 @@ class ProcessManager {
     );
   }
 
+  _sevicesForApi(servicesState) {
+    let processList = [];
+    for (let serviceName in servicesState) {
+      let service = servicesState[serviceName];
+      processList.push({state: service.status, name: serviceName, description: service.name});
+    }
+    return processList;
+  }
+
   _registerEvents() {
     const self = this;
     self.events.setCommandHandler('processes:register', (name, cb) => {