This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
665 additions
and
30 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import React, { ReactNode } from "react"; | ||
| import CountUp from "react-countup"; | ||
|
|
||
| import TableCardBody from "./common/TableCardBody"; | ||
| import { useRootSlot } from "providers/stats/rootSlot"; | ||
| import { | ||
| useDashboardInfo, | ||
| usePerformanceInfo, | ||
| PERF_UPDATE_SEC, | ||
| useSetActive, | ||
| } from "providers/stats/solanaBeach"; | ||
| import { slotsToHumanString } from "utils"; | ||
| import { useCluster } from "providers/cluster"; | ||
|
|
||
| export default function StatsCard() { | ||
| const rootSlot = useRootSlot(); | ||
| const dashboardInfo = useDashboardInfo(); | ||
| const performanceInfo = usePerformanceInfo(); | ||
| const txTrackerRef = React.useRef({ old: 0, new: 0 }); | ||
| const txTracker = txTrackerRef.current; | ||
| const setSocketActive = useSetActive(); | ||
| const cluster = useCluster(); | ||
|
|
||
| React.useEffect(() => { | ||
| setSocketActive(true); | ||
| return () => setSocketActive(false); | ||
| }, [setSocketActive, cluster]); | ||
|
|
||
| let currentBlock; | ||
| if (rootSlot !== undefined) { | ||
| currentBlock = rootSlot.toLocaleString("en-US"); | ||
| } | ||
|
|
||
| let averageBlockTime, currentEpoch, epochProgress, epochTimeRemaining; | ||
| if (dashboardInfo) { | ||
| const { avgBlockTime_1min, epochInfo } = dashboardInfo; | ||
| averageBlockTime = Math.round(1000 * avgBlockTime_1min) + "ms"; | ||
|
|
||
| const { slotIndex, slotsInEpoch } = epochInfo; | ||
| currentEpoch = epochInfo.epoch.toString(); | ||
| epochProgress = ((100 * slotIndex) / slotsInEpoch).toFixed(1) + "%"; | ||
| epochTimeRemaining = | ||
| slotsToHumanString(slotsInEpoch - slotIndex) + " remaining"; | ||
| } | ||
|
|
||
| let transactionCount, averageTps; | ||
| if (performanceInfo) { | ||
| const { totalTransactionCount: txCount, avgTPS } = performanceInfo; | ||
|
|
||
| // Track last tx count to initialize count up | ||
| if (txCount !== txTracker.new) { | ||
| // If this is the first tx count value, estimate the previous one | ||
| // in order to have a starting point for our animation | ||
| txTracker.old = txTracker.new || txCount - PERF_UPDATE_SEC * avgTPS; | ||
| txTracker.new = txCount; | ||
| } | ||
|
|
||
| transactionCount = ( | ||
| <CountUp | ||
| start={txTracker.old} | ||
| end={txTracker.new} | ||
| duration={PERF_UPDATE_SEC + 2} | ||
| delay={0} | ||
| useEasing={false} | ||
| preserveValue={true} | ||
| separator="," | ||
| /> | ||
| ); | ||
| averageTps = Math.round(avgTPS); | ||
| } else if (performanceInfo === undefined) { | ||
| txTrackerRef.current = { old: 0, new: 0 }; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="card"> | ||
| <StatsHeader /> | ||
|
|
||
| <TableCardBody> | ||
| <tr> | ||
| <td className="w-100">Block</td> | ||
| <TdLoadableStat stat={currentBlock} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Block time</td> | ||
| <TdLoadableStat stat={averageBlockTime} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Epoch</td> | ||
| <TdLoadableStat stat={currentEpoch} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Epoch progress</td> | ||
| <TdLoadableStat stat={epochProgress} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Epoch time remaining</td> | ||
| <TdLoadableStat stat={epochTimeRemaining} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Transaction count</td> | ||
| <TdLoadableStat stat={transactionCount} /> | ||
| </tr> | ||
| <tr> | ||
| <td className="w-100">Transactions per second</td> | ||
| <TdLoadableStat stat={averageTps} /> | ||
| </tr> | ||
| </TableCardBody> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function TdLoadableStat({ stat }: { stat: ReactNode | undefined }) { | ||
| return <td className="text-right text-monospace">{stat || "--"}</td>; | ||
| } | ||
|
|
||
| function StatsHeader() { | ||
| return ( | ||
| <div className="card-header"> | ||
| <div className="row align-items-center"> | ||
| <div className="col"> | ||
| <h4 className="card-header-title">Live Cluster Info</h4> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from "react"; | ||
| import { RootSlotProvider } from "./rootSlot"; | ||
| import { SolanaBeachProvider } from "./solanaBeach"; | ||
|
|
||
| type Props = { children: React.ReactNode }; | ||
| export function StatsProvider({ children }: Props) { | ||
| return ( | ||
| <RootSlotProvider> | ||
| <SolanaBeachProvider>{children}</SolanaBeachProvider> | ||
| </RootSlotProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from "react"; | ||
|
|
||
| import { Connection } from "@solana/web3.js"; | ||
| import { useCluster } from "../cluster"; | ||
|
|
||
| type State = { slot: number | undefined }; | ||
| const StateContext = React.createContext<State | undefined>(undefined); | ||
|
|
||
| type Props = { children: React.ReactNode }; | ||
| export function RootSlotProvider({ children }: Props) { | ||
| const [root, setRoot] = React.useState<number>(); | ||
| const { url } = useCluster(); | ||
|
|
||
| React.useEffect(() => { | ||
| const connection = new Connection(url); | ||
| const rootSubscription = connection.onRootChange((root) => { | ||
| setRoot(root); | ||
| }); | ||
| return () => { | ||
| setRoot(undefined); | ||
| connection.removeRootChangeListener(rootSubscription); | ||
| }; | ||
| }, [url]); | ||
|
|
||
| return ( | ||
| <StateContext.Provider value={{ slot: root }}> | ||
| {children} | ||
| </StateContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| export function useRootSlot() { | ||
| const context = React.useContext(StateContext); | ||
| if (!context) { | ||
| throw new Error(`useRootSlot must be used within a StatsProvider`); | ||
| } | ||
| return context.slot; | ||
| } |
Oops, something went wrong.