Status page updates (#3774)

* Allow Page to create optional Actionbar

* Typo

* Display last block.timestamp

* Remove unnneeded console.log

* Re-do git mv

* git mv

* Force build changes

* Resolving case sensitivity issues

* Swapped to margin at bottom

js/src/redux/providers/status.js

@@ -54,7 +54,10 @@ export default class Status {
         this._api.eth
           .getBlockByNumber(blockNumber)
           .then((block) => {
-            this._store.dispatch(statusCollection({ gasLimit: block.gasLimit }));
+            this._store.dispatch(statusCollection({
+              blockTimestamp: block.timestamp,
+              gasLimit: block.gasLimit
+            }));
           })
           .catch((error) => {
             console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error);

js/src/redux/providers/statusReducer.js

@@ -19,6 +19,7 @@ import { handleActions } from 'redux-actions';
 
 const initialState = {
   blockNumber: new BigNumber(0),
+  blockTimestamp: new Date(),
   devLogs: [],
   devLogsLevels: null,
   devLogsEnabled: false,

js/src/ui/Actionbar/actionbar.js

@@ -17,11 +17,13 @@
 import React, { Component, PropTypes } from 'react';
 import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import styles from './actionbar.css';
 
 export default class Actionbar extends Component {
   static propTypes = {
-    title: PropTypes.string,
+    title: nodeOrStringProptype(),
     buttons: PropTypes.array,
     children: PropTypes.node,
     className: PropTypes.string

js/src/ui/Page/page.css

@@ -18,7 +18,7 @@
 .layout {
   padding: 0.25em 0.25em 1em 0.25em;
 
-  > * {
+  &>div {
     margin-bottom: 0.75em;
   }
 }

js/src/ui/Page/page.js

@@ -16,22 +16,39 @@
 
 import React, { Component, PropTypes } from 'react';
 
+import Actionbar from '../Actionbar';
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import styles from './page.css';
 
 export default class Page extends Component {
   static propTypes = {
+    buttons: PropTypes.array,
     className: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.node,
+    title: nodeOrStringProptype()
   };
 
   render () {
-    const { className, children } = this.props;
+    const { buttons, className, children, title } = this.props;
     const classes = `${styles.layout} ${className}`;
+    let actionbar = null;
+
+    if (title || buttons) {
+      actionbar = (
+        <Actionbar
+          buttons={ buttons }
+          title={ title } />
+      );
+    }
 
     return (
+      <div>
+        { actionbar }
         <div className={ classes }>
           { children }
         </div>
+      </div>
     );
   }
 }

js/src/views/Signer/signer.js

@@ -23,8 +23,7 @@ export default class Signer extends Component {
   render () {
     return (
       <div>
-        <Actionbar
+        <Actionbar title='Trusted Signer' />
-          title='Trusted Signer' />
         <RequestsPage />
       </div>
     );

js/src/views/Signer/store.js

@@ -30,12 +30,6 @@ export default class Store {
     }
   }
 
-  @action unsubscribe () {
-    if (this._timeoutId) {
-      clearTimeout(this._timeoutId);
-    }
-  }
-
   @action setBalance = (address, balance) => {
     this.setBalances({ [address]: balance });
   }
@@ -50,6 +44,12 @@ export default class Store {
     }
   }
 
+  @action unsubscribe () {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
+  }
+
   fetchBalance (address) {
     this._api.eth
       .getBalance(address)

js/src/views/Status/components/Debug/debug.js

@@ -22,7 +22,7 @@ import ReorderIcon from 'material-ui/svg-icons/action/reorder';
 
 import { Container } from '~/ui';
 
-import styles from './Debug.css';
+import styles from './debug.css';
 
 export default class Debug extends Component {
   static propTypes = {

js/src/views/Status/components/Debug/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './Debug';
+export default from './debug';

js/src/views/Status/components/MiningSettings/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './MiningSettings';
+export default from './miningSettings';

js/src/views/Status/components/Status/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './Status';
+export default from './status';

js/src/views/Status/components/Status/status.css

@@ -28,10 +28,19 @@
   content: '';
 }
 
-.blockinfo {
+.blockInfo {
-  font-size: 24px;
   color: #aaa;
-  line-height: 24px;
+  font-size: 1.5em;
+  line-height: 1.5em;
+}
+
+.blockByline {
+  color: #aaa;
+  font-size: 0.75em;
+}
+
+.padBottom {
+  padding-bottom: 1.25em !important;
 }
 
 .col,

js/src/views/Status/components/Status/status.js

@@ -14,14 +14,16 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
 import bytes from 'bytes';
+import moment from 'moment';
+import React, { Component, PropTypes } from 'react';
 
 import { Container, ContainerTitle, Input } from '~/ui';
 
-import styles from './Status.css';
 import MiningSettings from '../MiningSettings';
 
+import styles from './status.css';
+
 export default class Status extends Component {
   static propTypes = {
     nodeStatus: PropTypes.object.isRequired,
@@ -44,23 +46,26 @@ export default class Status extends Component {
         <div className={ styles.container }>
           <div className={ styles.row }>
             <div className={ styles.col3 }>
-              <div className={ styles.col12 }>
+              <div className={ `${styles.col12} ${styles.padBottom}` }>
                 <ContainerTitle title='best block' />
-                <h2 { ...this._test('best-block') } className={ styles.blockinfo }>
+                <div { ...this._test('best-block') } className={ styles.blockInfo }>
                   #{ nodeStatus.blockNumber.toFormat() }
-                </h2>
                 </div>
-              <div className={ styles.col12 }>
+                <div className={ styles.blockByline }>
+                  { moment().calendar(nodeStatus.blockTimestamp) }
+                </div>
+              </div>
+              <div className={ `${styles.col12} ${styles.padBottom}` }>
                 <ContainerTitle title='peers' />
-                <h2 { ...this._test('peers') } className={ styles.blockinfo }>
+                <div { ...this._test('peers') } className={ styles.blockInfo }>
                   { peers }
-                </h2>
                 </div>
-              <div className={ styles.col12 }>
+              </div>
+              <div className={ `${styles.col12} ${styles.padBottom}` }>
                 <ContainerTitle title='hash rate' />
-                <h2 { ...this._test('hashrate') } className={ styles.blockinfo }>
+                <div { ...this._test('hashrate') } className={ styles.blockInfo }>
                   { `${hashrate} H/s` }
-                </h2>
+                </div>
               </div>
             </div>
             <div className={ styles.col5 }>

js/src/views/Status/containers/StatusPage/index.js

@@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export default from './StatusPage';
+export default from './statusPage';

js/src/views/Status/containers/StatusPage/statusPage.css

@@ -14,5 +14,9 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-.container {
+
+.body {
+  &>div {
+    margin-bottom: 0.25em;
+  }
 }

js/src/views/Status/containers/StatusPage/statusPage.js

@@ -23,6 +23,8 @@ import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '~/redux/
 import Debug from '../../components/Debug';
 import Status from '../../components/Status';
 
+import styles from './statusPage.css';
+
 class StatusPage extends Component {
   static propTypes = {
     nodeStatus: PropTypes.object.isRequired,
@@ -39,7 +41,7 @@ class StatusPage extends Component {
 
   render () {
     return (
-      <div>
+      <div className={ styles.body }>
         <Status { ...this.props } />
         <Debug { ...this.props } />
       </div>

js/src/views/Status/status.js

@@ -16,22 +16,16 @@
 
 import React, { Component } from 'react';
 
-import { Actionbar, Page } from '~/ui';
+import { Page } from '~/ui';
 
 import StatusPage from './containers/StatusPage';
 
-import styles from './status.css';
-
 export default class Status extends Component {
   render () {
     return (
-      <div className={ styles.container }>
+      <Page title='status'>
-        <Actionbar
-          title='status' />
-        <Page>
         <StatusPage />
       </Page>
-      </div>
     );
   }
 }