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

Modified Grafana page

Browse Source
This commit is contained in:
Marco van Dijk 2022-07-19 00:28:14 +02:00
parent 7f39e32240
commit 6efa0c4e1c
1 changed files with 10 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/grafana.js
View File

@ -14,21 +14,7 @@ const Grafana = (obj) => {
if (redirectToHome) { if (redirectToHome) {
return <Navigate push to="/" />; return <Navigate push to="/" />;
} }
// Generate component for displaying LPT and ETH price and price change
let lptPrice = 0;
let ethPrice = 0;
let lptPriceChange24h = 0;
let ethPriceChange24h = 0;
if (livepeer.quotes) {
if (livepeer.quotes.LPT) {
lptPrice = livepeer.quotes.LPT.price.toFixed(2);
lptPriceChange24h = livepeer.quotes.LPT.percent_change_24h.toFixed(2);
}
if (livepeer.quotes.ETH) {
ethPrice = livepeer.quotes.ETH.price.toFixed(2);
ethPriceChange24h = livepeer.quotes.ETH.percent_change_24h.toFixed(2);
}
}
return ( return (
<div className="stroke" > <div className="stroke" >
@ -47,24 +33,18 @@ const Grafana = (obj) => {
<div className="stroke roundedOpaque"> <div className="stroke roundedOpaque">
<div className="verticalDivider" /> <div className="verticalDivider" />
<div className="flexContainer"> <div className="flexContainer">
<div className="row">
<img alt="" src="livepeer.png" width="30" height="30" />
<p>${lptPrice}</p>
<p>({lptPriceChange24h}%)</p>
</div>
<div className="row" onClick={() => { <div className="row" onClick={() => {
setRedirectToHome(true); setRedirectToHome(true);
}}> }}>
<h2>Livepeer Orchestrator</h2> <h2>Livepeer Orchestrator</h2>
</div> </div>
<div className="row">
<img alt="" src="eth.png" width="30" height="30" />
<p>${ethPrice}</p>
<p>({ethPriceChange24h}%)</p>
</div>
</div> </div>
<div className="verticalDivider" /> <div className="verticalDivider" />
<div className="stroke roundedOpaqueDark"> <div className="stroke roundedOpaqueDark">
<div className="flexContainer stretchAndPad">
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=75" height="200" frameBorder="0"></iframe>
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=23763572196" height="200" frameBorder="0"></iframe>
</div>
<div className="flexContainer stretchAndPad"> <div className="flexContainer stretchAndPad">
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=79" height="200" frameBorder="0"></iframe> <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=79" height="200" frameBorder="0"></iframe>
<iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=83" height="200" frameBorder="0"></iframe> <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=15s&theme=dark&panelId=83" height="200" frameBorder="0"></iframe>
@ -72,7 +52,7 @@ const Grafana = (obj) => {
<div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}>
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} > <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} >
<img alt="" src="livepeer.png" width="20em" height="20em" /> <img alt="" src="livepeer.png" width="20em" height="20em" />
<span className="lightTextAlt">Stake with Captain Chad</span> <span className="lightTextAlt">Stake with captain-chad.eth</span>
</a> </a>
</div> </div>
<div className="flexContainer stretchAndPad"> <div className="flexContainer stretchAndPad">
@ -84,7 +64,7 @@ const Grafana = (obj) => {
<div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}>
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} > <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} >
<img alt="" src="livepeer.png" width="20em" height="20em" /> <img alt="" src="livepeer.png" width="20em" height="20em" />
<span className="lightTextAlt">Stake with Captain Chad</span> <span className="lightTextAlt">Stake with captain-chad.eth</span>
</a> </a>
</div> </div>
<div className="flexContainer stretchAndPad"> <div className="flexContainer stretchAndPad">
@ -96,7 +76,7 @@ const Grafana = (obj) => {
<div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}>
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} > <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} >
<img alt="" src="livepeer.png" width="20em" height="20em" /> <img alt="" src="livepeer.png" width="20em" height="20em" />
<span className="lightTextAlt">Stake with Captain Chad</span> <span className="lightTextAlt">Stake with captain-chad.eth</span>
</a> </a>
</div> </div>
<div className="flexContainer stretchAndPad"> <div className="flexContainer stretchAndPad">
@ -108,7 +88,7 @@ const Grafana = (obj) => {
<div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}>
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} > <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} >
<img alt="" src="livepeer.png" width="20em" height="20em" /> <img alt="" src="livepeer.png" width="20em" height="20em" />
<span className="lightTextAlt">Stake with Captain Chad</span> <span className="lightTextAlt">Stake with captain-chad.eth</span>
</a> </a>
</div> </div>
<div className="flexContainer stretchAndPad"> <div className="flexContainer stretchAndPad">
@ -120,7 +100,7 @@ const Grafana = (obj) => {
<div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ width: 'unset', marginTop: '1em', marginBottom: '1em' }}>
<a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} > <a className="selectOrch" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/delegating"} >
<img alt="" src="livepeer.png" width="20em" height="20em" /> <img alt="" src="livepeer.png" width="20em" height="20em" />
<span className="lightTextAlt">Stake with Captain Chad</span> <span className="lightTextAlt">Stake with captain-chad.eth</span>
</a> </a>
</div> </div>
</div> </div>