Add event for cpu usage

flow-defs/process.js

@@ -1,11 +1,3 @@
 /* eslint-disable */
 
-declare var process: {
-  send(args: any): void,
-  on(event: string, args: any): void,
-  nextTick(callback: Function): void,
-  setMaxListeners(any): void,
-  removeListener(string, Function): void,
-  title: string,
-  env: Object,
-}
+declare var process: Object

src/components/DevToolbar.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
+import { ipcRenderer } from 'electron'
 import reduce from 'lodash/fp/reduce'
 import flow from 'lodash/fp/flow'
 import filter from 'lodash/fp/filter'
@@ -99,21 +100,46 @@ const Color = ({ color }: { color: ColorType }) => (
 
 type State = {
   isOpened: boolean,
+  cpuUsage: Object,
 }
 
 class DevToolbar extends PureComponent<any, State> {
   state = {
     isOpened: false,
+    cpuUsage: {},
+  }
+
+  componentDidMount() {
+    ipcRenderer.on('msg', this.handleMessage)
+  }
+
+  handleMessage = (e: any, { type, data }: Object) => {
+    if (type === 'usage.cpu') {
+      this.setState(prev => ({
+        cpuUsage: {
+          ...prev.cpuUsage,
+          [data.name]: data.value,
+        },
+      }))
+    }
   }
 
   handleToggle = () => this.setState({ isOpened: !this.state.isOpened })
 
   render() {
-    const { isOpened } = this.state
+    const { isOpened, cpuUsage } = this.state
+
     return (
       <Container isOpened={isOpened}>
         <Handle onClick={this.handleToggle}>{'DEV'}</Handle>
         <Colors>{colors.map(color => <Color key={color.name} color={color} />)}</Colors>
+        <Box>
+          {Object.keys(cpuUsage).map(k => (
+            <Box>
+              {k}: {cpuUsage[k]}
+            </Box>
+          ))}
+        </Box>
       </Container>
     )
   }

src/internals/index.js

@@ -32,3 +32,40 @@ const onMessage = payload => {
 }
 
 process.on('message', onMessage)
+
+if (__DEV__) {
+  let startTime = process.hrtime()
+  let startUsage = process.cpuUsage()
+
+  setInterval(() => {
+    const now = Date.now()
+
+    while (Date.now() - now < 500);
+
+    const newStartTime = process.hrtime()
+    const newStartUsage = process.cpuUsage()
+
+    const elapTime = process.hrtime(startTime)
+    const elapUsage = process.cpuUsage(startUsage)
+
+    startTime = newStartTime
+    startUsage = newStartUsage
+
+    const elapTimeMS = elapTime[0] * 1e3 + elapTime[1] / 1e6
+
+    const elapUserMS = elapUsage.user / 1000 // microseconds to milliseconds
+    const elapSystMS = elapUsage.system / 1000
+    const cpuPercent = (100 * (elapUserMS + elapSystMS) / elapTimeMS).toFixed(1)
+
+    sendEvent(
+      'usage.cpu',
+      {
+        name: process.title,
+        value: cpuPercent,
+      },
+      {
+        kill: false,
+      },
+    )
+  }, 5000)
+}