From 3d38e16c9f9ba2126d97278b79c6abd4fc45f6c0 Mon Sep 17 00:00:00 2001
From: lanhaoxiang <lanhaoxiang@qq.com>
Date: Sat, 4 Apr 2020 00:07:53 +0800
Subject: [PATCH] chore: add previous missed blocks display

---
 app/assets/index.html                 |  4 +-
 app/assets/locales/locale-cn.json     |  3 +-
 app/assets/locales/locale-en.json     |  3 +-
 app/components/Explorer/Witnesses.jsx | 81 ++++++++++++++++-----------
 4 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/app/assets/index.html b/app/assets/index.html
index 4231ae8..3740512 100755
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -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;
@@ -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>
diff --git a/app/assets/locales/locale-cn.json b/app/assets/locales/locale-cn.json
index e1e1f16..8823a5b 100755
--- a/app/assets/locales/locale-cn.json
+++ b/app/assets/locales/locale-cn.json
@@ -922,7 +922,8 @@
       "table": "表格视图",
       "rank": "排名",
       "last_confirmed": "上次生成块",
-      "missed": "缺失块数"
+      "missed": "缺失块数",
+      "previous_missed": "上一周期丢块"
     },
     "committee_members": {
       "title": "理事会",
diff --git a/app/assets/locales/locale-en.json b/app/assets/locales/locale-en.json
index 489cea1..b872812 100755
--- a/app/assets/locales/locale-en.json
+++ b/app/assets/locales/locale-en.json
@@ -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",
diff --git a/app/components/Explorer/Witnesses.jsx b/app/components/Explorer/Witnesses.jsx
index 873928f..72e04e0 100755
--- a/app/components/Explorer/Witnesses.jsx
+++ b/app/components/Explorer/Witnesses.jsx
@@ -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>
@@ -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});
@@ -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() {
 
@@ -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")) {
@@ -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);
                     }
@@ -248,12 +262,13 @@ 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>
@@ -261,7 +276,7 @@ class WitnessList extends React.Component {
                 </tbody>
 
             </table>
-            )
+            );
         }
         else {
             return (
@@ -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}