From c46a1bed3149127b0f603dad2a71ac16671d4e2b Mon Sep 17 00:00:00 2001 From: Adam Goldman Date: Wed, 23 Jan 2019 19:24:25 -0500 Subject: [PATCH] fix logs crashing by switching to virtual list - npm: added `react-virtualized` - npm: added `highlight.js` at the moment I disabled highlighting the logs since it breaks the UI. The horizontal scrollbar isn't styled. This can be probably be fixed by following [this discussion](https://github.com/bvaughn/react-virtualized/issues/692) --- app/pages/BlockchainLogs/BlockchainLogs.js | 84 +++++++++++++++++-- app/pages/BlockchainLogs/BlockchainLogs.scss | 18 +++- app/pages/DeployContract/DeployContract.js | 2 +- app/pages/DeployContract/_DeployContract.scss | 21 +---- app/styles/_Shared.scss | 21 +++++ package-lock.json | 26 +++++- package.json | 2 + 7 files changed, 140 insertions(+), 34 deletions(-) diff --git a/app/pages/BlockchainLogs/BlockchainLogs.js b/app/pages/BlockchainLogs/BlockchainLogs.js index c38dee4d..573cc1e9 100644 --- a/app/pages/BlockchainLogs/BlockchainLogs.js +++ b/app/pages/BlockchainLogs/BlockchainLogs.js @@ -3,7 +3,9 @@ import React from 'react' import { inject, observer } from 'mobx-react' import Flexbox from 'flexbox-react' -import Highlight from 'react-highlight' +import List from 'react-virtualized/dist/commonjs/List' +import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' +// import hljs from 'highlight.js' import Layout from '../../components/Layout' import BlockchainLogsStore from '../../stores/blockchainLogsStore' @@ -15,21 +17,89 @@ type Props = { @inject('blockchainLogsStore') @observer class BlockchainLogs extends React.Component { + componentDidMount() { + // eslint-disable-next-line max-len + setTimeout(this.scrollToBottom, 0) // [AdGo] 17/01/2019 - not sure why the timeout needed, but it doesn't work without it + } + + componentDidUpdate() { + if (!this.dontAutoScrollToBottom) { + this.scrollToBottom() + } + } + dontAutoScrollToBottom = false + onScroll = ({ clientHeight, scrollHeight, scrollTop }) => { + console.log('onScroll', 'scrollTop', scrollTop) + if (scrollTop === 0) { // avoid disabling scroll on initial render + return + } + if (this.didScrollToBottom(clientHeight, scrollHeight, scrollTop)) { + this.dontAutoScrollToBottom = false + } else { + this.dontAutoScrollToBottom = true + } + } + didScrollToBottom(clientHeight, scrollHeight, scrollTop) { + // eslint-disable-next-line max-len + return clientHeight + scrollTop + 15 >= scrollHeight // [AdGo] 17/01/2019 - there's an offset of 15 when scrolling to the bottom, don't know why exactly 15 + } + scrollToBottom = () => { + const { logs } = this.props.blockchainLogsStore + if (this.List) { + this.List.scrollToRow(logs.length) + } + } + rowRenderer = ({ + key, // Unique key within array of rows + index, // Index of row within collection + style, // Style object to be applied to row (to position it) + }) => { + const { logs } = this.props.blockchainLogsStore + return ( +
+ {logs[index]} +
+ ) + } + onRowsRendered = () => { + // This breaks the UI, disabled for now + // if (this.container) { + // hljs.highlightBlock(this.container) + // } + } render() { - const { blockchainLogsStore } = this.props + const { logs } = this.props.blockchainLogsStore return (

Blockchain Logs

 - - - {blockchainLogsStore.logs.join('')} - - +
{ this.container = el }}> + + {({ width, height }) => ( + { this.List = el }} + width={width} + height={height} + rowCount={logs.length} + rowHeight={20} + rowRenderer={this.rowRenderer} + onRowsRendered={this.onRowsRendered} + scrollToAlignment="end" + onScroll={this.onScroll} + className="shell-session" + /> + )} + +
) } } export default BlockchainLogs + diff --git a/app/pages/BlockchainLogs/BlockchainLogs.scss b/app/pages/BlockchainLogs/BlockchainLogs.scss index 25a625a6..37c3e1ab 100644 --- a/app/pages/BlockchainLogs/BlockchainLogs.scss +++ b/app/pages/BlockchainLogs/BlockchainLogs.scss @@ -1,7 +1,17 @@ .blockchain-logs { - .contract-code.form-row { - pre { - height: 600px; - } + .form-row { + display: flex; + flex-direction: column; + flex: 1; + } + .ReactVirtualized__Grid__innerScrollContainer { + overflow-x: auto !important; + } + .log-list-item { + white-space: nowrap; + width: auto !important; + } + .ReactVirtualized__Grid.ReactVirtualized__List { + @extend .pre; } } diff --git a/app/pages/DeployContract/DeployContract.js b/app/pages/DeployContract/DeployContract.js index bb48792b..581cb37c 100644 --- a/app/pages/DeployContract/DeployContract.js +++ b/app/pages/DeployContract/DeployContract.js @@ -212,7 +212,7 @@ class DeployContract extends Component { } = this.props return ( - +

Upload a contract to the ACS

diff --git a/app/pages/DeployContract/_DeployContract.scss b/app/pages/DeployContract/_DeployContract.scss index a8825ce1..dc29888f 100644 --- a/app/pages/DeployContract/_DeployContract.scss +++ b/app/pages/DeployContract/_DeployContract.scss @@ -1,21 +1,4 @@ -pre { - border-radius: 2px; - background-color: $dark-grey; - border: 1px solid $border-color; - padding: 10px 15px; +.deploy-contract-page pre { height: 200px; overflow: auto; - line-height: 1.1rem; - font-size: 0.8rem; - - &::-webkit-resizer { background: transparent; } - &::-webkit-scrollbar { width: 27px; } - &::-webkit-scrollbar-track { background-color: transparent; } - &::-webkit-scrollbar-thumb { - background-color: $button-grey; - border-radius: 15px; - border: 9px solid rgba(0, 0, 0, 0); - background-clip: padding-box; - } - &::-webkit-scrollbar-corner { background: transparent; } -} +} \ No newline at end of file diff --git a/app/styles/_Shared.scss b/app/styles/_Shared.scss index 9f017f88..99d03add 100644 --- a/app/styles/_Shared.scss +++ b/app/styles/_Shared.scss @@ -54,3 +54,24 @@ h5 { font-size: 18px; color: $light-white; font-weight: 300; } .bold { font-weight: 500 !important; } .display-none { display: none !important; } + +pre, +.pre { + border-radius: 2px; + background-color: $dark-grey; + border: 1px solid $border-color; + padding: 10px 15px; + line-height: 1.1rem; + font-size: 0.8rem; + + &::-webkit-resizer { background: transparent; } + &::-webkit-scrollbar { width: 27px; } + &::-webkit-scrollbar-track { background-color: transparent; } + &::-webkit-scrollbar-thumb { + background-color: $button-grey; + border-radius: 15px; + border: 9px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + } + &::-webkit-scrollbar-corner { background: transparent; } +} diff --git a/package-lock.json b/package-lock.json index a19094ec..3724e693 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8707,9 +8707,9 @@ } }, "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" + "version": "9.13.1", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.13.1.tgz", + "integrity": "sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==" }, "history": { "version": "4.7.2", @@ -14646,6 +14646,26 @@ } } }, + "react-virtualized": { + "version": "9.21.0", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.0.tgz", + "integrity": "sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==", + "requires": { + "babel-runtime": "^6.26.0", + "classnames": "^2.2.3", + "dom-helpers": "^2.4.0 || ^3.0.0", + "loose-envify": "^1.3.0", + "prop-types": "^15.6.0", + "react-lifecycles-compat": "^3.0.4" + }, + "dependencies": { + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + } + } + }, "read-config-file": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-3.1.0.tgz", diff --git a/package.json b/package.json index 4157658b..7439c49e 100644 --- a/package.json +++ b/package.json @@ -209,6 +209,7 @@ "electron-context-menu": "^0.9.1", "electron-debug": "^1.5.0", "flexbox-react": "^4.4.0", + "highlight.js": "^9.13.1", "history": "^4.7.2", "js-base64": "^2.4.3", "lodash": "^4.17.5", @@ -239,6 +240,7 @@ "react-switch": "^2.3.2", "react-table": "^6.8.6", "react-toastify": "^4.5.1", + "react-virtualized": "^9.21.0", "semver-compare": "^1.0.0", "source-map-support": "^0.5.3", "sweetalert": "^2.1.0"