Update Orch Viewer

src/OrchAddressViewer.js

@@ -17,14 +17,4 @@ const Address = (obj) => {
   )
 }
 
-export default Address;
+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> */}

src/eventButton.js

@@ -13,6 +13,7 @@ const EventButton = (obj) => {
   let eventTo;
   let eventFrom;
   let eventCaller;
+  let eventRightAddr;
   if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
     obj.eventObj.eventFrom = "";
   }
@@ -22,37 +23,43 @@ const EventButton = (obj) => {
   if (obj.eventObj.eventTo !== "" || obj.eventObj.eventFrom !== "") {
     eventArrow = <p>→</p>;
   }
-  if (obj.eventObj.eventTo) {
+  if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) {
-    eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >{obj.eventObj.eventTo}</button>
+    if (obj.eventObj.eventTo) {
+      eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} ><span className="elipsText">{obj.eventObj.eventTo}</span></button>
+    }
+    if (obj.eventObj.eventFrom) {
+      eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }} ><span className="elipsText">{obj.eventObj.eventFrom}</span></button>
+    }
+    if (obj.eventObj.eventCaller) {
+      eventCaller =
+        <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} ><span className="elipsText">{obj.eventObj.eventCaller}</span></button>
+    }
+    eventRightAddr = <div className="rowAlignRight" style={{ flex: '1', width: '100%', padding: 0, margin: 0 }}>
+      {eventFrom}
+      {eventArrow}
+      {eventTo}
+    </div>
   }
-  if (obj.eventObj.eventFrom) {
-    eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }} >{obj.eventObj.eventFrom}</button>
-  }
-  if (obj.eventObj.eventCaller) {
-    eventCaller =
-      <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >{obj.eventObj.eventCaller}</button>
-  }
-
   return (
     <div className="rowAlignLeft" style={{ backgroundColor: obj.eventObj.eventColour, borderRadius: "1.2em", width: 'unset' }}>
-      <div className="rowAlignLeft" style={{ width: 'unset' }}>
+      <div className="rowAlignLeft" style={{ flex: '1', width: 'unset' }}>
-        <a className="selectOrch"  href={obj.eventObj.transactionUrl}>
+        <a className="selectOrch" href={obj.eventObj.transactionUrl}>
           <img alt="" src="arb.svg" width="30" height="30" />
         </a>
-        <a className="selectOrch"  href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
+        <a className="selectOrch" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
           <img alt="" src="livepeer.png" width="30" height="30" />
         </a>
-        {eventCaller}
+        <div className="rowAlignLeft" style={{ flex: '1', width: '100%', padding: 0, margin: 0 }}>
+          {eventCaller}
+        </div>
       </div>
-      <div className="rowAlignLeft">
+      <div className="rowAlignLeft" style={{ flex: '2', width: 'unset', padding: 0, margin: 0 }}>
-        {obj.eventObj.eventDescription}
+        <span className="rowAlignLeft elipsText">
+          {obj.eventObj.eventDescription}
+        </span>
+        {eventRightAddr}
       </div>
-      <div className="row" style={{ width: 'unset'}}>
+    </div >
-        {eventFrom}
-        {eventArrow}
-        {eventTo}
-      </div>
-    </div>
   )
 }
 

src/grafana.js

@@ -60,12 +60,8 @@ const Grafana = (obj) => {
                 </div>
               </div>
               <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-              <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>
+                  <Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} />
                 </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>

src/orchestratorViewer.js

