Skip to content

Commit

Permalink
refactor(explorer): generalize new cardano db v2 style to all artifacts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alenar
Alenar committed Feb 3, 2025
1 parent f41511f commit 6f0f5cd
Show file tree
Hide file tree
Showing 10 changed files with 313 additions and 277 deletions.
4 changes: 3 additions & 1 deletion mithril-explorer/src/components/Artifacts/ArtifactCol.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React from "react";
import { Col } from "react-bootstrap";

import styles from "./styles.module.css";

export default function ArtifactCol({ label, children, className = "", ...props }) {
return (
<Col
className={`mx-2 px-0 py-1 d-flex flex-column justify-content-between ${className}`}
{...props}>
<div>
<div>
<div className={styles.artifactColLabel}>
<em>{label}:</em>
</div>
<div className={`test-end`}>{children}</div>
Expand Down
85 changes: 45 additions & 40 deletions mithril-explorer/src/components/Artifacts/CardanoDbSnapshotsList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Badge, Button, Card, Col, Container, ListGroup, Row, Stack } from "react-bootstrap";
import { Badge, Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
import ArtifactCol from "#/Artifacts/ArtifactCol";
import LatestBadge from "#/Artifacts/LatestBadge";
import CertificateModal from "#/CertificateModal";
import RawJsonButton from "#/RawJsonButton";
Expand Down Expand Up @@ -55,59 +57,62 @@ export default function CardanoDbSnapshotsList(props) {
Cardano Db Snapshots{" "}
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
</h2>
{Object.entries(cardanoDbSnapshots).length === 0 ? (
<p>No snapshot available</p>
) : (
<Container fluid>
<Row xs={1} md={2} lg={3} xl={4}>
{cardanoDbSnapshots.map((snapshot, index) => (
<Container fluid>
<Row>
{Object.entries(cardanoDbSnapshots).length === 0 ? (
<p>No snapshot available</p>
) : (
cardanoDbSnapshots.map((snapshot, index) => (
<Col key={snapshot.digest} className="mb-2">
<Card border={index === 0 ? "primary" : ""}>
<Card.Body>
<Card.Title>{snapshot.digest}</Card.Title>
<ListGroup variant="flush" className="data-list-group">
<ListGroup.Item>Epoch: {snapshot.beacon.epoch}</ListGroup.Item>
<ListGroup.Item>
Immutable file number: {snapshot.beacon.immutable_file_number}
</ListGroup.Item>
<ListGroup.Item>
Cardano node: {snapshot.cardano_node_version}
</ListGroup.Item>
<ListGroup.Item>
Compression: {snapshot.compression_algorithm}
</ListGroup.Item>
<ListGroup.Item>
Certificate hash: <br />
{snapshot.certificate_hash}{" "}
<Button
size="sm"
onClick={() => showCertificate(snapshot.certificate_hash)}>
Show
</Button>
</ListGroup.Item>
<ListGroup.Item>
Created: <LocalDateTime datetime={snapshot.created_at} />
</ListGroup.Item>
<ListGroup.Item>Archive size: {formatBytes(snapshot.size)}</ListGroup.Item>
</ListGroup>
<Card.Body className="pt-2 pb-1">
<ArtifactTitle hash={snapshot.digest} index={index} />
<Container fluid>
<Row>
<ArtifactCol label="Epoch">{snapshot.beacon.epoch}</ArtifactCol>
<ArtifactCol label="Immutable file number">
{snapshot.beacon.immutable_file_number}
</ArtifactCol>
<ArtifactCol label="Created">
<LocalDateTime datetime={snapshot.created_at} />
</ArtifactCol>
<ArtifactCol label="Archive size">
{formatBytes(snapshot.size)}
</ArtifactCol>
<ArtifactCol label="Cardano node">
{snapshot.cardano_node_version}
</ArtifactCol>
<ArtifactCol label="Compression">
{snapshot.compression_algorithm}
</ArtifactCol>
<ArtifactCol label="Certificate hash">
{snapshot.certificate_hash}
</ArtifactCol>
</Row>
</Container>
</Card.Body>
<Card.Footer>
<Stack direction="horizontal" gap={1}>
<LatestBadge show={index === 0} />
<Badge bg="secondary">{snapshot.beacon.network}</Badge>
<Badge bg="secondary">{snapshot.network}</Badge>
<Button
size="sm"
className="ms-auto"
onClick={() => showCertificate(snapshot.certificate_hash)}>
Show Certificate
</Button>
<RawJsonButton
href={`${aggregator}/artifact/snapshot/${snapshot.digest}`}
size="sm"
className="ms-auto"
/>
</Stack>
</Card.Footer>
</Card>
</Col>
))}
</Row>
</Container>
)}
))
)}
</Row>
</Container>
</div>
</>
);
Expand Down
117 changes: 62 additions & 55 deletions mithril-explorer/src/components/Artifacts/CardanoDbV2SnapshotsList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Button, Card, Container, Row, Stack } from "react-bootstrap";
import { Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
import ArtifactCol from "#/Artifacts/ArtifactCol";
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
import LatestBadge from "#/Artifacts/LatestBadge";
Expand Down Expand Up @@ -58,60 +58,67 @@ export default function CardanoDbV2SnapshotsList(props) {
Cardano Db Snapshots v2{" "}
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
</h2>
{Object.entries(cardanoDbSnapshots).length === 0 ? (
<p>No cardano database snapshot available</p>
) : (
<Stack className="mx-2" gap={2}>
{cardanoDbSnapshots.map((cdb_snapshot, index) => (
<Card border={index === 0 ? "primary" : ""} key={cdb_snapshot.hash}>
<Card.Body className="pt-2 pb-1">
<ArtifactTitle hash={cdb_snapshot.hash} index={index} />
<Container fluid>
<Row>
<ArtifactCol label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactCol>
<ArtifactCol label="Immutable file number">
{cdb_snapshot.beacon.immutable_file_number}
</ArtifactCol>
<ArtifactCol label="Created">
<LocalDateTime datetime={cdb_snapshot.created_at} />
</ArtifactCol>
<ArtifactCol label="DB size">
{formatBytes(cdb_snapshot.total_db_size_uncompressed)}{" "}
<QuestionTooltip tooltip="Total uncompressed database size" />
</ArtifactCol>
<ArtifactCol label="Cardano node">
{cdb_snapshot.cardano_node_version}
</ArtifactCol>
<ArtifactCol label="Compression">
{cdb_snapshot.compression_algorithm}
</ArtifactCol>
<ArtifactCol label="Merkle Root">{cdb_snapshot.merkle_root}</ArtifactCol>
<ArtifactCol label="Certificate hash">
{cdb_snapshot.certificate_hash}
</ArtifactCol>
</Row>
</Container>
</Card.Body>
<Card.Footer>
<Stack direction="horizontal" gap={1}>
<LatestBadge show={index === 0} />
<Button
size="sm"
className="ms-auto"
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
Show Certificate
</Button>
<DownloadButton
size="sm"
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
/>
<RawJsonButton href={`${artifactsEndpoint}/${cdb_snapshot.hash}`} size="sm" />
</Stack>
</Card.Footer>
</Card>
))}
</Stack>
)}
<Container fluid>
<Row>
{Object.entries(cardanoDbSnapshots).length === 0 ? (
<p>No cardano database snapshot available</p>
) : (
cardanoDbSnapshots.map((cdb_snapshot, index) => (
<Col key={cdb_snapshot.hash} className="mb-2">
<Card border={index === 0 ? "primary" : ""}>
<Card.Body className="pt-2 pb-1">
<ArtifactTitle hash={cdb_snapshot.hash} index={index} />
<Container fluid>
<Row>
<ArtifactCol label="Epoch">{cdb_snapshot.beacon.epoch}</ArtifactCol>
<ArtifactCol label="Immutable file number">
{cdb_snapshot.beacon.immutable_file_number}
</ArtifactCol>
<ArtifactCol label="Created">
<LocalDateTime datetime={cdb_snapshot.created_at} />
</ArtifactCol>
<ArtifactCol label="DB size">
{formatBytes(cdb_snapshot.total_db_size_uncompressed)}{" "}
<QuestionTooltip tooltip="Total uncompressed database size" />
</ArtifactCol>
<ArtifactCol label="Cardano node">
{cdb_snapshot.cardano_node_version}
</ArtifactCol>
<ArtifactCol label="Compression">
{cdb_snapshot.compression_algorithm}
</ArtifactCol>
<ArtifactCol label="Merkle Root">{cdb_snapshot.merkle_root}</ArtifactCol>
<ArtifactCol label="Certificate hash">
{cdb_snapshot.certificate_hash}
</ArtifactCol>
</Row>
</Container>
</Card.Body>
<Card.Footer>
<Stack direction="horizontal" gap={1}>
<LatestBadge show={index === 0} />
<Button
size="sm"
className="ms-auto"
onClick={() => showCertificate(cdb_snapshot.certificate_hash)}>
Show Certificate
</Button>
<DownloadButton
size="sm"
artifactUrl={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
/>
<RawJsonButton
href={`${artifactsEndpoint}/${cdb_snapshot.hash}`}
size="sm"
/>
</Stack>
</Card.Footer>
</Card>
</Col>
))
)}
</Row>
</Container>
</div>
</>
);
Expand Down
66 changes: 33 additions & 33 deletions mithril-explorer/src/components/Artifacts/CardanoStakeDistributionsList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Button, Card, Col, Container, ListGroup, Row, Stack } from "react-bootstrap";
import { Button, Card, Col, Container, Row, Stack } from "react-bootstrap";
import ArtifactTitle from "#/Artifacts/ArtifactTitle";
import ArtifactCol from "#/Artifacts/ArtifactCol";
import LatestBadge from "#/Artifacts/LatestBadge";
import CertificateModal from "#/CertificateModal";
import RawJsonButton from "#/RawJsonButton";
Expand Down Expand Up @@ -58,53 +60,51 @@ export default function CardanoStakeDistributionsList(props) {
Cardano Stake Distribution{" "}
<RawJsonButton href={artifactsEndpoint} variant="outline-light" size="sm" />
</h2>
{Object.entries(cardanoStakeDistributions).length === 0 ? (
<p>No cardano stake distribution available</p>
) : (
<Container fluid>
<Row xs={1} md={2} lg={3} xl={4}>
{cardanoStakeDistributions.map((cardanoStakeDistribution, index) => (
<Container fluid>
<Row>
{Object.entries(cardanoStakeDistributions).length === 0 ? (
<p>No cardano stake distribution available</p>
) : (
cardanoStakeDistributions.map((cardanoStakeDistribution, index) => (
<Col key={cardanoStakeDistribution.hash} className="mb-2">
<Card border={index === 0 ? "primary" : ""}>
<Card.Body>
<Card.Title>{cardanoStakeDistribution.hash}</Card.Title>
<ListGroup variant="flush" className="data-list-group">
<ListGroup.Item>Epoch: {cardanoStakeDistribution.epoch}</ListGroup.Item>
{cardanoStakeDistribution.created_at && (
<ListGroup.Item>
Created:{" "}
<Card.Body className="pt-2 pb-1">
<ArtifactTitle hash={cardanoStakeDistribution.hash} index={index} />
<Container fluid>
<Row>
<ArtifactCol label="Epoch">{cardanoStakeDistribution.epoch}</ArtifactCol>
<ArtifactCol label="Created">
<LocalDateTime datetime={cardanoStakeDistribution.created_at} />
</ListGroup.Item>
)}
<ListGroup.Item>
Certificate hash: <br />
{cardanoStakeDistribution.certificate_hash}{" "}
<Button
size="sm"
onClick={() =>
showCertificate(cardanoStakeDistribution.certificate_hash)
}>
Show
</Button>
</ListGroup.Item>
</ListGroup>
</ArtifactCol>
<ArtifactCol label="Certificate hash">
{cardanoStakeDistribution.certificate_hash}
</ArtifactCol>
</Row>
</Container>
</Card.Body>
<Card.Footer>
<Stack direction="horizontal" gap={1}>
<LatestBadge show={index === 0} />
<Button
size="sm"
className="ms-auto"
onClick={() =>
showCertificate(cardanoStakeDistribution.certificate_hash)
}>
Show Certificate
</Button>
<RawJsonButton
href={`${aggregator}/artifact/cardano-stake-distribution/${cardanoStakeDistribution.hash}`}
size="sm"
className="ms-auto"
/>
</Stack>
</Card.Footer>
</Card>
</Col>
))}
</Row>
</Container>
)}
))
)}
</Row>
</Container>
</div>
</>
);
Expand Down
Loading

0 comments on commit 6f0f5cd

Please sign in to comment.