From 0e6b536021a22f8f8d1dd829ea4dce5734d11586 Mon Sep 17 00:00:00 2001 From: Atsushi Neki Date: Thu, 4 Jul 2019 00:54:39 +0000 Subject: [PATCH] BE-677 Ignoring style code for coverage purposes Signed-off-by: Atsushi Neki Change-Id: I8a339fbf849dc2fd03a307c4c2859eb439090eb8 --- .eslintrc.json | 1 + client/src/components/App/App.js | 1 + client/src/components/Charts/ChartStats.js | 381 +++---- client/src/components/Charts/OrgPieChart.js | 1 + client/src/components/Header/HeaderView.js | 1 + client/src/components/Lists/Blocks.js | 1014 ++++++++--------- client/src/components/Lists/TimelineStream.js | 262 ++--- client/src/components/Lists/Transactions.js | 786 ++++++------- client/src/components/Panels/AdminPanel.js | 194 ++-- client/src/components/Styled/DatePicker.js | 85 +- client/src/components/Styled/MultiSelect.js | 97 +- client/src/components/Styled/Table.js | 129 ++- client/src/components/View/DashboardView.js | 506 ++++---- 13 files changed, 1702 insertions(+), 1756 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index cdfc891cc..1f00f9dd0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -274,6 +274,7 @@ "hunspell", "hunspellchecker", "Hyperledger", + "istanbul", "javascript", "jsonwebtoken", "jsx", diff --git a/client/src/components/App/App.js b/client/src/components/App/App.js index 28816bc68..2b67ef384 100644 --- a/client/src/components/App/App.js +++ b/client/src/components/App/App.js @@ -21,6 +21,7 @@ import Login from '../Login'; import Private from '../Route'; +/* istanbul ignore next */ const styles = theme => { const { type } = theme.palette; const dark = type === 'dark'; diff --git a/client/src/components/Charts/ChartStats.js b/client/src/components/Charts/ChartStats.js index 6b37aeb55..07027891a 100644 --- a/client/src/components/Charts/ChartStats.js +++ b/client/src/components/Charts/ChartStats.js @@ -7,213 +7,212 @@ import compose from 'recompose/compose'; import { withStyles } from '@material-ui/core/styles'; import { connect } from 'react-redux'; import moment from 'moment-timezone'; -import { - TabContent, TabPane, Nav, NavItem, NavLink, -} from 'reactstrap'; +import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; import classnames from 'classnames'; import { chartSelectors, chartOperations } from '../../state/redux/charts'; import TimeChart from './TimeChart'; import { - blockPerHourType, - blockPerMinType, - currentChannelType, - getBlocksPerHourType, - getBlocksPerMinType, - getTransactionPerHourType, - getTransactionPerMinType, - transactionPerHourType, - transactionPerMinType, + blockPerHourType, + blockPerMinType, + currentChannelType, + getBlocksPerHourType, + getBlocksPerMinType, + getTransactionPerHourType, + getTransactionPerMinType, + transactionPerHourType, + transactionPerMinType } from '../types'; const { - blockPerHourSelector, - blockPerMinSelector, - currentChannelSelector, - transactionPerHourSelector, - transactionPerMinSelector, + blockPerHourSelector, + blockPerMinSelector, + currentChannelSelector, + transactionPerHourSelector, + transactionPerMinSelector } = chartSelectors; -const styles = (theme) => { - const { type } = theme.palette; - const dark = type === 'dark'; - return { - chart: { - color: dark ? '#ffffff' : undefined, - backgroundColor: dark ? '#453e68' : undefined, - }, - }; +/* istanbul ignore next */ +const styles = theme => { + const { type } = theme.palette; + const dark = type === 'dark'; + return { + chart: { + color: dark ? '#ffffff' : undefined, + backgroundColor: dark ? '#453e68' : undefined + } + }; }; export class ChartStats extends Component { - constructor(props) { - super(props); - this.state = { - activeTab: '1', - }; - } - - componentDidMount() { - this.interVal = setInterval(() => { - const { currentChannel } = this.props; - this.syncData(currentChannel); - }, 60000); - } - - componentWillUnmount() { - clearInterval(this.interVal); - } - - syncData = (currentChannel) => { - const { - getBlocksPerHour, - getBlocksPerMin, - getTransactionPerHour, - getTransactionPerMin, - } = this.props; - - getBlocksPerMin(currentChannel); - getBlocksPerHour(currentChannel); - getTransactionPerMin(currentChannel); - getTransactionPerHour(currentChannel); - }; - - timeDataSetup = (chartData = []) => { - let dataMax = 0; - const displayData = chartData.map((data) => { - if (parseInt(data.count, 10) > dataMax) { - dataMax = parseInt(data.count, 10); - } - - return { - datetime: moment(data.datetime) - .tz(moment.tz.guess()) - .format('h:mm A'), - count: data.count, - }; - }); - - dataMax += 5; - - return { - displayData, - dataMax, - }; - }; - - toggle = (tab) => { - this.setState({ - activeTab: tab, - }); - }; - - render() { - const { activeTab } = this.state; - const { - blockPerHour, - blockPerMin, - transactionPerHour, - transactionPerMin, - classes, - } = this.props; - - return ( -
- - - - - - - - - - - - - - - -
- ); - } + constructor(props) { + super(props); + this.state = { + activeTab: '1' + }; + } + + componentDidMount() { + this.interVal = setInterval(() => { + const { currentChannel } = this.props; + this.syncData(currentChannel); + }, 60000); + } + + componentWillUnmount() { + clearInterval(this.interVal); + } + + syncData = currentChannel => { + const { + getBlocksPerHour, + getBlocksPerMin, + getTransactionPerHour, + getTransactionPerMin + } = this.props; + + getBlocksPerMin(currentChannel); + getBlocksPerHour(currentChannel); + getTransactionPerMin(currentChannel); + getTransactionPerHour(currentChannel); + }; + + timeDataSetup = (chartData = []) => { + let dataMax = 0; + const displayData = chartData.map(data => { + if (parseInt(data.count, 10) > dataMax) { + dataMax = parseInt(data.count, 10); + } + + return { + datetime: moment(data.datetime) + .tz(moment.tz.guess()) + .format('h:mm A'), + count: data.count + }; + }); + + dataMax += 5; + + return { + displayData, + dataMax + }; + }; + + toggle = tab => { + this.setState({ + activeTab: tab + }); + }; + + render() { + const { activeTab } = this.state; + const { + blockPerHour, + blockPerMin, + transactionPerHour, + transactionPerMin, + classes + } = this.props; + + return ( +
+ + + + + + + + + + + + + + + +
+ ); + } } ChartStats.propTypes = { - blockPerHour: blockPerHourType.isRequired, - blockPerMin: blockPerMinType.isRequired, - currentChannel: currentChannelType.isRequired, - getBlocksPerHour: getBlocksPerHourType.isRequired, - getBlocksPerMin: getBlocksPerMinType.isRequired, - getTransactionPerHour: getTransactionPerHourType.isRequired, - getTransactionPerMin: getTransactionPerMinType.isRequired, - transactionPerHour: transactionPerHourType.isRequired, - transactionPerMin: transactionPerMinType.isRequired, + blockPerHour: blockPerHourType.isRequired, + blockPerMin: blockPerMinType.isRequired, + currentChannel: currentChannelType.isRequired, + getBlocksPerHour: getBlocksPerHourType.isRequired, + getBlocksPerMin: getBlocksPerMinType.isRequired, + getTransactionPerHour: getTransactionPerHourType.isRequired, + getTransactionPerMin: getTransactionPerMinType.isRequired, + transactionPerHour: transactionPerHourType.isRequired, + transactionPerMin: transactionPerMinType.isRequired }; export default compose( - withStyles(styles), - connect( - state => ({ - blockPerHour: blockPerHourSelector(state), - blockPerMin: blockPerMinSelector(state), - transactionPerHour: transactionPerHourSelector(state), - transactionPerMin: transactionPerMinSelector(state), - currentChannel: currentChannelSelector(state), - }), - { - getBlocksPerHour: chartOperations.blockPerHour, - getBlocksPerMin: chartOperations.blockPerMin, - getTransactionPerHour: chartOperations.transactionPerHour, - getTransactionPerMin: chartOperations.transactionPerMin, - }, - ), + withStyles(styles), + connect( + state => ({ + blockPerHour: blockPerHourSelector(state), + blockPerMin: blockPerMinSelector(state), + transactionPerHour: transactionPerHourSelector(state), + transactionPerMin: transactionPerMinSelector(state), + currentChannel: currentChannelSelector(state) + }), + { + getBlocksPerHour: chartOperations.blockPerHour, + getBlocksPerMin: chartOperations.blockPerMin, + getTransactionPerHour: chartOperations.transactionPerHour, + getTransactionPerMin: chartOperations.transactionPerMin + } + ) )(ChartStats); diff --git a/client/src/components/Charts/OrgPieChart.js b/client/src/components/Charts/OrgPieChart.js index 993f669ff..9131d030e 100644 --- a/client/src/components/Charts/OrgPieChart.js +++ b/client/src/components/Charts/OrgPieChart.js @@ -8,6 +8,7 @@ import { PieChart, Pie, Tooltip, Legend } from 'recharts'; import { sha256 } from 'js-sha256'; import { transactionByOrgType } from '../types'; +/* istanbul ignore next */ const styles = theme => { const { type } = theme.palette; const dark = type === 'dark'; diff --git a/client/src/components/Header/HeaderView.js b/client/src/components/Header/HeaderView.js index 0811e4ef8..639a4e15a 100644 --- a/client/src/components/Header/HeaderView.js +++ b/client/src/components/Header/HeaderView.js @@ -72,6 +72,7 @@ const { const { currentChannelSelector } = chartSelectors; const { channelsSelector } = tableSelectors; +/* istanbul ignore next */ const styles = theme => { const { type } = theme.palette; const dark = type === 'dark'; diff --git a/client/src/components/Lists/Blocks.js b/client/src/components/Lists/Blocks.js index c206aa855..21a1a08b3 100644 --- a/client/src/components/Lists/Blocks.js +++ b/client/src/components/Lists/Blocks.js @@ -16,550 +16,536 @@ import TransactionView from '../View/TransactionView'; import MultiSelect from '../Styled/MultiSelect'; import DatePicker from '../Styled/DatePicker'; import { - blockListType, - currentChannelType, - getTransactionType, - transactionType, + blockListType, + currentChannelType, + getTransactionType, + transactionType } from '../types'; -const styles = (theme) => { - const { type } = theme.palette; - const dark = type === 'dark'; - return { - hash: { - '&, & li, & ul': { - overflow: 'visible !important', - }, - }, - partialHash: { - textAlign: 'center', - position: 'relative !important', - '&:hover $fullHash': { - display: 'block', - position: 'absolute !important', - padding: '4px 4px', - backgroundColor: dark ? '#5e558e' : '#000000', - marginTop: -30, - marginLeft: -215, - borderRadius: 8, - color: '#ffffff', - opacity: dark ? 1 : undefined, - }, - '&:hover $lastFullHash': { - display: 'block', - position: 'absolute !important', - padding: '4px 4px', - backgroundColor: dark ? '#5e558e' : '#000000', - marginTop: -30, - marginLeft: -415, - borderRadius: 8, - color: '#ffffff', - opacity: dark ? 1 : undefined, - }, - }, - fullHash: { - display: 'none', - }, - lastFullHash: { - display: 'none', - }, - filter: { - width: '100%', - textAlign: 'center', - margin: '0px !important', - }, - filterButton: { - opacity: 0.8, - margin: 'auto', - width: '100% !important', - 'margin-bottom': '4px', - }, - searchButton: { - opacity: 0.8, - margin: 'auto', - width: '100% !important', - backgroundColor: dark ? undefined : '#086108', - 'margin-bottom': '4px', - }, - filterElement: { - textAlign: 'center', - display: 'flex', - padding: '0px !important', - '& > div': { - width: '100% !important', - marginTop: 20, - }, - '& .label': { - margin: '25px 10px 0px 10px', - }, - }, - }; +/* istanbul ignore next */ +const styles = theme => { + const { type } = theme.palette; + const dark = type === 'dark'; + return { + hash: { + '&, & li, & ul': { + overflow: 'visible !important' + } + }, + partialHash: { + textAlign: 'center', + position: 'relative !important', + '&:hover $fullHash': { + display: 'block', + position: 'absolute !important', + padding: '4px 4px', + backgroundColor: dark ? '#5e558e' : '#000000', + marginTop: -30, + marginLeft: -215, + borderRadius: 8, + color: '#ffffff', + opacity: dark ? 1 : undefined + }, + '&:hover $lastFullHash': { + display: 'block', + position: 'absolute !important', + padding: '4px 4px', + backgroundColor: dark ? '#5e558e' : '#000000', + marginTop: -30, + marginLeft: -415, + borderRadius: 8, + color: '#ffffff', + opacity: dark ? 1 : undefined + } + }, + fullHash: { + display: 'none' + }, + lastFullHash: { + display: 'none' + }, + filter: { + width: '100%', + textAlign: 'center', + margin: '0px !important' + }, + filterButton: { + opacity: 0.8, + margin: 'auto', + width: '100% !important', + 'margin-bottom': '4px' + }, + searchButton: { + opacity: 0.8, + margin: 'auto', + width: '100% !important', + backgroundColor: dark ? undefined : '#086108', + 'margin-bottom': '4px' + }, + filterElement: { + textAlign: 'center', + display: 'flex', + padding: '0px !important', + '& > div': { + width: '100% !important', + marginTop: 20 + }, + '& .label': { + margin: '25px 10px 0px 10px' + } + } + }; }; export class Blocks extends Component { - constructor(props) { - super(props); - this.state = { - dialogOpen: false, - dialogOpenBlockHash: false, - err: false, - search: false, - to: moment(), - orgs: [], - options: [], - filtered: [], - sorted: [], - from: moment().subtract(1, 'days'), - blockHash: {}, - }; - } + constructor(props) { + super(props); + this.state = { + dialogOpen: false, + dialogOpenBlockHash: false, + err: false, + search: false, + to: moment(), + orgs: [], + options: [], + filtered: [], + sorted: [], + from: moment().subtract(1, 'days'), + blockHash: {} + }; + } - componentDidMount() { - const { blockList } = this.props; - const selection = {}; - blockList.forEach((element) => { - selection[element.blocknum] = false; - }); - const opts = []; - this.props.transactionByOrg.forEach((val) => { - opts.push({ label: val.creator_msp_id, value: val.creator_msp_id }); - }); - this.setState({ selection, options: opts }); - } + componentDidMount() { + const { blockList } = this.props; + const selection = {}; + blockList.forEach(element => { + selection[element.blocknum] = false; + }); + const opts = []; + this.props.transactionByOrg.forEach(val => { + opts.push({ label: val.creator_msp_id, value: val.creator_msp_id }); + }); + this.setState({ selection, options: opts }); + } - componentWillReceiveProps(nextProps) { - if ( - this.state.search - && nextProps.currentChannel !== this.props.currentChannel - ) { - if (this.interval !== undefined) { - clearInterval(this.interval); - } - this.interval = setInterval(() => { - this.searchBlockList(nextProps.currentChannel); - }, 60000); - this.searchBlockList(nextProps.currentChannel); - } - } + componentWillReceiveProps(nextProps) { + if ( + this.state.search && + nextProps.currentChannel !== this.props.currentChannel + ) { + if (this.interval !== undefined) { + clearInterval(this.interval); + } + this.interval = setInterval(() => { + this.searchBlockList(nextProps.currentChannel); + }, 60000); + this.searchBlockList(nextProps.currentChannel); + } + } - componentWillUnmount() { - clearInterval(this.interVal); - } + componentWillUnmount() { + clearInterval(this.interVal); + } - handleCustomRender(selected, options) { - if (selected.length === 0) { - return 'Select Orgs'; - } - if (selected.length === options.length) { - return 'All Orgs Selected'; - } + handleCustomRender(selected, options) { + if (selected.length === 0) { + return 'Select Orgs'; + } + if (selected.length === options.length) { + return 'All Orgs Selected'; + } - return selected.join(','); - } + return selected.join(','); + } - searchBlockList = async (channel) => { - let query = `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]}`; - } - let channelhash = this.props.currentChannel; - if (channel !== undefined) { - channelhash = channel; - } - await this.props.getBlockListSearch(channelhash, query); - }; + searchBlockList = async channel => { + let query = `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]}`; + } + let channelhash = this.props.currentChannel; + if (channel !== undefined) { + channelhash = channel; + } + await this.props.getBlockListSearch(channelhash, query); + }; - handleDialogOpen = async (tid) => { - const { getTransaction, currentChannel } = this.props; - await getTransaction(currentChannel, tid); - this.setState({ dialogOpen: true }); - }; + handleDialogOpen = async tid => { + const { getTransaction, currentChannel } = this.props; + await getTransaction(currentChannel, tid); + this.setState({ dialogOpen: true }); + }; - handleMultiSelect = (value) => { - this.setState({ orgs: value }); - }; + handleMultiSelect = value => { + this.setState({ orgs: value }); + }; - handleDialogClose = () => { - this.setState({ dialogOpen: false }); - }; + handleDialogClose = () => { + this.setState({ dialogOpen: false }); + }; - handleSearch = async () => { - if (this.interval !== undefined) { - clearInterval(this.interval); - } - this.interval = setInterval(() => { - this.searchBlockList(); - }, 60000); - await this.searchBlockList(); - this.setState({ search: true }); - }; + handleSearch = async () => { + if (this.interval !== undefined) { + clearInterval(this.interval); + } + this.interval = setInterval(() => { + this.searchBlockList(); + }, 60000); + await this.searchBlockList(); + this.setState({ search: true }); + }; - handleClearSearch = () => { - if (this.interval !== undefined) { - clearInterval(this.interval); - } - this.setState({ - search: false, - to: moment(), - orgs: [], - err: false, - from: moment().subtract(1, 'days'), - }); - }; + handleClearSearch = () => { + if (this.interval !== undefined) { + clearInterval(this.interval); + } + this.setState({ + search: false, + to: moment(), + orgs: [], + err: false, + from: moment().subtract(1, 'days') + }); + }; - handleDialogOpenBlockHash = (blockHash) => { - const blockList = this.state.search - ? this.props.blockListSearch - : this.props.blockList; - const data = find(blockList, item => item.blockhash === blockHash); + handleDialogOpenBlockHash = blockHash => { + const blockList = this.state.search + ? this.props.blockListSearch + : this.props.blockList; + const data = find(blockList, item => item.blockhash === blockHash); - this.setState({ - dialogOpenBlockHash: true, - blockHash: data, - }); - }; + this.setState({ + dialogOpenBlockHash: true, + blockHash: data + }); + }; - handleDialogCloseBlockHash = () => { - this.setState({ dialogOpenBlockHash: false }); - }; + handleDialogCloseBlockHash = () => { + this.setState({ dialogOpenBlockHash: false }); + }; - handleEye = (row, val) => { - const { selection } = this.state; - const data = Object.assign({}, selection, { [row.index]: !val }); - this.setState({ selection: data }); - }; + handleEye = (row, val) => { + const { selection } = this.state; + const data = Object.assign({}, selection, { [row.index]: !val }); + this.setState({ selection: data }); + }; - reactTableSetup = classes => [ - { - Header: 'Block Number', - accessor: 'blocknum', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['blocknum'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - width: 150, - }, - { - Header: 'Channel Name', - accessor: 'channelname', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['channelname'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Number of Tx', - accessor: 'txcount', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['txcount'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - width: 150, - }, - { - Header: 'Data Hash', - accessor: 'datahash', - className: classes.hash, - Cell: row => ( - -
    -
    - {row.value} -
    - {' '} - {row.value.slice(0, 6)} - {' '} - {!row.value ? '' : '... '} -
- {' '} - - ), - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['datahash'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Block Hash', - accessor: 'blockhash', - className: classes.hash, - Cell: row => ( - - this.handleDialogOpenBlockHash(row.value)} - href="#/blocks" - > -
- {row.value} -
- {' '} - {row.value.slice(0, 6)} - {' '} - {!row.value ? '' : '... '} - - {' '} - - ), - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['blockhash'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Previous Hash', - accessor: 'prehash', - className: classes.hash, - Cell: row => ( - -
    this.handleDialogOpenBlockHash(row.value)} - href="#/blocks" - > -
    - {row.value} -
    - {' '} - {row.value.slice(0, 6)} - {' '} - {!row.value ? '' : '... '} -
- {' '} - - ), - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['prehash'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - width: 150, - }, - { - Header: 'Transactions', - accessor: 'txhash', - className: classes.hash, - Cell: row => ( - - ), - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['txhash'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - ]; + reactTableSetup = classes => [ + { + Header: 'Block Number', + accessor: 'blocknum', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['blocknum'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true, + width: 150 + }, + { + Header: 'Channel Name', + accessor: 'channelname', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['channelname'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Number of Tx', + accessor: 'txcount', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['txcount'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true, + width: 150 + }, + { + Header: 'Data Hash', + accessor: 'datahash', + className: classes.hash, + Cell: row => ( + +
    +
    + {row.value} +
    {' '} + {row.value.slice(0, 6)} {!row.value ? '' : '... '} +
{' '} + + ), + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['datahash'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Block Hash', + accessor: 'blockhash', + className: classes.hash, + Cell: row => ( + + this.handleDialogOpenBlockHash(row.value)} + href="#/blocks" + > +
+ {row.value} +
{' '} + {row.value.slice(0, 6)} {!row.value ? '' : '... '} + {' '} + + ), + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['blockhash'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Previous Hash', + accessor: 'prehash', + className: classes.hash, + Cell: row => ( + +
    this.handleDialogOpenBlockHash(row.value)} + href="#/blocks" + > +
    + {row.value} +
    {' '} + {row.value.slice(0, 6)} {!row.value ? '' : '... '} +
{' '} + + ), + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['prehash'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true, + width: 150 + }, + { + Header: 'Transactions', + accessor: 'txhash', + className: classes.hash, + Cell: row => ( + + ), + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['txhash'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + } + ]; - render() { - const blockList = this.state.search - ? this.props.blockListSearch - : this.props.blockList; - const { transaction, classes } = this.props; - const { blockHash, dialogOpen, dialogOpenBlockHash } = this.state; - return ( -
-
-
- - { - if (date > this.state.to) { - this.setState({ err: true, from: date }); - } else { - this.setState({ from: date, err: false }); - } - }} - /> -
-
- - { - if (date > this.state.from) { - this.setState({ to: date, err: false }); - } else { - this.setState({ err: true, to: date }); - } - }} - > -
- {this.state.err && ( - - {' '} - From date should be less than To date - - )} -
- -
-
- { - this.handleMultiSelect(value); - }} - /> -
-
- -
-
- -
-
- -
-
- { - this.setState({ sorted }); - }} - filtered={this.state.filtered} - onFilteredChange={(filtered) => { - this.setState({ filtered }); - }} - minRows={0} - style={{ height: '750px' }} - showPagination={!(blockList.length < 5)} - /> + render() { + const blockList = this.state.search + ? this.props.blockListSearch + : this.props.blockList; + const { transaction, classes } = this.props; + const { blockHash, dialogOpen, dialogOpenBlockHash } = this.state; + return ( +
+
+
+ + { + if (date > this.state.to) { + this.setState({ err: true, from: date }); + } else { + this.setState({ from: date, err: false }); + } + }} + /> +
+
+ + { + if (date > this.state.from) { + this.setState({ to: date, err: false }); + } else { + this.setState({ err: true, to: date }); + } + }} + > +
+ {this.state.err && ( + + {' '} + From date should be less than To date + + )} +
+ +
+
+ { + this.handleMultiSelect(value); + }} + /> +
+
+ +
+
+ +
+
+ +
+
+ { + this.setState({ sorted }); + }} + filtered={this.state.filtered} + onFilteredChange={filtered => { + this.setState({ filtered }); + }} + minRows={0} + style={{ height: '750px' }} + showPagination={!(blockList.length < 5)} + /> - - - + + + - - - -
- ); - } + + + +
+ ); + } } Blocks.propTypes = { - blockList: blockListType.isRequired, - currentChannel: currentChannelType.isRequired, - getTransaction: getTransactionType.isRequired, - transaction: transactionType, + blockList: blockListType.isRequired, + currentChannel: currentChannelType.isRequired, + getTransaction: getTransactionType.isRequired, + transaction: transactionType }; Blocks.defaultProps = { - transaction: null, + transaction: null }; export default withStyles(styles)(Blocks); diff --git a/client/src/components/Lists/TimelineStream.js b/client/src/components/Lists/TimelineStream.js index 37dd863a5..4e70546a3 100644 --- a/client/src/components/Lists/TimelineStream.js +++ b/client/src/components/Lists/TimelineStream.js @@ -15,158 +15,136 @@ import BlockView from '../View/BlockView'; import blockOpen from '../../static/images/blockOpen.png'; import { blockListType, notificationsType } from '../types'; -const styles = (theme) => { - const { type } = theme.palette; - const dark = type === 'dark'; - return { - scrollable: { - height: 300, - overflowY: 'scroll', - }, - text: { - color: dark ? '#ffffff' : undefined, - '& .badge-secondary': { - backgroundColor: '#5e548f', - }, - }, - event: { - wordWrap: 'break-word', - width: '90% !important', - backgroundColor: dark ? '#423b5f !important' : undefined, - '& p': { - color: dark ? '#ffffff' : undefined, - }, - '& > div': { - color: dark ? 'red' : undefined, - }, - }, - open: { - height: 35, - marginTop: -10, - backgroundColor: 'transparent', - }, - }; +/* istanbul ignore next */ +const styles = theme => { + const { type } = theme.palette; + const dark = type === 'dark'; + return { + scrollable: { + height: 300, + overflowY: 'scroll' + }, + text: { + color: dark ? '#ffffff' : undefined, + '& .badge-secondary': { + backgroundColor: '#5e548f' + } + }, + event: { + wordWrap: 'break-word', + width: '90% !important', + backgroundColor: dark ? '#423b5f !important' : undefined, + '& p': { + color: dark ? '#ffffff' : undefined + }, + '& > div': { + color: dark ? 'red' : undefined + } + }, + open: { + height: 35, + marginTop: -10, + backgroundColor: 'transparent' + } + }; }; export class TimelineStream extends Component { - constructor(props) { - super(props); - this.state = { - dialogOpenBlockHash: false, - blockHash: {}, - }; - } + constructor(props) { + super(props); + this.state = { + dialogOpenBlockHash: false, + blockHash: {} + }; + } - handleDialogOpenBlockHash = (rowValue) => { - const { blockList } = this.props; - const data = find(blockList, item => item.blockhash === rowValue); - this.setState({ - dialogOpenBlockHash: true, - blockHash: data, - }); - }; + handleDialogOpenBlockHash = rowValue => { + const { blockList } = this.props; + const data = find(blockList, item => item.blockhash === rowValue); + this.setState({ + dialogOpenBlockHash: true, + blockHash: data + }); + }; - handleDialogCloseBlockHash = () => { - this.setState({ dialogOpenBlockHash: false }); - }; + handleDialogCloseBlockHash = () => { + this.setState({ dialogOpenBlockHash: false }); + }; - render() { - const { notifications, classes } = this.props; - const { blockHash, dialogOpenBlockHash } = this.state; - return ( -
-
- - {notifications.map(item => ( - } - iconColor="#0D3799" - container="card" - className={classes.event} - titleStyle={{ fontWeight: 'bold' }} - style={{ width: '65%' }} - cardHeaderStyle={{ - backgroundColor: '#6283D0', - fontSize: '13pt', - }} - contentStyle={{ - backgroundColor: 'transparent', - }} - buttons={( - this.handleDialogOpenBlockHash(item.blockhash) - } - > - View Blocks - -)} - > - - - {' '} -Channel Name: - - {' '} - {item.channelName} - {' '} -
- - {' '} -Datahash: - - {' '} - {item.datahash} - {' '} -
- - {' '} -Number of Tx: - - {' '} - {item.txcount} - -
- - - -
- - ))} - -
+ render() { + const { notifications, classes } = this.props; + const { blockHash, dialogOpenBlockHash } = this.state; + return ( +
+
+ + {notifications.map(item => ( + } + iconColor="#0D3799" + container="card" + className={classes.event} + titleStyle={{ fontWeight: 'bold' }} + style={{ width: '65%' }} + cardHeaderStyle={{ + backgroundColor: '#6283D0', + fontSize: '13pt' + }} + contentStyle={{ + backgroundColor: 'transparent' + }} + buttons={( + this.handleDialogOpenBlockHash(item.blockhash)} + > + View Blocks + + )} + > + + Channel Name: {item.channelName}{' '} +
+ Datahash: {item.datahash}
+ Number of Tx: {item.txcount} + +
+ + + +
+ + ))} + +
- - - -
- ); - } + + + +
+ ); + } } TimelineStream.propTypes = { - blockList: blockListType.isRequired, - notifications: notificationsType.isRequired, + blockList: blockListType.isRequired, + notifications: notificationsType.isRequired }; export default withStyles(styles)(TimelineStream); diff --git a/client/src/components/Lists/Transactions.js b/client/src/components/Lists/Transactions.js index 50d98e9d0..07c93c364 100644 --- a/client/src/components/Lists/Transactions.js +++ b/client/src/components/Lists/Transactions.js @@ -14,424 +14,426 @@ import DatePicker from '../Styled/DatePicker'; import MultiSelect from '../Styled/MultiSelect'; import { - currentChannelType, - getTransactionType, - transactionListType, - transactionType, + currentChannelType, + getTransactionType, + transactionListType, + transactionType } from '../types'; -const styles = (theme) => { - const { type } = theme.palette; - const dark = type === 'dark'; - return { - hash: { - '&, & li': { - overflow: 'visible !important', - }, - }, - partialHash: { - textAlign: 'center', - position: 'relative !important', - '&:hover $lastFullHash': { - marginLeft: -400, - }, - '&:hover $fullHash': { - display: 'block', - position: 'absolute !important', - padding: '4px 4px', - backgroundColor: dark ? '#5e558e' : '#000000', - marginTop: -30, - marginLeft: -215, - borderRadius: 8, - color: '#ffffff', - opacity: dark ? 1 : undefined, - }, - }, - fullHash: { - display: 'none', - }, - lastFullHash: {}, - filter: { - width: '100%', - textAlign: 'center', - margin: '0px !important', - }, - filterButton: { - opacity: 0.8, - margin: 'auto', - width: '100% !important', - 'margin-bottom': '4px', - }, - searchButton: { - opacity: 0.8, - margin: 'auto', - width: '100% !important', - backgroundColor: dark ? undefined : '#086108', - 'margin-bottom': '4px', - }, - filterElement: { - textAlign: 'center', - display: 'flex', - padding: '0px !important', - '& > div': { - width: '100% !important', - marginTop: 20, - }, - '& .label': { - margin: '25px 10px 0px 10px', - }, - }, - }; +/* istanbul ignore next */ +const styles = theme => { + const { type } = theme.palette; + const dark = type === 'dark'; + return { + hash: { + '&, & li': { + overflow: 'visible !important' + } + }, + partialHash: { + textAlign: 'center', + position: 'relative !important', + '&:hover $lastFullHash': { + marginLeft: -400 + }, + '&:hover $fullHash': { + display: 'block', + position: 'absolute !important', + padding: '4px 4px', + backgroundColor: dark ? '#5e558e' : '#000000', + marginTop: -30, + marginLeft: -215, + borderRadius: 8, + color: '#ffffff', + opacity: dark ? 1 : undefined + } + }, + fullHash: { + display: 'none' + }, + lastFullHash: {}, + filter: { + width: '100%', + textAlign: 'center', + margin: '0px !important' + }, + filterButton: { + opacity: 0.8, + margin: 'auto', + width: '100% !important', + 'margin-bottom': '4px' + }, + searchButton: { + opacity: 0.8, + margin: 'auto', + width: '100% !important', + backgroundColor: dark ? undefined : '#086108', + 'margin-bottom': '4px' + }, + filterElement: { + textAlign: 'center', + display: 'flex', + padding: '0px !important', + '& > div': { + width: '100% !important', + marginTop: 20 + }, + '& .label': { + margin: '25px 10px 0px 10px' + } + } + }; }; export class Transactions extends Component { - constructor(props) { - super(props); - this.state = { - dialogOpen: false, - search: false, - to: moment(), - orgs: [], - options: [], - filtered: [], - sorted: [], - err: false, - from: moment().subtract(1, 'days'), - }; - } + constructor(props) { + super(props); + this.state = { + dialogOpen: false, + search: false, + to: moment(), + orgs: [], + options: [], + filtered: [], + sorted: [], + err: false, + from: moment().subtract(1, 'days') + }; + } - componentDidMount() { - const { transactionList } = this.props; - const selection = {}; - transactionList.forEach((element) => { - selection[element.blocknum] = false; - }); - const opts = []; - this.props.transactionByOrg.forEach((val) => { - opts.push({ label: val.creator_msp_id, value: val.creator_msp_id }); - }); - this.setState({ selection, options: opts }); - } + componentDidMount() { + const { transactionList } = this.props; + const selection = {}; + transactionList.forEach(element => { + selection[element.blocknum] = false; + }); + const opts = []; + this.props.transactionByOrg.forEach(val => { + opts.push({ label: val.creator_msp_id, value: val.creator_msp_id }); + }); + this.setState({ selection, options: opts }); + } - componentWillReceiveProps(nextProps) { - if ( - this.state.search - && nextProps.currentChannel !== this.props.currentChannel - ) { - if (this.interval !== undefined) { - clearInterval(this.interval); - } - this.interval = setInterval(() => { - this.searchTransactionList(nextProps.currentChannel); - }, 60000); - this.searchTransactionList(nextProps.currentChannel); - } - } + componentWillReceiveProps(nextProps) { + if ( + this.state.search && + nextProps.currentChannel !== this.props.currentChannel + ) { + if (this.interval !== undefined) { + clearInterval(this.interval); + } + this.interval = setInterval(() => { + this.searchTransactionList(nextProps.currentChannel); + }, 60000); + this.searchTransactionList(nextProps.currentChannel); + } + } - componentWillUnmount() { - clearInterval(this.interVal); - } + componentWillUnmount() { + clearInterval(this.interVal); + } - handleCustomRender(selected, options) { - if (selected.length === 0) { - return 'Select Orgs'; - } - if (selected.length === options.length) { - return 'All Orgs Selected'; - } + handleCustomRender(selected, options) { + if (selected.length === 0) { + return 'Select Orgs'; + } + if (selected.length === options.length) { + return 'All Orgs Selected'; + } - return selected.join(','); - } + return selected.join(','); + } - searchTransactionList = async (channel) => { - let query = `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]}`; - } - let channelhash = this.props.currentChannel; - if (channel !== undefined) { - channelhash = channel; - } - await this.props.getTransactionListSearch(channelhash, query); - }; + searchTransactionList = async channel => { + let query = `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]}`; + } + let channelhash = this.props.currentChannel; + if (channel !== undefined) { + channelhash = channel; + } + await this.props.getTransactionListSearch(channelhash, query); + }; - handleDialogOpen = async (tid) => { - const { currentChannel, getTransaction } = this.props; - await getTransaction(currentChannel, tid); - this.setState({ dialogOpen: true }); - }; + handleDialogOpen = async tid => { + const { currentChannel, getTransaction } = this.props; + await getTransaction(currentChannel, tid); + this.setState({ dialogOpen: true }); + }; - handleMultiSelect = (value) => { - this.setState({ orgs: value }); - }; + handleMultiSelect = value => { + this.setState({ orgs: value }); + }; - handleDialogClose = () => { - this.setState({ dialogOpen: false }); - }; + handleDialogClose = () => { + this.setState({ dialogOpen: false }); + }; - handleSearch = async () => { - if (this.interval !== undefined) { - clearInterval(this.interval); - } - this.interval = setInterval(() => { - this.searchTransactionList(); - }, 60000); - await this.searchTransactionList(); - this.setState({ search: true }); - }; + handleSearch = async () => { + if (this.interval !== undefined) { + clearInterval(this.interval); + } + this.interval = setInterval(() => { + this.searchTransactionList(); + }, 60000); + await this.searchTransactionList(); + this.setState({ search: true }); + }; - handleClearSearch = () => { - this.setState({ - search: false, - to: moment(), - orgs: [], - err: false, - from: moment().subtract(1, 'days'), - }); - }; + handleClearSearch = () => { + this.setState({ + search: false, + to: moment(), + orgs: [], + err: false, + from: moment().subtract(1, 'days') + }); + }; - handleEye = (row, val) => { - const { selection } = this.state; - const data = Object.assign({}, selection, { [row.index]: !val }); - this.setState({ selection: data }); - }; + handleEye = (row, val) => { + const { selection } = this.state; + const data = Object.assign({}, selection, { [row.index]: !val }); + this.setState({ selection: data }); + }; - render() { - const { classes } = this.props; - const columnHeaders = [ - { - Header: 'Creator', - accessor: 'creator_msp_id', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['creator_msp_id'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Channel Name', - accessor: 'channelname', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['channelname'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Tx Id', - accessor: 'txhash', - className: classes.hash, - Cell: row => ( - - this.handleDialogOpen(row.value)} - href="#/transactions" - > -
- {row.value} -
- {' '} - {row.value.slice(0, 6)} - {!row.value ? '' : '... '} - - - ), - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['txhash'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Type', - accessor: 'type', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['type'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Chaincode', - accessor: 'chaincodename', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['chaincodename'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - { - Header: 'Timestamp', - accessor: 'createdt', - filterMethod: (filter, rows) => matchSorter( - rows, - filter.value, - { keys: ['createdt'] }, - { threshold: matchSorter.rankings.SIMPLEMATCH }, - ), - filterAll: true, - }, - ]; + render() { + const { classes } = this.props; + const columnHeaders = [ + { + Header: 'Creator', + accessor: 'creator_msp_id', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['creator_msp_id'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Channel Name', + accessor: 'channelname', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['channelname'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Tx Id', + accessor: 'txhash', + className: classes.hash, + Cell: row => ( + + this.handleDialogOpen(row.value)} + href="#/transactions" + > +
+ {row.value} +
{' '} + {row.value.slice(0, 6)} + {!row.value ? '' : '... '} + + + ), + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['txhash'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Type', + accessor: 'type', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['type'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Chaincode', + accessor: 'chaincodename', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['chaincodename'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + }, + { + Header: 'Timestamp', + accessor: 'createdt', + filterMethod: (filter, rows) => + matchSorter( + rows, + filter.value, + { keys: ['createdt'] }, + { threshold: matchSorter.rankings.SIMPLEMATCH } + ), + filterAll: true + } + ]; - const transactionList = this.state.search - ? this.props.transactionListSearch - : this.props.transactionList; - const { transaction } = this.props; - const { dialogOpen } = this.state; - return ( -
-
-
- - { - if (date > this.state.to) { - this.setState({ err: true, from: date }); - } else { - this.setState({ from: date, err: false }); - } - }} - /> -
-
- - { - if (date > this.state.from) { - this.setState({ to: date, err: false }); - } else { - this.setState({ err: true, to: date }); - } - }} - > -
- {this.state.err && ( - - {' '} - From date should be less than To date - - )} -
- -
-
- { - this.handleMultiSelect(value); - }} - /> -
-
- -
-
- -
-
- -
-
- { - this.setState({ sorted }); - }} - filtered={this.state.filtered} - onFilteredChange={(filtered) => { - this.setState({ filtered }); - }} - minRows={0} - style={{ height: '750px' }} - showPagination={!(transactionList.length < 5)} - /> + const transactionList = this.state.search + ? this.props.transactionListSearch + : this.props.transactionList; + const { transaction } = this.props; + const { dialogOpen } = this.state; + return ( +
+
+
+ + { + if (date > this.state.to) { + this.setState({ err: true, from: date }); + } else { + this.setState({ from: date, err: false }); + } + }} + /> +
+
+ + { + if (date > this.state.from) { + this.setState({ to: date, err: false }); + } else { + this.setState({ err: true, to: date }); + } + }} + > +
+ {this.state.err && ( + + {' '} + From date should be less than To date + + )} +
+ +
+
+ { + this.handleMultiSelect(value); + }} + /> +
+
+ +
+
+ +
+
+ +
+
+ { + this.setState({ sorted }); + }} + filtered={this.state.filtered} + onFilteredChange={filtered => { + this.setState({ filtered }); + }} + minRows={0} + style={{ height: '750px' }} + showPagination={!(transactionList.length < 5)} + /> - - - -
- ); - } + + + +
+ ); + } } Transactions.propTypes = { - currentChannel: currentChannelType.isRequired, - getTransaction: getTransactionType.isRequired, - transaction: transactionType, - transactionList: transactionListType.isRequired, + currentChannel: currentChannelType.isRequired, + getTransaction: getTransactionType.isRequired, + transaction: transactionType, + transactionList: transactionListType.isRequired }; Transactions.defaultProps = { - transaction: null, + transaction: null }; export default withStyles(styles)(Transactions); diff --git a/client/src/components/Panels/AdminPanel.js b/client/src/components/Panels/AdminPanel.js index f27bc510d..cc15f1301 100644 --- a/client/src/components/Panels/AdminPanel.js +++ b/client/src/components/Panels/AdminPanel.js @@ -7,8 +7,8 @@ import compose from 'recompose/compose'; import { withStyles } from '@material-ui/core/styles'; import { connect } from 'react-redux'; import ExpansionPanel, { - ExpansionPanelSummary, - ExpansionPanelDetails, + ExpansionPanelSummary, + ExpansionPanelDetails } from '@material-ui/core/ExpansionPanel'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Typography from '@material-ui/core/Typography'; @@ -18,86 +18,80 @@ import { FormControl, FormHelperText } from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; import ChannelForm from '../Forms/ChannelForm'; -const styles = (theme) => { - const { type } = theme.palette; - const dark = type === 'dark'; - return { - current: { - color: dark ? 'rgb(42, 173, 230)' : undefined, - }, - panel: { - color: dark ? '#ffffff' : undefined, - backgroundColor: dark ? '#3c3558' : undefined, - }, - channel: { - width: 200, - }, - }; +/* istanbul ignore next */ +const styles = theme => { + const { type } = theme.palette; + const dark = type === 'dark'; + return { + current: { + color: dark ? 'rgb(42, 173, 230)' : undefined + }, + panel: { + color: dark ? '#ffffff' : undefined, + backgroundColor: dark ? '#3c3558' : undefined + }, + channel: { + width: 200 + } + }; }; class AdminPanel extends Component { - handleChange = () => {}; + handleChange = () => {}; - render() { - const { classes } = this.props; - return ( -
- - - {' '} -ADMIN PANEL - - - } - className={classes.panel} - > - - MANAGE CHANNEL - {' '} - - - {this.props.channel.currentChannel} - {' '} -
- - - - {/* + render() { + const { classes } = this.props; + return ( +
+ + ADMIN PANEL + + + } + className={classes.panel} + > + + MANAGE CHANNEL{' '} + + + {this.props.channel.currentChannel}
+ + + + {/* Select Channel */} -
- - - - select a channel - - -
- {/*
+
+ + + + select a channel + + +
+ {/*