@@ -81,13 +81,17 @@ const Orchestrator = (obj) => {
               <Address address={thisID} />
             </a>
           </div>
-          <Stat header={"Earned Fees"} content={totalVolumeETH + " Eth ($" + totalVolumeUSD + ")"} />
+          <div className="row" style={{}}>
-          <Stat header={"Reward Cut"} content={rewardCut + "%"} />
+            <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
-          <Stat header={"Fee Cut"} content={feeCut + "%"} />
+          </div>
-          <Stat header={"Total Stake"} content={totalStake + " LPT"} />
+          <div className="row" style={{}}>
-          <Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
+            <Stat header={"Commission"}  title1={"Reward"} content1={rewardCut + "%"}  title2={"Fee"} content2={feeCut + "%"} />
+          </div>
+          <div className="row" style={{}}>
+            <Stat header={"Stake"}  title1={"Total"} content1={totalStake + " LPT"}  title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
+          </div>
           <div className="strokeSmollLeft" style={{ display: "flex" }}>
-            <button className="homeButton" data-tip data-for="registerTip" onClick={() => {
+            <button style={{marginBottom:'1em'}} className="homeButton" data-tip data-for="registerTip" onClick={() => {
               copyLink(shareUrl);
             }}>
               <img alt="" src="clipboard.svg" width="20em" height="20em" />
@@ -103,14 +107,14 @@ const Orchestrator = (obj) => {
           </div>
           <div className="content-wrapper">
             <ScrollContainer className="overflow-container" hideScrollbars={false}>
-              <div className="overflow-content" style={{ cursor: 'grab', height: '300px' }}>
+              <div className="overflow-content" style={{ cursor: 'grab' }}>
                 {
                   delegators.map((delObj, idx) => {
                     return (
                       <div className="rowAlignLeft" key={"delegator" + idx} style={{ marginLeft: '1em', borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
                         <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
                         <div className="strokeSmollLeft">
-                          <p>{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
+                          <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>
                       </div>
                     )

src/statViewer.js

@@ -1,13 +1,33 @@
 import React from "react";
 
 const Stat = (obj) => {
+  let statLeft;
+  if (obj.title1 || obj.content1) {
+
+  }
+  let statRight;
+  if (obj.title2 || obj.content2) {
+
+  }
+
   return (
-    <div className="strokeSmollLeft" style={{margin: 0, padding: 0}}>
+    <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%' }}>
-      <div className="rowAlignLeft" style={{margin: 0, padding: 0}}>
+      <div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}>
-        <h4 style={{margin: 0, padding: 0}}>{obj.header}</h4>
+        <h3 style={{ margin: 0, padding: 0 }}>{obj.header}</h3>
       </div>
-      <div className="rowAlignLeft" style={{margin: 0, marginLeft: '1em', padding: 0}}>
+      <div className="row" style={{marginTop: '1em'}}>
-        <p style={{margin: 0, padding: 0}}>{obj.content}</p>
+      <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
+          <h4 style={{ margin: 0, padding: 0 }}>{obj.title1}</h4>
+          <div className="rowAlignLeft" style={{ margin: 0, marginLeft: '1em', padding: 0 }}>
+          <p className="darkText">{obj.content1}</p>
+          </div>
+        </div>
+        <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
+          <h4 style={{ margin: 0, padding: 0 }}>{obj.title2}</h4>
+          <div className="rowAlignLeft" style={{ margin: 0, marginLeft: '1em', padding: 0 }}>
+            <p className="darkText">{obj.content2}</p>
+          </div>
+        </div>
       </div>
     </div>
   )

src/style.css

@@ -42,7 +42,15 @@ h2, h3, h1, h4, h5, h6 {
   justify-content: space-evenly;
 }
 
-.selectOrch, a {
+.elipsText{
+  overflow: hidden;
+  white-space: nowrap;
+  display: block;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.selectOrch{
   text-shadow: 0.5px 0.5px 0.8px #948dff;
   background-color: transparent;
   border: none;
@@ -151,6 +159,13 @@ svg {
   color: rgba(162, 161, 255, 0.5);
 }
 
+.darkText {
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.875);
+  text-shadow: 0.5px 0.5px 0.8px #5a5663;
+}
+
 .hostInfo {
   cursor: default;
   text-align: start;
@@ -168,6 +183,7 @@ svg {
   flex-direction: row;
   height: 100%;
   width: 100%;
+  border-radius: 1em;
 }
 
 .flexContainer {
@@ -255,6 +271,19 @@ svg {
   margin-right: 10px;
 }
 
+.rowAlignRight {
+  box-sizing: border-box;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  vertical-align: middle;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
 .waveButton {
   min-width: 200px;
   cursor: pointer;