From 04ab7305c56d6396f198ffddcc423f01e69b0c97 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Mon, 14 May 2018 15:47:18 +0200
Subject: [PATCH 1/2] Add node health info

---
 package.json          |  2 +-
 src/App/App.js        |  2 ++
 src/Health/Health.css | 28 +++++++++++++++
 src/Health/Health.js  | 81 +++++++++++++++++++++++++++++++++++++++++++
 src/Health/index.js   |  8 +++++
 src/Tokens/Tokens.js  | 43 ++---------------------
 yarn.lock             |  4 +--
 7 files changed, 124 insertions(+), 44 deletions(-)
 create mode 100644 src/Health/Health.css
 create mode 100644 src/Health/Health.js
 create mode 100644 src/Health/index.js

diff --git a/package.json b/package.json
index 1a447273..20f1fa6b 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@parity/api": "^2.1.22",
-    "@parity/light.js": "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45",
+    "@parity/light.js": "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828",
     "axios": "^0.18.0",
     "electron": "^2.0.0",
     "electron-dl": "^1.11.0",
diff --git a/src/App/App.js b/src/App/App.js
index 795d191e..195acad9 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import { BrowserRouter, MemoryRouter, Route, Link } from 'react-router-dom';
 
 import CreateAccount from '../Accounts/CreateAccount';
+import Health from '../Health';
 import Loading from '../Loading';
 import ProtectedRoute from './ProtectedRoute';
 import Receive from '../Receive';
@@ -42,6 +43,7 @@ class App extends Component {
               <ProtectedRoute path='/accounts/new' component={CreateAccount} />
 
               <nav className='primary-nav'>
+                <Health />
                 <Link to='/'>Home</Link>
                 {/* @brian Putting a <Link> here for ease of use for us,
                 but I'll let you decided how/when to show the Signer component */}
diff --git a/src/Health/Health.css b/src/Health/Health.css
new file mode 100644
index 00000000..d201b128
--- /dev/null
+++ b/src/Health/Health.css
@@ -0,0 +1,28 @@
+/* @brian all this css is taken from https://www.w3schools.com/css/css_tooltip.asp
+feel free to remove all this */
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
diff --git a/src/Health/Health.js b/src/Health/Health.js
new file mode 100644
index 00000000..6177a9d4
--- /dev/null
+++ b/src/Health/Health.js
@@ -0,0 +1,81 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { nodeHealth$, syncing$ } from '@parity/light.js';
+
+import light from '../hoc';
+import './Health.css';
+
+export const STATUS_OK = 'ok';
+export const STATUS_WARN = 'needsAttention';
+export const STATUS_BAD = 'bad';
+
+/**
+ * Calculate the average health.
+ * It's currently here too: https://github.com/parity-js/mobx/blob/master/src/parity/nodeHealth.js
+ * and here https://github.com/parity-js/shared/blob/43837f3a6a8fe84f5e756b4df1643b28eea00dc0/src/redux/providers/statusReducer.js
+ * TODO Factorize this.
+ */
+const averageHealth = nodeHealth => {
+  if (!nodeHealth || !Object.keys(nodeHealth).length) {
+    return {
+      status: STATUS_BAD,
+      message: ['Unable to fetch node health.']
+    };
+  }
+
+  // Find out if there are bad statuses
+  const bad = Object.values(nodeHealth)
+    .filter(x => x)
+    .map(({ status }) => status)
+    .find(s => s === STATUS_BAD);
+  // Find out if there are needsAttention statuses
+  const needsAttention = Object.keys(nodeHealth)
+    .filter(key => key !== 'time')
+    .map(key => nodeHealth[key])
+    .filter(x => x)
+    .map(({ status }) => status)
+    .find(s => s === STATUS_WARN);
+  // Get all non-empty messages from all statuses
+  const message = Object.values(nodeHealth)
+    .map(({ message }) => message)
+    .filter(x => x);
+
+  return {
+    status: bad || needsAttention || STATUS_OK,
+    message
+  };
+};
+
+@light({
+  nodeHealth: nodeHealth$,
+  syncing: syncing$
+})
+class Health extends Component {
+  render() {
+    const { nodeHealth, syncing } = this.props;
+    const { message, status } = averageHealth(nodeHealth);
+
+    // TODO No inline style, just putting here for prototyping -Amaury
+    return (
+      <p className="tooltip" style={{ flexGrow: 1 }}>
+        {status}
+
+        <span className="tooltiptext">
+          {status !== STATUS_OK && <span>{message}</span>}
+          {syncing && <span>Syncing: {JSON.stringify(syncing)}</span>}
+          {nodeHealth && (
+            <span>
+              Peers: {nodeHealth.peers.details[0]}/{nodeHealth.peers.details[1]}
+            </span>
+          )}
+        </span>
+      </p>
+    );
+  }
+}
+
+export default Health;
diff --git a/src/Health/index.js b/src/Health/index.js
new file mode 100644
index 00000000..6e81ce42
--- /dev/null
+++ b/src/Health/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Health from './Health';
+
+export default Health;
diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js
index 5e79fc3c..13407eaa 100644
--- a/src/Tokens/Tokens.js
+++ b/src/Tokens/Tokens.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defaultAccount$, nodeHealth$ } from '@parity/light.js';
+import { defaultAccount$ } from '@parity/light.js';
 import { Redirect } from 'react-router-dom';
 
 import EthBalance from './EthBalance';
