Gaëtan Renaudeau
7 years ago
8 changed files with 2 additions and 467 deletions
@ -1,298 +0,0 @@ |
|||
// @flow
|
|||
|
|||
/* eslint-disable import/no-named-as-default-member */ |
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import { remote, ipcRenderer } from 'electron' |
|||
import { translate } from 'react-i18next' |
|||
import styled from 'styled-components' |
|||
import color from 'color' |
|||
import fs from 'fs' |
|||
import path from 'path' |
|||
|
|||
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' |
|||
import sortBy from 'lodash/fp/sortBy' |
|||
import chunk from 'lodash/chunk' |
|||
|
|||
import Chart from 'components/base/Chart' |
|||
import Box from 'components/base/Box' |
|||
import Bar from 'components/base/Bar' |
|||
import CopyToClipboard from 'components/base/CopyToClipboard' |
|||
|
|||
import staticPath from 'helpers/staticPath' |
|||
|
|||
import theme from 'styles/theme' |
|||
|
|||
const getLanguages = p => fs.readdirSync(p).filter(f => fs.statSync(path.join(p, f)).isDirectory()) |
|||
const languages = getLanguages(path.join(staticPath, '/i18n')) |
|||
|
|||
const mainWindow = remote.BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow') |
|||
|
|||
type HslColor = { |
|||
color: Array<number>, |
|||
} |
|||
|
|||
type ColorType = { |
|||
name: string, |
|||
val: string, |
|||
isDark: boolean, |
|||
color: { |
|||
isDark: () => boolean, |
|||
hsl: () => HslColor, |
|||
}, |
|||
} |
|||
|
|||
type SimpleType = { |
|||
name: string, |
|||
val: string, |
|||
} |
|||
|
|||
const transform = flow( |
|||
reduce.convert({ cap: false })((acc, cur, key) => { |
|||
const c = color(cur) |
|||
return [ |
|||
...acc, |
|||
{ |
|||
name: key, |
|||
val: cur, |
|||
color: c, |
|||
isDark: c.isDark(), |
|||
}, |
|||
] |
|||
}, []), |
|||
filter(el => el.name !== 'transparent'), |
|||
sortBy(el => el.color.hsl().color[2]), |
|||
) |
|||
|
|||
const colors: Array<ColorType> = transform(theme.colors) |
|||
const spaces: Array<SimpleType> = theme.space.map((s, i) => ({ |
|||
name: s.toString(), |
|||
val: i.toString(), |
|||
})) |
|||
const fontSizes: Array<SimpleType> = theme.fontSizes.map((s, i) => ({ |
|||
name: s.toString(), |
|||
val: i.toString(), |
|||
})) |
|||
|
|||
const Container = styled(Box).attrs({ |
|||
bg: 'dark', |
|||
p: 5, |
|||
grow: true, |
|||
color: 'white', |
|||
fontSize: 3, |
|||
})`` |
|||
|
|||
const Title = styled(Box).attrs({ |
|||
color: 'white', |
|||
})` |
|||
text-transform: uppercase; |
|||
` |
|||
|
|||
const Items = styled(Box).attrs({ |
|||
horizontal: true, |
|||
flow: 4, |
|||
})`` |
|||
|
|||
const Item = styled(Box).attrs({ |
|||
alignItems: 'center', |
|||
bg: 'dark', |
|||
borderRadius: 1, |
|||
color: 'white', |
|||
justifyContent: 'center', |
|||
py: 2, |
|||
px: 4, |
|||
})` |
|||
border: 2px solid ${p => p.theme.colors.white}; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
` |
|||
|
|||
type State = { |
|||
cpuUsage: Object, |
|||
} |
|||
|
|||
class DevTools extends PureComponent<any, State> { |
|||
state = { |
|||
cpuUsage: {}, |
|||
} |
|||
|
|||
componentDidMount() { |
|||
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]: takeRight( |
|||
[ |
|||
...(prev.cpuUsage[data.name] || []), |
|||
{ |
|||
date: new Date().getTime().toString(), |
|||
value: parseFloat(data.value), |
|||
}, |
|||
], |
|||
10, |
|||
), |
|||
}, |
|||
})) |
|||
} |
|||
} |
|||
|
|||
handleChangeLanguage = lang => () => { |
|||
mainWindow.webContents.send('msg', { |
|||
type: 'application.changeLanguage', |
|||
data: lang, |
|||
}) |
|||
} |
|||
|
|||
handleStartSync = () => |
|||
mainWindow.webContents.send('msg', { |
|||
type: 'accounts.sync.start', |
|||
}) |
|||
|
|||
handleStopSync = () => |
|||
mainWindow.webContents.send('msg', { |
|||
type: 'accounts.sync.stop', |
|||
}) |
|||
|
|||
render() { |
|||
const { cpuUsage } = this.state |
|||
|
|||
return ( |
|||
<Container> |
|||
<Box grow flow={4}> |
|||
<Section title="Colors"> |
|||
{chunk(colors, 5).map((c, i) => ( |
|||
<Items |
|||
key={i} // eslint-disable-line react/no-array-index-key
|
|||
> |
|||
{c.map(color => ( |
|||
<CopyToClipboard |
|||
key={color.name} |
|||
data={color.name} |
|||
render={copy => <Color color={color} onClick={copy} />} |
|||
/> |
|||
))} |
|||
</Items> |
|||
))} |
|||
</Section> |
|||
<Section title="Space"> |
|||
{chunk(spaces, 5).map((s, i) => ( |
|||
<Items |
|||
key={i} // eslint-disable-line react/no-array-index-key
|
|||
> |
|||
{s.map(space => ( |
|||
<CopyToClipboard |
|||
key={space.val} |
|||
data={space.val} |
|||
render={copy => <Item onClick={copy}>{space.name}</Item>} |
|||
/> |
|||
))} |
|||
</Items> |
|||
))} |
|||
</Section> |
|||
<Section title="Font Sizes"> |
|||
{chunk(fontSizes, 5).map((f, i) => ( |
|||
<Items |
|||
key={i} // eslint-disable-line react/no-array-index-key
|
|||
> |
|||
{f.map(fontSize => ( |
|||
<CopyToClipboard |
|||
key={fontSize.val} |
|||
data={fontSize.val} |
|||
render={copy => <Item onClick={copy}>{fontSize.name}</Item>} |
|||
/> |
|||
))} |
|||
</Items> |
|||
))} |
|||
</Section> |
|||
<Bar size={2} color="white" /> |
|||
<Section title="Languages" horizontal> |
|||
{languages.map(lang => ( |
|||
<Item key={lang} onClick={this.handleChangeLanguage(lang)} style={{ flex: 0 }}> |
|||
{lang} |
|||
</Item> |
|||
))} |
|||
</Section> |
|||
<Bar size={2} color="white" /> |
|||
<Section title="Sync Accounts" horizontal> |
|||
<Item onClick={this.handleStartSync} style={{ flex: 0 }}> |
|||
Start |
|||
</Item> |
|||
<Item onClick={this.handleStopSync} style={{ flex: 0 }}> |
|||
Stop |
|||
</Item> |
|||
</Section> |
|||
<Bar size={2} color="white" /> |
|||
<Section title="CPU Usage"> |
|||
{chunk(Object.keys(cpuUsage).sort(), 2).map((l, i) => ( |
|||
<Items |
|||
key={i} // eslint-disable-line react/no-array-index-key
|
|||
> |
|||
{l.map(k => ( |
|||
<Box key={k} style={{ flex: 1 }}> |
|||
<Box horizontal alignItems="center" flow={2}> |
|||
<Box fontSize={1}>{last(cpuUsage[k]).value}%</Box> |
|||
<Box>{k}</Box> |
|||
</Box> |
|||
<Box> |
|||
<Chart |
|||
id={k} |
|||
data={cpuUsage[k]} |
|||
dateFormat="%Q" |
|||
color="#8884d8" |
|||
height={50} |
|||
hideAxis |
|||
isInteractive={false} |
|||
/> |
|||
</Box> |
|||
</Box> |
|||
))} |
|||
</Items> |
|||
))} |
|||
</Section> |
|||
</Box> |
|||
</Container> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( |
|||
<Item bg={color.val} color={color.isDark ? 'white' : 'dark'} onClick={onClick}> |
|||
{color.name} |
|||
</Item> |
|||
) |
|||
|
|||
const Section = ({ |
|||
title, |
|||
children, |
|||
horizontal, |
|||
}: { |
|||
title: string, |
|||
children: any, |
|||
horizontal?: boolean, |
|||
}) => ( |
|||
<Box flow={2}> |
|||
<Title>{title}</Title> |
|||
<Box flow={4} horizontal={horizontal}> |
|||
{children} |
|||
</Box> |
|||
</Box> |
|||
) |
|||
|
|||
Section.defaultProps = { |
|||
horizontal: false, |
|||
} |
|||
|
|||
export default translate()(DevTools) |
|||
@ -1,29 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import styled from 'styled-components' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import GrowScroll from 'components/base/GrowScroll' |
|||
|
|||
import DevTools from 'components/DevTools' |
|||
|
|||
const Container = styled(Box).attrs({ |
|||
grow: true, |
|||
})` |
|||
height: 100%; |
|||
` |
|||
|
|||
class Dev extends PureComponent<{}> { |
|||
render() { |
|||
return ( |
|||
<Container> |
|||
<GrowScroll> |
|||
<DevTools /> |
|||
</GrowScroll> |
|||
</Container> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default Dev |
|||
@ -1,43 +0,0 @@ |
|||
const TIMEOUT_CPU_USAGE = 5e3 |
|||
|
|||
const wait = ms => new Promise(resolve => setTimeout(resolve, ms)) |
|||
|
|||
const cpuUsage = async (startTime, startUsage) => { |
|||
await wait(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 / 1e3 |
|||
const elapSystMS = elapUsage.system / 1e3 |
|||
const cpuPercent = (100 * (elapUserMS + elapSystMS) / elapTimeMS).toFixed(1) |
|||
|
|||
return { |
|||
cpuPercent, |
|||
newStartTime: startTime, |
|||
newStartUsage: startUsage, |
|||
} |
|||
} |
|||
|
|||
export default callback => { |
|||
const initCpuUsage = async (startTime, startUsage) => { |
|||
const { cpuPercent, newStartTime, newStartUsage } = await cpuUsage(startTime, startUsage) |
|||
|
|||
callback(cpuPercent) |
|||
|
|||
setTimeout(() => initCpuUsage(newStartTime, newStartUsage), TIMEOUT_CPU_USAGE) |
|||
} |
|||
|
|||
const startTime = process.hrtime() |
|||
const startUsage = process.cpuUsage() |
|||
|
|||
initCpuUsage(startTime, startUsage) |
|||
} |
|||
Loading…
Reference in new issue