diff --git a/client/src/components/App/App.js b/client/src/components/App/App.js index 442308e34..2e1822cd8 100644 --- a/client/src/components/App/App.js +++ b/client/src/components/App/App.js @@ -32,6 +32,7 @@ const styles = theme => { left: 0, bottom: 0, right: 0, + overflow: 'auto', '& ol, & ul': { listStyle: 'none' } diff --git a/client/src/components/Container.js b/client/src/components/Container.js index 3380e2bb7..36ee1bca4 100644 --- a/client/src/components/Container.js +++ b/client/src/components/Container.js @@ -7,8 +7,8 @@ const styles = theme => ({ root: { width: 'auto', display: 'block', // Fix IE 11 issue. - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, + marginLeft: 'auto', + marginRight: 'auto', [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: { width: 400, marginLeft: 'auto', diff --git a/client/src/components/Header/HeaderView.js b/client/src/components/Header/HeaderView.js index 150e00b39..c43267e43 100644 --- a/client/src/components/Header/HeaderView.js +++ b/client/src/components/Header/HeaderView.js @@ -64,7 +64,7 @@ const { transactionByOrg, dashStats, changeChannel, - blockActivity, + blockActivity } = chartOperations; const { @@ -77,9 +77,13 @@ const { } = tableOperations; const { currentChannelSelector } = chartSelectors; -const { channelsSelector, transactionListSearchPageParamSelector, - transactionListSearchQuerySelector, - blockListSearchPageParamSelector, blockListSearchQuerySelector} = tableSelectors; +const { + channelsSelector, + transactionListSearchPageParamSelector, + transactionListSearchQuerySelector, + blockListSearchPageParamSelector, + blockListSearchQuerySelector +} = tableSelectors; /* istanbul ignore next */ const styles = theme => { const { type } = theme.palette; @@ -203,7 +207,7 @@ const styles = theme => { }, logoutIcon: { color: dark ? 'rgb(139, 143, 148)' : '#5f6164', - fontSize: '18pt', + fontSize: '16pt', float: 'none', '&:hover': { color: dark ? '#c1d7f0' : '#24272a' @@ -213,7 +217,7 @@ const styles = theme => { }, userIcon: { color: dark ? 'rgb(139, 143, 148)' : '#5f6164', - fontSize: '18pt', + fontSize: '16pt', float: 'none', '&:hover': { color: dark ? '#c1d7f0' : '#24272a' @@ -469,7 +473,11 @@ export class HeaderView extends Component { } = this.props; await Promise.all([ - getBlockListSearch( currentChannel, blockListSearchQuery, blockListSearchPageParam), + getBlockListSearch( + currentChannel, + blockListSearchQuery, + blockListSearchPageParam + ), getBlocksPerHour(currentChannel), getBlocksPerMin(currentChannel), getChaincodeList(currentChannel), @@ -478,7 +486,11 @@ export class HeaderView extends Component { getBlockActivity(currentChannel), getPeerList(currentChannel), getTransactionByOrg(currentChannel), - getTransactionListSearch(currentChannel,transactionListSearchQuery,transactionListSearchPageParam), + getTransactionListSearch( + currentChannel, + transactionListSearchQuery, + transactionListSearchPageParam + ), getTransactionPerHour(currentChannel), getTransactionPerMin(currentChannel) ]); @@ -595,19 +607,18 @@ export class HeaderView extends Component { -
- this.registerOpen()} - />{' '} +
this.registerOpen()} + > + User management
-
- this.logout()} /> Sign - out +
this.logout()}> + Sign out
@@ -699,7 +710,7 @@ const mapStateToProps = state => { }; const mapDispatchToProps = { - getBlockListSearch: blockListSearch, + getBlockListSearch: blockListSearch, getBlocksPerHour: blockPerHour, getBlocksPerMin: blockPerMin, getChaincodeList: chaincodeList, @@ -710,7 +721,7 @@ const mapDispatchToProps = { getBlockActivity: blockActivity, getTransactionByOrg: transactionByOrg, getTransactionList: transactionList, - getTransactionListSearch:transactionListSearch, + getTransactionListSearch: transactionListSearch, getTransactionPerHour: transactionPerHour, getTransactionPerMin: transactionPerMin, logout: authOperations.logout diff --git a/client/src/components/Lists/Blocks.js b/client/src/components/Lists/Blocks.js index 995ece17a..12466c19f 100644 --- a/client/src/components/Lists/Blocks.js +++ b/client/src/components/Lists/Blocks.js @@ -15,7 +15,7 @@ import BlockView from '../View/BlockView'; import TransactionView from '../View/TransactionView'; import MultiSelect from '../Styled/MultiSelect'; import DatePicker from '../Styled/DatePicker'; -import SearchIcon from "@material-ui/icons/Search"; +import SearchIcon from '@material-ui/icons/Search'; import { blockListSearchType, blockRangeSearchType, @@ -26,12 +26,19 @@ import { txnListType } from '../types'; import { FormHelperText, TablePagination, TextField } from '@mui/material'; +import { MenuItem, Select } from '@material-ui/core'; import { - MenuItem, - Select -} from "@material-ui/core"; -import { reg, rowsPerPageOptions, rangeLimitOptions, defaultRangeLimit, E001, E002, E003, E004, E005 } from "./constants"; -import { Info } from "@material-ui/icons"; + reg, + rowsPerPageOptions, + rangeLimitOptions, + defaultRangeLimit, + E001, + E002, + E003, + E004, + E005 +} from './constants'; +import { Info } from '@material-ui/icons'; /* istanbul ignore next */ const styles = theme => { @@ -44,19 +51,19 @@ const styles = theme => { } }, htinputs: { - display: "flex", - marginBottom: "15px", - position: "relative" + display: 'flex', + marginBottom: '15px', + position: 'relative' }, errorText: { - width: "100%", - position: "absolute", - left: "0px", - bottom: "-20px", + width: '100%', + position: 'absolute', + left: '0px', + bottom: '-20px', cursor: 'default' }, startBlock: { - marginRight: "5px" + marginRight: '5px' }, partialHash: { textAlign: 'center', @@ -120,12 +127,12 @@ const styles = theme => { '& > div': { width: '100% !important', marginTop: 20 - }, + } }, blockRangeRow: { marginBottom: '10px !important', marginLeft: '10px !important', - minWidth: "25vw", + minWidth: '25vw', // justifyContent: 'space-around', '& > div': { marginRight: '10px' @@ -145,8 +152,8 @@ const styles = theme => { } }, iconButton: { - color: "#21295c", - alignSelf: "center" + color: '#21295c', + alignSelf: 'center' } }; }; @@ -154,7 +161,6 @@ const tablePaginationStyle = { display: 'flex', justifyContent: 'end', padding: '0px 15px', - marginBottom: '15px', alignItems: 'baseline', '.MuiToolbar-root': { alignItems: 'baseline' @@ -225,14 +231,14 @@ export class Blocks extends Component { this.handleSearch(); } - if(prevProps.blockRangeLoaded!=this.props.blockRangeLoaded){ - if(this.props.blockRangeLoaded){ - if (typeof this.props.blockRangeSearch === 'string') {this.setState({ rangeErr: this.props.blockRangeSearch})} + if (prevProps.blockRangeLoaded != this.props.blockRangeLoaded) { + if (this.props.blockRangeLoaded) { + if (typeof this.props.blockRangeSearch === 'string') { + this.setState({ rangeErr: this.props.blockRangeSearch }); + } } else { - if(this.state.rangeErr) - this.setState({ rangeErr: '' }) + if (this.state.rangeErr) this.setState({ rangeErr: '' }); } - } } @@ -275,18 +281,14 @@ export class Blocks extends Component { if (channel !== undefined) { channelhash = channel; } - await this.props.getBlockListSearch( - channelhash, - query, - pageParams - ); + await this.props.getBlockListSearch(channelhash, query, pageParams); }; handleDialogOpen = async tid => { const { getTransaction, getTxnList, currentChannel } = this.props; if (this.state.brs) { - await getTxnList(currentChannel, tid); - } else await getTransaction(currentChannel, tid); + await getTxnList(currentChannel, tid); + } else await getTransaction(currentChannel, tid); this.setState({ dialogOpen: true }); }; @@ -314,7 +316,11 @@ export class Blocks extends Component { if (channel !== undefined) { channelhash = channel; } - await this.props.getBlockRangeSearch(channelhash, this.state.startBlock, this.state.endBlock); + await this.props.getBlockRangeSearch( + channelhash, + this.state.startBlock, + this.state.endBlock + ); }; handleRangeChange = e => { @@ -364,9 +370,12 @@ export class Blocks extends Component { }; handleDialogOpenBlockHash = blockHash => { - const blockList = this.state.brs ? - (typeof this.props.blockRangeSearch!=='string' && this.props.blockRangeLoaded ? this.props.blockRangeSearch : []) - : this.props.blockListSearch + const blockList = this.state.brs + ? typeof this.props.blockRangeSearch !== 'string' && + this.props.blockRangeLoaded + ? this.props.blockRangeSearch + : [] + : this.props.blockListSearch; const data = find(blockList, item => item.blockhash === blockHash); this.setState({ @@ -566,7 +575,7 @@ export class Blocks extends Component { render() { const reversedBlockRangeList = - typeof this.props.blockRangeSearch !== "string" && + typeof this.props.blockRangeSearch !== 'string' && this.props.blockRangeLoaded ? this.props.blockRangeSearch .slice() @@ -574,17 +583,17 @@ export class Blocks extends Component { .reverse() : []; const blockList = this.state.brs - ? reversedBlockRangeList.slice( - this.state.page * this.state.rowsPerPage, - (this.state.page + 1) * this.state.rowsPerPage - ) - : this.props.blockListSearch; + ? reversedBlockRangeList.slice( + this.state.page * this.state.rowsPerPage, + (this.state.page + 1) * this.state.rowsPerPage + ) + : this.props.blockListSearch; const noOfPages = this.state.brs - ? typeof this.props.blockRangeSearch !== "string" && - this.props.blockRangeLoaded && - Math.ceil(this.props.blockRangeSearch.length / this.state.rowsPerPage) - : this.props.blockListSearchTotalPages; - const { transaction, txnList, classes } = this.props; + ? typeof this.props.blockRangeSearch !== 'string' && + this.props.blockRangeLoaded && + Math.ceil(this.props.blockRangeSearch.length / this.state.rowsPerPage) + : this.props.blockListSearchTotalPages; + const { transaction, txnList, classes } = this.props; const { blockHash, dialogOpen, dialogOpenBlockHash } = this.state; return (
@@ -702,24 +711,21 @@ export class Blocks extends Component {
No of Blocks - - + + { setSelectedOption(e.target.value); if (error) { setDialogOpen(false); setError('') } }} - className={classes.searchInput} - displayEmpty - variant='outlined' - style={{ width: 110 }} - MenuProps={{ - anchorOrigin: { - vertical: "bottom", - horizontal: "left" - }, - getContentAnchorEl: null - }} - > - {options.map((option) => ( - - {option} - - - ))} - - { setSearch(e.target.value); if (error) { setDialogOpen(false); setError(''); } }} - onKeyPress={(e) => e.key === 'Enter' && handleSubmit(e)} - label=" Search by Txn Hash / Block" - variant='outlined' - style={{ width: 550 }} - error={error} - helperText={error} - InputProps={{ - endAdornment: ( - - - - - - ) - }} - /> - - - {!error && selectedOption === 'Block No' ? - : - } - -
- ) -} + return ( +
+ { + setSearch(e.target.value); + if (error) { + setDialogOpen(false); + setError(''); + } + }} + onKeyPress={e => e.key === 'Enter' && handleSubmit(e)} + label=" Search by Txn Hash / Block" + variant="outlined" + fullWidth + error={error} + helperText={error} + className={classes.searchInput} + InputProps={{ + startAdornment: ( + + + + ), + endAdornment: ( + + + + + + ) + }} + /> + + {!error && selectedOption === 'Block No' ? ( + + ) : ( + + )} + +
+ ); +}; SearchByQuery.propTypes = { - txnList: txnListType.isRequired + txnList: txnListType.isRequired }; - -export default withRouter(SearchByQuery) \ No newline at end of file +export default withRouter(SearchByQuery); diff --git a/client/src/components/Lists/Transactions.js b/client/src/components/Lists/Transactions.js index 3513e2e70..d9f0ef709 100644 --- a/client/src/components/Lists/Transactions.js +++ b/client/src/components/Lists/Transactions.js @@ -89,13 +89,12 @@ const tablePaginationStyle = { display: 'flex', justifyContent: 'end', padding: '0px 15px', - marginBottom: '15px', alignItems: 'baseline', '.MuiToolbar-root': { - alignItems: 'baseline', + alignItems: 'baseline' } -} -const rowsPerPageOptions=[5,10,25,50,100]; +}; +const rowsPerPageOptions = [5, 10, 25, 50, 100]; export class Transactions extends Component { constructor(props) { super(props); @@ -113,7 +112,7 @@ export class Transactions extends Component { directLinkSearchResultsFlag: false, directLinkDialogDoneFlag: false, page: 0, - rowsPerPage:10, + rowsPerPage: 10, searchClick: false, queryFlag: false, defaultQuery: true @@ -139,7 +138,7 @@ export class Transactions extends Component { this.handleSearch(); } - componentDidUpdate(prevProps,prevState) { + componentDidUpdate(prevProps, prevState) { if ( this.state.search && this.props.currentChannel !== prevProps.currentChannel @@ -152,7 +151,11 @@ export class Transactions extends Component { }, 60000); this.searchTransactionList(this.props.currentChannel); } - if(prevState.page!=this.state.page || prevState.rowsPerPage!=this.state.rowsPerPage || this.state.searchClick){ + if ( + prevState.page != this.state.page || + prevState.rowsPerPage != this.state.rowsPerPage || + this.state.searchClick + ) { this.setState({ searchClick: false }); this.handleSearch(); } @@ -176,22 +179,23 @@ export class Transactions extends Component { } searchTransactionList = async channel => { - let pageParams = { page: this.state.page + 1, size: this.state.rowsPerPage } + let pageParams = { page: this.state.page + 1, size: this.state.rowsPerPage }; let query = ''; if (this.state.queryFlag) { - query = this.state.from ? `from=${new Date(this.state.from).toString()}&to=${new Date( - this.state.to - ).toString()}` : ``; + query = this.state.from + ? `from=${new Date(this.state.from).toString()}&to=${new Date( + this.state.to + ).toString()}` + : ``; for (let i = 0; i < this.state.orgs.length; i++) { query += `&orgs=${this.state.orgs[i]}`; } this.setState({ queryFlag: false }); - } - else if (this.state.defaultQuery) { + } else if (this.state.defaultQuery) { query = ''; - this.setState({ defaultQuery: false }) + this.setState({ defaultQuery: false }); } else { - query = this.props.transactionListSearchQuery + query = this.props.transactionListSearchQuery; } let channelhash = this.props.currentChannel; if (channel !== undefined) { @@ -247,9 +251,13 @@ export class Transactions extends Component { const data = Object.assign({}, selection, { [row.index]: !val }); this.setState({ selection: data }); }; - handlePageChange = (_e,page)=>{this.setState({page:page})} - handleRowsChange = (e)=>{this.setState({page: 0, rowsPerPage: e.target.value});} - + handlePageChange = (_e, page) => { + this.setState({ page: page }); + }; + handleRowsChange = e => { + this.setState({ page: 0, rowsPerPage: e.target.value }); + }; + render() { const { classes } = this.props; const columnHeaders = [ @@ -377,8 +385,12 @@ export class Transactions extends Component { timeIntervals={5} maxDate={this.state.to} dateFormat="LLL" - popperPlacement='bottom' - popperModifiers={{ flip: { behavior: ["bottom"] }, preventOverflow: { enabled: false }, hide: { enabled: false } }} + popperPlacement="bottom" + popperModifiers={{ + flip: { behavior: ['bottom'] }, + preventOverflow: { enabled: false }, + hide: { enabled: false } + }} onChange={date => { if (date > this.state.to) { this.setState({ err: true, from: date }); @@ -397,8 +409,12 @@ export class Transactions extends Component { timeIntervals={5} minDate={this.state.from} dateFormat="LLL" - popperPlacement='bottom' - popperModifiers={{ flip: { behavior: ["bottom"] }, preventOverflow: { enabled: false }, hide: { enabled: false } }} + popperPlacement="bottom" + popperModifiers={{ + flip: { behavior: ['bottom'] }, + preventOverflow: { enabled: false }, + hide: { enabled: false } + }} onChange={date => { if (date < this.state.from) { this.setState({ err: true, to: date }); @@ -434,9 +450,14 @@ export class Transactions extends Component {