overmind/packages/node_modules/overmind-devtools/src/components/Components/index.tsx at website · hipertracker/overmind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import * as React from 'react'
import { connect, Connect } from '../../app'
import Text from '../common/Text'
import Table, { Row, Cell } from '../common/Table'
import Pill from '../common/Pill'
import { Wrapper, Panels, Panel } from './elements'

const Components: React.SFC<Connect> = ({ app }) => (
  <Wrapper>
    <div>
      <Panels>
        <Panel>
          <Text variant="label" dense>
            connected
          </Text>
          <Text variant="header" dense>
            {app.state.componentsMounted.length}
          </Text>
        </Panel>
        <Panel>
          <Text variant="label" dense>
            update count
          </Text>
          <Text variant="header" dense>
            {app.state.componentsUpdateCount}
          </Text>
        </Panel>
        <Panel>
          <Text variant="label" dense>
            paths watched
          </Text>
          <Text variant="header" dense>
            {app.state.componentsStatePathCount}
          </Text>
        </Panel>
      </Panels>
    </div>
    <Table
      headers={[
        { title: 'name', width: '150px' },
        { title: 'updates', width: '100px' },
        { title: 'paths', width: 'calc(100% - 250px)' },
      ]}
    >
      {app.state.componentsMounted.map((component) => {
        return (
          <Row key={component.id}>
            <Cell>{component.name}</Cell>
            <Cell>
              <Text variant="title" dense>
                {component.updateCount}
              </Text>
            </Cell>
            <Cell wordwrap="break-word" mono>
              {component.paths.join(', ')}
            </Cell>
          </Row>
        )
      })}
    </Table>
  </Wrapper>
)

export default connect(Components)