@@ -15,14 +15,12 @@ import TokenBalance from './TokenBalance';
 @inject('parityStore', 'tokensStore')
 @observer
 @light({
-  me: defaultAccount$,
-  nodeHealth: nodeHealth$
+  me: defaultAccount$
 })
 class Tokens extends Component {
   render () {
     const {
       me,
-      nodeHealth,
       parityStore: { isApiConnected },
       tokensStore: { tokens }
     } = this.props;
@@ -44,43 +42,6 @@ class Tokens extends Component {
                 )}
               </li>
             ))}
-
-          {/* @brian the following 3 <li> are just to show what data I have from the backend, remove them whenever you want */}
-          <li>
-            <p>1. DL and install parity Status</p>
-
-            <pre>OK, parity installed and running</pre>
-          </li>
-
-          {nodeHealth && (
-            <li>
-              <p>2. Overall node health status</p>
-              <pre>
-                PEERS: {nodeHealth.peers.status} {nodeHealth.peers.details[0]}/{
-                  nodeHealth.peers.details[1]
-                }
-                <br />SYNC: {nodeHealth.sync.status}
-                <br />TIMESYNC: {nodeHealth.time.status}
-              </pre>
-              <p>
-                Note: I can make a small algorithm which outputs the average
-                health with 3 states: OK, ALRIGHT, and BAD
-              </p>
-            </li>
-          )}
-
-          {nodeHealth && (
-            <li>
-              <p>
-                3. When SYNC above is false, we have the syncing progress to
-                give an idea how much time it'll take
-              </p>
-              <pre>
-                "startingBlock": 900<br />"currentBlock": 902<br />
-                "highestBlock": 1108
-              </pre>
-            </li>
-          )}
         </ul>
       </div>
     );
diff --git a/yarn.lock b/yarn.lock
index 07e4c856..fa6a079a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -122,9 +122,9 @@
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452"
 
-"@parity/light.js@https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45":
+"@parity/light.js@https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828":
   version "1.0.0"
-  resolved "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45"
+  resolved "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.46"
     "@parity/api" "^2.1.22"
-- 
GitLab


From cb9536eeb2a59c983dc76eec13d128dc7d68181f Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@gmail.com>
Date: Mon, 14 May 2018 15:52:11 +0200
Subject: [PATCH 2/2] Fix lint

---
 src/Health/Health.css | 1 +
 src/Health/Health.js  | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Health/Health.css b/src/Health/Health.css
index d201b128..a473d63d 100644
--- a/src/Health/Health.css
+++ b/src/Health/Health.css
@@ -3,6 +3,7 @@ feel free to remove all this */
 
 /* Tooltip container */
 .tooltip {
+  flex-grow: 1;
   position: relative;
   display: inline-block;
 }
diff --git a/src/Health/Health.js b/src/Health/Health.js
index 6177a9d4..81adfd6b 100644
--- a/src/Health/Health.js
+++ b/src/Health/Health.js
@@ -55,16 +55,14 @@ const averageHealth = nodeHealth => {
   syncing: syncing$
 })
 class Health extends Component {
-  render() {
+  render () {
     const { nodeHealth, syncing } = this.props;
     const { message, status } = averageHealth(nodeHealth);
 
-    // TODO No inline style, just putting here for prototyping -Amaury
     return (
-      <p className="tooltip" style={{ flexGrow: 1 }}>
+      <p className='tooltip'>
         {status}
-
-        <span className="tooltiptext">
+        <span className='tooltiptext'>
           {status !== STATUS_OK && <span>{message}</span>}
           {syncing && <span>Syncing: {JSON.stringify(syncing)}</span>}
           {nodeHealth && (
-- 
GitLab