src/features/core/components/CoreIndex/CoreIndex.jsx

   1 import { chainClient } from 'utility/environment'
   2 import { connect } from 'react-redux'
   3 import componentClassNames from 'utility/componentClassNames'
   4 import { PageContent, ErrorBanner, PageTitle } from 'features/shared/components'
   5 import React from 'react'
   6 import styles from './CoreIndex.scss'
   7 import testnetUtils from 'features/testnet/utils'
   8 import { docsRoot } from 'utility/environment'
   9
  10 class CoreIndex extends React.Component {
  11   constructor(props) {
  12     super(props)
  13     this.state = {}
  14     this.deleteClick = this.deleteClick.bind(this)
  15   }
  16
  17   deleteClick() {
  18     if (!window.confirm('Are you sure you want to delete all data on this core?')) {
  19       return
  20     }
  21
  22     this.setState({deleteDisabled: true})
  23
  24     chainClient().config.reset(true).then(() => {
  25       // TODO: Use Redux state reset and nav action instead of window.location.
  26       // Also, move confirmation message to a bonafide flash div. alert() in a
  27       // browser microtask is going away. cf https://www.chromestatus.com/features/5647113010544640
  28       setTimeout(function(){
  29         window.location.href = '/'
  30       }, 500)
  31     }).catch((err) => {
  32       this.setState({
  33         deleteError: err,
  34         deleteDisabled: false,
  35       })
  36     })
  37   }
  38
  39   render() {
  40     const {
  41       onTestnet,
  42       testnetBlockchainMismatch,
  43       testnetNetworkMismatch,
  44       testnetNextReset,
  45     } = this.props
  46
  47     let generatorUrl
  48     if (this.props.core.generator) {
  49       generatorUrl = window.location.origin
  50     } else if (onTestnet) {
  51       generatorUrl = <span>
  52         {this.props.core.generatorUrl}
  53         &nbsp;
  54         <span className='label label-primary'>Chain Testnet</span>
  55       </span>
  56     } else {
  57       generatorUrl = this.props.core.generatorUrl
  58     }
  59
  60     let configBlock = (
  61       <div className={[styles.left, styles.col].join(' ')}>
  62         <div>
  63           <h4>Configuration</h4>
  64           <table className={styles.table}>
  65             <tbody>
  66               <tr>
  67                 <td className={styles.row_label}>Core type:</td>
  68                 <td>{this.props.core.coreType}</td>
  69               </tr>
  70               <tr>
  71                 <td className={styles.row_label}>Setup time:</td>
  72                 <td>{this.props.core.configuredAt}</td>
  73               </tr>
  74               <tr>
  75                 <td className={styles.row_label}>Version:</td>
  76                 <td><code>{this.props.core.version}</code></td>
  77               </tr>
  78               <tr>
  79                 <td className={styles.row_label}>MockHSM enabled:</td>
  80                 <td><code>{this.props.core.mockhsm.toString()}</code></td>
  81               </tr>
  82               <tr>
  83                 <td className={styles.row_label}>Localhost auth:</td>
  84                 <td><code>{this.props.core.localhostAuth.toString()}</code></td>
  85               </tr>
  86               <tr>
  87                 <td className={styles.row_label}>Reset enabled:</td>
  88                 <td><code>{this.props.core.reset.toString()}</code></td>
  89               </tr>
  90               <tr>
  91                 <td className={styles.row_label}>Non-TLS HTTP requests enabled:</td>
  92                 <td><code>{this.props.core.httpOk.toString()}</code></td>
  93               </tr>
  94               <tr>
  95                 <td colSpan={2}><hr /></td>
  96               </tr>
  97               <tr>
  98                 <td className={styles.row_label}>Generator URL:</td>
  99                 <td>{generatorUrl}</td>
 100               </tr>
 101               {onTestnet && !!testnetNextReset &&
 102                 <tr>
 103                   <td className={styles.row_label}>Next Chain Testnet data reset:</td>
 104                   <td>{testnetNextReset.toString()}</td>
 105                 </tr>}
 106               {!this.props.core.generator &&
 107                 <tr>
 108                   <td className={styles.row_label}>Generator Access Token:</td>
 109                   <td><code>{this.props.core.generatorAccessToken}</code></td>
 110                 </tr>}
 111               <tr>
 112                 <td className={styles.row_label}>Blockchain ID:</td>
 113                 <td><code className={styles.block_hash}>{this.props.core.blockchainId}</code></td>
 114               </tr>
 115             </tbody>
 116           </table>
 117         </div>
 118       </div>
 119     )
 120
 121     let testnetErr
 122     if (onTestnet) {
 123       if (testnetBlockchainMismatch) {
 124         testnetErr = 'Chain Testnet has been reset. Please reset your core below.'
 125       } else if (testnetNetworkMismatch) {
 126         testnetErr = {message: <span>This core is no longer compatible with Chain Testnet. <a href={`${docsRoot}/core/get-started/install`} target='_blank'>Please upgrade Chain Core</a>.</span>}
 127       }
 128     }
 129
 130     let networkStatusBlock = (
 131       <div className={[styles.right, styles.col].join(' ')}>
 132         <div>
 133           <h4>Network status</h4>
 134
 135           <table className={styles.table}>
 136             <tbody>
 137               <tr>
 138                 <td className={styles.row_label}>Generator block:</td>
 139                 <td className={styles.row_value}>{this.props.core.generatorBlockHeight}</td>
 140               </tr>
 141               <tr>
 142                 <td className={styles.row_label}>Local block:</td>
 143                 <td className={styles.row_value}>{this.props.core.blockHeight}</td>
 144               </tr>
 145               <tr>
 146                 <td className={styles.row_label}>Replication lag:</td>
 147                 <td className={`${styles.replication_lag} ${styles[this.props.core.replicationLagClass]}`}>
 148                   {this.props.core.replicationLag === null ? '???' : this.props.core.replicationLag}
 149                 </td>
 150               </tr>
 151             </tbody>
 152           </table>
 153
 154           {testnetErr && <ErrorBanner title='Chain Testnet error' error={testnetErr} />}
 155         </div>
 156       </div>
 157     )
 158
 159     let resetDataBlock = (
 160       <div className='row'>
 161         <div className='col-sm-6'>
 162           <h4>Reset data</h4>
 163
 164           {this.props.core.reset ?
 165             <div>
 166               <p>
 167                 This will permanently delete all data stored in this core,
 168                 including blockchain data, accounts, assets, indexes,
 169                 and MockHSM keys.
 170               </p>
 171
 172               {this.state.deleteError && <ErrorBanner
 173                 title='Error resetting data'
 174                 message={this.state.deleteError.toString()}
 175               />}
 176
 177               <button
 178                 className='btn btn-danger'
 179                 onClick={this.deleteClick}
 180                 disabled={this.state.deleteDisabled}
 181               >
 182                 Delete all data
 183               </button>
 184             </div> :
 185             <p>
 186               This core is not configured with reset capabilities.
 187             </p>}
 188         </div>
 189       </div>
 190     )
 191
 192     return (
 193       <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}>
 194         <PageTitle title='Core' />
 195
 196         <PageContent>
 197           <div className={`${styles.top} ${styles.flex}`}>
 198             {configBlock}
 199             {networkStatusBlock}
 200           </div>
 201
 202           {resetDataBlock}
 203         </PageContent>
 204       </div>
 205     )
 206   }
 207 }
 208
 209 const mapStateToProps = (state) => ({
 210   core: state.core,
 211   onTestnet: state.core.onTestnet,
 212   testnetBlockchainMismatch: testnetUtils.isBlockchainMismatch(state),
 213   testnetNetworkMismatch: testnetUtils.isCrosscoreRpcMismatch(state),
 214   testnetNextReset: state.testnet.nextReset,
 215 })
 216
 217 const mapDispatchToProps = () => ({})
 218
 219 export default connect(
 220   mapStateToProps,
 221   mapDispatchToProps
 222 )(CoreIndex)