Skip to content

Commit

Permalink
chore: add previous missed blocks display
Browse files Browse the repository at this point in the history
  • Loading branch information
@lanhaoxiang
lanhaoxiang committed Apr 3, 2020
1 parent f182c72 commit 3d38e16
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 37 deletions.
4 changes: 2 additions & 2 deletions app/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>-->
<title>GXChain Wallet</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="app.css?v=2020032702">
<link rel="stylesheet" href="app.css?v=20200403">
<style>
body {
background-color: #2a2a2a;
Expand Down Expand Up @@ -42,6 +42,6 @@
<h1 class="centerDiv" style="">Loading...</h1>
</main>

<script src="app.js?v=2020032702" charset="utf-8"></script>
<script src="app.js?v=20200403" charset="utf-8"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion app/assets/locales/locale-cn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -922,7 +922,8 @@
"table": "表格视图",
"rank": "排名",
"last_confirmed": "上次生成块",
"missed": "缺失块数"
"missed": "缺失块数",
"previous_missed": "上一周期丢块"
},
"committee_members": {
"title": "理事会",
Expand Down
3 changes: 2 additions & 1 deletion app/assets/locales/locale-en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -932,7 +932,8 @@
"table": "Table view",
"rank": "Rank",
"last_confirmed": "Last confirmed",
"missed": "Blocks missed"
"missed": "Blocks missed",
"previous_missed": "Missed Last Term"
},
"committee_members": {
"title": "Committee members",
Expand Down
81 changes: 48 additions & 33 deletions app/components/Explorer/Witnesses.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,42 +28,46 @@ class WitnessCard extends React.Component {
}

render() {
let witness_data = ChainStore.getWitnessById( this.props.witness.get('id') )
let witness_data = ChainStore.getWitnessById( this.props.witness.get("id") );
if ( !witness_data ) return null;
let total_votes = witness_data.get( "total_votes" );

let witness_aslot = witness_data.get('last_aslot')
let witness_aslot = witness_data.get("last_aslot");
let color = {};
if( this.props.most_recent - witness_aslot > 100 ) {
color = {borderLeft: "1px solid #FCAB53"};
color = {borderLeft: "1px solid #FCAB53"};
}
else {
color = {borderLeft: "1px solid #50D2C2"};
color = {borderLeft: "1px solid #50D2C2"};
}
let last_aslot_time = new Date(Date.now() - ((this.props.most_recent - witness_aslot ) * ChainStore.getObject( "2.0.0" ).getIn( ["parameters","block_interval"] )*1000));

return (
<div className="grid-content account-card" onClick={this._onCardClick.bind(this)}>
<div className="card" style={color}>
<h4 className="text-center">#{this.props.rank}: {this.props.witness.get('name')}</h4>
<h4 className="text-center">#{this.props.rank}: {this.props.witness.get("name")}</h4>
<div className="card-content">
<div className="text-center">
<AccountImage account={this.props.witness.get('name')} size={{height: 64, width: 64}}/>
<AccountImage account={this.props.witness.get("name")} size={{height: 64, width: 64}}/>
</div>
<br/>
<table className="table key-value-table">
<tbody>
<tr>
<td>Votes</td>
<td><Translate content="account.votes.votes" /></td>
<td><FormattedAsset amount={total_votes} asset="1.3.1" decimalOffset={5} hide_asset={true}/></td>
</tr>
<tr>
<td>Last&nbsp;Block</td>
<td><Translate content="explorer.witnesses.last_confirmed" /></td>
<td><TimeAgo time={new Date(last_aslot_time)} /></td>
</tr>
<tr>
<td>Missed</td>
<td>{witness_data.get('total_missed')}</td>
<td><Translate content="explorer.witnesses.missed" /></td>
<td>{witness_data.get("total_missed")}</td>
</tr>
<tr>
<td><Translate content="explorer.witnesses.previous_missed" /></td>
<td>{witness_data.get("total_missed")-witness_data.get("previous_missed")}</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -96,40 +100,48 @@ class WitnessRow extends React.Component {

render() {
let {witness, isCurrent, rank} = this.props;
let witness_data = ChainStore.getWitnessById( this.props.witness.get('id') );
let witness_data = ChainStore.getWitnessById( this.props.witness.get("id") );
if ( !witness_data ) return null;
let total_votes = witness_data.get( "total_votes" );

let witness_aslot = witness_data.get('last_aslot')
let witness_aslot = witness_data.get("last_aslot");
let color = {};
if( this.props.most_recent - witness_aslot > 100 ) {
color = {borderLeft: "1px solid #FCAB53"};
color = {borderLeft: "1px solid #FCAB53"};
}
else {
color = {borderLeft: "1px solid #50D2C2"};
color = {borderLeft: "1px solid #50D2C2"};
}
let last_aslot_time = new Date(Date.now() - ((this.props.most_recent - witness_aslot ) * ChainStore.getObject( "2.0.0" ).getIn( ["parameters","block_interval"] )*1000));

let currentClass = isCurrent ? "active-witness" : "";

let missed = witness_data.get('total_missed');
let missed = witness_data.get("total_missed");
let missedClass = classNames("txtlabel",
{"success": missed <= 500 },
{"info": missed > 500 && missed <= 1250},
{"warning": missed > 1250 && missed <= 2000},
{"error": missed >= 200}
);
let previous_missed = witness_data.get("total_missed")-witness_data.get("previous_missed");
let prevousMissedClass = classNames("txtlabel",
{"success": previous_missed <= 5 },
{"info": previous_missed > 5 && previous_missed <= 20},
{"warning": previous_missed > 20 && previous_missed <= 30},
{"error": previous_missed >= 30}
);

return (
<tr className={currentClass} onClick={this._onRowClick.bind(this)} >
<td>{rank}</td>
<td style={color}>{witness.get("name")}</td>
<td><TimeAgo time={new Date(last_aslot_time)} /></td>
<td>{witness_data.get('last_confirmed_block_num')}</td>
<td>{witness_data.get("last_confirmed_block_num")}</td>
<td className={missedClass}>{missed}</td>
<td><FormattedAsset amount={witness_data.get('total_votes')} asset="1.3.1" decimalOffset={5} hide_asset={true}/></td>
<td className={prevousMissedClass}>{previous_missed}</td>
<td><FormattedAsset amount={witness_data.get("total_votes")} asset="1.3.1" decimalOffset={5} hide_asset={true}/></td>
</tr>
)
);
}
}
WitnessRow = BindToChainState(WitnessRow, {keep_updating: true});
Expand All @@ -143,17 +155,17 @@ class WitnessList extends React.Component {
constructor () {
super();
this.state = {
sortBy: 'rank',
inverseSort: true
sortBy: "rank",
inverseSort: true
};
}

_setSort(field) {
this.setState({
sortBy: field,
inverseSort: field === this.state.sortBy ? !this.state.inverseSort : this.state.inverseSort
sortBy: field,
inverseSort: field === this.state.sortBy ? !this.state.inverseSort : this.state.inverseSort
});
}
}

render() {

Expand Down Expand Up @@ -206,7 +218,7 @@ class WitnessList extends React.Component {
// console.log("a:", a.toJS());

switch (sortBy) {
case 'name':
case "name":
if (a_account.get("name") > b_account.get("name")) {
return inverseSort ? 1 : -1;
} else if (a_account.get("name") < b_account.get("name")) {
Expand All @@ -219,7 +231,9 @@ class WitnessList extends React.Component {
case "rank":
return !inverseSort ? ranks[b.get("id")] - ranks[a.get("id")] : ranks[a.get("id")] - ranks[b.get("id")];
break;

case "previous_missed":
return !inverseSort ? b_account.get("total_missed") - b_account.get("prevous_missed") - a_account.get("total_missed") + a_account.get("prevous_missed") : a_account.get("total_missed") - a_account.get("prevous_missed") - b_account.get("total_missed") + b_account.get("prevous_missed");
break;
default:
return !inverseSort ? parseInt(b.get(sortBy), 10) - parseInt(a.get(sortBy), 10) : parseInt(a.get(sortBy), 10) - parseInt(b.get(sortBy), 10);
}
Expand Down Expand Up @@ -248,20 +262,21 @@ class WitnessList extends React.Component {
<table className="table table-hover">
<thead>
<tr>
<th className="clickable" onClick={this._setSort.bind(this, 'rank')}><Translate content="explorer.witnesses.rank" /></th>
<th className="clickable" onClick={this._setSort.bind(this, 'name')}><Translate content="account.votes.name" /></th>
<th className="clickable" onClick={this._setSort.bind(this, 'last_aslot')}><Translate content="explorer.blocks.last_block" /></th>
<th className="clickable" onClick={this._setSort.bind(this, 'last_confirmed_block_num')}><Translate content="explorer.witnesses.last_confirmed" /></th>
<th className="clickable" onClick={this._setSort.bind(this, 'total_missed')}><Translate content="explorer.witnesses.missed" /></th>
<th className="clickable" onClick={this._setSort.bind(this, 'total_votes')}><Translate content="account.votes.votes" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "rank")}><Translate content="explorer.witnesses.rank" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "name")}><Translate content="account.votes.name" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "last_aslot")}><Translate content="explorer.blocks.last_block" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "last_confirmed_block_num")}><Translate content="explorer.witnesses.last_confirmed" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "total_missed")}><Translate content="explorer.witnesses.missed" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "previous_missed")}><Translate content="explorer.witnesses.previous_missed" /></th>
<th className="clickable" onClick={this._setSort.bind(this, "total_votes")}><Translate content="account.votes.votes" /></th>
</tr>
</thead>
<tbody>
{itemRows}
</tbody>

</table>
)
);
}
else {
return (
Expand Down Expand Up @@ -370,7 +385,7 @@ class Witnesses extends React.Component {
</div>
</div>
<div className="grid-block">
<div className="grid-content" style={{marginLeft:'0'}}>
<div className="grid-content" style={{marginLeft:"0"}}>
<WitnessList
current_aslot={dynGlobalObject.current_aslot}
current={current ? current.get("id") : null}
Expand Down

0 comments on commit 3d38e16

Please sign in to comment.