Skip to content

Commit 6bfb144

Browse files
AlenarAlenar
authored
Merge pull request #590 from input-output-hk/djo/enhance-explorer-aggregator-selection
Enhance explorer aggregator selection: * Add a copy button next the the selected aggregator to copy the current value * Add an Epoch Settings Card, useful to see if the aggregator is lagging behind the current epoch * Keep the current configuration in the browser local storage and restore it on page load * Add the ability to add a custom aggregator source and to remove them * Write the currently selected aggregator in the url query string ** If any on page load: it will switch to the aggregator in the query string and if it doesn't exist in the aggregator list it will add it as a custom aggregator source. * (Technical) Switched state management to Redux to simplify shared state management
2 parents 4f03dab + a33ebfa commit 6bfb144

File tree

25 files changed

+1439
-1026
lines changed

25 files changed

+1439
-1026
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ on:
77
paths-ignore: # ignore docs only changes since they use a dedicated workflows: docs.yml
88
- 'docs/**'
99
- 'mithril-explorer/**'
10+
- '.github/workflows/docs.yml'
1011

1112
jobs:
1213
build-ubuntu-X64:

‎.github/workflows/docs.yml‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ jobs:
5858
docs/build/*
5959
6060
build-explorer:
61-
if: github.event.pull_request.draft == false
6261
runs-on: ubuntu-22.04
6362
steps:
6463
- name: Checkout sources
@@ -85,7 +84,6 @@ jobs:
8584
mithril-explorer/out/*
8685
8786
build-open-api-ui:
88-
if: github.event.pull_request.draft == false
8987
runs-on: ubuntu-22.04
9088
steps:
9189
- name: Checkout sources
@@ -106,7 +104,7 @@ jobs:
106104
out/*
107105
108106
publish-docs:
109-
if: github.event.pull_request.draft == false
107+
if: github.ref == 'refs/heads/main'
110108
runs-on: ubuntu-22.04
111109
needs:
112110
- cargo-doc
@@ -143,13 +141,8 @@ jobs:
143141
echo "mithril.network" > ./github-pages/CNAME
144142
echo '<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; URL=https://mithril.network/doc"></head></html>' > ./github-pages/index.html
145143
146-
- name: (temp) List output
147-
run: |
148-
ls ./github-pages/*
149-
150144
- name: Mithril / Publish Github Pages
151145
uses: peaceiris/actions-gh-pages@v3
152-
if: github.ref == 'refs/heads/main'
153146
with:
154147
github_token: ${{ secrets.GITHUB_TOKEN || github.token }}
155148
publish_dir: ./github-pages

‎docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"write-heading-ids": "docusaurus write-heading-ids"
1515
},
1616
"dependencies": {
17-
"@docusaurus/core": "^2.1.0",
18-
"@docusaurus/preset-classic": "^2.1.0",
17+
"@docusaurus/core": "^2.2.0",
18+
"@docusaurus/preset-classic": "^2.2.0",
1919
"@mdx-js/react": "^1.6.22",
2020
"clsx": "^1.1.1",
2121
"react": "^17.0.2",

‎docs/yarn.lock‎

Lines changed: 570 additions & 577 deletions
Large diffs are not rendered by default.

‎mithril-explorer/Makefile‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,6 @@ clean:
2424
rm yarn.lock || true
2525

2626
upgrade: clean install
27-
yarn upgrade next@latest react@latest react-bootstrap@latest react-dom@latest bootstrap@latest bootstrap-icons@latest eslint@latest eslint-config-next@latest
27+
yarn upgrade next@latest react@latest react-bootstrap@latest react-dom@latest bootstrap@latest \
28+
bootstrap-icons@latest eslint@latest eslint-config-next@latest @reduxjs/toolkit@latest \
29+
next-redux-wrapper@latest react-redux@latest

‎mithril-explorer/aggregators-list.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default [
2+
"https://aggregator.release-preprod.api.mithril.network/aggregator",
3+
"https://aggregator.pre-release-preview.api.mithril.network/aggregator",
4+
"https://aggregator.testing-preview.api.mithril.network/aggregator",
5+
"http://localhost:8080/aggregator"
6+
];

‎mithril-explorer/components/AggregatorSetter/AddAggregatorModal.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, {useState} from 'react';
2+
import {Button, Form, FormGroup, Modal} from "react-bootstrap";
3+
import {useDispatch} from "react-redux";
4+
import {selectAggregator} from "../../store/settingsSlice";
5+
import {checkUrl} from "../../utils";
6+
7+
export default function AddAggregatorModal(props) {
8+
const [value, setValue] = useState("");
9+
const [isInvalid, setIsInvalid] = useState(false);
10+
const dispatch = useDispatch();
11+
12+
function handleClose() {
13+
props.onAskClose();
14+
setIsInvalid(false);
15+
setValue("");
16+
}
17+
18+
function handleSave(event) {
19+
// Avoid form submit if the enter key is pressed
20+
event.preventDefault();
21+
22+
if (checkUrl(value)) {
23+
handleClose();
24+
dispatch(selectAggregator(value));
25+
} else {
26+
setIsInvalid(true);
27+
}
28+
}
29+
30+
return (
31+
<Modal
32+
show={props.show}
33+
onHide={handleClose}
34+
size="lg"
35+
aria-labelledby="add-aggregator-title"
36+
centered>
37+
<Modal.Header closeButton>
38+
<Modal.Title id="add-aggregator-title">
39+
New aggregator source
40+
</Modal.Title>
41+
</Modal.Header>
42+
43+
<Modal.Body>
44+
<Form onSubmit={handleSave}>
45+
<FormGroup>
46+
<Form.Label>URL</Form.Label>
47+
<Form.Control
48+
type="url"
49+
value={value}
50+
onChange={e => setValue(e.target.value)}
51+
isInvalid={isInvalid}
52+
autoFocus/>
53+
<Form.Control.Feedback type="invalid">
54+
Invalid URL
55+
</Form.Control.Feedback>
56+
</FormGroup>
57+
</Form>
58+
</Modal.Body>
59+
60+
<Modal.Footer>
61+
<Button variant="secondary" onClick={handleClose}>
62+
Close
63+
</Button>
64+
<Button variant="primary" onClick={handleSave}>
65+
Save
66+
</Button>
67+
</Modal.Footer>
68+
</Modal>
69+
);
70+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, {useState} from 'react';
2+
import {Button, Col, Form, InputGroup, OverlayTrigger, Tooltip} from "react-bootstrap";
3+
import {useDispatch, useSelector} from "react-redux";
4+
import {removeCustomAggregator, selectAggregator} from "../../store/settingsSlice";
5+
import AddAggregatorModal from "./AddAggregatorModal";
6+
7+
export default function AggregatorSetter(props) {
8+
const [showAddModal, toggleAddModal] = useState(false);
9+
const selectedAggregator = useSelector((state) => state.settings.selectedAggregator);
10+
const availableAggregators = useSelector((state) => state.settings.availableAggregators);
11+
const canRemoveSelected = useSelector((state) => state.settings.canRemoveSelected);
12+
const dispatch = useDispatch();
13+
14+
function copySelected() {
15+
if (window.isSecureContext && selectedAggregator) {
16+
navigator.clipboard.writeText(selectedAggregator).then(() => {
17+
});
18+
}
19+
}
20+
21+
return (
22+
<>
23+
<AddAggregatorModal
24+
show={showAddModal}
25+
onAskClose={() => toggleAddModal(false)}/>
26+
27+
<Form.Group as={Col} className={props.className}>
28+
<Form.Label>Aggregator:</Form.Label>
29+
<InputGroup>
30+
<Button variant="outline-success" onClick={() => toggleAddModal(true)}>
31+
<i className="bi bi-plus-circle"></i>
32+
</Button>
33+
{canRemoveSelected &&
34+
<>
35+
<Button variant="outline-danger" onClick={() => dispatch(removeCustomAggregator())}>
36+
<i className="bi bi-dash-circle"></i>
37+
</Button>
38+
<OverlayTrigger overlay={<Tooltip>Unofficial Aggregator</Tooltip>}>
39+
<Button variant="outline-warning">
40+
<i className="bi bi-exclamation-triangle"></i>
41+
</Button>
42+
</OverlayTrigger>
43+
</>
44+
}
45+
<Form.Select value={selectedAggregator} onChange={(e) => dispatch(selectAggregator(e.target.value))}>
46+
{availableAggregators.map((aggregator, index) =>
47+
<option key={"agg-" + index} value={aggregator}>{aggregator}</option>
48+
)}
49+
</Form.Select>
50+
<OverlayTrigger overlay={<Tooltip>Copy url</Tooltip>}>
51+
<Button variant="outline-secondary" onClick={copySelected}>
52+
<i className="bi bi-clipboard"></i>
53+
</Button>
54+
</OverlayTrigger>
55+
</InputGroup>
56+
</Form.Group>
57+
</>
58+
);
59+
}

‎mithril-explorer/components/CertificateModal/index.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { Badge, Button, Container, Col, ListGroup, Modal, OverlayTrigger, Row, Table, Tooltip } from "react-bootstrap";
1+
import React, {useEffect, useState} from 'react';
2+
import {Badge, Button, Col, Container, ListGroup, Modal, Row, Table} from "react-bootstrap";
3+
import {useSelector} from "react-redux";
34
import RawJsonButton from "../RawJsonButton";
45
import VerifiedBadge from '../VerifiedBadge';
6+
import ProtocolParameters from "../ProtocolParameters";
57

68
export default function CertificateModal(props) {
79
const [certificate, setCertificate] = useState({});
10+
const aggregator = useSelector((state) => state.settings.selectedAggregator);
811

912
useEffect(() => {
1013
if (!props.hash) {
1114
return;
1215
}
1316

14-
fetch(`${props.aggregator}/certificate/${props.hash}`)
17+
fetch(`${aggregator}/certificate/${props.hash}`)
1518
.then(response => response.status === 200 ? response.json() : {})
1619
.then(data => setCertificate(data))
1720
.catch(error => {
1821
setCertificate({});
1922
console.error("Fetch certificate error:", error);
2023
});
21-
}, [props.aggregator, props.hash]);
24+
}, [aggregator, props.hash]);
2225

2326
function showPrevious() {
2427
props.onHashChange(certificate.previous_hash);
@@ -55,45 +58,43 @@ export default function CertificateModal(props) {
5558
<ListGroup.Item>Immutable File Number: {certificate.beacon.immutable_file_number}</ListGroup.Item>
5659
</ListGroup>
5760
<h4>Protocol Parameters</h4>
58-
<ListGroup horizontal>
59-
<ListGroup.Item>K: {certificate.metadata.parameters.k}</ListGroup.Item>
60-
<ListGroup.Item>M: {certificate.metadata.parameters.m}</ListGroup.Item>
61-
<ListGroup.Item>Phi: {certificate.metadata.parameters.phi_f}</ListGroup.Item>
62-
</ListGroup>
61+
<ProtocolParameters protocolParameters={certificate.metadata.parameters}/>
6362
</Col>
6463
<Col xl={8}>
6564
<h4>Signers</h4>
6665
{certificate.genesis_signature !== ""
6766
?
6867
<div>
69-
This is the chain Genesis Certificate, since it&aops;s manually created it doesn&apos;t contain any Signers.
68+
This is the chain Genesis Certificate, since it&aops;s manually created it doesn&apos;t contain any
69+
Signers.
7070
</div>
7171
: certificate.metadata.signers.length === 0
7272
?
7373
<div>
74-
No Signers for this certificate, something went wrong either with the data retrieval or the signing process
74+
No Signers for this certificate, something went wrong either with the data retrieval or the
75+
signing process
7576
</div>
7677
: <>
7778
<Table responsive>
7879
<thead>
79-
<tr>
80-
<th></th>
81-
<th>Party id</th>
82-
<th>Stake</th>
83-
</tr>
80+
<tr>
81+
<th></th>
82+
<th>Party id</th>
83+
<th>Stake</th>
84+
</tr>
8485
</thead>
8586
<tbody>
86-
{certificate.metadata.signers.map(signer =>
87-
<tr key={signer.party_id}>
88-
<td>
89-
{signer.verification_key_signature &&
90-
<VerifiedBadge tooltip="Verified Signer" />
91-
}
92-
</td>
93-
<td>{signer.party_id}</td>
94-
<td>{signer.stake}</td>
95-
</tr>
96-
)}
87+
{certificate.metadata.signers.map(signer =>
88+
<tr key={signer.party_id}>
89+
<td>
90+
{signer.verification_key_signature &&
91+
<VerifiedBadge tooltip="Verified Signer"/>
92+
}
93+
</td>
94+
<td>{signer.party_id}</td>
95+
<td>{signer.stake}</td>
96+
</tr>
97+
)}
9798
</tbody>
9899
</Table>
99100
</>
@@ -107,10 +108,11 @@ export default function CertificateModal(props) {
107108
{certificate.genesis_signature !== ""
108109
? <Badge bg="warning">Genesis</Badge>
109110
: <>
110-
<Button size="sm" onClick={showPrevious} className="text-break">Previous hash: {certificate.previous_hash}</Button>
111+
<Button size="sm" onClick={showPrevious} className="text-break">Previous
112+
hash: {certificate.previous_hash}</Button>
111113
</>
112114
}
113-
<RawJsonButton href={`${props.aggregator}/certificate/${props.hash}`} size="sm" />
115+
<RawJsonButton href={`${aggregator}/certificate/${props.hash}`} size="sm"/>
114116
</Modal.Footer>
115117
</Modal>
116118
);

‎mithril-explorer/components/EpochSettings/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {Card, ListGroup} from "react-bootstrap";
3+
import RawJsonButton from "../RawJsonButton";
4+
import {useSelector} from "react-redux";
5+
import ProtocolParameters from "../ProtocolParameters";
6+
7+
export default function EpochSettings(props) {
8+
const [epochSettings, setEpochSettings] = useState({});
9+
const aggregator = useSelector((state) => state.settings.selectedAggregator);
10+
const autoUpdate = useSelector((state) => state.settings.autoUpdate);
11+
const updateInterval = useSelector((state) => state.settings.updateInterval);
12+
13+
useEffect(() => {
14+
if (!autoUpdate) {
15+
return;
16+
}
17+
18+
let fetchEpochSettings = () => {
19+
fetch(`${aggregator}/epoch-settings`)
20+
.then(response => response.status === 200 ? response.json() : {})
21+
.then(data => setEpochSettings(data))
22+
.catch(error => {
23+
setEpochSettings({});
24+
console.error("Fetch epoch-settings error:", error);
25+
});
26+
};
27+
28+
// Fetch it once without waiting
29+
fetchEpochSettings();
30+
31+
const interval = setInterval(fetchEpochSettings, updateInterval);
32+
return () => clearInterval(interval);
33+
}, [aggregator, updateInterval, autoUpdate]);
34+
35+
return (
36+
<div>
37+
<h2>
38+
Epoch Settings
39+
<RawJsonButton href={`${aggregator}/epoch-settings`} variant="outline-light" size="sm"/>
40+
</h2>
41+
42+
<Card>
43+
<Card.Body>
44+
<Card.Title>Current Epoch</Card.Title>
45+
<ListGroup variant="flush">
46+
<ListGroup.Item>{epochSettings.epoch}</ListGroup.Item>
47+
</ListGroup>
48+
<Card.Title>Protocol Parameters</Card.Title>
49+
<ProtocolParameters protocolParameters={epochSettings.protocol}/>
50+
</Card.Body>
51+
</Card>
52+
</div>
53+
);
54+
}

0 commit comments

Comments
 (0)