From fa44d797e8c637e0f3c8e38f1e589026ad9d9205 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Tue, 6 Feb 2018 19:00:11 +0100 Subject: [PATCH 1/3] Add event for cpu usage --- flow-defs/process.js | 10 +--------- src/components/DevToolbar.js | 28 ++++++++++++++++++++++++++- src/internals/index.js | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 10 deletions(-) diff --git a/flow-defs/process.js b/flow-defs/process.js index 37ad8d23..799dfd2a 100644 --- a/flow-defs/process.js +++ b/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 diff --git a/src/components/DevToolbar.js b/src/components/DevToolbar.js index 293d9f6d..dc2cb145 100644 --- a/src/components/DevToolbar.js +++ b/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 { 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 ( {'DEV'} {colors.map(color => )} + + {Object.keys(cpuUsage).map(k => ( + + {k}: {cpuUsage[k]} + + ))} + ) } diff --git a/src/internals/index.js b/src/internals/index.js index 1e5bae99..b231dc60 100644 --- a/src/internals/index.js +++ b/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) +} From 50caa52b2b0601f528a541a84df3ac7c9b529c3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Wed, 7 Feb 2018 10:08:01 +0100 Subject: [PATCH 2/3] Add cpu usage in DevToolbar and add CopyPaste color --- package.json | 10 ++-- src/components/DevToolbar.js | 77 ++++++++++++++++++++++++------ src/components/base/Chart/index.js | 17 ++++--- src/internals/index.js | 22 ++++++--- yarn.lock | 38 +++++++-------- 5 files changed, 109 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index 6e616482..59d6ccf7 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@fortawesome/fontawesome-free-regular": "^5.0.6", "@fortawesome/fontawesome-free-solid": "^5.0.6", "@fortawesome/react-fontawesome": "^0.0.17", - "@ledgerhq/common": "2.1.3", + "@ledgerhq/common": "2.3.0", "@ledgerhq/hw-app-btc": "^2.2.0", "@ledgerhq/hw-app-eth": "^2.2.0", "@ledgerhq/hw-transport": "^2.2.0", @@ -55,7 +55,7 @@ "bs58check": "^2.1.1", "color": "^3.0.0", "cross-env": "^5.1.3", - "downshift": "^1.27.1", + "downshift": "^1.28.0", "electron-store": "^1.3.0", "electron-updater": "^2.20.1", "fuse.js": "^3.2.0", @@ -84,7 +84,7 @@ "redux-actions": "^2.2.1", "redux-thunk": "^2.2.0", "shortid": "^2.2.8", - "smooth-scrollbar": "^8.2.5", + "smooth-scrollbar": "^8.2.6", "source-map-support": "^0.5.3", "styled-components": "^3.1.6", "styled-system": "^1.1.4" @@ -108,7 +108,7 @@ "chance": "^1.0.13", "concurrently": "^3.5.1", "dotenv": "^5.0.0", - "electron": "1.7.12", + "electron": "1.8.2", "electron-builder": "^19.56.0", "electron-devtools-installer": "^2.2.3", "electron-webpack": "1.12.1", @@ -120,7 +120,7 @@ "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.6.1", - "flow-bin": "^0.64.0", + "flow-bin": "^0.65.0", "flow-typed": "^2.3.0", "husky": "^0.14.3", "lint-staged": "^6.1.0", diff --git a/src/components/DevToolbar.js b/src/components/DevToolbar.js index dc2cb145..12600495 100644 --- a/src/components/DevToolbar.js +++ b/src/components/DevToolbar.js @@ -2,6 +2,9 @@ import React, { PureComponent } from 'react' import { ipcRenderer } from 'electron' +import { AreaChart, Area } from 'recharts' +import takeRight from 'lodash/takeRight' +import last from 'lodash/last' import reduce from 'lodash/fp/reduce' import flow from 'lodash/fp/flow' import filter from 'lodash/fp/filter' @@ -10,6 +13,7 @@ import styled from 'styled-components' import color from 'color' import Box from 'components/base/Box' +import CopyToClipboard from 'components/base/CopyToClipboard' import theme from 'styles/theme' @@ -62,12 +66,15 @@ const Container = styled(Box).attrs({ const Handle = styled(Box).attrs({ bg: 'night', + justify: 'center', + px: 1, })` cursor: pointer; - padding: 3px 8px 3px 8px; position: absolute; bottom: 100%; right: 5px; + font-size: 9px; + height: 20px; border-top-left-radius: 3px; border-top-right-radius: 3px; ` @@ -77,7 +84,7 @@ const Colors = styled(Box).attrs({ align: 'flex-start', })` flex-wrap: wrap; - width: 416px; + width: ${(80 + 4) * 4}px; ` const Cl = styled(Box).attrs({ @@ -86,14 +93,13 @@ const Cl = styled(Box).attrs({ p: 2, })` border: 2px solid white; + cursor: pointer; margin: 2px; - width: 100px; - user-select: text; - cursor: text; + width: 80px; ` -const Color = ({ color }: { color: ColorType }) => ( - +const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( + {color.name} ) @@ -113,12 +119,24 @@ class DevToolbar extends PureComponent { ipcRenderer.on('msg', this.handleMessage) } + componentWillUnmount() { + ipcRenderer.removeListener('msg', this.handleMessage) + } + handleMessage = (e: any, { type, data }: Object) => { if (type === 'usage.cpu') { this.setState(prev => ({ cpuUsage: { ...prev.cpuUsage, - [data.name]: data.value, + [data.name]: takeRight( + [ + ...(prev.cpuUsage[data.name] || []), + { + value: parseFloat(data.value), + }, + ], + 10, + ), }, })) } @@ -132,13 +150,42 @@ class DevToolbar extends PureComponent { return ( {'DEV'} - {colors.map(color => )} - - {Object.keys(cpuUsage).map(k => ( - - {k}: {cpuUsage[k]} - - ))} + + + {colors.map(color => ( + } + /> + ))} + + + {Object.keys(cpuUsage).map(k => ( + + + {k} + {last(cpuUsage[k]).value}% + + + + + + + + ))} + ) diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js index c2c24ec6..958f016a 100644 --- a/src/components/base/Chart/index.js +++ b/src/components/base/Chart/index.js @@ -40,15 +40,14 @@ class Container extends PureComponent { ) if (this._node) { - this._ro = new ResizeObserver(entries => - entries.forEach(entry => { - if (this._node === entry.target) { - this.setState({ - width: entry.contentRect.width, - }) - } - }), - ) + this._ro = new ResizeObserver(entries => { + const entry = entries.find(entry => this._node === entry.target) + if (entry) { + this.setState({ + width: entry.contentRect.width, + }) + } + }) this._ro.observe(this._node) } diff --git a/src/internals/index.js b/src/internals/index.js index b231dc60..2ff3aa68 100644 --- a/src/internals/index.js +++ b/src/internals/index.js @@ -2,7 +2,9 @@ import objectPath from 'object-path' -process.title = `ledger-wallet-desktop-${process.env.FORK_TYPE}` +const { FORK_TYPE } = process.env + +process.title = `ledger-wallet-desktop-${FORK_TYPE}` function sendEvent(type: string, data: any, options: Object = { kill: true }) { process.send({ type, data, options }) @@ -15,7 +17,7 @@ if (__PROD__ && __SENTRY_URL__) { } // $FlowFixMe -const func = require(`./${process.env.FORK_TYPE}`) // eslint-disable-line import/no-dynamic-require +const func = require(`./${FORK_TYPE}`) // eslint-disable-line import/no-dynamic-require const handlers = Object.keys(func).reduce((result, key) => { result[key] = func[key](sendEvent) @@ -34,10 +36,12 @@ const onMessage = payload => { process.on('message', onMessage) if (__DEV__) { + const TIMEOUT_CPU_USAGE = 5e3 + let startTime = process.hrtime() let startUsage = process.cpuUsage() - setInterval(() => { + const cpuUsage = () => { const now = Date.now() while (Date.now() - now < 500); @@ -53,19 +57,23 @@ if (__DEV__) { const elapTimeMS = elapTime[0] * 1e3 + elapTime[1] / 1e6 - const elapUserMS = elapUsage.user / 1000 // microseconds to milliseconds - const elapSystMS = elapUsage.system / 1000 + const elapUserMS = elapUsage.user / 1e3 + const elapSystMS = elapUsage.system / 1e3 const cpuPercent = (100 * (elapUserMS + elapSystMS) / elapTimeMS).toFixed(1) sendEvent( 'usage.cpu', { - name: process.title, + name: FORK_TYPE, value: cpuPercent, }, { kill: false, }, ) - }, 5000) + + setTimeout(cpuUsage, TIMEOUT_CPU_USAGE) + } + + cpuUsage() } diff --git a/yarn.lock b/yarn.lock index 20ac3b22..4bce0c17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -131,9 +131,9 @@ dependencies: humps "^2.0.1" -"@ledgerhq/common@2.1.3": - version "2.1.3" - resolved "https://registry.yarnpkg.com/@ledgerhq/common/-/common-2.1.3.tgz#02ee37050a5a7c22f4b88c6f26d78cf103b5c284" +"@ledgerhq/common@2.3.0": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@ledgerhq/common/-/common-2.3.0.tgz#a6bffa04f05f939f40e623ab8f3c39906ef36dbd" dependencies: fbjs "^0.8.16" invariant "^2.2.2" @@ -373,9 +373,9 @@ version "3.0.1" resolved "https://registry.yarnpkg.com/@types/inline-style-prefixer/-/inline-style-prefixer-3.0.1.tgz#8541e636b029124b747952e9a28848286d2b5bf6" -"@types/node@^7.0.18": - version "7.0.52" - resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.52.tgz#8990d3350375542b0c21a83cd0331e6a8fc86716" +"@types/node@^8.0.24": + version "8.5.10" + resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.10.tgz#49bd3637125dea5f55d7d1e8f51efd6cb835e1f7" "@types/react@^16.0.18": version "16.0.34" @@ -3297,9 +3297,9 @@ dotenv@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.0.tgz#0206eb5b336639bf377618a2a304ff00c6a1fddb" -downshift@^1.27.1: - version "1.27.1" - resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.27.1.tgz#c91830ed476771373da7353b69726b436a3e3df3" +downshift@^1.28.0: + version "1.28.0" + resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.28.0.tgz#4d2d153ee6a45fcdba0a7121a7858aff42dd0bf3" duplexer3@^0.1.4: version "0.1.4" @@ -3518,11 +3518,11 @@ electron-webpack@1.12.1: webpack-merge "^4.1.1" yargs "^11.0.0" -electron@1.7.12: - version "1.7.12" - resolved "https://registry.yarnpkg.com/electron/-/electron-1.7.12.tgz#dcc61a2c1b0c3df25f68b3425379a01abd01190e" +electron@1.8.2: + version "1.8.2" + resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.2.tgz#a817cd733c2972b3c7cc4f777caf6e424b88014d" dependencies: - "@types/node" "^7.0.18" + "@types/node" "^8.0.24" electron-download "^3.0.1" extract-zip "^1.0.3" @@ -4233,9 +4233,9 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" -flow-bin@^0.64.0: - version "0.64.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.64.0.tgz#ddd3fb3b183ab1ab35a5d5dec9caf5ebbcded167" +flow-bin@^0.65.0: + version "0.65.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.65.0.tgz#64ffeca27211c786e2d68508c65686ba1b8a2169" flow-typed@^2.3.0: version "2.3.0" @@ -8413,9 +8413,9 @@ slice-ansi@1.0.0: dependencies: readable-stream "~1.0.31" -smooth-scrollbar@^8.2.5: - version "8.2.5" - resolved "https://registry.yarnpkg.com/smooth-scrollbar/-/smooth-scrollbar-8.2.5.tgz#676a2595b1aad97fe0835d2425e403b0d9c70eb3" +smooth-scrollbar@^8.2.6: + version "8.2.6" + resolved "https://registry.yarnpkg.com/smooth-scrollbar/-/smooth-scrollbar-8.2.6.tgz#5f4683d8381ea8dc4aaea7678b0805e4f5711297" dependencies: core-js "^2.5.1" lodash-es "^4.17.4" From 3cb86ffc85d51fe4d276c1ffa856038b47eb5e65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Wed, 7 Feb 2018 10:45:28 +0100 Subject: [PATCH 3/3] Add language in DevToolbar --- src/components/DevToolbar.js | 62 ++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/src/components/DevToolbar.js b/src/components/DevToolbar.js index 12600495..88125481 100644 --- a/src/components/DevToolbar.js +++ b/src/components/DevToolbar.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import { ipcRenderer } from 'electron' +import { translate } from 'react-i18next' import { AreaChart, Area } from 'recharts' import takeRight from 'lodash/takeRight' import last from 'lodash/last' @@ -13,6 +14,7 @@ import styled from 'styled-components' import color from 'color' import Box from 'components/base/Box' +import GrowScroll from 'components/base/GrowScroll' import CopyToClipboard from 'components/base/CopyToClipboard' import theme from 'styles/theme' @@ -84,7 +86,6 @@ const Colors = styled(Box).attrs({ align: 'flex-start', })` flex-wrap: wrap; - width: ${(80 + 4) * 4}px; ` const Cl = styled(Box).attrs({ @@ -104,6 +105,22 @@ const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( ) +const Lang = styled(Box).attrs({ + bg: p => (p.current ? 'white' : 'night'), + color: p => (p.current ? 'night' : 'white'), + borderColor: 'white', + borderWidth: 1, + p: 1, +})` + border-radius: 3px; + cursor: pointer; +` + +const LANGUAGES = { + fr: 'français', + en: 'english', +} + type State = { isOpened: boolean, cpuUsage: Object, @@ -143,26 +160,43 @@ class DevToolbar extends PureComponent { } handleToggle = () => this.setState({ isOpened: !this.state.isOpened }) + handleChangeLanguage = lang => () => this.props.i18n.changeLanguage(lang) render() { + const { i18n } = this.props const { isOpened, cpuUsage } = this.state return ( {'DEV'} - - - {colors.map(color => ( - } - /> + + + {Object.keys(LANGUAGES).map(lang => ( + + {LANGUAGES[lang]} + ))} - - + + + + + {colors.map(color => ( + } + /> + ))} + + + + {Object.keys(cpuUsage).map(k => ( - + {k} {last(cpuUsage[k]).value}% @@ -172,7 +206,7 @@ class DevToolbar extends PureComponent { width={100} height={40} data={cpuUsage[k]} - margin={{ top: 10, right: 0, left: 0, bottom: 10 }} + margin={{ top: 10, right: 0, left: 0, bottom: 0 }} > { } } -export default DevToolbar +export default translate()(DevToolbar)