;
+ );
};
function navLinkClassName({ isActive }: { isActive: boolean }) {
diff --git a/tools/debug-ui/src/PeerStorageView.scss b/tools/debug-ui/src/PeerStorageView.scss
index 81cf0ed43ba..c0b78af5766 100644
--- a/tools/debug-ui/src/PeerStorageView.scss
+++ b/tools/debug-ui/src/PeerStorageView.scss
@@ -1,3 +1,3 @@
.peer-storage-table {
margin: 10px;
-}
\ No newline at end of file
+}
diff --git a/tools/debug-ui/src/PeerStorageView.tsx b/tools/debug-ui/src/PeerStorageView.tsx
index 24b3a3bb6d6..00bfd44ab90 100644
--- a/tools/debug-ui/src/PeerStorageView.tsx
+++ b/tools/debug-ui/src/PeerStorageView.tsx
@@ -1,48 +1,65 @@
-import { useQuery } from "react-query";
-import { toHumanTime } from "./utils";
-import { fetchPeerStore } from "./api";
-import "./PeerStorageView.scss";
+import { useQuery } from 'react-query';
+import { toHumanTime } from './utils';
+import { fetchPeerStore } from './api';
+import './PeerStorageView.scss';
type PeerStorageViewProps = {
- addr: string,
+ addr: string;
};
export const PeerStorageView = ({ addr }: PeerStorageViewProps) => {
- const { data: peerStore, error, isLoading } =
- useQuery(['peerStore', addr], () => fetchPeerStore(addr));
+ const {
+ data: peerStore,
+ error,
+ isLoading,
+ } = useQuery(['peerStore', addr], () => fetchPeerStore(addr));
if (isLoading) {
return
Loading...
+ );
};
diff --git a/tools/debug-ui/src/RecentEpochsView.scss b/tools/debug-ui/src/RecentEpochsView.scss
index ee8487449db..47ee7a50bfd 100644
--- a/tools/debug-ui/src/RecentEpochsView.scss
+++ b/tools/debug-ui/src/RecentEpochsView.scss
@@ -24,4 +24,4 @@
tr.next-epoch {
color: gray;
}
-}
\ No newline at end of file
+}
diff --git a/tools/debug-ui/src/RecentEpochsView.tsx b/tools/debug-ui/src/RecentEpochsView.tsx
index 23301726cb0..b70fa21eea6 100644
--- a/tools/debug-ui/src/RecentEpochsView.tsx
+++ b/tools/debug-ui/src/RecentEpochsView.tsx
@@ -1,78 +1,93 @@
-import { useQuery } from "react-query";
-import { fetchEpochInfo, fetchFullStatus } from "./api";
-import { formatDurationInMillis } from "./utils";
-import "./RecentEpochsView.scss";
+import { useQuery } from 'react-query';
+import { fetchEpochInfo, fetchFullStatus } from './api';
+import { formatDurationInMillis } from './utils';
+import './RecentEpochsView.scss';
type RecentEpochsViewProps = {
- addr: string,
+ addr: string;
};
export const RecentEpochsView = ({ addr }: RecentEpochsViewProps) => {
- const { data: epochData, error: epochError, isLoading: epochIsLoading } =
- useQuery(['epochInfo', addr], () => fetchEpochInfo(addr));
- const { data: statusData, error: statusError, isLoading: statusIsLoading } =
- useQuery(['fullStatus', addr], () => fetchFullStatus(addr));
+ const {
+ data: epochData,
+ error: epochError,
+ isLoading: epochIsLoading,
+ } = useQuery(['epochInfo', addr], () => fetchEpochInfo(addr));
+ const {
+ data: statusData,
+ error: statusError,
+ isLoading: statusIsLoading,
+ } = useQuery(['fullStatus', addr], () => fetchFullStatus(addr));
if (epochIsLoading || statusIsLoading) {
return
Loading...
;
}
const epochInfos = epochData!.status_response.EpochInfo;
const status = statusData!;
- return
+ );
};
diff --git a/tools/debug-ui/src/Tier1View.tsx b/tools/debug-ui/src/Tier1View.tsx
index ec36dcaa923..96b8a70ede2 100644
--- a/tools/debug-ui/src/Tier1View.tsx
+++ b/tools/debug-ui/src/Tier1View.tsx
@@ -1,51 +1,49 @@
-import { MouseEvent, ReactElement, useCallback, useMemo, useState } from "react";
-import { useQuery } from "react-query";
-import { fetchEpochInfo, fetchFullStatus, PeerInfoView, PeerAddr } from "./api";
-import { formatDurationInMillis, formatTraffic, addDebugPortLink } from "./utils";
-import "./Tier1View.scss";
+import { MouseEvent, useCallback, useState } from 'react';
+import { useQuery } from 'react-query';
+import { PeerAddr, fetchFullStatus } from './api';
+import { addDebugPortLink, formatDurationInMillis, formatTraffic } from './utils';
+import './Tier1View.scss';
type Tier1ViewProps = {
- addr: string,
+ addr: string;
};
-type PeerInfo = {
- peer: PeerInfoView,
- validator: string[],
- routedValidator: string[],
- statusClassName: string,
-}
-
export const Tier1View = ({ addr }: Tier1ViewProps) => {
- const { data: fullStatus, error: fullStatusError, isLoading: fullStatusLoading } =
- useQuery(['fullStatus', addr], () => fetchFullStatus(addr));
+ const {
+ data: fullStatus,
+ error: fullStatusError,
+ isLoading: fullStatusLoading,
+ } = useQuery(['fullStatus', addr], () => fetchFullStatus(addr));
if (fullStatusLoading) {
return
Loading...
-
- {(fullStatusError as Error).stack}
+ return (
+
+
{(fullStatusError as Error).stack}
-
;
+ );
}
if (!fullStatus) {
- return
;
+ return (
+
+ );
}
const networkInfo = fullStatus.detailed_debug_status!.network_info;
const rendered = new Set();
- const rows = new Array();
+ const rows = [];
// tier1_connections contains TIER1 nodes we are currently connected to
for (const peer of networkInfo.tier1_connections!) {
- let accountKey = "";
- let proxies:PeerAddr[] = [];
+ let accountKey = '';
+ let proxies: PeerAddr[] = [];
- networkInfo.tier1_accounts_data!.forEach(account => {
+ networkInfo.tier1_accounts_data!.forEach((account) => {
if (account.peer_id == peer.peer_id) {
accountKey = account.account_key;
proxies = account.proxies;
@@ -54,65 +52,73 @@ export const Tier1View = ({ addr }: Tier1ViewProps) => {
rendered.add(accountKey);
- let accountId = "";
- networkInfo.known_producers.forEach(producer => {
+ let accountId = '';
+ networkInfo.known_producers.forEach((producer) => {
if (producer.peer_id == peer.peer_id) {
accountId = producer.account_id;
}
});
let lastPing = formatDurationInMillis(peer.last_time_received_message_millis);
- let lastPingClass = "";
+ let lastPingClass = '';
if (fullStatus.node_public_key == accountKey) {
- lastPing = "n/a"
+ lastPing = 'n/a';
} else if (peer.last_time_received_message_millis > 60 * 1000) {
- lastPingClass = "peer_far_behind";
+ lastPingClass = 'peer_far_behind';
}
- rows.push(
- | {addDebugPortLink(peer.addr)} |
- {accountKey.substring(8, 14)}... |
- {accountId} |
- |
- {peer.peer_id.substring(8, 14)}... |
- {lastPing} |
- {JSON.stringify(peer.tracked_shards)} |
- {JSON.stringify(peer.archival)} |
- {peer.is_outbound_peer ? 'OUT' : 'IN'} |
- {formatDurationInMillis(peer.connection_established_time_millis)} |
- {formatTraffic(peer.received_bytes_per_sec, peer.sent_bytes_per_sec)} |
-
);
+ rows.push(
+
+ | {addDebugPortLink(peer.addr)} |
+ {accountKey.substring(8, 14)}... |
+ {accountId} |
+
+
+ |
+ {peer.peer_id.substring(8, 14)}... |
+ {lastPing} |
+ {JSON.stringify(peer.tracked_shards)} |
+ {JSON.stringify(peer.archival)} |
+ {peer.is_outbound_peer ? 'OUT' : 'IN'} |
+ {formatDurationInMillis(peer.connection_established_time_millis)} |
+ {formatTraffic(peer.received_bytes_per_sec, peer.sent_bytes_per_sec)} |
+
+ );
}
// tier1_accounts_data contains data about TIER1 nodes we would like to connect to
for (const account of networkInfo.tier1_accounts_data!) {
- let accountKey = account.account_key;
+ const accountKey = account.account_key;
if (rendered.has(accountKey)) {
continue;
}
rendered.add(accountKey);
- let accountId = "";
- networkInfo.known_producers.forEach(producer => {
+ let accountId = '';
+ networkInfo.known_producers.forEach((producer) => {
if (producer.peer_id == account.peer_id) {
accountId = producer.account_id;
}
});
- rows.push(
- |
- {accountKey.substring(8, 14)}... |
- {accountId} |
- |
- {account.peer_id.substring(8, 14)}... |
- |
- |
- |
- |
- |
- |
-
);
+ rows.push(
+
+ |
+ {accountKey.substring(8, 14)}... |
+ {accountId} |
+
+
+ |
+ {account.peer_id.substring(8, 14)}... |
+ |
+ |
+ |
+ |
+ |
+ |
+
+ );
}
// tier1_accounts_keys contains accounts whose data we would like to collect
@@ -122,43 +128,45 @@ export const Tier1View = ({ addr }: Tier1ViewProps) => {
}
rendered.add(accountKey);
- rows.push(
- |
- {accountKey.substring(8, 14)}... |
- |
- |
- |
- |
- |
- |
- |
- |
- |
-
);
+ rows.push(
+
+ |
+ {accountKey.substring(8, 14)}... |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+
+ );
}
- return
-
-
-
- | Address |
- AccountKey |
- Account ID |
- Proxies |
- PeerId |
- Last ping |
- Tracked Shards |
- Archival |
- Connection type |
- First connection |
- Traffic (last minute) |
-
-
-
- {rows}
-
-
-
;
+ return (
+
+
+
+
+ | Address |
+ AccountKey |
+ Account ID |
+ Proxies |
+ PeerId |
+ Last ping |
+ Tracked Shards |
+ Archival |
+ Connection type |
+ First connection |
+ Traffic (last minute) |
+
+
+ {rows}
+
+
+ );
};
const CollapsibleProxyList = ({ proxies }: { proxies: PeerAddr[] }) => {
@@ -169,18 +177,30 @@ const CollapsibleProxyList = ({ proxies }: { proxies: PeerAddr[] }) => {
}, []);
const MAX_TO_SHOW = 2;
- const formatted = proxies.map(proxy => {
- return proxy.peer_id.substring(8, 14) + "...@" + proxy.addr;
+ const formatted = proxies.map((proxy) => {
+ return proxy.peer_id.substring(8, 14) + '...@' + proxy.addr;
});
if (formatted.length <= MAX_TO_SHOW) {
return <>{formatted.join(', ')};
}
if (showAll) {
- return <>{formatted.join(', ')}
Show fewer;
+ return (
+ <>
+ {formatted.join(', ')}{' '}
+
+ Show fewer
+
+
+ );
}
- return <>
- {formatted.slice(0, MAX_TO_SHOW).join(', ')}, ...
-
Show all {formatted.length}
- ;
-}
+ return (
+ <>
+ {formatted.slice(0, MAX_TO_SHOW).join(', ')}, ...
+
+
+ Show all {formatted.length}
+
+
+ );
+};
diff --git a/tools/debug-ui/src/api.tsx b/tools/debug-ui/src/api.tsx
index 57c1a62bde1..7ce87c9a131 100644
--- a/tools/debug-ui/src/api.tsx
+++ b/tools/debug-ui/src/api.tsx
@@ -1,4 +1,3 @@
-
export interface StatusResponse {
chain_id: string;
latest_protocol_version: number;
@@ -40,257 +39,258 @@ export interface BuildInfo {
}
export interface DetailedDebugStatus {
- network_info: NetworkInfoView,
- sync_status: string,
- catchup_status: CatchupStatusView[],
- current_head_status: BlockStatusView,
- current_header_head_status: BlockStatusView,
- block_production_delay_millis: number,
+ network_info: NetworkInfoView;
+ sync_status: string;
+ catchup_status: CatchupStatusView[];
+ current_head_status: BlockStatusView;
+ current_header_head_status: BlockStatusView;
+ block_production_delay_millis: number;
}
export interface NetworkInfoView {
- peer_max_count: number,
- num_connected_peers: number,
- connected_peers: PeerInfoView[],
- known_producers: KnownProducerView[],
- tier1_accounts_keys?: string[],
- tier1_accounts_data?: AccountData[],
- tier1_connections?: PeerInfoView[],
+ peer_max_count: number;
+ num_connected_peers: number;
+ connected_peers: PeerInfoView[];
+ known_producers: KnownProducerView[];
+ tier1_accounts_keys?: string[];
+ tier1_accounts_data?: AccountData[];
+ tier1_connections?: PeerInfoView[];
}
export interface CatchupStatusView {
- sync_block_hash: string,
- sync_block_height: number,
- shard_sync_status: { [shard_id: number]: string },
- blocks_to_catchup: BlockStatusView[],
+ sync_block_hash: string;
+ sync_block_height: number;
+ shard_sync_status: { [shard_id: number]: string };
+ blocks_to_catchup: BlockStatusView[];
}
export interface BlockStatusView {
- height: number,
- hash: string,
+ height: number;
+ hash: string;
}
export interface PeerInfoView {
- addr: string,
- account_id: string | null,
- height: number | null,
- block_hash: string | null,
- is_highest_block_invalid: boolean,
- tracked_shards: number[],
- archival: boolean,
- peer_id: string,
- received_bytes_per_sec: number,
- sent_bytes_per_sec: number,
- last_time_peer_requested_millis: number,
- last_time_received_message_millis: number,
- connection_established_time_millis: number,
- is_outbound_peer: boolean,
- nonce: number,
+ addr: string;
+ account_id: string | null;
+ height: number | null;
+ block_hash: string | null;
+ is_highest_block_invalid: boolean;
+ tracked_shards: number[];
+ archival: boolean;
+ peer_id: string;
+ received_bytes_per_sec: number;
+ sent_bytes_per_sec: number;
+ last_time_peer_requested_millis: number;
+ last_time_received_message_millis: number;
+ connection_established_time_millis: number;
+ is_outbound_peer: boolean;
+ nonce: number;
}
export interface KnownProducerView {
- account_id: string,
- peer_id: string,
- next_hops: string[] | null,
+ account_id: string;
+ peer_id: string;
+ next_hops: string[] | null;
}
export interface PeerAddr {
- addr: string,
- peer_id: string,
+ addr: string;
+ peer_id: string;
}
export interface AccountData {
- peer_id: string,
- proxies: PeerAddr[],
- account_key: string,
- version: number,
- timestamp: string,
+ peer_id: string;
+ proxies: PeerAddr[];
+ account_key: string;
+ version: number;
+ timestamp: string;
}
export type SyncStatusView =
- 'AwaitingPeers' |
- 'NoSync' | {
- EpochSync: { epoch_ord: number }
- } | {
- HeaderSync: {
- start_height: number,
- current_height: number,
- highest_height: number,
- }
- } | {
- StateSync: [
- string,
- { [shard_id: number]: ShardSyncDownloadView },
- ]
- } |
- 'StateSyncDone' | {
- BodySync: {
- start_height: number,
- current_height: number,
- highest_height: number,
- }
- };
+ | 'AwaitingPeers'
+ | 'NoSync'
+ | {
+ EpochSync: { epoch_ord: number };
+ }
+ | {
+ HeaderSync: {
+ start_height: number;
+ current_height: number;
+ highest_height: number;
+ };
+ }
+ | {
+ StateSync: [string, { [shard_id: number]: ShardSyncDownloadView }];
+ }
+ | 'StateSyncDone'
+ | {
+ BodySync: {
+ start_height: number;
+ current_height: number;
+ highest_height: number;
+ };
+ };
export interface ShardSyncDownloadView {
- downloads: { error: boolean, done: boolean }[];
+ downloads: { error: boolean; done: boolean }[];
status: string;
}
export interface DebugBlockStatusData {
- blocks: DebugBlockStatus[],
- missed_heights: MissedHeightInfo[],
- head: string,
- header_head: string,
+ blocks: DebugBlockStatus[];
+ missed_heights: MissedHeightInfo[];
+ head: string;
+ header_head: string;
}
export interface DebugBlockStatus {
- block_hash: string,
- prev_block_hash: string,
- block_height: number,
- block_timestamp: number,
- block_producer: string | null,
- full_block_missing: boolean,
- is_on_canonical_chain: boolean,
- chunks: DebugChunkStatus[],
- processing_time_ms?: number,
- gas_price_ratio: number,
+ block_hash: string;
+ prev_block_hash: string;
+ block_height: number;
+ block_timestamp: number;
+ block_producer: string | null;
+ full_block_missing: boolean;
+ is_on_canonical_chain: boolean;
+ chunks: DebugChunkStatus[];
+ processing_time_ms?: number;
+ gas_price_ratio: number;
}
export interface MissedHeightInfo {
- block_height: number,
- block_producer: string | null,
+ block_height: number;
+ block_producer: string | null;
}
export interface DebugChunkStatus {
- shard_id: number,
- chunk_hash: string,
- chunk_producer: string | null,
- gas_used: number,
- processing_time_ms?: number,
+ shard_id: number;
+ chunk_hash: string;
+ chunk_producer: string | null;
+ gas_used: number;
+ processing_time_ms?: number;
}
export interface EpochInfoView {
- epoch_id: string,
- height: number,
- first_block: null | [string, string],
- block_producers: ValidatorInfo[],
- chunk_only_producers: string[],
- validator_info: EpochValidatorInfo,
- protocol_version: number,
- shards_size_and_parts: [number, number, boolean][],
+ epoch_id: string;
+ height: number;
+ first_block: null | [string, string];
+ block_producers: ValidatorInfo[];
+ chunk_only_producers: string[];
+ validator_info: EpochValidatorInfo;
+ protocol_version: number;
+ shards_size_and_parts: [number, number, boolean][];
}
export interface EpochValidatorInfo {
- current_validators: CurrentEpochValidatorInfo[],
- next_validators: NextEpochValidatorInfo[],
- current_fishermen: ValidatorStakeView[],
- next_fishermen: ValidatorStakeView[],
- current_proposals: ValidatorStakeView[],
- prev_epoch_kickout: ValidatorKickoutView[],
- epoch_start_height: number,
- epoch_height: number,
+ current_validators: CurrentEpochValidatorInfo[];
+ next_validators: NextEpochValidatorInfo[];
+ current_fishermen: ValidatorStakeView[];
+ next_fishermen: ValidatorStakeView[];
+ current_proposals: ValidatorStakeView[];
+ prev_epoch_kickout: ValidatorKickoutView[];
+ epoch_start_height: number;
+ epoch_height: number;
}
export interface CurrentEpochValidatorInfo {
- account_id: string,
- public_key: string,
- is_slashed: boolean,
- stake: string,
- shards: number[],
- num_produced_blocks: number,
- num_expected_blocks: number,
- num_produced_chunks: number,
- num_expected_chunks: number,
+ account_id: string;
+ public_key: string;
+ is_slashed: boolean;
+ stake: string;
+ shards: number[];
+ num_produced_blocks: number;
+ num_expected_blocks: number;
+ num_produced_chunks: number;
+ num_expected_chunks: number;
}
export interface NextEpochValidatorInfo {
- account_id: string,
- public_key: string,
- stake: string,
- shards: number[],
+ account_id: string;
+ public_key: string;
+ stake: string;
+ shards: number[];
}
export interface ValidatorStakeView {
- account_id: string,
- public_key: string,
- stake: string,
- validator_stake_struct_version: 'V1',
+ account_id: string;
+ public_key: string;
+ stake: string;
+ validator_stake_struct_version: 'V1';
}
export interface ValidatorKickoutView {
- account_id: string,
- reason: ValidatorKickoutReason,
+ account_id: string;
+ reason: ValidatorKickoutReason;
}
export type ValidatorKickoutReason =
- 'Slashed' |
- { NotEnoughBlocks: { produced: number, expected: number } } |
- { NotEnoughChunks: { produced: number, expected: number } } |
- 'Unstaked' |
- { NotEnoughStake: { stake: string, threshold: string } } |
- 'DidNotGetASeat';
+ | 'Slashed'
+ | { NotEnoughBlocks: { produced: number; expected: number } }
+ | { NotEnoughChunks: { produced: number; expected: number } }
+ | 'Unstaked'
+ | { NotEnoughStake: { stake: string; threshold: string } }
+ | 'DidNotGetASeat';
export interface PeerStoreView {
- peer_states: KnownPeerStateView[],
+ peer_states: KnownPeerStateView[];
}
export interface KnownPeerStateView {
- peer_id: string,
- status: string,
- addr: string,
- first_seen: number,
- last_seen: number,
- last_attempt: [number, string] | null,
+ peer_id: string;
+ status: string;
+ addr: string;
+ first_seen: number;
+ last_seen: number;
+ last_attempt: [number, string] | null;
}
export interface SyncStatusResponse {
status_response: {
- SyncStatus: SyncStatusView,
+ SyncStatus: SyncStatusView;
};
}
export interface TrackedShardsResponse {
status_response: {
TrackedShards: {
- shards_tracked_this_epoch: boolean[],
- shards_tracked_next_epoch: boolean[],
- },
+ shards_tracked_this_epoch: boolean[];
+ shards_tracked_next_epoch: boolean[];
+ };
};
}
export interface BlockStatusResponse {
status_response: {
- BlockStatus: DebugBlockStatusData,
- }
+ BlockStatus: DebugBlockStatusData;
+ };
}
export interface EpochInfoResponse {
status_response: {
- EpochInfo: EpochInfoView[],
- }
+ EpochInfo: EpochInfoView[];
+ };
}
export interface PeerStoreResponse {
status_response: {
- PeerStore: PeerStoreView,
- }
+ PeerStore: PeerStoreView;
+ };
}
export interface ConnectionInfoView {
- peer_id: string,
- addr: string,
- time_established: number,
- time_connected_until: number,
+ peer_id: string;
+ addr: string;
+ time_established: number;
+ time_connected_until: number;
}
export interface RecentOutboundConnectionsView {
- recent_outbound_connections: ConnectionInfoView[],
+ recent_outbound_connections: ConnectionInfoView[];
}
export interface RecentOutboundConnectionsResponse {
status_response: {
- RecentOutboundConnections: RecentOutboundConnectionsView
- }
+ RecentOutboundConnections: RecentOutboundConnectionsView;
+ };
}
export async function fetchBasicStatus(addr: string): Promise
{
@@ -313,7 +313,10 @@ export async function fetchTrackedShards(addr: string): Promise {
+export async function fetchBlockStatus(
+ addr: string,
+ height: number | null
+): Promise {
const trailing = height ? `/${height}` : '';
const response = await fetch(`http://${addr}/debug/api/block_status${trailing}`);
return await response.json();
@@ -329,7 +332,9 @@ export async function fetchPeerStore(addr: string): Promise {
return await response.json();
}
-export async function fetchRecentOutboundConnections(addr: string): Promise {
+export async function fetchRecentOutboundConnections(
+ addr: string
+): Promise {
const response = await fetch(`http://${addr}/debug/api/recent_outbound_connections`);
return await response.json();
}
diff --git a/tools/debug-ui/src/index.css b/tools/debug-ui/src/index.css
index 3e3b6a19055..d74d8add29d 100644
--- a/tools/debug-ui/src/index.css
+++ b/tools/debug-ui/src/index.css
@@ -1,13 +1,11 @@
body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+ 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
\ No newline at end of file
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
diff --git a/tools/debug-ui/src/index.tsx b/tools/debug-ui/src/index.tsx
index a15b6627654..b65b0bbf313 100644
--- a/tools/debug-ui/src/index.tsx
+++ b/tools/debug-ui/src/index.tsx
@@ -1,31 +1,32 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
import './index.css';
-import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
+import { Navigate, RouterProvider, createBrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { App } from './App';
import 'react-tooltip/dist/react-tooltip.css';
-const root = ReactDOM.createRoot(
- document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
const queryClient = new QueryClient();
-const router = createBrowserRouter([{
- // Root path redirects to the current host - this is useful if we serve the app from the node
- // itself.
- path: '/',
- element:
-}, {
- path: '/:addr/*',
- element:
-}]);
+const router = createBrowserRouter([
+ {
+ // Root path redirects to the current host - this is useful if we serve the app from the node
+ // itself.
+ path: '/',
+ element: ,
+ },
+ {
+ path: '/:addr/*',
+ element: ,
+ },
+]);
root.render(
-
-
-
-
-
+
+
+
+
+
);
diff --git a/tools/debug-ui/src/utils.tsx b/tools/debug-ui/src/utils.tsx
index e39ace2b4b0..c7193e98757 100644
--- a/tools/debug-ui/src/utils.tsx
+++ b/tools/debug-ui/src/utils.tsx
@@ -1,24 +1,24 @@
-import { ReactElement } from "react";
+import { ReactElement } from 'react';
export function formatDurationInMillis(millis: number): string {
if (millis == null) {
return '(null)';
}
- let total_seconds = Math.floor(millis / 1000);
- let hours = Math.floor(total_seconds / 3600)
- let minutes = Math.floor((total_seconds - (hours * 3600)) / 60)
- let seconds = total_seconds - (hours * 3600) - (minutes * 60)
+ const total_seconds = Math.floor(millis / 1000);
+ const hours = Math.floor(total_seconds / 3600);
+ const minutes = Math.floor((total_seconds - hours * 3600) / 60);
+ const seconds = total_seconds - hours * 3600 - minutes * 60;
if (hours > 0) {
if (minutes > 0) {
- return `${hours}h ${minutes}m ${seconds}s`
+ return `${hours}h ${minutes}m ${seconds}s`;
} else {
- return `${hours}h ${seconds}s`
+ return `${hours}h ${seconds}s`;
}
}
if (minutes > 0) {
- return `${minutes}m ${seconds}s`
+ return `${minutes}m ${seconds}s`;
}
- return `${seconds}s`
+ return `${seconds}s`;
}
function formatBytesPerSecond(bytes_per_second: number): string {
@@ -28,30 +28,29 @@ function formatBytesPerSecond(bytes_per_second: number): string {
if (bytes_per_second < 3000) {
return `${bytes_per_second} bps`;
}
- let kilobytes_per_second = bytes_per_second / 1024;
+ const kilobytes_per_second = bytes_per_second / 1024;
if (kilobytes_per_second < 3000) {
return `${kilobytes_per_second.toFixed(1)} Kbps`;
}
- let megabytes_per_second = kilobytes_per_second / 1024;
+ const megabytes_per_second = kilobytes_per_second / 1024;
return `${megabytes_per_second.toFixed(1)} Mbps`;
}
export function formatTraffic(bytes_received: number, bytes_sent: number): ReactElement {
- return
-
{"⬇ " + formatBytesPerSecond(bytes_received)}
-
{"⬆ " + formatBytesPerSecond(bytes_sent)}
-
+
{'⬇ ' + formatBytesPerSecond(bytes_received)}
+
{'⬆ ' + formatBytesPerSecond(bytes_sent)}
+