`
181 | }
182 |
183 | return `${JSON.stringify(response)}
`
184 | }
185 |
186 | function formatMonitor(time, args) {
187 | args = args || []
188 | const command = args[0] ? args.shift().toUpperCase() : ''
189 | if (command) {
190 | commands.getKeyIndexes(command.toLowerCase(), args).forEach(index => {
191 | args[index] = `${args[index]}`
192 | })
193 | }
194 | return `
195 | ${time}
196 |
197 | ${command}
198 | ${args.join(' ')}
199 |
200 |
`
201 | }
202 |
203 | function formatMessage(channel, message) {
204 | return `
205 | ${channel}
206 | ${message}
207 |
`
208 | }
209 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/Content/Terminal/index.scss:
--------------------------------------------------------------------------------
1 | .Terminal {
2 | overflow: auto;
3 | flex: 1;
4 | * {
5 | -webkit-user-select: text;
6 | }
7 |
8 | &.terminal, .cmd {
9 | --background: #272b34;
10 | --background: #000;
11 | --size: 1.4;
12 | font-family: Consolas, monospace;
13 | }
14 |
15 | .number {
16 | color: #78CF8A;
17 | }
18 |
19 | .string {
20 | color: #d6ec9c;
21 | }
22 |
23 | .array-resp, .object-resp {
24 | margin: 0;
25 | padding: 0;
26 |
27 | li {
28 | display: flex;
29 | span {
30 | color: #848080;
31 | min-width: 28px;
32 | text-align: right;
33 | margin-right: 10px;
34 | }
35 | div {
36 | flex: 1;
37 | }
38 | }
39 | }
40 |
41 | .object-resp li span {
42 | font-weight: bold;
43 | color: #cda869;
44 | }
45 |
46 | .null {
47 | color: #cf7ea9;
48 | }
49 |
50 | .error {
51 | color: #ee6868 !important;
52 | }
53 |
54 | .list {
55 | color: #8f9d6a;
56 | }
57 |
58 | .monitor {
59 | color: #8f9d6a;
60 | .time {
61 | color: #3d3d3d;
62 | margin-right: 4px;
63 | }
64 |
65 | .command-name {
66 | color: #cf7ea9;
67 | }
68 |
69 | .command-key {
70 | color: #cda869;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/Content/index.jsx:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | import React from 'react'
4 | import TabBar from './TabBar'
5 | import KeyContent from './KeyContent'
6 | import Terminal from './Terminal'
7 | import Config from './Config'
8 | import Footer from './Footer'
9 |
10 | class Content extends React.PureComponent {
11 | constructor() {
12 | super()
13 | this.state = {
14 | pattern: '',
15 | db: 0,
16 | version: 0,
17 | tab: 'Content'
18 | }
19 | }
20 |
21 | init(keyName) {
22 | this.setState({keyType: null})
23 | if (keyName !== null) {
24 | this.setState({keyType: null})
25 | this.props.redis.type(keyName).then(keyType => {
26 | if (keyName === this.props.keyName) {
27 | this.setState({keyType})
28 | }
29 | })
30 | }
31 | }
32 |
33 | componentDidMount() {
34 | this.init(this.props.keyName)
35 | }
36 |
37 | componentWillReceiveProps(nextProps) {
38 | if (nextProps.keyName !== this.props.keyName || nextProps.version !== this.props.version) {
39 | this.init(nextProps.keyName)
40 | }
41 | if (nextProps.metaVersion !== this.props.metaVersion) {
42 | this.setState({version: this.state.version + 1})
43 | }
44 | }
45 |
46 | handleTabChange(tab) {
47 | this.setState({tab})
48 | }
49 |
50 | render() {
51 | return (
52 |
56 | {
63 | this.setState({version: this.state.version + 1})
64 | }}
65 | />
66 |
73 |
79 |
85 |
)
86 | }
87 | }
88 |
89 | export default Content
90 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/ContentEditable/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import escape from 'lodash.escape'
4 |
5 | require('./index.scss')
6 |
7 | export default class ContentEditable extends React.Component {
8 | constructor() {
9 | super()
10 | }
11 |
12 | render() {
13 | const {html, enabled, ...props} = this.props
14 | return (
17 |
25 |
)
26 | }
27 |
28 | shouldComponentUpdate(nextProps) {
29 | return nextProps.html !== this.props.html || // ReactDOM.findDOMNode(this.refs.text).innerHTML ||
30 | nextProps.enabled !== this.props.enabled
31 | }
32 |
33 | componentDidMount() {
34 | if (this.props.enabled) {
35 | ReactDOM.findDOMNode(this.refs.text).focus()
36 | }
37 | }
38 |
39 | componentDidUpdate() {
40 | const node = ReactDOM.findDOMNode(this.refs.text)
41 | if (escape(this.props.html) !== node.innerHTML) {
42 | node.innerHTML = this.props.html
43 | }
44 | if (this.props.enabled) {
45 | const range = document.createRange()
46 | range.selectNodeContents(node)
47 | const sel = window.getSelection()
48 | sel.removeAllRanges()
49 | sel.addRange(range)
50 | }
51 | }
52 |
53 | handleKeyDown(evt) {
54 | if (evt.keyCode === 13) {
55 | ReactDOM.findDOMNode(this.refs.text).blur()
56 | evt.preventDefault()
57 | evt.stopPropagation()
58 | return
59 | }
60 | if (evt.keyCode === 27) {
61 | this.props.onChange(this.props.html)
62 | evt.preventDefault()
63 | evt.stopPropagation()
64 | }
65 | }
66 |
67 | handleChange(evt) {
68 | const html = ReactDOM.findDOMNode(this.refs.text).innerHTML
69 | if (html !== this.lastHtml) {
70 | evt.target = {value: html}
71 | }
72 | this.lastHtml = html
73 | }
74 |
75 | handleSubmit() {
76 | this.props.onChange(ReactDOM.findDOMNode(this.refs.text).textContent)
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/ContentEditable/index.scss:
--------------------------------------------------------------------------------
1 | .ContentEditable {
2 | [contenteditable="true"] {
3 | background: #fff !important;
4 | color: #333;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/KeyBrowser/Footer.jsx:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | import React from 'react'
4 |
5 | class Footer extends React.Component {
6 | constructor() {
7 | super()
8 | this.state = {}
9 | }
10 |
11 | componentDidMount() {
12 | this.updateInfo()
13 | this.updateDBCount()
14 | this.interval = setInterval(this.updateInfo.bind(this), 10000)
15 | }
16 |
17 | componentWillReceiveProps(nextProps) {
18 | if (nextProps.db !== this.props.db) {
19 | this.updateInfo()
20 | }
21 | }
22 |
23 | updateDBCount() {
24 | this.props.redis.config('get', 'databases', (err, res) => {
25 | if (!err && res[1]) {
26 | this.setState({databases: Number(res[1])})
27 | } else {
28 | const redis = this.props.redis.duplicate()
29 | const select = redis.select.bind(redis)
30 | this.guessDatabaseNumber(select, 15).then(count => {
31 | return typeof count === 'number' ? count : this.guessDatabaseNumber(select, 1, 0)
32 | }).then(count => {
33 | this.setState({databases: count + 1})
34 | })
35 | }
36 | })
37 | }
38 |
39 | updateInfo() {
40 | this.props.redis.info((err, res) => {
41 | if (err) {
42 | return
43 | }
44 | const info = {}
45 |
46 | const lines = res.split('\r\n')
47 | for (let i = 0; i < lines.length; i++) {
48 | const parts = lines[i].split(':')
49 | if (parts[1]) {
50 | info[parts[0]] = parts[1]
51 | }
52 | }
53 |
54 | this.setState(info)
55 | })
56 | }
57 |
58 | guessDatabaseNumber(select, startIndex, lastSuccessIndex) {
59 | if (startIndex > 30) {
60 | return Promise.resolve(30)
61 | }
62 | return select(startIndex)
63 | .then(() => {
64 | return this.guessDatabaseNumber(select, startIndex + 1, startIndex)
65 | }).catch(err => {
66 | if (typeof lastSuccessIndex === 'number') {
67 | return lastSuccessIndex
68 | }
69 | return null
70 | })
71 | }
72 |
73 | componentWillUnmount() {
74 | clearInterval(this.interval)
75 | this.interval = null
76 | }
77 |
78 | handleChange(evt) {
79 | const db = Number(evt.target.value)
80 | this.props.onDatabaseChange(db)
81 | }
82 |
83 | keyCountByDb(dbNumber){
84 | const db = `db${dbNumber}`
85 | let keys = 0
86 | if (this.state[db]) {
87 | const match = this.state[db].match(/keys=(\d+)/)
88 | if (match) {
89 | keys = match[1]
90 | }
91 | }
92 | return keys
93 | }
94 |
95 | render() {
96 | const keys = this.keyCountByDb(this.props.db)
97 | return ()
124 | }
125 | }
126 |
127 | export default Footer
128 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/KeyBrowser/KeyList/index.scss:
--------------------------------------------------------------------------------
1 | .pattern-table {
2 | position: relative;
3 | overflow: hidden;
4 | &:focus {
5 | outline: 0;
6 | }
7 |
8 | footer {
9 | height: 24px;
10 | }
11 | }
12 |
13 | .public_fixedDataTable_bottomShadow {
14 | display: none;
15 | }
16 |
17 | .key-type {
18 | margin: 4px 0 0;
19 | padding: 0 !important;
20 | text-transform: uppercase;
21 | width: 32px;
22 | height: 16px;
23 | font-size: 11px !important;
24 | line-height: 17px !important;
25 | display: block;
26 | text-align: center;
27 | background: #60d4ca;
28 | color: #fff;
29 |
30 | &.str { background: #5dc936; }
31 | &.list { background: #fca32a; }
32 | &.hash { background: #b865d0; }
33 | &.zset { background: #fa5049; }
34 | &.set { background: #239ff2; }
35 | }
36 |
37 | .public_fixedDataTable_header, .public_fixedDataTableRow_main.is-loading {
38 | .public_fixedDataTableCell_main {
39 | font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !important;
40 | }
41 | }
42 |
43 | .public_fixedDataTableCell_cellContent {
44 | padding: 0;
45 | }
46 |
47 | .public_fixedDataTableCell_main {
48 | font-family: Consolas, monospace;
49 | font-size: 12px;
50 | line-height: 24px;
51 | padding: 0 8px;
52 | }
53 |
54 | .public_fixedDataTableRow_main {
55 | color: #606061;
56 | }
57 |
58 | :focus .public_fixedDataTableRow_main.is-selected {
59 | background: #116cd6;
60 | color: #fff;
61 |
62 | .public_fixedDataTableCell_main {
63 | background: transparent;
64 | }
65 | }
66 |
67 | .public_fixedDataTableRow_main.is-selected {
68 | background: #dcdcdc;
69 |
70 | .public_fixedDataTableCell_main {
71 | background: transparent;
72 | }
73 | }
74 |
75 | .public_fixedDataTableCell_main {
76 | border: none;
77 | }
78 |
79 | .public_fixedDataTable_main {
80 | border-right: none;
81 | border-left: none;
82 | border-bottom: none;
83 | }
84 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceContent/DatabaseContainer/KeyBrowser/PatternList/index.jsx:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | import React from 'react'
4 | import {ipcRenderer} from 'electron'
5 |
6 | require('./index.scss')
7 |
8 | class PatternList extends React.Component {
9 | constructor(props) {
10 | super()
11 | this.state = {
12 | patternDropdown: false,
13 | pattern: props.pattern
14 | }
15 | }
16 |
17 | componentWillReceiveProps(nextProps) {
18 | if (nextProps.db !== this.props.db) {
19 | this.updatePattern('')
20 | }
21 | if (nextProps.pattern !== this.props.pattern) {
22 | this.setState({pattern: nextProps.pattern})
23 | }
24 | }
25 |
26 | updatePattern(value) {
27 | this.setState({pattern: value})
28 | this.props.onChange(value)
29 | }
30 |
31 | render() {
32 | return (
33 |
34 |
{
40 | this.updatePattern(evt.target.value)
41 | }}
42 | />
43 |
{
46 | this.setState({patternDropdown: !this.state.patternDropdown})
47 | }}
48 | />
49 |
53 |
54 | {
55 | this.props.patterns.map(pattern => {
56 | return (- {
58 | const value = pattern.get('value')
59 | this.props.onChange(value)
60 | this.setState({patternDropdown: false, pattern: value})
61 | }}
62 | >{pattern.get('name')}
)
63 | })
64 | }
65 | - {
68 | ipcRenderer.send('create patternManager', `${this.props.connectionKey}|${this.props.db}`)
69 | }}
70 | >
71 |
72 | Manage Patterns...
73 |
74 |
75 |
91 |
92 | {
93 | this.props.title &&
94 | {this.props.title}
95 |
96 | }
97 |
98 | {!this.props.form &&
}
99 | {this.props.content}
100 |
101 |
102 |
103 |
108 |
113 |
114 |
115 |
53 | {
54 | instance.get('redis')
55 | ?
56 | :
57 | }
58 |
59 | ))
60 |
61 | return (
62 |
63 |
68 | {
69 | this.state.modal &&
70 |
76 | }
77 |
78 | {contents}
79 |
80 | )
81 | }
82 | }
83 |
84 | export default InstanceContent
85 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceTabs/Tab.tsx:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react'
2 | import {SortableElement} from 'react-sortable-hoc'
3 |
4 | interface ITabProps {
5 | instanceKey: string,
6 | title?: string,
7 | active: boolean,
8 | onTabClick: (key: string) => void,
9 | onTabCloseButtonClick: (key: string) => void
10 | }
11 |
12 | function Tab({instanceKey, onTabClick, onTabCloseButtonClick, active, title = 'Quick Connect'}: ITabProps) {
13 | return {
15 | onTabClick(instanceKey)
16 | }}
17 | className={active ? 'tab-item active' : 'tab-item'}
18 | >
19 | {title}
20 | onTabCloseButtonClick(instanceKey)}>
23 |
24 | }
25 |
26 | export default memo(SortableElement(Tab))
27 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceTabs/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react'
2 | import {SortableContainer} from 'react-sortable-hoc'
3 | import Tab from './Tab'
4 |
5 | interface ITabsProps {
6 | instances: any
7 | activeInstanceKey: string
8 | onTabSelect: (key: string) => void
9 | onTabClose: (key: string) => void
10 |
11 | }
12 | function Tabs({instances, activeInstanceKey, onTabSelect, onTabClose}: ITabsProps) {
13 | return (
14 |
15 | {instances.map((instance, index) => {
16 | const key = instance.get('key')
17 | return
26 | })}
27 |
28 | )
29 | }
30 |
31 | export default memo(SortableContainer(Tabs))
32 |
--------------------------------------------------------------------------------
/src/renderer/windows/MainWindow/InstanceTabs/index.tsx:
--------------------------------------------------------------------------------
1 | import React, {memo} from 'react'
2 | import Tabs from './Tabs'
3 |
4 | require('./main.scss')
5 |
6 | function isModalShown() {
7 | return $('.Modal').length > 0
8 | }
9 |
10 | let display = 'flex'
11 |
12 | interface IInstanceTabsProps {
13 | instances: any
14 | activeInstanceKey: string
15 | onCreateInstance: any
16 | onSelectInstance: any
17 | onDelInstance: any
18 | onMoveInstance: any
19 | }
20 |
21 | function InstanceTabs({
22 | onCreateInstance, onSelectInstance, onDelInstance, instances, activeInstanceKey, onMoveInstance
23 | }: IInstanceTabsProps) {
24 | const handleAddButtonClick = () => {
25 | if (!isModalShown()) {
26 | onCreateInstance()
27 | }
28 | }
29 |
30 | const handleTabSelect = (key: string) => {
31 | if (!isModalShown()) {
32 | onSelectInstance(key)
33 | }
34 | }
35 |
36 | const handleTabClose = (key: string) => {
37 | if (!isModalShown()) {
38 | onDelInstance(key)
39 | }
40 | }
41 |
42 | const currentDisplay = instances.count() === 1 ? 'none' : 'flex'
43 | if (display !== currentDisplay) {
44 | display = currentDisplay
45 | setTimeout(() => $(window).trigger('resize'), 0)
46 | }
47 |
48 | return
49 |
50 |
{
61 | if (oldIndex !== newIndex) {
62 | onMoveInstance(instances.getIn([oldIndex, 'key']), instances.getIn([newIndex, 'key']))
63 | }
64 | }}
65 | shouldCancelStart={(e) => (e.target as any).nodeName.toUpperCase() === 'SPAN'}
66 | />
67 |
68 | {'+'}
69 |
70 |
71 |
63 |
71 |
75 |
76 | )
77 | }
78 | }
79 |
80 | const selector = createSelector(
81 | state => state.instances,
82 | state => state.activeInstanceKey,
83 | (instances, activeInstanceKey) => {
84 | return {
85 | instances,
86 | activeInstance: instances.find(instance => instance.get('key') === activeInstanceKey)
87 | }
88 | }
89 | )
90 |
91 | const mapDispatchToProps = {
92 | createInstance,
93 | selectInstance,
94 | delInstance,
95 | moveInstance
96 | }
97 |
98 | const MainWindowContainer = connect(selector, mapDispatchToProps)(MainWindow)
99 |
100 | export default
101 |
102 |
103 |
--------------------------------------------------------------------------------
/src/renderer/windows/PatternManagerWindow/app.scss:
--------------------------------------------------------------------------------
1 | .patternList {
2 | background: #fff;
3 | border: 1px solid #c5c5c5;
4 | width: 210px;
5 | position: absolute;
6 | top: 20px;
7 | left: 20px;
8 | height: 236px;
9 |
10 | footer {
11 | position: absolute;
12 | bottom: 0;
13 | left: 0;
14 | width: 208px;
15 | height: 19px;
16 | background: #fafafa;
17 | border-top: 1px solid #b4b4b4;
18 | button {
19 | width: 23px;
20 | height: 18px;
21 | border-radius: 0;
22 | padding: 0;
23 | border-left: 1px solid #b4b4b4;
24 | border-right: 1px solid #b4b4b4;
25 | margin-left: -1px;
26 | border-top: 0;
27 | border-bottom: 0;
28 | background: #fafafa;
29 |
30 | &.is-disabled {
31 | color: #bfbfbf;
32 | }
33 | }
34 | }
35 |
36 | .nav-group-item:active {
37 | background-color: #116cd6 !important;
38 | color: #fff;
39 | }
40 | }
41 |
42 | .nav-group-item {
43 | padding: 0 5px;
44 |
45 | &.sortable-chosen {
46 | color: #000;
47 |
48 | &.is-active {
49 | background: #116cd6 !important;
50 | color: #fff;
51 | }
52 | }
53 |
54 | &.is-active {
55 | background: #116cd6;
56 | color: #fff;
57 | }
58 | }
59 |
60 | .form {
61 | position: absolute !important;
62 | right: 20px;
63 | top: 20px;
64 | width: 328px;
65 | height: 236px;
66 | }
67 |
--------------------------------------------------------------------------------
/src/renderer/windows/PatternManagerWindow/entry.jsx:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | require('../../photon/css/photon.min.css')
4 |
5 | import React from 'react'
6 | import ReactDOM from 'react-dom'
7 | import {Provider} from 'react-redux'
8 | import PatternManagerWindow from './'
9 | import store from 'Redux/store'
10 | import * as actions from 'Redux/actions'
11 | import {remote, ipcRenderer} from 'electron'
12 |
13 | require('../../styles/global.scss')
14 |
15 | window.$ = window.jQuery = require('jquery');
16 |
17 | ipcRenderer.on('action', (evt, action) => {
18 | if (type === 'delInstance') {
19 | remote.getCurrentWindow().close()
20 | return
21 | }
22 |
23 | store.skipPersist = true
24 | store.dispatch(actions[action]())
25 | store.skipPersist = false
26 | })
27 |
28 | ReactDOM.render(
29 |
30 |
31 | ,
32 | document.body.appendChild(document.createElement('div'))
33 | )
34 |
--------------------------------------------------------------------------------
/src/renderer/windows/PatternManagerWindow/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {connect} from 'react-redux'
3 | import {createPattern, updatePattern, removePattern} from 'Redux/actions'
4 | import {List} from 'immutable'
5 |
6 | require('./app.scss')
7 |
8 | const connectionKey = getParameterByName('arg')
9 |
10 | class App extends React.Component {
11 | constructor(props, context) {
12 | super(props, context)
13 | this.state = {index: 0}
14 | }
15 |
16 | handleChange(property, e) {
17 | this.setState({[property]: e.target.value})
18 | }
19 |
20 | select(index) {
21 | this.setState({
22 | index,
23 | name: null,
24 | value: null
25 | })
26 | }
27 |
28 | renderPatternForm(activePattern) {
29 | if (!activePattern) {
30 | return null
31 | }
32 | return
37 |
38 |
39 |
45 |
46 |
47 |
48 |
54 |
55 |
56 |
67 |
68 |
75 |
76 |
87 |
105 |
106 | {this.renderPatternForm(activePattern)}
107 |
24 | }
25 |
26 |