From a92a98608ce8f80b0f56fe3a215e155ab938a64e Mon Sep 17 00:00:00 2001 From: Anthony Laibe Date: Mon, 10 Dec 2018 10:40:29 +0000 Subject: [PATCH] feat(ui): auto updates services in cockpit --- embark-ui/src/actions/index.js | 7 +++++ embark-ui/src/containers/AppContainer.js | 6 +++- embark-ui/src/sagas/index.js | 15 ++++++++++ embark-ui/src/services/api.js | 4 +++ src/lib/core/processes/processManager.js | 36 ++++++++++++++++-------- 5 files changed, 56 insertions(+), 12 deletions(-) diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index d59bd673c5..1fd048f9ba 100644 --- a/embark-ui/src/actions/index.js +++ b/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 diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js index 1db7acf8bf..f2ede1d044 100644 --- a/embark-ui/src/containers/AppContainer.js +++ b/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, diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js index 8890ee6ab3..997fac53f9 100644 --- a/embark-ui/src/sagas/index.js +++ b/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), diff --git a/embark-ui/src/services/api.js b/embark-ui/src/services/api.js index cd844493a2..dcf1a54490 100644 --- a/embark-ui/src/services/api.js +++ b/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]); } diff --git a/src/lib/core/processes/processManager.js b/src/lib/core/processes/processManager.js index 81cad3331a..4922fa7165 100644 --- a/src/lib/core/processes/processManager.js +++ b/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) => {