Skip to content

Commit 431dd15

Browse files
AlenarAlenar
committed
refactor(explorer): move aggregator/interval controls to AggregatorStatus
In order to move the after the 'Aggregator' title row. + Remove their labels to reclaim some vertical space
1 parent 369bc32 commit 431dd15

File tree

4 files changed

+119
-111
lines changed

4 files changed

+119
-111
lines changed

‎mithril-explorer/src/app/page.js‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
import React, { useEffect, useState } from "react";
44
import { useDispatch, useSelector } from "react-redux";
55
import { useSearchParams } from "next/navigation";
6-
import dynamic from "next/dynamic";
7-
import { Form, Row, Stack, Tab, Tabs } from "react-bootstrap";
6+
import { Stack, Tab, Tabs } from "react-bootstrap";
87
import {
98
ArcElement,
109
BarElement,
@@ -16,6 +15,7 @@ import {
1615
Tooltip,
1716
} from "chart.js";
1817
import initMithrilClient from "@mithril-dev/mithril-client-wasm";
18+
import AggregatorStatus from "#/AggregatorStatus";
1919
import CardanoDbSnapshotsList from "#/Artifacts/CardanoDbSnapshotsList";
2020
import CardanoStakeDistributionsList from "#/Artifacts/CardanoStakeDistributionsList";
2121
import CardanoTransactionsSnapshotsList from "#/Artifacts/CardanoTransactionsSnapshotsList";
@@ -29,14 +29,6 @@ import {
2929
selectedAggregatorSignedEntities as currentAggregatorSignedEntities,
3030
} from "@/store/settingsSlice";
3131
import { updatePoolsForAggregator } from "@/store/poolsSlice";
32-
import AggregatorStatus from "@/components/AggregatorStatus";
33-
34-
// Disable SSR for the following components since they use data from the store that are not
35-
// available server sides (because those data can be read from the local storage).
36-
const AggregatorSetter = dynamic(() => import("#/AggregatorSetter"), { ssr: false });
37-
const IntervalSetter = dynamic(() => import("#/IntervalSetter"), {
38-
ssr: false,
39-
});
4032

4133
Chart.register(ArcElement, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
4234
setChartJsDefaults(Chart);
@@ -109,15 +101,7 @@ export default function Explorer() {
109101

110102
return (
111103
<Stack gap={3}>
112-
<Form>
113-
<Row xs={1} sm={2} className="row-gap-2">
114-
<AggregatorSetter />
115-
<IntervalSetter />
116-
</Row>
117-
</Form>
118-
<Stack direction="horizontal">
119-
<AggregatorStatus />
120-
</Stack>
104+
<AggregatorStatus />
121105
<Tabs activeKey={currentTab} onSelect={(key) => setCurrentTab(key)}>
122106
<Tab title="Cardano Db" eventKey={signedEntityType.CardanoImmutableFilesFull}>
123107
<CardanoDbSnapshotsList />

‎mithril-explorer/src/components/AggregatorSetter/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ export default function AggregatorSetter(props) {
2121
<>
2222
<AddAggregatorModal show={showAddModal} onAskClose={() => toggleAddModal(false)} />
2323

24-
<Form.Group as={Col} className={props.className}>
25-
<Form.Label>Aggregator:</Form.Label>
24+
<Form.Group as={Col} {...props}>
2625
<InputGroup>
2726
<Button variant="outline-success" onClick={() => toggleAddModal(true)}>
2827
<i className="bi bi-plus-circle"></i>

‎mithril-explorer/src/components/AggregatorStatus/index.js‎

Lines changed: 114 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
OverlayTrigger,
99
Stack,
1010
Tooltip,
11+
Form,
1112
} from "react-bootstrap";
1213
import { useSelector } from "react-redux";
1314
import EpochSettings from "#/EpochSettings";
@@ -17,6 +18,8 @@ import ProtocolParameters from "#/ProtocolParameters";
1718
import Stake from "#/Stake";
1819
import { selectedAggregator } from "@/store/settingsSlice";
1920
import { checkUrl, formatStake } from "@/utils";
21+
import AggregatorSetter from "#/AggregatorSetter";
22+
import IntervalSetter from "#/IntervalSetter";
2023

2124
function InfoGroupCard({ children, title, ...props }) {
2225
return (
@@ -55,6 +58,17 @@ function PercentTooltip({ value, total, ...props }) {
5558
);
5659
}
5760

61+
function ControlRow({ ...props }) {
62+
return (
63+
<Form {...props}>
64+
<Row xs={1} sm={2} className="row-gap-2">
65+
<AggregatorSetter sm={8} />
66+
<IntervalSetter sm={4} />
67+
</Row>
68+
</Form>
69+
);
70+
}
71+
5872
export default function AggregatorStatus() {
5973
const [aggregatorStatus, setAggregatorStatus] = useState({});
6074
const [aggregatorVersion, setAggregatorVersion] = useState({});
@@ -126,104 +140,116 @@ export default function AggregatorStatus() {
126140
}
127141

128142
return fallbackToEpochSetting ? (
129-
<EpochSettings />
143+
<>
144+
<ControlRow />
145+
<Stack direction="horizontal">
146+
<EpochSettings />
147+
</Stack>
148+
</>
130149
) : (
131-
<Container fluid>
150+
<Stack gap={2}>
132151
<h3>
133152
<a
134153
role="button"
135154
onClick={() => setShowContent(!showContent)}
136155
aria-expanded={showContent}
137156
aria-controls="contentRow">
138-
Aggregator Status <i className={`bi bi-chevron-${showContent ? "up" : "down"}`}></i>
157+
Aggregator <i className={`bi bi-chevron-${showContent ? "up" : "down"}`}></i>
139158
</a>
140159
</h3>
141160

142-
<Collapse in={showContent}>
143-
<div id="contentRow">
144-
<Row className="d-flex flex-wrap justify-content-md-center">
145-
<InfoGroupCard title={`Epoch ${aggregatorStatus.epoch}`}>
146-
<InfoRow label="Cardano Era">{aggregatorStatus.cardano_era}</InfoRow>
147-
<InfoRow label="Mithril Era">
148-
{aggregatorStatus.mithril_era
149-
? capitalizeFirstLetter(aggregatorStatus.mithril_era)
150-
: ""}
151-
</InfoRow>
152-
</InfoGroupCard>
153-
154-
<InfoGroupCard title="SPOs">
155-
<InfoRow label="Current Signers">{aggregatorStatus.total_signers ?? 0}</InfoRow>
156-
<InfoRow label="Next Signers">{aggregatorStatus.total_next_signers ?? 0}</InfoRow>
157-
<InfoRow label="Cardano Adoption">
158-
{percent(aggregatorStatus.total_signers, aggregatorStatus.total_cardano_spo)}%{" "}
159-
<PercentTooltip
160-
value={aggregatorStatus.total_signers ?? 0}
161-
total={aggregatorStatus.total_cardano_spo ?? 0}
162-
/>
163-
</InfoRow>
164-
</InfoGroupCard>
165-
166-
<InfoGroupCard title="Stakes">
167-
<InfoRow label="Current Signers">
168-
<Stake lovelace={aggregatorStatus.total_stakes_signers ?? 0} />
169-
</InfoRow>
170-
<InfoRow label="Next Signers">
171-
<Stake lovelace={aggregatorStatus.total_next_stakes_signers ?? 0} />
172-
</InfoRow>
173-
<InfoRow label="Cardano Adoption">
174-
{percent(
175-
aggregatorStatus.total_stakes_signers,
176-
aggregatorStatus.total_cardano_stake,
177-
)}
178-
%{" "}
179-
<PercentTooltip
180-
value={formatStake(aggregatorStatus.total_stakes_signers) ?? 0}
181-
total={formatStake(aggregatorStatus.total_cardano_stake) ?? 0}
161+
<ControlRow />
162+
163+
<Container fluid>
164+
<Collapse in={showContent}>
165+
<div id="contentRow">
166+
<Row className="d-flex flex-wrap justify-content-md-center">
167+
<InfoGroupCard title={`Epoch ${aggregatorStatus.epoch}`}>
168+
<InfoRow label="Cardano Era">{aggregatorStatus.cardano_era}</InfoRow>
169+
<InfoRow label="Mithril Era">
170+
{aggregatorStatus.mithril_era
171+
? capitalizeFirstLetter(aggregatorStatus.mithril_era)
172+
: ""}
173+
</InfoRow>
174+
</InfoGroupCard>
175+
176+
<InfoGroupCard title="SPOs">
177+
<InfoRow label="Current Signers">{aggregatorStatus.total_signers ?? 0}</InfoRow>
178+
<InfoRow label="Next Signers">{aggregatorStatus.total_next_signers ?? 0}</InfoRow>
179+
<InfoRow label="Cardano Adoption">
180+
{percent(aggregatorStatus.total_signers, aggregatorStatus.total_cardano_spo)}%{" "}
181+
<PercentTooltip
182+
value={aggregatorStatus.total_signers ?? 0}
183+
total={aggregatorStatus.total_cardano_spo ?? 0}
184+
/>
185+
</InfoRow>
186+
</InfoGroupCard>
187+
188+
<InfoGroupCard title="Stakes">
189+
<InfoRow label="Current Signers">
190+
<Stake lovelace={aggregatorStatus.total_stakes_signers ?? 0} />
191+
</InfoRow>
192+
<InfoRow label="Next Signers">
193+
<Stake lovelace={aggregatorStatus.total_next_stakes_signers ?? 0} />
194+
</InfoRow>
195+
<InfoRow label="Cardano Adoption">
196+
{percent(
197+
aggregatorStatus.total_stakes_signers,
198+
aggregatorStatus.total_cardano_stake,
199+
)}
200+
%{" "}
201+
<PercentTooltip
202+
value={formatStake(aggregatorStatus.total_stakes_signers) ?? 0}
203+
total={formatStake(aggregatorStatus.total_cardano_stake) ?? 0}
204+
/>
205+
</InfoRow>
206+
</InfoGroupCard>
207+
208+
<InfoGroupCard title="Protocol Parameters">
209+
<em>Current:</em>
210+
<ProtocolParameters protocolParameters={aggregatorStatus.protocol} padding={2} />
211+
<em>Next:</em>
212+
<ProtocolParameters
213+
protocolParameters={aggregatorStatus.next_protocol}
214+
padding={2}
182215
/>
183-
</InfoRow>
184-
</InfoGroupCard>
185-
186-
<InfoGroupCard title="Protocol Parameters">
187-
<em>Current:</em>
188-
<ProtocolParameters protocolParameters={aggregatorStatus.protocol} padding={2} />
189-
<em>Next:</em>
190-
<ProtocolParameters protocolParameters={aggregatorStatus.next_protocol} padding={2} />
191-
</InfoGroupCard>
192-
193-
<InfoGroupCard title="Versions">
194-
<InfoRow label="Aggregator">
195-
{aggregatorVersion.number}
196-
{aggregatorVersion.sha && <em> ({aggregatorVersion.sha})</em>}
197-
</InfoRow>
198-
<InfoRow label="Cardano">{aggregatorStatus.cardano_node_version}</InfoRow>
199-
</InfoGroupCard>
200-
</Row>
201-
</div>
202-
</Collapse>
203-
<Row>
204-
<Stack
205-
direction="horizontal"
206-
gap={1}
207-
className="align-items-stretch justify-content-sm-center border bg-light rounded p-2">
208-
<LinkButton
209-
className="ms-auto"
210-
href={registrationPageUrl ?? "#"}
211-
disabled={registrationPageUrl === undefined}>
212-
<i className="bi bi-pen"></i> Registered Signers
213-
</LinkButton>
214-
<LinkButton
215-
href={inOutRegistrationsPageUrl ?? "#"}
216-
disabled={inOutRegistrationsPageUrl === undefined}>
217-
<i className="bi bi-arrow-left-right translate-middle-y"></i> In/Out Registrations
218-
</LinkButton>
219-
<RawJsonButton
220-
href={aggregatorStatusEndpoint}
221-
variant="outline-secondary"
222-
tooltip="Aggregator Status Raw JSON"
223-
className="ms-auto"
224-
/>
225-
</Stack>
226-
</Row>
227-
</Container>
216+
</InfoGroupCard>
217+
218+
<InfoGroupCard title="Versions">
219+
<InfoRow label="Aggregator">
220+
{aggregatorVersion.number}
221+
{aggregatorVersion.sha && <em> ({aggregatorVersion.sha})</em>}
222+
</InfoRow>
223+
<InfoRow label="Cardano">{aggregatorStatus.cardano_node_version}</InfoRow>
224+
</InfoGroupCard>
225+
</Row>
226+
</div>
227+
</Collapse>
228+
<Row>
229+
<Stack
230+
direction="horizontal"
231+
gap={1}
232+
className="align-items-stretch justify-content-sm-center border bg-light rounded p-2">
233+
<LinkButton
234+
className="ms-auto"
235+
href={registrationPageUrl ?? "#"}
236+
disabled={registrationPageUrl === undefined}>
237+
<i className="bi bi-pen"></i> Registered Signers
238+
</LinkButton>
239+
<LinkButton
240+
href={inOutRegistrationsPageUrl ?? "#"}
241+
disabled={inOutRegistrationsPageUrl === undefined}>
242+
<i className="bi bi-arrow-left-right translate-middle-y"></i> In/Out Registrations
243+
</LinkButton>
244+
<RawJsonButton
245+
href={aggregatorStatusEndpoint}
246+
variant="outline-secondary"
247+
tooltip="Aggregator Status Raw JSON"
248+
className="ms-auto"
249+
/>
250+
</Stack>
251+
</Row>
252+
</Container>
253+
</Stack>
228254
);
229255
}

‎mithril-explorer/src/components/IntervalSetter/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ export default function IntervalSetter(props) {
77
const dispatch = useDispatch();
88

99
return (
10-
<Form.Group as={Col} className={props.className}>
11-
<Form.Label>Auto refresh:</Form.Label>
10+
<Form.Group as={Col} {...props}>
1211
<InputGroup>
1312
<Button type="button" onClick={() => dispatch(changeRefreshSeed())} variant="primary">
1413
Refresh

0 commit comments

Comments
 (0)