Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve clarity that the dashboard is loading data and not broken #52

Merged
merged 1 commit into from
Aug 14, 2023
Merged

Improve clarity that the dashboard is loading data and not broken #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/dashboard/components/ChartContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export default function ChartContainer(props: ChartContainerProps) {
className={`relative h-[350px] w-[100%] max-w-[600px] rounded bg-slate-900
p-4 pt-2`}
>
{props.isLoading && <Loader className="absolute right-2 top-2" />}
{props.children}
{props.isLoading && <Loader className="absolute top-0 bottom-0 left-0 right-0 m-auto" size={48} />}
</div>
);
}
8 changes: 5 additions & 3 deletions src/pages/dashboard/components/NodesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export default function NodesTable(props: any) {
}

return (
<ChartContainer isLoading={false}>
<ChartContainer isLoading={props.isLoading}>
<div>
<GridButton onClick={() => setSelectedNode(null)} className="m-2 min-w-[155px]">
<ListUnorderedIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> Reset Charts to Include All Nodes
Expand All @@ -133,11 +133,13 @@ export default function NodesTable(props: any) {
<div className="ag-theme-balham-dark ag-theme-saturn h-full max-h-72 w-auto max-w-[600px]">
<AgGridReact
ref={gridRef}
rowData={rowData}
rowData={props.isLoading ? undefined : rowData}
columnDefs={columnDefs}
tooltipShowDelay={0} // show without delay on mouse enter
tooltipHideDelay={99999} // do not hide unless mouse leaves
></AgGridReact>
overlayNoRowsTemplate={props.isLoading ? "<span />" : undefined}
suppressLoadingOverlay={true}
/>
</div>
</ChartContainer>
);
Expand Down
39 changes: 24 additions & 15 deletions src/pages/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import BandwidthChart from "./components/BandwidthChart";
import EarningsChart from "./components/EarningsChart";
import NodesTable from "./components/NodesTable";
import RequestsChart from "./components/RequestsChart";
import Loader from "../../components/Loader";

interface OverviewProps {
node: string | null;
globalMetrics: GlobalMetrics;
address: string;
children?: ReactNode;
isLoading: boolean;
}

const UPTIME_REQ_DOCS = "https://docs.saturn.tech/nodes-uptime-requirement";
Expand Down Expand Up @@ -114,6 +116,7 @@ const ProgressBar = (progressPercentage: number) => {

function Overview(props: OverviewProps) {
let { totalEarnings, totalBandwidth, totalRetrievals, nodes, perNodeMetrics } = props.globalMetrics;
const { isLoading } = props;

let nodeStats;
if (props.node) {
Expand Down Expand Up @@ -180,19 +183,25 @@ function Overview(props: OverviewProps) {
Overview
{props.children}
</div>
<div className="grid flex-1 grid-cols-[auto_1fr] items-center gap-y-2 gap-x-8 bg-slate-900 p-4">
<div>Address</div>
<div className="truncate">{props.address}</div>
{props.node && nodeIdSection}
{props.node ? nodeStateSection : nodeStatusesSection}
<div>Estimated Earnings</div>
<div>{totalEarnings.toLocaleString()} FIL</div>
{props.node && nodePayoutSection}
{props.node && uptimeCompletionSection}
<div>Bandwidth</div>
<div>{bytes(totalBandwidth, { unitSeparator: " " })}</div>
<div>Retrievals</div>
<div>{totalRetrievals.toLocaleString()}</div>
<div className="relative grid flex-1 grid-cols-[auto_1fr] items-center gap-y-2 gap-x-8 bg-slate-900 p-4">
{isLoading ? (
<Loader className="absolute top-0 bottom-0 left-0 right-0 m-auto" size={48} />
) : (
<>
<div>Address</div>
<div className="truncate">{props.address}</div>
{props.node && nodeIdSection}
{props.node ? nodeStateSection : nodeStatusesSection}
<div>Estimated Earnings</div>
<div>{totalEarnings.toLocaleString()} FIL</div>
{props.node && nodePayoutSection}
{props.node && uptimeCompletionSection}
<div>Bandwidth</div>
<div>{bytes(totalBandwidth, { unitSeparator: " " })}</div>
<div>Retrievals</div>
<div>{totalRetrievals.toLocaleString()}</div>
</>
)}
</div>
</div>
);
Expand Down Expand Up @@ -278,10 +287,10 @@ function Dashboard() {
<div className="mx-auto mt-8 flex max-w-7xl flex-1 flex-col gap-4">
{error && <p className="text-center text-lg text-red-600">Error: {error}</p>}
<div className="flex flex-wrap justify-center gap-12">
<Overview {...{ globalMetrics, address, perNodeMetrics }} node={selectedNode}>
<Overview {...{ globalMetrics, address, perNodeMetrics, isLoading }} node={selectedNode}>
<SelectTimePeriod period={period} setPeriod={setPeriod} />
</Overview>
<NodesTable metrics={perNodeMetrics} setSelectedNode={setSelectedNode} />
<NodesTable metrics={perNodeMetrics} setSelectedNode={setSelectedNode} isLoading={isLoading} />
<EarningsChart earnings={earnings} node={selectedNode} {...chartPropsFinal} />
<RequestsChart metrics={metrics} node={selectedNode} {...chartPropsFinal} />
<BandwidthChart metrics={metrics} node={selectedNode} {...chartPropsFinal} />
Expand Down