stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update Orch Viewer

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-05 14:12:24 +01:00
parent 8a4643f095
commit 4d3858cd4d
6 changed files with 98 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/OrchAddressViewer.js
View File

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

51
src/eventButton.js
View File

@ -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) {
eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >{obj.eventObj.eventTo}</button>
if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) {
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' }}>
<a className="selectOrch" href={obj.eventObj.transactionUrl}>
<div className="rowAlignLeft" style={{ flex: '1', width: 'unset' }}>
<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">
{obj.eventObj.eventDescription}
<div className="rowAlignLeft" style={{ flex: '2', width: 'unset', padding: 0, margin: 0 }}>
<span className="rowAlignLeft elipsText">
{obj.eventObj.eventDescription}
</span>
{eventRightAddr}
</div>
<div className="row" style={{ width: 'unset'}}>
{eventFrom}
{eventArrow}
{eventTo}
</div>
</div>
</div >
)
}

6
src/grafana.js
View File

@ -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>

20
src/orchestratorViewer.js
View File

@ -81,13 +81,17 @@ const Orchestrator = (obj) => {
<Address address={thisID} />
</a>
</div>
<Stat header={"Earned Fees"} content={totalVolumeETH + " Eth ($" + totalVolumeUSD + ")"} />
<Stat header={"Reward Cut"} content={rewardCut + "%"} />
<Stat header={"Fee Cut"} content={feeCut + "%"} />
<Stat header={"Total Stake"} content={totalStake + " LPT"} />
<Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
<div className="row" style={{}}>
<Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
</div>
<div className="row" style={{}}>
<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>
)

30
src/statViewer.js
View File

@ -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="rowAlignLeft" style={{margin: 0, padding: 0}}>
<h4 style={{margin: 0, padding: 0}}>{obj.header}</h4>
<div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%' }}>
<div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}>
<h3 style={{ margin: 0, padding: 0 }}>{obj.header}</h3>
</div>
<div className="rowAlignLeft" style={{margin: 0, marginLeft: '1em', padding: 0}}>
<p style={{margin: 0, padding: 0}}>{obj.content}</p>
<div className="row" style={{marginTop: '1em'}}>
<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>
)

31
src/style.css
View File

@ -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;