Storage Deals
{data ? ( - +
{data.dealsCount} deal{data.dealsCount === 1 ? '' : 's'}
diff --git a/react/src/Inspect.css b/react/src/Inspect.css
new file mode 100644
index 000000000..d213d6f82
--- /dev/null
+++ b/react/src/Inspect.css
@@ -0,0 +1,92 @@
+.inspect table {
+ font-size: 1em;
+ width: 100%;
+}
+
+.inspect td, .inspect th {
+ padding: 0.5em 1em;
+ font-weight: normal;
+}
+
+.inspect th {
+ white-space: nowrap;
+ text-align: left;
+ opacity: 0.6;
+}
+
+.inspect .search {
+ position: absolute;
+ right: 8em;
+ top: 2em;
+}
+
+.inspect .search input {
+ background-image: url("./bootstrap-icons/icons/search.svg");
+ background-repeat: no-repeat;
+ background-position: left 0.5em center;
+ padding-left: 2em;
+ padding-right: 2em;
+}
+
+.inspect .search .clear-text {
+ position: absolute;
+ right: 1em;
+ top: 1.1em;
+ cursor: pointer;
+}
+
+.piece-detail h3 {
+ margin-top: 2em;
+}
+
+.piece-detail .title {
+ font-size: 1.25em;
+ color: #a61e4d;
+ margin: 2em 0.8em 1.5em 0.8em;
+}
+
+.piece-detail {
+ padding: 1em 0 5em 0;
+}
+
+.piece-detail .title {
+ color: inherit;
+ font-weight: normal;
+ margin: 0.8em;
+}
+
+.piece-detail p {
+ padding: 0.5em 1em;
+}
+
+.piece-detail table {
+ font-size: 1em;
+}
+
+.piece-detail table.deals tr td:first-child {
+ width: 8em;
+}
+.piece-detail table.deals tr td:last-child {
+ line-break: anywhere;
+}
+
+.piece-detail table th {
+ text-align: left;
+}
+
+.piece-detail table.deals .param {
+ color: #777777;
+}
+
+.piece-detail td, .piece-detail th {
+ padding: 0.5em 1em;
+}
+
+.inspect .title {
+ font-size: 1.25em;
+ margin: 2em 0.8em 1em 0.8em;
+}
+
+.inspect .payload-cid {
+ padding: 0.5em 1em;
+}
diff --git a/react/src/Inspect.js b/react/src/Inspect.js
new file mode 100644
index 000000000..efa79e429
--- /dev/null
+++ b/react/src/Inspect.js
@@ -0,0 +1,211 @@
+import {useQuery} from "@apollo/react-hooks";
+import {
+ PieceStatusQuery, PiecesWithPayloadCidQuery
+} from "./gql";
+import moment from "moment";
+import {DebounceInput} from 'react-debounce-input';
+import React, {useState} from "react";
+import {PageContainer, ShortDealLink} from "./Components";
+import {Link, useParams} from "react-router-dom";
+import {dateFormat} from "./util-date";
+import xImg from './bootstrap-icons/icons/x-lg.svg'
+import inspectImg from './bootstrap-icons/icons/wrench.svg'
+import './Inspect.css'
+
+export function InspectMenuItem(props) {
+ return (
+
+ Inspect
+ + ) +} + +export function InspectPage(props) { + returnLoading ...
+ }
+
+ var errorMsg = ""
+ if ((pieceRes || {}).error || payloadRes.error) {
+ errorMsg = ((pieceRes || {}).error ? pieceRes.error.message : payloadRes.error.message)
+ }
+
+ const pieceStatus = ((pieceRes || {}).data || {}).pieceStatus
+ const showPayload = pieceCids.length > 1
+ const showInstructions = !errorMsg && !pieceStatus && !showPayload
+ return
+
+}
+
+function PiecesWithPayload({payloadCid, pieceCids, setSearchQuery}) {
+ return Error: {errorMsg}
: null}
+ { pieceStatus ? Enter piece CID or payload CID into the search box
: null } +
+
+}
+
+function PieceStatus({pieceCid, pieceStatus}) {
+ if (!pieceStatus) {
+ return Pieces with payload CID {payloadCid}:
+ {pieceCids.map(pc => (
+
+ setSearchQuery(pc)} to={"/inspect/"+pc}>{pc}
+
+ ))}
+ No piece found with piece CID {pieceCid}
+ }
+
+ const rootCid = pieceStatus.Deals.length ? pieceStatus.Deals[0].Deal.DealDataRoot : null
+
+ return
+
+}
+
+function SealStatus({status}) {
+ if (status.Error) {
+ return status.Error
+ }
+ return status.IsUnsealed ? 'Yes' : 'No'
+}
+
+function SearchBox(props) {
+ return
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ ) : (
+
+ | Piece CID | +{pieceCid} | +
|---|---|
| Data Root CID | +{rootCid} | +
| Index Status | +{pieceStatus.IndexStatus.Status} | +
Piece Store
+ {pieceStatus.PieceInfoDeals.length ? ( +| Chain Deal ID | +Sector Number | +Piece Offset | +Piece Length | +Unsealed | +
|---|---|---|---|---|
| {deal.ChainDealID+''} | +{deal.Sector.ID+''} | +{deal.Sector.Offset+''} | +{deal.Sector.Length+''} | +
No data found in piece store for piece CID {pieceCid}
+ )} + +Deals
+ {pieceStatus.PieceInfoDeals.length ? ( +| CreatedAt | +Deal ID | +Legacy Deal | +Sector Number | +Piece Offset | +Piece Length | +Unsealed | +
|---|---|---|---|---|---|---|
| {moment(deal.Deal.CreatedAt).format(dateFormat)} | +{deal.Deal.IsLegacy ? 'Yes' : 'No'} | +{deal.Sector.ID+''} | +{deal.Sector.Offset+''} | +{deal.Sector.Length+''} | +
No deals found with piece CID {pieceCid}
+ )} +
+ 
: null }
+
+}
diff --git a/react/src/LegacyDealDetail.js b/react/src/LegacyDealDetail.js
index 16ef9a3e0..45739258b 100644
--- a/react/src/LegacyDealDetail.js
+++ b/react/src/LegacyDealDetail.js
@@ -5,7 +5,7 @@ import {useNavigate} from "react-router-dom";
import {dateFormat} from "./util-date";
import moment from "moment";
import {humanFIL, addCommas, humanFileSize} from "./util";
-import {useParams} from "react-router-dom";
+import {useParams, Link} from "react-router-dom";
import './DealDetail.css'
import closeImg from './bootstrap-icons/icons/x-circle.svg'
@@ -79,7 +79,7 @@ export function LegacyDealDetail(props) {