From 9df9322f189d624d2389845e8badd107c698d452 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sat, 5 Mar 2022 03:01:18 +0100
Subject: [PATCH] Tooltip toegevoegd aand orch viewer meer grafana dashboards

---
 package.json              |  1 +
 src/OrchAddressViewer.js  | 30 ++++++++++++++++++++++++++++++
 src/grafana.js            |  8 ++++++--
 src/livepeer.js           |  2 +-
 src/orchestratorViewer.js | 28 +++++++++++++++++-----------
 5 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 src/OrchAddressViewer.js

diff --git a/package.json b/package.json
index b95fe8a..ef759a9 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.0.2",
     "react-scripts": "3.2.0",
+    "react-tooltip": "^4.2.21",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "styled-components": "^5.3.3"
diff --git a/src/OrchAddressViewer.js b/src/OrchAddressViewer.js
new file mode 100644
index 0000000..c805b70
--- /dev/null
+++ b/src/OrchAddressViewer.js
@@ -0,0 +1,30 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+
+const Address = (obj) => {
+  return (
+    <div className="rowAlignLeft" style={{ width: 'unset' }}>
+      <a href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
+        <div className="rowAlignLeft" style={{ width: 'unset' }}>
+          <img alt="" src="livepeer.png" width="20" height="20" />
+          {obj.address}
+        </div>
+      </a>
+      <ReactTooltip id={obj.seed} place="top" effect="solid">
+        {"https://explorer.livepeer.org/accounts/" + obj.address}
+      </ReactTooltip>
+    </div>
+  )
+}
+
+export default Address;
+
+{/* <div className="rowAlignLeft" style={{ width: 'unset' }}>
+  <a href={obj.eventObj.transactionUrl}>
+    <img alt="" src="arb.svg" width="30" height="30" />
+  </a>
+  <a href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
+    <img alt="" src="livepeer.png" width="30" height="30" />
+  </a>
+  {eventCaller}
+</div> */}
diff --git a/src/grafana.js b/src/grafana.js
index 0c2b8eb..531738b 100644
--- a/src/grafana.js
+++ b/src/grafana.js
@@ -60,8 +60,12 @@ const Grafana = (obj) => {
                 </div>
               </div>
               <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-                <div className="row" style={{ paddingLeft: "1em", paddingRight: "1em" }}>
-                  <Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} />
+              <div className="flexContainer" style={{ justifyContent: "center" }}>
+                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572109" height="200" frameBorder="0"></iframe>
+                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572110" height="200" frameBorder="0"></iframe>
+                </div>
+                <div className="flexContainer" style={{ justifyContent: "center" }}>
+                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572108" height="200" frameBorder="0"></iframe>
                 </div>
                 <div className="flexContainer" style={{ justifyContent: "center" }}>
                   <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
diff --git a/src/livepeer.js b/src/livepeer.js
index 08017f8..4d46f70 100644
--- a/src/livepeer.js
+++ b/src/livepeer.js
@@ -135,7 +135,7 @@ const Livepeer = (obj) => {
         }}>
           <img alt="" src="livepeer.png" width="100em" height="100em" />
         </button>
-        <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '1em' }}>
+        <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '0.2em' }}>
           <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} />
         </div>
         <div className="stroke metaSidebar" style={{ padding: 0, flex: 1 }}>
diff --git a/src/orchestratorViewer.js b/src/orchestratorViewer.js
index e4f1a72..ab1561d 100644
--- a/src/orchestratorViewer.js
+++ b/src/orchestratorViewer.js
@@ -1,6 +1,8 @@
 import React from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
 import Stat from "./statViewer";
+import ReactTooltip from "react-tooltip";
+import Address from "./OrchAddressViewer";
 
 function updateClipboard(newClip) {
   navigator.clipboard.writeText(newClip).then(
@@ -60,11 +62,11 @@ const Orchestrator = (obj) => {
     }
 
     let shareUrl;
-    if (obj.rootOnly){
+    if (obj.rootOnly) {
       shareUrl = window.location.href;
-    }else{
+    } else {
       let thisFullPath = window.location.href;
-      if (thisFullPath.lastIndexOf("?") > -1){
+      if (thisFullPath.lastIndexOf("?") > -1) {
         thisFullPath = thisFullPath.substring(0, thisFullPath.lastIndexOf("?"));
       }
       shareUrl = thisFullPath + "?orchAddr=" + thisID;
@@ -76,7 +78,7 @@ const Orchestrator = (obj) => {
           <div style={{ flexDirection: 'row', display: "flex" }} style={{ marginTop: '1em' }}>
             <a href={thisUrl}>
               <h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
-              {thisID}
+              <Address address={thisID} />
             </a>
           </div>
           <Stat header={"Earned Fees"} content={totalVolumeETH + " Eth ($" + totalVolumeUSD + ")"} />
@@ -84,11 +86,16 @@ const Orchestrator = (obj) => {
           <Stat header={"Fee Cut"} content={feeCut + "%"} />
           <Stat header={"Total Stake"} content={totalStake + " LPT"} />
           <Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
-          <button className="homeButton" onClick={() => {
-            copyLink(shareUrl);
-          }}>
-            <img alt="" src="clipboard.svg" width="20em" height="20em" />
-          </button>
+          <div className="strokeSmollLeft" style={{ display: "flex" }}>
+            <button className="homeButton" data-tip data-for="registerTip" onClick={() => {
+              copyLink(shareUrl);
+            }}>
+              <img alt="" src="clipboard.svg" width="20em" height="20em" />
+            </button>
+            <ReactTooltip id="registerTip" place="top" effect="solid">
+              Copy to clipboard
+            </ReactTooltip>
+          </div>
         </div>
         <div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
           <div className="row" style={{ marginTop: '1em' }}>
@@ -101,8 +108,7 @@ const Orchestrator = (obj) => {
                   delegators.map((delObj, idx) => {
                     return (
                       <div className="rowAlignLeft" key={"delegator" + idx} style={{ marginLeft: '1em', borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
-                        <a href={"https://explorer.livepeer.org/accounts/" + delObj.id}>
-                          <img alt="" src="livepeer.png" width="30" height="30" />{delObj.id.substr(0, 12) + "..."}</a>
+                        <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
                         <div className="strokeSmollLeft">
                           <p>{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>