@@ -32,44 +34,33 @@ export function ClusterStatsPage() {
function StatsCardBody() {
const dashboardInfo = useDashboardInfo();
const performanceInfo = usePerformanceInfo();
- const setSocketActive = useSetActive();
+ const { setActive } = useStatsProvider();
const { cluster } = useCluster();
React.useEffect(() => {
- setSocketActive(true);
- return () => setSocketActive(false);
- }, [setSocketActive, cluster]);
+ setActive(true);
+ return () => setActive(false);
+ }, [setActive, cluster]);
- const statsAvailable =
- cluster === Cluster.MainnetBeta || cluster === Cluster.Testnet;
- if (!statsAvailable) {
- return (
-
-
- Stats are not available for this cluster
-
-
- );
+ if (
+ performanceInfo.status !== ClusterStatsStatus.Ready ||
+ dashboardInfo.status !== ClusterStatsStatus.Ready
+ ) {
+ const error =
+ performanceInfo.status === ClusterStatsStatus.Error ||
+ dashboardInfo.status === ClusterStatsStatus.Error;
+ return
;
}
- if (!dashboardInfo || !performanceInfo) {
- return (
-
-
- Loading
-
- );
- }
-
- const { avgBlockTime_1h, avgBlockTime_1min, epochInfo } = dashboardInfo;
- const hourlyBlockTime = Math.round(1000 * avgBlockTime_1h);
- const averageBlockTime = Math.round(1000 * avgBlockTime_1min) + "ms";
+ const { avgSlotTime_1h, avgSlotTime_1min, epochInfo } = dashboardInfo;
+ const hourlySlotTime = Math.round(1000 * avgSlotTime_1h);
+ const averageSlotTime = Math.round(1000 * avgSlotTime_1min) + "ms";
const { slotIndex, slotsInEpoch } = epochInfo;
const currentEpoch = epochInfo.epoch.toString();
const epochProgress = ((100 * slotIndex) / slotsInEpoch).toFixed(1) + "%";
const epochTimeRemaining = slotsToHumanString(
slotsInEpoch - slotIndex,
- hourlyBlockTime
+ hourlySlotTime
);
const { blockHeight, absoluteSlot } = epochInfo;
@@ -81,15 +72,17 @@ function StatsCardBody() {
+ {blockHeight !== undefined && (
+
+ | Block height |
+
+
+ |
+
+ )}
- | Block height |
-
-
- |
-
-
- | Block time |
- {averageBlockTime} |
+ Slot time |
+ {averageSlotTime} |
| Epoch |
@@ -106,3 +99,44 @@ function StatsCardBody() {
);
}
+
+export function StatsNotReady({ error }: { error: boolean }) {
+ const { setTimedOut, retry, active } = useStatsProvider();
+ const { cluster } = useCluster();
+
+ React.useEffect(() => {
+ let timedOut = 0;
+ if (!error) {
+ timedOut = setTimeout(setTimedOut, CLUSTER_STATS_TIMEOUT);
+ }
+ return () => {
+ if (timedOut) {
+ clearTimeout(timedOut);
+ }
+ };
+ }, [setTimedOut, cluster, error]);
+
+ if (error || !active) {
+ return (
+
+ There was a problem loading cluster stats.{" "}
+
+
+ );
+ }
+
+ return (
+
+
+ Loading
+
+ );
+}
diff --git a/explorer/src/providers/stats/index.tsx b/explorer/src/providers/stats/index.tsx
index 60a482d5fc..56e20c9980 100644
--- a/explorer/src/providers/stats/index.tsx
+++ b/explorer/src/providers/stats/index.tsx
@@ -1,7 +1,7 @@
import React from "react";
-import { SolanaBeachProvider } from "./solanaBeach";
+import { SolanaClusterStatsProvider } from "./solanaClusterStats";
type Props = { children: React.ReactNode };
export function StatsProvider({ children }: Props) {
- return {children};
+ return {children};
}
diff --git a/explorer/src/providers/stats/solanaBeach.tsx b/explorer/src/providers/stats/solanaBeach.tsx
deleted file mode 100644
index d3893290a2..0000000000
--- a/explorer/src/providers/stats/solanaBeach.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React from "react";
-import io from "socket.io-client";
-
-import { pick, array, nullable, number, is, StructType } from "superstruct";
-import { useCluster, Cluster } from "providers/cluster";
-
-const DashboardInfo = pick({
- avgBlockTime_1h: number(),
- avgBlockTime_1min: number(),
- epochInfo: pick({
- absoluteSlot: number(),
- blockHeight: number(),
- epoch: number(),
- slotIndex: number(),
- slotsInEpoch: number(),
- }),
-});
-
-const RootInfo = pick({
- root: number(),
-});
-
-export const PERF_UPDATE_SEC = 5;
-
-const PerformanceInfo = pick({
- avgTPS: number(),
- perfHistory: pick({
- s: array(nullable(number())),
- m: array(nullable(number())),
- l: array(nullable(number())),
- }),
- totalTransactionCount: number(),
-});
-
-type SetActive = React.Dispatch>;
-const SetActiveContext = React.createContext<
- { setActive: SetActive } | undefined
->(undefined);
-
-type RootInfo = StructType;
-type RootState = { slot: number | undefined };
-const RootContext = React.createContext(undefined);
-
-type DashboardInfo = StructType;
-type DashboardState = { info: DashboardInfo | undefined };
-const DashboardContext = React.createContext(
- undefined
-);
-
-export type PerformanceInfo = {
- avgTps: number;
- historyMaxTps: number;
- perfHistory: {
- short: (number | null)[];
- medium: (number | null)[];
- long: (number | null)[];
- };
- transactionCount: number;
-};
-
-type PerformanceState = { info: PerformanceInfo | undefined };
-const PerformanceContext = React.createContext(
- undefined
-);
-
-const MAINNET_URL = "https://api.solanabeach.io:8443/mainnet";
-const TESTNET_URL = "https://api.solanabeach.io:8443/tds";
-
-type Props = { children: React.ReactNode };
-export function SolanaBeachProvider({ children }: Props) {
- const { cluster } = useCluster();
- const [active, setActive] = React.useState(false);
- const [root, setRoot] = React.useState();
- const [dashboardInfo, setDashboardInfo] = React.useState();
- const [performanceInfo, setPerformanceInfo] = React.useState<
- PerformanceInfo
- >();
-
- React.useEffect(() => {
- if (!active) return;
-
- let socket: SocketIOClient.Socket;
- if (cluster === Cluster.MainnetBeta) {
- socket = io(MAINNET_URL);
- } else if (cluster === Cluster.Testnet) {
- socket = io(TESTNET_URL);
- } else {
- return;
- }
-
- socket.on("connect", () => {
- socket.emit("request_dashboardInfo");
- socket.emit("request_performanceInfo");
- });
- socket.on("error", (err: any) => {
- console.error(err);
- });
- socket.on("dashboardInfo", (data: any) => {
- if (is(data, DashboardInfo)) {
- setDashboardInfo(data);
- }
- });
- socket.on("performanceInfo", (data: any) => {
- if (is(data, PerformanceInfo)) {
- const trimSeries = (series: (number | null)[]) => {
- return series.slice(series.length - 51, series.length - 1);
- };
-
- const seriesMax = (series: (number | null)[]) => {
- return series.reduce((max: number, next) => {
- if (next === null) return max;
- return Math.max(max, next);
- }, 0);
- };
-
- const normalize = (series: Array, seconds: number) => {
- return series.map((next) => {
- if (next === null) return next;
- return Math.round(next / seconds);
- });
- };
-
- const short = normalize(trimSeries(data.perfHistory.s), 15);
- const medium = normalize(trimSeries(data.perfHistory.m), 60);
- const long = normalize(trimSeries(data.perfHistory.l), 180);
- const historyMaxTps = Math.max(
- seriesMax(short),
- seriesMax(medium),
- seriesMax(long)
- );
-
- setPerformanceInfo({
- avgTps: data.avgTPS,
- historyMaxTps,
- perfHistory: { short, medium, long },
- transactionCount: data.totalTransactionCount,
- });
- }
- });
- socket.on("rootNotification", (data: any) => {
- if (is(data, RootInfo)) {
- setRoot(data.root);
- }
- });
- return () => {
- socket.disconnect();
- };
- }, [active, cluster]);
-
- // Reset info whenever the cluster changes
- React.useEffect(() => {
- return () => {
- setDashboardInfo(undefined);
- setPerformanceInfo(undefined);
- setRoot(undefined);
- };
- }, [cluster]);
-
- return (
-
-
-
-
- {children}
-
-
-
-
- );
-}
-
-export function useSetActive() {
- const context = React.useContext(SetActiveContext);
- if (!context) {
- throw new Error(`useSetActive must be used within a StatsProvider`);
- }
- return context.setActive;
-}
-
-export function useDashboardInfo() {
- const context = React.useContext(DashboardContext);
- if (!context) {
- throw new Error(`useDashboardInfo must be used within a StatsProvider`);
- }
- return context.info;
-}
-
-export function usePerformanceInfo() {
- const context = React.useContext(PerformanceContext);
- if (!context) {
- throw new Error(`usePerformanceInfo must be used within a StatsProvider`);
- }
- return context.info;
-}
-
-export function useRootSlot() {
- const context = React.useContext(RootContext);
- if (!context) {
- throw new Error(`useRootSlot must be used within a StatsProvider`);
- }
- return context.slot;
-}
diff --git a/explorer/src/providers/stats/solanaClusterStats.tsx b/explorer/src/providers/stats/solanaClusterStats.tsx
new file mode 100644
index 0000000000..52bd9e7844
--- /dev/null
+++ b/explorer/src/providers/stats/solanaClusterStats.tsx
@@ -0,0 +1,261 @@
+import React from "react";
+import { Connection } from "@solana/web3.js";
+import { useCluster, Cluster } from "providers/cluster";
+import {
+ DashboardInfo,
+ DashboardInfoActionType,
+ dashboardInfoReducer,
+} from "./solanaDashboardInfo";
+import {
+ PerformanceInfo,
+ PerformanceInfoActionType,
+ performanceInfoReducer,
+} from "./solanaPerformanceInfo";
+import { reportError } from "utils/sentry";
+
+export const PERF_UPDATE_SEC = 5;
+export const SAMPLE_HISTORY_HOURS = 6;
+export const PERFORMANCE_SAMPLE_INTERVAL = 60000;
+export const TRANSACTION_COUNT_INTERVAL = 5000;
+export const EPOCH_INFO_INTERVAL = 2000;
+export const LOADING_TIMEOUT = 10000;
+
+export enum ClusterStatsStatus {
+ Loading,
+ Ready,
+ Error,
+}
+
+const initialPerformanceInfo: PerformanceInfo = {
+ status: ClusterStatsStatus.Loading,
+ avgTps: 0,
+ historyMaxTps: 0,
+ perfHistory: {
+ short: [],
+ medium: [],
+ long: [],
+ },
+ transactionCount: 0,
+};
+
+const initialDashboardInfo: DashboardInfo = {
+ status: ClusterStatsStatus.Loading,
+ avgSlotTime_1h: 0,
+ avgSlotTime_1min: 0,
+ epochInfo: {
+ absoluteSlot: 0,
+ blockHeight: 0,
+ epoch: 0,
+ slotIndex: 0,
+ slotsInEpoch: 0,
+ },
+};
+
+type SetActive = React.Dispatch>;
+const StatsProviderContext = React.createContext<
+ | {
+ setActive: SetActive;
+ setTimedOut: Function;
+ retry: Function;
+ active: boolean;
+ }
+ | undefined
+>(undefined);
+
+type DashboardState = { info: DashboardInfo };
+const DashboardContext = React.createContext(
+ undefined
+);
+
+type PerformanceState = { info: PerformanceInfo };
+const PerformanceContext = React.createContext(
+ undefined
+);
+
+type Props = { children: React.ReactNode };
+export function SolanaClusterStatsProvider({ children }: Props) {
+ const { cluster, url } = useCluster();
+ const [active, setActive] = React.useState(false);
+ const [dashboardInfo, dispatchDashboardInfo] = React.useReducer(
+ dashboardInfoReducer,
+ initialDashboardInfo
+ );
+ const [performanceInfo, dispatchPerformanceInfo] = React.useReducer(
+ performanceInfoReducer,
+ initialPerformanceInfo
+ );
+
+ React.useEffect(() => {
+ if (!active || !url) return;
+
+ const connection = new Connection(url);
+
+ const getPerformanceSamples = async () => {
+ try {
+ const samples = await connection.getRecentPerformanceSamples(
+ 60 * SAMPLE_HISTORY_HOURS
+ );
+
+ if (samples.length < 1) {
+ // no samples to work with (node has no history).
+ return; // we will allow for a timeout instead of throwing an error
+ }
+
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.SetPerfSamples,
+ data: samples,
+ });
+
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.SetPerfSamples,
+ data: samples,
+ });
+ } catch (error) {
+ if (cluster !== Cluster.Custom) {
+ reportError(error, { url });
+ }
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.SetError,
+ data: error.toString(),
+ });
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.SetError,
+ data: error.toString(),
+ });
+ setActive(false);
+ }
+ };
+
+ const getTransactionCount = async () => {
+ try {
+ const transactionCount = await connection.getTransactionCount();
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.SetTransactionCount,
+ data: transactionCount,
+ });
+ } catch (error) {
+ if (cluster !== Cluster.Custom) {
+ reportError(error, { url });
+ }
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.SetError,
+ data: error.toString(),
+ });
+ setActive(false);
+ }
+ };
+
+ const getEpochInfo = async () => {
+ try {
+ const epochInfo = await connection.getEpochInfo();
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.SetEpochInfo,
+ data: epochInfo,
+ });
+ } catch (error) {
+ if (cluster !== Cluster.Custom) {
+ reportError(error, { url });
+ }
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.SetError,
+ data: error.toString(),
+ });
+ setActive(false);
+ }
+ };
+
+ const performanceInterval = setInterval(
+ getPerformanceSamples,
+ PERFORMANCE_SAMPLE_INTERVAL
+ );
+ const transactionCountInterval = setInterval(
+ getTransactionCount,
+ TRANSACTION_COUNT_INTERVAL
+ );
+ const epochInfoInterval = setInterval(getEpochInfo, EPOCH_INFO_INTERVAL);
+
+ getPerformanceSamples();
+ getTransactionCount();
+ getEpochInfo();
+
+ return () => {
+ clearInterval(performanceInterval);
+ clearInterval(transactionCountInterval);
+ clearInterval(epochInfoInterval);
+ };
+ }, [active, cluster, url]);
+
+ // Reset when cluster changes
+ React.useEffect(() => {
+ return () => {
+ resetData();
+ };
+ }, [url]);
+
+ function resetData() {
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.Reset,
+ data: initialDashboardInfo,
+ });
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.Reset,
+ data: initialPerformanceInfo,
+ });
+ }
+
+ const setTimedOut = React.useCallback(() => {
+ dispatchDashboardInfo({
+ type: DashboardInfoActionType.SetError,
+ data: "Cluster stats timed out",
+ });
+ dispatchPerformanceInfo({
+ type: PerformanceInfoActionType.SetError,
+ data: "Cluster stats timed out",
+ });
+ if (cluster !== Cluster.Custom) {
+ reportError(new Error("Cluster stats timed out"), { url });
+ }
+ setActive(false);
+ }, [cluster, url]);
+
+ const retry = React.useCallback(() => {
+ resetData();
+ setActive(true);
+ }, []);
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+export function useStatsProvider() {
+ const context = React.useContext(StatsProviderContext);
+ if (!context) {
+ throw new Error(`useContext must be used within a StatsProvider`);
+ }
+ return context;
+}
+
+export function useDashboardInfo() {
+ const context = React.useContext(DashboardContext);
+ if (!context) {
+ throw new Error(`useDashboardInfo must be used within a StatsProvider`);
+ }
+ return context.info;
+}
+
+export function usePerformanceInfo() {
+ const context = React.useContext(PerformanceContext);
+ if (!context) {
+ throw new Error(`usePerformanceInfo must be used within a StatsProvider`);
+ }
+ return context.info;
+}
diff --git a/explorer/src/providers/stats/solanaDashboardInfo.tsx b/explorer/src/providers/stats/solanaDashboardInfo.tsx
new file mode 100644
index 0000000000..9509979909
--- /dev/null
+++ b/explorer/src/providers/stats/solanaDashboardInfo.tsx
@@ -0,0 +1,95 @@
+import { EpochInfo, PerfSample } from "@solana/web3.js";
+import { ClusterStatsStatus } from "./solanaClusterStats";
+
+export type DashboardInfo = {
+ status: ClusterStatsStatus;
+ avgSlotTime_1h: number;
+ avgSlotTime_1min: number;
+ epochInfo: EpochInfo;
+};
+
+export enum DashboardInfoActionType {
+ SetPerfSamples,
+ SetEpochInfo,
+ SetError,
+ Reset,
+}
+
+export type DashboardInfoActionSetPerfSamples = {
+ type: DashboardInfoActionType.SetPerfSamples;
+ data: PerfSample[];
+};
+
+export type DashboardInfoActionSetEpochInfo = {
+ type: DashboardInfoActionType.SetEpochInfo;
+ data: EpochInfo;
+};
+
+export type DashboardInfoActionReset = {
+ type: DashboardInfoActionType.Reset;
+ data: DashboardInfo;
+};
+
+export type DashboardInfoActionSetError = {
+ type: DashboardInfoActionType.SetError;
+ data: string;
+};
+
+export type DashboardInfoAction =
+ | DashboardInfoActionSetPerfSamples
+ | DashboardInfoActionSetEpochInfo
+ | DashboardInfoActionReset
+ | DashboardInfoActionSetError;
+
+export function dashboardInfoReducer(
+ state: DashboardInfo,
+ action: DashboardInfoAction
+) {
+ const status =
+ state.avgSlotTime_1h !== 0 && state.epochInfo.absoluteSlot !== 0
+ ? ClusterStatsStatus.Ready
+ : ClusterStatsStatus.Loading;
+
+ switch (action.type) {
+ case DashboardInfoActionType.SetPerfSamples:
+ if (action.data.length < 1) {
+ return state;
+ }
+
+ const samples = action.data
+ .map((sample) => {
+ return sample.samplePeriodSecs / sample.numSlots;
+ })
+ .slice(0, 60);
+
+ const samplesInHour = samples.length < 60 ? samples.length : 60;
+ const avgSlotTime_1h =
+ samples.reduce((sum: number, cur: number) => {
+ return sum + cur;
+ }, 0) / samplesInHour;
+
+ return {
+ ...state,
+ avgSlotTime_1h,
+ avgSlotTime_1min: samples[0],
+ status,
+ };
+ case DashboardInfoActionType.SetEpochInfo:
+ return {
+ ...state,
+ epochInfo: action.data,
+ status,
+ };
+ case DashboardInfoActionType.SetError:
+ return {
+ ...state,
+ status: ClusterStatsStatus.Error,
+ };
+ case DashboardInfoActionType.Reset:
+ return {
+ ...action.data,
+ };
+ default:
+ return state;
+ }
+}
diff --git a/explorer/src/providers/stats/solanaPerformanceInfo.tsx b/explorer/src/providers/stats/solanaPerformanceInfo.tsx
new file mode 100644
index 0000000000..a2d73111da
--- /dev/null
+++ b/explorer/src/providers/stats/solanaPerformanceInfo.tsx
@@ -0,0 +1,126 @@
+import { PerfSample } from "@solana/web3.js";
+import { ClusterStatsStatus } from "./solanaClusterStats";
+
+export type PerformanceInfo = {
+ status: ClusterStatsStatus;
+ avgTps: number;
+ historyMaxTps: number;
+ perfHistory: {
+ short: (number | null)[];
+ medium: (number | null)[];
+ long: (number | null)[];
+ };
+ transactionCount: number;
+};
+
+export enum PerformanceInfoActionType {
+ SetTransactionCount,
+ SetPerfSamples,
+ SetError,
+ Reset,
+}
+
+export type PerformanceInfoActionSetTransactionCount = {
+ type: PerformanceInfoActionType.SetTransactionCount;
+ data: number;
+};
+
+export type PerformanceInfoActionSetPerfSamples = {
+ type: PerformanceInfoActionType.SetPerfSamples;
+ data: PerfSample[];
+};
+
+export type PerformanceInfoActionSetError = {
+ type: PerformanceInfoActionType.SetError;
+ data: string;
+};
+
+export type PerformanceInfoActionReset = {
+ type: PerformanceInfoActionType.Reset;
+ data: PerformanceInfo;
+};
+
+export type PerformanceInfoAction =
+ | PerformanceInfoActionSetTransactionCount
+ | PerformanceInfoActionSetPerfSamples
+ | PerformanceInfoActionSetError
+ | PerformanceInfoActionReset;
+
+export function performanceInfoReducer(
+ state: PerformanceInfo,
+ action: PerformanceInfoAction
+) {
+ const status =
+ state.avgTps !== 0 && state.transactionCount !== 0
+ ? ClusterStatsStatus.Ready
+ : ClusterStatsStatus.Loading;
+
+ switch (action.type) {
+ case PerformanceInfoActionType.SetPerfSamples:
+ if (action.data.length < 1) {
+ return state;
+ }
+
+ let short = action.data.map((sample) => {
+ return sample.numTransactions / sample.samplePeriodSecs;
+ });
+
+ const avgTps = short[0];
+ const medium = downsampleByFactor(short, 4);
+ const long = downsampleByFactor(medium, 3);
+
+ const perfHistory = {
+ short: round(short.slice(0, 30)).reverse(),
+ medium: round(medium.slice(0, 30)).reverse(),
+ long: round(long.slice(0, 30)).reverse(),
+ };
+
+ const historyMaxTps = Math.max(
+ Math.max(...perfHistory.short),
+ Math.max(...perfHistory.medium),
+ Math.max(...perfHistory.long)
+ );
+
+ return {
+ ...state,
+ historyMaxTps,
+ avgTps,
+ perfHistory,
+ status,
+ };
+ case PerformanceInfoActionType.SetTransactionCount:
+ return {
+ ...state,
+ transactionCount: action.data,
+ status,
+ };
+ case PerformanceInfoActionType.SetError:
+ return {
+ ...state,
+ status: ClusterStatsStatus.Error,
+ };
+ case PerformanceInfoActionType.Reset:
+ return {
+ ...action.data,
+ };
+ default:
+ return state;
+ }
+}
+
+function downsampleByFactor(series: number[], factor: number) {
+ return series.reduce((result: number[], num: number, i: number) => {
+ const downsampledIndex = Math.floor(i / factor);
+ if (result.length < downsampledIndex + 1) {
+ result.push(0);
+ }
+ const mean = result[downsampledIndex];
+ const differential = (num - mean) / ((i % factor) + 1);
+ result[downsampledIndex] = mean + differential;
+ return result;
+ }, []);
+}
+
+function round(series: number[]) {
+ return series.map((n) => Math.round(n));
+}