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

Tooltip toegevoegd aand orch viewer

Browse Source 
meer grafana dashboards
This commit is contained in:
Marco van Dijk 2022-03-05 03:01:18 +01:00
parent f381340da0
commit 9df9322f18
5 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

30
src/OrchAddressViewer.js Normal file
View File

@ -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> */}

8
src/grafana.js
View File

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

2
src/livepeer.js
View File

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

20
src/orchestratorViewer.js
View File

@ -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={() => {
<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>