Skip to content

Commit 6eddba9

Browse files
AlenarAlenar
committed
refactor(explorer): generalize new cardano db v2 style to all artifacts
1 parent 8858161 commit 6eddba9

File tree

10 files changed

+313
-277
lines changed

10 files changed

+313
-277
lines changed

‎mithril-explorer/src/components/Artifacts/ArtifactCol.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from "react";
22
import { Col } from "react-bootstrap";
33

4+
import styles from "./styles.module.css";
5+
46
export default function ArtifactCol({ label, children, className = "", ...props }) {
57
return (
68
<Col
79
className={`mx-2 px-0 py-1 d-flex flex-column justify-content-between ${className}`}
810
{...props}>
911
<div>
10-
<div>
12+
<div className={styles.artifactColLabel}>
1113
<em>{label}:</em>
1214
</div>
1315
<div className={`test-end`}>{children}</div>

‎mithril-explorer/src/components/Artifacts/CardanoDbSnapshotsList/index.js‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useEffect, useState } from "react";
22
import { useSelector } from "react-redux";
3-
import { Badge, Button, Card, Col, Container, ListGroup, Row, Stack } from "react-bootstrap";
3+
import { Badge, Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
4+
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
5+
import ArtifactCol from "#/Artifacts/ArtifactCol";
46
import LatestBadge from "#/Artifacts/LatestBadge";
57
import CertificateModal from "#/CertificateModal";
68
import RawJsonButton from "#/RawJsonButton";
@@ -55,59 +57,62 @@ export default function CardanoDbSnapshotsList(props) {
5557
Cardano Db Snapshots{" "}
5658
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
5759
</h2>
58-
{Object.entries(cardanoDbSnapshots).length === 0 ? (
59-
<p>No snapshot available</p>
60-
) : (
61-
<Container fluid>
62-
<Row xs={1} md={2} lg={3} xl={4}>
63-
{cardanoDbSnapshots.map((snapshot, index) => (
60+
<Container fluid>
61+
<Row>
62+
{Object.entries(cardanoDbSnapshots).length === 0 ? (
63+
<p>No snapshot available</p>
64+
) : (
65+
cardanoDbSnapshots.map((snapshot, index) => (
6466
<Col key={snapshot.digest} className="mb-2">
6567
<Card border={index === 0 ? "primary" : ""}>
66-
<Card.Body>
67-
<Card.Title>{snapshot.digest}</Card.Title>
68-
<ListGroup variant="flush" className="data-list-group">
69-
<ListGroup.Item>Epoch: {snapshot.beacon.epoch}</ListGroup.Item>
70-
<ListGroup.Item>
71-
Immutable file number: {snapshot.beacon.immutable_file_number}
72-
</ListGroup.Item>
73-
<ListGroup.Item>
74-
Cardano node: {snapshot.cardano_node_version}
75-
</ListGroup.Item>
76-
<ListGroup.Item>
77-
Compression: {snapshot.compression_algorithm}
78-
</ListGroup.Item>
79-
<ListGroup.Item>
80-
Certificate hash: <br />
81-
{snapshot.certificate_hash}{" "}
82-
<Button
83-
size="sm"
84-
onClick={() => showCertificate(snapshot.certificate_hash)}>
85-
Show
86-
</Button>
87-
</ListGroup.Item>
88-
<ListGroup.Item>
89-
Created: <LocalDateTime datetime={snapshot.created_at} />
90-
</ListGroup.Item>
91-
<ListGroup.Item>Archive size: {formatBytes(snapshot.size)}</ListGroup.Item>
92-
</ListGroup>
68+
<Card.Body className="pt-2 pb-1">
69+
<ArtifactTitle hash={snapshot.digest} index={index} />
70+
<Container fluid>
71+
<Row>
72+
<ArtifactCol label="Epoch">{snapshot.beacon.epoch}</ArtifactCol>
73+
<ArtifactCol label="Immutable file number">
74+
{snapshot.beacon.immutable_file_number}
75+
</ArtifactCol>
76+
<ArtifactCol label="Created">
77+
<LocalDateTime datetime={snapshot.created_at} />
78+
</ArtifactCol>
79+
<ArtifactCol label="Archive size">
80+
{formatBytes(snapshot.size)}
81+
</ArtifactCol>
82+
<ArtifactCol label="Cardano node">
83+
{snapshot.cardano_node_version}
84+
</ArtifactCol>
85+
<ArtifactCol label="Compression">
86+
{snapshot.compression_algorithm}
87+
</ArtifactCol>
88+
<ArtifactCol label="Certificate hash">
89+
{snapshot.certificate_hash}
90+
</ArtifactCol>
91+
</Row>
92+
</Container>
9393
</Card.Body>
9494
<Card.Footer>
9595
<Stack direction="horizontal" gap={1}>
9696
<LatestBadge show={index === 0} />
97-
<Badge bg="secondary">{snapshot.beacon.network}</Badge>
97+
<Badge bg="secondary">{snapshot.network}</Badge>
98+
<Button
99+
size="sm"
100+
className="ms-auto"
101+
onClick={() => showCertificate(snapshot.certificate_hash)}>
102+
Show Certificate
103+
</Button>
98104
<RawJsonButton
99105
href={`${aggregator}/artifact/snapshot/${snapshot.digest}`}
100106
size="sm"
101-
className="ms-auto"
102107
/>
103108
</Stack>
104109
</Card.Footer>
105110
</Card>
106111
</Col>
107-
))}
108-
</Row>
109-
</Container>
110-
)}
112+
))
113+
)}
114+
</Row>
115+
</Container>
111116
</div>
112117
</>
113118
);

‎mithril-explorer/src/components/Artifacts/CardanoDbV2SnapshotsList/index.js‎

Lines changed: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import { useSelector } from "react-redux";
3-
import { Button, Card, Container, Row, Stack } from "react-bootstrap";
3+
import { Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
44
import ArtifactCol from "#/Artifacts/ArtifactCol";
55
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
66
import LatestBadge from "#/Artifacts/LatestBadge";
@@ -58,60 +58,67 @@ export default function CardanoDbV2SnapshotsList(props) {
5858
Cardano Db Snapshots v2{" "}
5959
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
6060
</h2>
61-
{Object.entries(cardanoDbSnapshots).length === 0 ? (
62-
<p>No cardano database snapshot available</p>
63-
) : (
64-
<Stack className="mx-2" gap={2}>
65-
{cardanoDbSnapshots.map((cdb_snapshot, index) => (
66-
<Card border={index === 0 ? "primary" : ""} key={cdb_snapshot.hash}>
67-
<Card.Body className="pt-2 pb-1">
68-
<ArtifactTitle hash={cdb_snapshot.hash} index={index} />
69-
<Container fluid>
70-
<Row>
71-
<ArtifactCol label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactCol>
72-
<ArtifactCol label="Immutable file number">
73-
{cdb_snapshot.beacon.immutable_file_number}
74-
</ArtifactCol>
75-
<ArtifactCol label="Created">
76-
<LocalDateTime datetime={cdb_snapshot.created_at} />
77-
</ArtifactCol>
78-
<ArtifactCol label="DB size">
79-
{formatBytes(cdb_snapshot.total_db_size_uncompressed)}{" "}
80-
<QuestionTooltip tooltip="Total uncompressed database size" />
81-
</ArtifactCol>
82-
<ArtifactCol label="Cardano node">
83-
{cdb_snapshot.cardano_node_version}
84-
</ArtifactCol>
85-
<ArtifactCol label="Compression">
86-
{cdb_snapshot.compression_algorithm}
87-
</ArtifactCol>
88-
<ArtifactCol label="Merkle Root">{cdb_snapshot.merkle_root}</ArtifactCol>
89-
<ArtifactCol label="Certificate hash">
90-
{cdb_snapshot.certificate_hash}
91-
</ArtifactCol>
92-
</Row>
93-
</Container>
94-
</Card.Body>
95-
<Card.Footer>
96-
<Stack direction="horizontal" gap={1}>
97-
<LatestBadge show={index === 0} />
98-
<Button
99-
size="sm"
100-
className="ms-auto"
101-
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
102-
Show Certificate
103-
</Button>
104-
<DownloadButton
105-
size="sm"
106-
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
107-
/>
108-
<RawJsonButton href={`${artifactsEndpoint}/${cdb_snapshot.hash}`} size="sm" />
109-
</Stack>
110-
</Card.Footer>
111-
</Card>
112-
))}
113-
</Stack>
114-
)}
61+
<Container fluid>
62+
<Row>
63+
{Object.entries(cardanoDbSnapshots).length === 0 ? (
64+
<p>No cardano database snapshot available</p>
65+
) : (
66+
cardanoDbSnapshots.map((cdb_snapshot, index) => (
67+
<Col key={cdb_snapshot.hash} className="mb-2">
68+
<Card border={index === 0 ? "primary" : ""}>
69+
<Card.Body className="pt-2 pb-1">
70+
<ArtifactTitle hash={cdb_snapshot.hash} index={index} />
71+
<Container fluid>
72+
<Row>
73+
<ArtifactCol label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactCol>
74+
<ArtifactCol label="Immutable file number">
75+
{cdb_snapshot.beacon.immutable_file_number}
76+
</ArtifactCol>
77+
<ArtifactCol label="Created">
78+
<LocalDateTime datetime={cdb_snapshot.created_at} />
79+
</ArtifactCol>
80+
<ArtifactCol label="DB size">
81+
{formatBytes(cdb_snapshot.total_db_size_uncompressed)}{" "}
82+
<QuestionTooltip tooltip="Total uncompressed database size" />
83+
</ArtifactCol>
84+
<ArtifactCol label="Cardano node">
85+
{cdb_snapshot.cardano_node_version}
86+
</ArtifactCol>
87+
<ArtifactCol label="Compression">
88+
{cdb_snapshot.compression_algorithm}
89+
</ArtifactCol>
90+
<ArtifactCol label="Merkle Root">{cdb_snapshot.merkle_root}</ArtifactCol>
91+
<ArtifactCol label="Certificate hash">
92+
{cdb_snapshot.certificate_hash}
93+
</ArtifactCol>
94+
</Row>
95+
</Container>
96+
</Card.Body>
97+
<Card.Footer>
98+
<Stack direction="horizontal" gap={1}>
99+
<LatestBadge show={index === 0} />
100+
<Button
101+
size="sm"
102+
className="ms-auto"
103+
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
104+
Show Certificate
105+
</Button>
106+
<DownloadButton
107+
size="sm"
108+
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
109+
/>
110+
<RawJsonButton
111+
href={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
112+
size="sm"
113+
/>
114+
</Stack>
115+
</Card.Footer>
116+
</Card>
117+
</Col>
118+
))
119+
)}
120+
</Row>
121+
</Container>
115122
</div>
116123
</>
117124
);

‎mithril-explorer/src/components/Artifacts/CardanoStakeDistributionsList/index.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useEffect, useState } from "react";
22
import { useSelector } from "react-redux";
3-
import { Button, Card, Col, Container, ListGroup, Row, Stack } from "react-bootstrap";
3+
import { Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
4+
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
5+
import ArtifactCol from "#/Artifacts/ArtifactCol";
46
import LatestBadge from "#/Artifacts/LatestBadge";
57
import CertificateModal from "#/CertificateModal";
68
import RawJsonButton from "#/RawJsonButton";
@@ -58,53 +60,51 @@ export default function CardanoStakeDistributionsList(props) {
5860
Cardano Stake Distribution{" "}
5961
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
6062
</h2>
61-
{Object.entries(cardanoStakeDistributions).length === 0 ? (
62-
<p>No cardano stake distribution available</p>
63-
) : (
64-
<Container fluid>
65-
<Row xs={1} md={2} lg={3} xl={4}>
66-
{cardanoStakeDistributions.map((cardanoStakeDistribution, index) => (
63+
<Container fluid>
64+
<Row>
65+
{Object.entries(cardanoStakeDistributions).length === 0 ? (
66+
<p>No cardano stake distribution available</p>
67+
) : (
68+
cardanoStakeDistributions.map((cardanoStakeDistribution, index) => (
6769
<Col key={cardanoStakeDistribution.hash} className="mb-2">
6870
<Card border={index === 0 ? "primary" : ""}>
69-
<Card.Body>
70-
<Card.Title>{cardanoStakeDistribution.hash}</Card.Title>
71-
<ListGroup variant="flush" className="data-list-group">
72-
<ListGroup.Item>Epoch: {cardanoStakeDistribution.epoch}</ListGroup.Item>
73-
{cardanoStakeDistribution.created_at && (
74-
<ListGroup.Item>
75-
Created:{" "}
71+
<Card.Body className="pt-2 pb-1">
72+
<ArtifactTitle hash={cardanoStakeDistribution.hash} index={index} />
73+
<Container fluid>
74+
<Row>
75+
<ArtifactCol label="Epoch">{cardanoStakeDistribution.epoch}</ArtifactCol>
76+
<ArtifactCol label="Created">
7677
<LocalDateTime datetime={cardanoStakeDistribution.created_at} />
77-
</ListGroup.Item>
78-
)}
79-
<ListGroup.Item>
80-
Certificate hash: <br />
81-
{cardanoStakeDistribution.certificate_hash}{" "}
82-
<Button
83-
size="sm"
84-
onClick={() =>
85-
showCertificate(cardanoStakeDistribution.certificate_hash)
86-
}>
87-
Show
88-
</Button>
89-
</ListGroup.Item>
90-
</ListGroup>
78+
</ArtifactCol>
79+
<ArtifactCol label="Certificate hash">
80+
{cardanoStakeDistribution.certificate_hash}
81+
</ArtifactCol>
82+
</Row>
83+
</Container>
9184
</Card.Body>
9285
<Card.Footer>
9386
<Stack direction="horizontal" gap={1}>
9487
<LatestBadge show={index === 0} />
88+
<Button
89+
size="sm"
90+
className="ms-auto"
91+
onClick={() =>
92+
showCertificate(cardanoStakeDistribution.certificate_hash)
93+
}>
94+
Show Certificate
95+
</Button>
9596
<RawJsonButton
9697
href={`${aggregator}/artifact/cardano-stake-distribution/${cardanoStakeDistribution.hash}`}
9798
size="sm"
98-
className="ms-auto"
9999
/>
100100
</Stack>
101101
</Card.Footer>
102102
</Card>
103103
</Col>
104-
))}
105-
</Row>
106-
</Container>
107-
)}
104+
))
105+
)}
106+
</Row>
107+
</Container>
108108
</div>
109109
</>
110110
);

0 commit comments

Comments
 (0)