From: Zhiting Lin Date: Wed, 20 Jun 2018 11:00:37 +0000 (+0800) Subject: add the console component in the core page. X-Git-Url: http://git.osdn.net/view?a=commitdiff_plain;h=2701c816cd6e830a1600a91e70ecf07f76beecfc;p=bytom%2Fbytom-electron.git add the console component in the core page. --- diff --git a/src/actions.js b/src/actions.js index 3e9923e..9c2906f 100644 --- a/src/actions.js +++ b/src/actions.js @@ -4,7 +4,6 @@ import { actions as app } from 'features/app' import { actions as asset } from 'features/assets' import { actions as balance } from 'features/balances' import { actions as configuration } from 'features/configuration' -import { actions as console } from 'features/console' import { actions as core } from 'features/core' import { actions as mockhsm } from 'features/mockhsm' import { actions as testnet } from 'features/testnet' @@ -20,7 +19,6 @@ const actions = { asset, balance, configuration, - console, core, key: mockhsm, testnet, diff --git a/src/features/app/actions.js b/src/features/app/actions.js index 971c2bf..7239c3f 100644 --- a/src/features/app/actions.js +++ b/src/features/app/actions.js @@ -1,4 +1,5 @@ import { push } from 'react-router-redux' +import { chainClient } from 'utility/environment' const actions = { dismissFlash: (param) => ({type: 'DISMISS_FLASH', param}), @@ -28,6 +29,9 @@ const actions = { dispatch(push('/configuration')) } } + }, + cmd: (data) => () => { + return chainClient().bytomCli.request(data) } } diff --git a/src/features/app/components/Modal/Modal.jsx b/src/features/app/components/Modal/Modal.jsx index 4edf046..d741eae 100644 --- a/src/features/app/components/Modal/Modal.jsx +++ b/src/features/app/components/Modal/Modal.jsx @@ -22,16 +22,23 @@ class Modal extends React.Component { } const cancel = cancelAction ? () => dispatch(cancelAction) : null const backdropAction = cancel || accept + const boxStyle = this.props.options.box return(
-
+
+ { + boxStyle && +
+

Console

+ +
+ } {body} - - - {cancel && } + {!boxStyle && } + {!boxStyle && cancel && }
) diff --git a/src/features/app/components/Modal/Modal.scss b/src/features/app/components/Modal/Modal.scss index f4de5bd..ce1e445 100644 --- a/src/features/app/components/Modal/Modal.scss +++ b/src/features/app/components/Modal/Modal.scss @@ -39,3 +39,24 @@ .cancel { color: $text-color; } + +.box { + background: $background-color; + position: absolute; + top: 10%; + height: 80%; +} + +.title { + height: 50px; + padding: 10px 30px; + border-bottom: 1px solid $border-color; + font-size: $font-size-page-title; + color: $text-strong-color; +} + +.close { + position: absolute; + right: 10px; + top: 10px; +} diff --git a/src/features/app/components/SecondaryNavigation/SecondaryNavigation.jsx b/src/features/app/components/SecondaryNavigation/SecondaryNavigation.jsx index 16341ff..6bbc4c0 100644 --- a/src/features/app/components/SecondaryNavigation/SecondaryNavigation.jsx +++ b/src/features/app/components/SecondaryNavigation/SecondaryNavigation.jsx @@ -54,13 +54,6 @@ class SecondaryNavigation extends React.Component { { lang === 'zh' ? '备份与恢复' : 'Backup and Restore'} - -
  • - - {navIcon('client', styles)} - Console - -
    • ) diff --git a/src/features/console/actions.js b/src/features/console/actions.js deleted file mode 100644 index 2a2dfe9..0000000 --- a/src/features/console/actions.js +++ /dev/null @@ -1,9 +0,0 @@ -import { chainClient } from 'utility/environment' - -let actions = { - request: (data) => () => { - return chainClient().bytomCli.request(data) - } -} - -export default actions diff --git a/src/features/console/components/ConsolePage.jsx b/src/features/console/components/ConsolePage.jsx deleted file mode 100644 index ad5e328..0000000 --- a/src/features/console/components/ConsolePage.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import componentClassNames from 'utility/componentClassNames' -import {PageContent, PageTitle, ConsoleSection} from 'features/shared/components' -import styles from './ConsolePage.scss' -import {connect} from 'react-redux' -import actions from 'actions' - -class ConsolePage extends React.Component { - constructor(props) { - super(props) - } - - render() { - const lang = this.props.core.lang - - return ( -
    - - - - -
    - ) - } -} - -const mapStateToProps = (state) => ({ - core: state.core -}) - -const mapDispatchToProps = (dispatch) => ({ - cmd: (data) => dispatch(actions.console.request(data)), -}) - -export default connect( - mapStateToProps, - mapDispatchToProps -)(ConsolePage) diff --git a/src/features/console/components/ConsolePage.scss b/src/features/console/components/ConsolePage.scss deleted file mode 100644 index b83ce21..0000000 --- a/src/features/console/components/ConsolePage.scss +++ /dev/null @@ -1,144 +0,0 @@ -.page_header h1 { - margin-bottom: 0; -} - -.table { - margin-bottom: $grid-gutter-width; - - td { - vertical-align: top; - } -} - -.row_label { - padding-right: $grid-gutter-width; - text-transform: capitalize; - font-weight: 500; - white-space: pre; -} - -.row_value { - white-space: pre; - text-align: right; -} - -.block_hash { - display: block; - word-wrap: break-word; - word-break: break-all; -} - -.flex { - display: flex; - //overflow:hidden; -} - -.col { - display: flex; - width: 50%; - padding: $grid-gutter-width; - h4 { - margin-top: 0; - } -} - -.sub-row { - padding: $grid-gutter-width $grid-gutter-width 0; -} - -.top { - border-bottom: 1px solid $border-color; -} - -.left { - padding-left: 0; - width: 67%; -} - -.right { - border-left: 1px solid $border-color; - width: 33%; -} - -.replication_lag { - display: inline-block; - float: right; - border-radius: $border-radius-base; - color: white; - padding: 0 8px; - line-height: 1.5; - margin-top: 2px; - margin-left: -8px; -} - -.green { - background: $highlight-secondary; -} - -.yellow { - background: $brand-warning; -} - -.red { - background: darken($highlight-danger-background, 20%); -} - -.mainContainer { - background-color: $background-color; -} - -code { - padding-left: 0; - font-size: $font-size-code; -} - -.switch { - position: relative; - display: inline-block; - width: 44px; - height: 22px; - - /* Hide default HTML checkbox */ - input {display:none;} - - input:checked + .slider { - background-color: $highlight-default; - } - - input:focus + .slider { - box-shadow: 0 0 1px $highlight-default; - } - - input:checked + .slider:before { - -webkit-transform: translateX(22px); - -ms-transform: translateX(22px); - transform: translateX(22px); - } -} - -/* The slider */ -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; - border-radius: 34px; -} - -.slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; - border-radius: 50%; -} \ No newline at end of file diff --git a/src/features/console/components/index.js b/src/features/console/components/index.js deleted file mode 100644 index f38d2c3..0000000 --- a/src/features/console/components/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import ConsolePage from './ConsolePage' - -export { - ConsolePage -} diff --git a/src/features/console/index.js b/src/features/console/index.js deleted file mode 100644 index b133bca..0000000 --- a/src/features/console/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import actions from './actions' -import routes from './routes' - -export { - actions, - routes, -} diff --git a/src/features/console/routes.js b/src/features/console/routes.js deleted file mode 100644 index 705329d..0000000 --- a/src/features/console/routes.js +++ /dev/null @@ -1,8 +0,0 @@ -import { RoutingContainer } from 'features/shared/components' -import { ConsolePage } from './components' - -export default { - path: 'console', - component: RoutingContainer, - indexRoute: { component: ConsolePage } -} diff --git a/src/features/core/components/CoreIndex/CoreIndex.jsx b/src/features/core/components/CoreIndex/CoreIndex.jsx index 7e7a601..b48f7aa 100644 --- a/src/features/core/components/CoreIndex/CoreIndex.jsx +++ b/src/features/core/components/CoreIndex/CoreIndex.jsx @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import {DropdownButton, MenuItem} from 'react-bootstrap' import componentClassNames from 'utility/componentClassNames' -import { PageContent, PageTitle } from 'features/shared/components' +import { PageContent, PageTitle, ConsoleSection } from 'features/shared/components' import React from 'react' import styles from './CoreIndex.scss' import actions from 'actions' @@ -16,6 +16,7 @@ class CoreIndex extends React.Component { this.handleMiningState = this.handleMiningState.bind(this) this.handleAdvancedOptionChange = this.handleAdvancedOptionChange.bind(this) this.changeBTMamount = this.changeBTMamount.bind(this) + this.consolePopup = this.consolePopup.bind(this) } componentDidMount() { @@ -49,6 +50,15 @@ class CoreIndex extends React.Component { } } + consolePopup(e) { + e.preventDefault() + this.props.showModal( + + ) + } + render() { let navState = this.props.navAdvancedState === 'advance' let miningState = this.props.core.mingStatus @@ -175,7 +185,14 @@ class CoreIndex extends React.Component { return (
    - + + + + ]} + />
    @@ -197,7 +214,17 @@ const mapDispatchToProps = (dispatch) => ({ showNavAdvanced: () => dispatch(actions.app.showNavAdvanced), hideNavAdvanced: () => dispatch(actions.app.hideNavAdvanced), uptdateBtmAmountUnit: (param) => dispatch(actions.core.updateBTMAmountUnit(param)), - updateMiningState: (param) => dispatch(actions.core.updateMiningState(param)) + updateMiningState: (param) => dispatch(actions.core.updateMiningState(param)), + showModal: (body) => dispatch(actions.app.showModal( + body, + actions.app.hideModal, + null, + { + box: true, + wide: true + } + )), + cmd: (data) => dispatch(actions.app.cmd(data)) }) export default connect( diff --git a/src/features/shared/components/ConsoleSection/ConsoleSection.jsx b/src/features/shared/components/ConsoleSection/ConsoleSection.jsx index e2bee5e..ccc9288 100644 --- a/src/features/shared/components/ConsoleSection/ConsoleSection.jsx +++ b/src/features/shared/components/ConsoleSection/ConsoleSection.jsx @@ -10,16 +10,37 @@ class ConsoleSection extends React.Component { } echo (text) { - if(text.startsWith('help')){ - this.terminal.log(command['help']) + if(text.trim() === 'help'){ + command['help'].forEach( (descriptionLine) => { + this.terminal.log(descriptionLine) + }) + }else if(text.trim() === 'clear'){ + this.terminal.setState({ + acceptInput: true, + log: [] + }) }else{ this.props.cmd(text) .then(data=> { - this.terminal.log(JSON.stringify(data, null, 2)) + if(data.status === 'success'){ + let output = data.data + if(output){ + const keys = Object.keys(output) + if(keys.length === 1){ + this.terminal.log(output[keys[0]]) + }else{ + this.terminal.log(JSON.stringify(output, null, 2)) + } + } + }else if(data.status === 'fail'){ + this.terminal.logX('Error', data.msg.replace(/"/g,'')) + }else{ + this.terminal.log(JSON.stringify(data.data, null, 2)) + } }).catch(() => { - this.terminal.log('command not found') + this.terminal.logX('Error','command not found') }) } this.terminal.return() @@ -27,24 +48,22 @@ class ConsoleSection extends React.Component { render() { return( -
    -
    -

    - Welcome to the Bytom Core API console.
    - Type help for an overview of available commands. -

    -

    - WARNING: Scammers have been active, telling users to type commands here, stealing their wallet contents. Do not use this console without fully understanding the ramification of a command. -

    +
    +

    + Welcome to the Bytom Core API console.
    + Type help for an overview of available commands. +

    +

    + WARNING: Scammers have been active, telling users to type commands here, stealing their wallet contents. Do not use this console without fully understanding the ramification of a command. +

    - this.terminal = ref} - handler={this.echo} - autofocus={true} - /> -
    + this.terminal = ref} + handler={this.echo} + autofocus={true} + />
    ) } diff --git a/src/features/shared/components/ConsoleSection/ConsoleSection.scss b/src/features/shared/components/ConsoleSection/ConsoleSection.scss index 0bcd185..fe2cec1 100644 --- a/src/features/shared/components/ConsoleSection/ConsoleSection.scss +++ b/src/features/shared/components/ConsoleSection/ConsoleSection.scss @@ -2,5 +2,7 @@ font-size: 0.85em; font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace; box-sizing: border-box; - padding: 0.5em; + height: calc( 100% - 50px ); + padding: 30px; + overflow: scroll; } diff --git a/src/features/shared/components/ConsoleSection/command.json b/src/features/shared/components/ConsoleSection/command.json index 1845dca..7e281d2 100644 --- a/src/features/shared/components/ConsoleSection/command.json +++ b/src/features/shared/components/ConsoleSection/command.json @@ -1,3 +1,26 @@ { - "help": "create-key \nlist-keys" + "help": [ + "validate-address
    ", + "sign-message
    ", + "get-transaction ", + "list-transactions", + "build-transaction [{\"account_id\":id,\"amount\":amount,\"asset_id\": id,\"type\":type of transaction}…] ", + "sign-transaction ", + "estimate-transaction-gas ", + "get-unconfirmed-transaction ", + "list-unconfirmed-transactions", + "decode-raw-transaction ", + "get-block-count", + "get-block-hash", + "get-block (  | )", + "get-block-header (  | )", + "get-difficulty (  | )", + "get-hash-rate (  | )", + "net-info", + "is-mining", + "set-mining ", + "gas-rate", + "verify-message
    ", + "decode-program " + ] } \ No newline at end of file diff --git a/src/routes.js b/src/routes.js index 6260f1b..5d95211 100644 --- a/src/routes.js +++ b/src/routes.js @@ -11,7 +11,6 @@ import { routes as transactionFeeds } from 'features/transactionFeeds' import { routes as unspents } from 'features/unspents' import { routes as mockhsm } from 'features/mockhsm' import { routes as backup } from 'features/backup' -import { routes as console } from 'features/console' const makeRoutes = (store) => ({ path: '/', @@ -28,7 +27,6 @@ const makeRoutes = (store) => ({ unspents(store), mockhsm(store), backup, - console, { path: '*', component: NotFound diff --git a/static/styles/_body.scss b/static/styles/_body.scss index 502a2d7..d093a5f 100644 --- a/static/styles/_body.scss +++ b/static/styles/_body.scss @@ -168,6 +168,10 @@ a:focus { font-weight: normal; } +.text-danger{ + color: $text-danger; +} + div.react-console-prompt-box { padding-top: 1em; color: #444; @@ -207,10 +211,16 @@ div.react-console-focus span.react-console-cursor-idle { background: none; color: #444; } } -div.react-console-message { +div.react-console-message, +span.react-console-prompt { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ - padding: 0.1em; } + padding: 0.1em; +} + +div.react-console-message-Error{ + color: $text-danger; +}