From ca748c3c6916449524921efc8389f9b3898361fe Mon Sep 17 00:00:00 2001 From: LexLuthr <88259624+LexLuthr@users.noreply.github.com> Date: Mon, 4 Dec 2023 17:50:08 +0530 Subject: [PATCH] Update deal list page (#1837) * update deal list page * fix deal size in UI * Update react/src/DealDetail.js Co-authored-by: Anton Evangelatov --------- Co-authored-by: Anton Evangelatov --- gql/resolver.go | 11 +++++-- gql/schema.graphql | 1 + react/src/Components.js | 2 +- react/src/DealDetail.js | 19 ++++++----- react/src/Deals.css | 12 +++++-- react/src/Deals.js | 62 ++++++++++++++++++++++++++++++++--- react/src/LegacyDealDetail.js | 6 ++-- react/src/LegacyDeals.js | 2 ++ react/src/ProposalLogs.css | 2 +- react/src/ProposalLogs.js | 4 ++- react/src/gql.js | 4 +++ 11 files changed, 102 insertions(+), 23 deletions(-) diff --git a/gql/resolver.go b/gql/resolver.go index 9d9e69525..aebbf6fd1 100644 --- 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 index af4470f29..e1d8d60d4 100644 --- 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 index f8289a536..16ef2ada2 100644 --- 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 - + {props.id} } diff --git a/react/src/DealDetail.js b/react/src/DealDetail.js index 4a09bca17..5944d72c6 100644 --- a/react/src/DealDetail.js +++ b/react/src/DealDetail.js @@ -188,12 +188,12 @@ export function DealDetail(props) { Current Epoch - {currentEpoch ? addCommas(currentEpoch) : null} + {currentEpoch ? currentEpoch.toString() : null} Start Epoch - {addCommas(deal.StartEpoch)} + {deal.StartEpoch.toString()} {startEpochTime ? ' (' + moment(startEpochTime).fromNow() + ')' : null} @@ -202,7 +202,7 @@ export function DealDetail(props) { End Epoch - {addCommas(deal.EndEpoch)} + {deal.EndEpoch.toString()} {endEpochTime ? ' (' + moment(endEpochTime).fromNow() + ')' : null} @@ -211,7 +211,7 @@ export function DealDetail(props) { Duration - {addCommas(deal.EndEpoch-deal.StartEpoch)} + {deal.EndEpoch-deal.StartEpoch} {startEpochTime && endEpochTime ? ' (' + moment(endEpochTime).diff(startEpochTime, 'days') + ' days)' : null} @@ -299,7 +299,7 @@ export function DealDetail(props) { Chain Deal ID - {deal.ChainDealID ? addCommas(deal.ChainDealID) : null} + {deal.ChainDealID ? deal.ChainDealID.toString() : null} Checkpoint @@ -545,15 +545,16 @@ export function DealStatusInfo(props) {

- Announcing + Indexing

- 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.

- Sealing + IndexedAndAnnounced

- The deal has been added to a sector and is now sealing. + The deal has been indexed locally and announced to the network indexers.

diff --git a/react/src/Deals.css b/react/src/Deals.css index b1bcf7132..53bf9b686 100644 --- 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; } \ No newline at end of file diff --git a/react/src/Deals.js b/react/src/Deals.js index fcfbdfc4a..9dfc342a3 100644 --- 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) { Start Deal ID - Size + Size + On Chain ID Client - State + Sealing State + Deal State + {deals.map(deal => ( @@ -307,10 +311,18 @@ function DealRow(props) { - {humanFileSize(deal.Transfer.Size)} + {deal.IsOffline ? humanFileSize(deal.PieceSize) : humanFileSize(deal.Transfer.Size)} + {deal.ChainDealID ? deal.ChainDealID.toString() : null} + +

+ + {deal.SealingState} + +
+
{ hasAnnounceError ? ( @@ -451,3 +463,45 @@ export function StorageDealsMenuItem(props) { function scrollTop() { window.scrollTo({ top: 0, behavior: "smooth" }) } + + +export function SealingStatusInfo(props) { + return + + The deal can be in one of the following sealing states: +

+ To be Sealed
+

+ The storage deal is being processed by Boost before being handed off + to the sealer. +

+

+

+ Sealer:
+

+ The deal has been handed off to the sealing subsystem and is being sealed. +

+

+ + +} + +export function SizeInfo(props) { + return + + Size column displays different sizes based on the deal type +

+ Online Deals
+

+ Transfer Size or the car size specified in the deal proposal +

+

+

+ Offline
+

+ Piece size specified in the deal proposal +

+

+ + +} diff --git a/react/src/LegacyDealDetail.js b/react/src/LegacyDealDetail.js index 016a60c63..3ce025bc8 100644 --- a/react/src/LegacyDealDetail.js +++ b/react/src/LegacyDealDetail.js @@ -115,12 +115,12 @@ export function LegacyDealDetail(props) { Current Epoch - {currentEpoch ? addCommas(currentEpoch) : null} + {currentEpoch ? currentEpoch.toString() : null} Start Epoch - {addCommas(deal.StartEpoch)} + {deal.StartEpoch.toString()} {startEpochTime ? ' (' + moment(startEpochTime).fromNow() + ')' : null} @@ -129,7 +129,7 @@ export function LegacyDealDetail(props) { End Epoch - {addCommas(deal.EndEpoch)} + {deal.EndEpoch.toString()} {endEpochTime ? ' (' + moment(endEpochTime).fromNow() + ')' : null} diff --git a/react/src/LegacyDeals.js b/react/src/LegacyDeals.js index 7439bcad6..d9b47438c 100644 --- a/react/src/LegacyDeals.js +++ b/react/src/LegacyDeals.js @@ -94,6 +94,7 @@ function LegacyStorageDealsContent(props) { Start Deal ID Piece Size + On Chain ID Client State @@ -138,6 +139,7 @@ function DealRow(props) { {humanFileSize(deal.PieceSize)} + {deal.ChainDealID ? deal.ChainDealID.toString() : null} diff --git a/react/src/ProposalLogs.css b/react/src/ProposalLogs.css index 4e2dc4809..722a6283f 100644 --- 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 index 361491d24..50acbe377 100644 --- a/react/src/ProposalLogs.js +++ b/react/src/ProposalLogs.js @@ -154,7 +154,9 @@ function LogRow(props) { - {log.Accepted ? : } +
+ {log.Accepted ? : log.DealUUID} +
{humanFileSize(log.PieceSize)} diff --git a/react/src/gql.js b/react/src/gql.js index d35962baf..4d5c3b879 100644 --- 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