Update deal list page (#1837)

* update deal list page * fix deal size in UI * Update react/src/DealDetail.js Co-authored-by: Anton Evangelatov <[email protected]> --------- Co-authored-by: Anton Evangelatov <[email protected]>
filecoin-project · Dec 4, 2023 · ca748c3 · ca748c3
1 parent 37e4d80
commit ca748c3
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 23 deletions.
diff --git a/gql/resolver.go b/gql/resolver.go
@@ -629,9 +629,9 @@ func (dr *dealResolver) message(ctx context.Context, checkpoint dealcheckpoints.
 	case dealcheckpoints.PublishConfirmed:
 		return "Adding to Sector"
 	case dealcheckpoints.AddedPiece:
-		return "Announcing"
+		return "Indexing"
 	case dealcheckpoints.IndexedAndAnnounced:
-		return dr.sealingState(ctx)
+		return "Indexed and Announced"
 	case dealcheckpoints.Complete:
 		switch dr.Err {
 		case "":
@@ -644,6 +644,13 @@ func (dr *dealResolver) message(ctx context.Context, checkpoint dealcheckpoints.
 	return checkpoint.String()
 }
 
+func (dr *dealResolver) SealingState(ctx context.Context) string {
+	if dr.ProviderDealState.Checkpoint < dealcheckpoints.AddedPiece {
+		return "To be sealed"
+	}
+	return dr.sealingState(ctx)
+}
+
 func (dr *dealResolver) TransferSamples() []*transferPoint {
 	points := dr.provider.Transfer(dr.DealUuid)
 	pts := make([]*transferPoint, 0, len(points))

diff --git a/gql/schema.graphql b/gql/schema.graphql
@@ -82,6 +82,7 @@ type Deal {
   Sector: Sector!
   Message: String!
   Logs: [DealLog]!
+  SealingState: String!
 }
 
 type DirectDeal {

diff --git a/react/src/Components.js b/react/src/Components.js
@@ -15,7 +15,7 @@ export function PageContainer(props) {
 export function ShortDealLink(props) {
     const linkBase = props.isLegacy ? "/legacy-deals/" : "/deals/"
     return <Link to={linkBase + props.id}>
-        <ShortDealID id={props.id} />
+        {props.id}
     </Link>
 }
 

diff --git a/react/src/DealDetail.js b/react/src/DealDetail.js
@@ -188,12 +188,12 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Current Epoch</th>
-                    <td>{currentEpoch ? addCommas(currentEpoch) : null}</td>
+                    <td>{currentEpoch ? currentEpoch.toString() : null}</td>
                 </tr>
                 <tr>
                     <th>Start Epoch</th>
                     <td>
-                        {addCommas(deal.StartEpoch)}
+                        {deal.StartEpoch.toString()}
                         <span className="aux">
                             {startEpochTime ? ' (' + moment(startEpochTime).fromNow() + ')' : null}
                         </span>
@@ -202,7 +202,7 @@ export function DealDetail(props) {
                 <tr>
                     <th>End Epoch</th>
                     <td>
-                        {addCommas(deal.EndEpoch)}
+                        {deal.EndEpoch.toString()}
                         <span className="aux">
                             {endEpochTime ? ' (' + moment(endEpochTime).fromNow() + ')' : null}
                         </span>
@@ -211,7 +211,7 @@ export function DealDetail(props) {
                 <tr>
                     <th>Duration</th>
                     <td>
-                        {addCommas(deal.EndEpoch-deal.StartEpoch)}
+                        {deal.EndEpoch-deal.StartEpoch}
                         <span className="aux">
                             {startEpochTime && endEpochTime ? ' (' + moment(endEpochTime).diff(startEpochTime, 'days') + ' days)' : null}
                         </span>
@@ -299,7 +299,7 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Chain Deal ID</th>
-                    <td>{deal.ChainDealID ? addCommas(deal.ChainDealID) : null}</td>
+                    <td>{deal.ChainDealID ? deal.ChainDealID.toString() : null}</td>
                 </tr>
                 <tr>
                     <th>Checkpoint</th>
@@ -545,15 +545,16 @@ export function DealStatusInfo(props) {
                 </p>
             </p>
             <p>
-                <i>Announcing</i>
+                <i>Indexing</i>
                 <p>
-                    Boost is announcing the deal to the network so that clients know where to retrieve it.
+                    Boost is indexing the deal in the Local Index Directory(LID)
+                    and will be announcing the deal to the network so that clients know where to retrieve it from.
                 </p>
             </p>
             <p>
-                <i>Sealing</i>
+                <i>IndexedAndAnnounced</i>
                 <p>
-                    The deal has been added to a sector and is now sealing.
+                    The deal has been indexed locally and announced to the network indexers.
                 </p>
             </p>
             <p>

diff --git a/react/src/Deals.css b/react/src/Deals.css
@@ -11,7 +11,7 @@
 .deals th {
     white-space: nowrap;
     text-align: left;
-    opacity: 0.6;
+    color: #888888;
 }
 
 .deals td.start, .deals th.start {
@@ -27,7 +27,7 @@
 .deals td.deal-id {
     cursor: pointer;
     color: #465298;
-    width: 7em;
+    white-space: nowrap;
 }
 
 .deals td.client {
@@ -45,6 +45,10 @@
     width: 100%;
 }
 
+.deals td.sealing {
+    white-space: nowrap;
+}
+
 .deals tr.error {
     opacity: 0.8;
 }
@@ -184,4 +188,8 @@
 .search-filters hr {
     border: 1px solid #DDD;
     margin: 1em 0em;
+}
+
+.info-box {
+    opacity: 1;
 }
diff --git a/react/src/Deals.js b/react/src/Deals.js
@@ -18,9 +18,10 @@ import xImg from './bootstrap-icons/icons/x-lg.svg'
 import './Deals.css'
 import warningImg from './bootstrap-icons/icons/exclamation-circle.svg'
 import {Pagination} from "./Pagination";
-import {DealActions, IsPaused, IsTransferring, IsOfflineWaitingForData} from "./DealDetail";
+import {DealActions, IsPaused, IsTransferring, IsOfflineWaitingForData, DealStatusInfo} from "./DealDetail";
 import {humanTransferRate} from "./DealTransfers";
 import {DirectDealsCount} from "./DirectDeals";
+import {Info} from "./Info";
 
 const dealsBasePath = '/storage-deals'
 
@@ -145,9 +146,12 @@ function StorageDealsContent(props) {
             <tr>
                 <th onClick={toggleTimestampFormat} className="start">Start</th>
                 <th>Deal ID</th>
-                <th>Size</th>
+                <th>Size<SizeInfo /></th>
+                <th>On Chain ID</th>
                 <th>Client</th>
-                <th>State</th>
+                <th>Sealing State<SealingStatusInfo /></th>
+                <th>Deal State<DealStatusInfo /></th>
+
             </tr>
 
             {deals.map(deal => (
@@ -307,10 +311,18 @@ function DealRow(props) {
             <td className="deal-id">
                 <ShortDealLink id={deal.ID} />
             </td>
-            <td className="size">{humanFileSize(deal.Transfer.Size)}</td>
+            <td className="size">{deal.IsOffline ? humanFileSize(deal.PieceSize) : humanFileSize(deal.Transfer.Size)}</td>
+            <td className="message-text">{deal.ChainDealID ? deal.ChainDealID.toString() : null}</td>
             <td className={'client ' + (isContractAddress(deal.ClientAddress) ? 'contract' : '')}>
                 <ShortClientAddress address={deal.ClientAddress} />
             </td>
+            <td className="sealing">
+                <div className="message-content">
+                    <span className="message-text">
+                        {deal.SealingState}
+                    </span>
+                </div>
+            </td>
             <td className="message">
                 <div className="message-content">
                     { hasAnnounceError ? (
@@ -451,3 +463,45 @@ export function StorageDealsMenuItem(props) {
 function scrollTop() {
     window.scrollTo({ top: 0, behavior: "smooth" })
 }
+
+
+export function SealingStatusInfo(props) {
+    return <span className="deal-status-info">
+        <Info>
+            The deal can be in one of the following sealing states:
+            <p>
+                <i>To be Sealed</i><br/>
+                <p>
+                    The storage deal is being processed by Boost before being handed off
+                    to the sealer.
+                </p>
+            </p>
+            <p>
+                <i>Sealer: </i><br/>
+                <p>
+                    The deal has been handed off to the sealing subsystem and is being sealed.
+                </p>
+            </p>
+        </Info>
+    </span>
+}
+
+export function SizeInfo(props) {
+    return <span className="deal-status-info">
+        <Info>
+            Size column displays different sizes based on the deal type
+            <p>
+                <i>Online Deals</i><br/>
+                <p>
+                    Transfer Size or the car size specified in the deal proposal
+                </p>
+            </p>
+            <p>
+                <i>Offline</i><br/>
+                <p>
+                    Piece size specified in the deal proposal
+                </p>
+            </p>
+        </Info>
+    </span>
+}
diff --git a/react/src/LegacyDealDetail.js b/react/src/LegacyDealDetail.js
@@ -115,12 +115,12 @@ export function LegacyDealDetail(props) {
                 </tr>
                 <tr>
                     <th>Current Epoch</th>
-                    <td>{currentEpoch ? addCommas(currentEpoch) : null}</td>
+                    <td>{currentEpoch ? currentEpoch.toString() : null}</td>
                 </tr>
                 <tr>
                     <th>Start Epoch</th>
                     <td>
-                        {addCommas(deal.StartEpoch)}
+                        {deal.StartEpoch.toString()}
                         <span className="aux">
                             {startEpochTime ? ' (' + moment(startEpochTime).fromNow() + ')' : null}
                         </span>
@@ -129,7 +129,7 @@ export function LegacyDealDetail(props) {
                 <tr>
                     <th>End Epoch</th>
                     <td>
-                        {addCommas(deal.EndEpoch)}
+                        {deal.EndEpoch.toString()}
                         <span className="aux">
                             {endEpochTime ? ' (' + moment(endEpochTime).fromNow() + ')' : null}
                         </span>

diff --git a/react/src/LegacyDeals.js b/react/src/LegacyDeals.js
@@ -94,6 +94,7 @@ function LegacyStorageDealsContent(props) {
                 <th className="start" onClick={toggleTimestampFormat}>Start</th>
                 <th>Deal ID</th>
                 <th>Piece Size</th>
+                <th>On Chain ID</th>
                 <th>Client</th>
                 <th>State</th>
             </tr>
@@ -138,6 +139,7 @@ function DealRow(props) {
                 </Link>
             </td>
             <td className="piece-size">{humanFileSize(deal.PieceSize)}</td>
+            <td className="message-text">{deal.ChainDealID ? deal.ChainDealID.toString() : null}</td>
             <td className="client">
                 <ShortClientAddress address={deal.ClientAddress} />
             </td>

diff --git a/react/src/ProposalLogs.css b/react/src/ProposalLogs.css
@@ -29,7 +29,7 @@
 }
 
 .logs td.deal-id {
-    min-width: 7em;
+    white-space: nowrap;
 }
 
 .logs td.deal-id.accepted {

diff --git a/react/src/ProposalLogs.js b/react/src/ProposalLogs.js
@@ -154,7 +154,9 @@ function LogRow(props) {
             </td>
             <td className="deal-id">
                 <span id={copyId} className="copy" onClick={dealIDToClipboard} title="Copy deal uuid to clipboard"></span>
-                {log.Accepted ? <ShortDealLink id={log.DealUUID} /> : <ShortDealID id={log.DealUUID} />}
+                <div className="deal-id">
+                    {log.Accepted ? <ShortDealLink id={log.DealUUID} /> : log.DealUUID}
+                </div>
             </td>
             <td className="size">
                 {humanFileSize(log.PieceSize)}

diff --git a/react/src/gql.js b/react/src/gql.js
@@ -97,6 +97,9 @@ const DealsListQuery = gql`
                 Err
                 Retry
                 Message
+                SealingState
+                ChainDealID
+                PieceSize
                 Transfer {
                     Type
                     Size
@@ -138,6 +141,7 @@ const LegacyDealsListQuery = gql`
                 Status
                 Message
                 SectorNumber
+                ChainDealID
             }
             totalCount
             more