feat: display more fields on deal detail page (#120)

Author: dirkmc

gql/resolver.go

@@ -274,10 +274,39 @@ func (dr *dealResolver) ProviderAddress() string {
 	return dr.ProviderDealState.ClientDealProposal.Proposal.Provider.String()
 }
 
+func (dr *dealResolver) ClientPeerID() string {
+	return dr.ProviderDealState.ClientPeerID.String()
+}
+
+func (dr *dealResolver) DealDataRoot() string {
+	return dr.ProviderDealState.DealDataRoot.String()
+}
+
+func (dr *dealResolver) PublishCid() string {
+	if dr.ProviderDealState.PublishCID == nil {
+		return ""
+	}
+	return dr.ProviderDealState.PublishCID.String()
+}
+
 func (dr *dealResolver) PieceSize() float64 {
 	return float64(dr.ProviderDealState.ClientDealProposal.Proposal.PieceSize)
 }
 
+type dealTransfer struct {
+	Type   string
+	Size   float64
+	Params string
+}
+
+func (dr *dealResolver) Transfer() dealTransfer {
+	return dealTransfer{
+		Type:   dr.ProviderDealState.Transfer.Type,
+		Size:   float64(dr.ProviderDealState.Transfer.Size),
+		Params: "TODO",
+	}
+}
+
 func (dr *dealResolver) ProviderCollateral() float64 {
 	return float64(dr.ProviderDealState.ClientDealProposal.Proposal.ProviderCollateral.Int64())
 }
@@ -303,11 +332,13 @@ func (dr *dealResolver) Message() string {
 		case 100:
 			return "Transfer Complete"
 		default:
-			pct := (100 * dr.transferred) / uint64(dr.ClientDealProposal.Proposal.PieceSize)
+			pct := (100 * dr.transferred) / dr.ProviderDealState.Transfer.Size
 			return fmt.Sprintf("Transferring %d%%", pct)
 		}
 	case dealcheckpoints.Transferred:
 		return "Publishing"
+	case dealcheckpoints.PublishConfirmed:
+		return "Adding to Sector"
 	case dealcheckpoints.AddedPiece:
 		return "Sealing"
 	case dealcheckpoints.Complete:

gql/schema.graphql

@@ -9,6 +9,12 @@ The `Time` scalar type represents a DateTime. The DateTime is serialized as an R
 """
 scalar Time
 
+type TransferParams {
+  Type: String!
+  Size: Float!
+  Params: String!
+}
+
 type Deal {
   ID: ID!
   ClientAddress: String!
@@ -19,6 +25,10 @@ type Deal {
   ProviderCollateral: Float!
   StartEpoch: Float!
   EndEpoch: Float!
+  ClientPeerID: String!
+  DealDataRoot: String!
+  PublishCid: String!
+  Transfer: TransferParams!
   Message: String!
   Logs: [DealLog]!
 }

react/src/DealDetail.js

@@ -3,6 +3,7 @@ import {useMutation, useSubscription} from "./hooks";
 import {DealCancelMutation, DealSubscription} from "./gql";
 import {dateFormat} from "./util-date";
 import moment from "moment";
+import {humanFIL} from "./util";
 
 export function DealDetail(props) {
     // Add a class to the document body when showing the deal detail page
@@ -52,16 +53,48 @@ export function DealDetail(props) {
                     <td>{moment(deal.CreatedAt).format(dateFormat)}</td>
                 </tr>
                 <tr>
-                    <td>Client</td>
+                    <td>Client Address</td>
                     <td>{deal.ClientAddress}</td>
                 </tr>
                 <tr>
-                    <td>Amount</td>
-                    <td>{'0.2 FIL'}</td>
+                    <td>Client Peer ID</td>
+                    <td>{deal.ClientPeerID}</td>
                 </tr>
                 <tr>
-                    <td>Size</td>
-                    <td>{deal.PieceSize}</td>
+                    <td>Deal Data Root CID</td>
+                    <td>{deal.DealDataRoot}</td>
+                </tr>
+                <tr>
+                    <td>Piece CID</td>
+                    <td>{deal.PieceCid}</td>
+                </tr>
+                <tr>
+                    <td>Piece Size</td>
+                    <td>{deal.PieceSize.toLocaleString()}</td>
+                </tr>
+                <tr>
+                    <td>Provider Collateral</td>
+                    <td>{humanFIL(deal.ProviderCollateral)}</td>
+                </tr>
+                <tr>
+                    <td>Start Epoch</td>
+                    <td>{deal.StartEpoch}</td>
+                </tr>
+                <tr>
+                    <td>End Epoch</td>
+                    <td>{deal.EndEpoch}</td>
+                </tr>
+                <tr>
+                    <td>Transfer Type</td>
+                    <td>{deal.Transfer.Type}</td>
+                </tr>
+                <tr>
+                    <td>Transfer Size</td>
+                    <td>{deal.Transfer.Size.toLocaleString()}</td>
+                </tr>
+                <tr>
+                    <td>Publish Message CID</td>
+                    <td>{deal.PublishCid}</td>
                 </tr>
                 <tr>
                     <td>State</td>

react/src/Deals.js

@@ -195,7 +195,7 @@ function DealRow(props) {
             <td className="deal-id" onClick={() => props.onDealRowClick(deal.ID)}>
                 <ShortDealID id={deal.ID} />
             </td>
-            <td className="piece-size">{humanFileSize(deal.PieceSize, false, 0)}</td>
+            <td className="size">{humanFileSize(deal.Transfer.Size, false, 0)}</td>
             <td className="client">
                 <ShortClientAddress address={deal.ClientAddress} />
             </td>

react/src/gql.js

@@ -64,7 +64,18 @@ const DealsListQuery = gql`
                 PieceCid
                 PieceSize
                 ClientAddress
+                StartEpoch
+                EndEpoch
+                ProviderCollateral
+                ClientPeerID
+                DealDataRoot
+                PublishCid
                 Message
+                Transfer {
+                    Type
+                    Size
+                    Params
+                }
                 Logs {
                     CreatedAt
                     Text
@@ -84,7 +95,18 @@ const DealSubscription = gql`
             PieceCid
             PieceSize
             ClientAddress
+            StartEpoch
+            EndEpoch
+            ProviderCollateral
+            ClientPeerID
+            DealDataRoot
+            PublishCid
             Message
+            Transfer {
+                Type
+                Size
+                Params
+            }
             Logs {
                 CreatedAt
                 Text
@@ -107,7 +129,18 @@ const NewDealsSubscription = gql`
             PieceCid
             PieceSize
             ClientAddress
+            StartEpoch
+            EndEpoch
+            ProviderCollateral
+            ClientPeerID
+            DealDataRoot
+            PublishCid
             Message
+            Transfer {
+                Type
+                Size
+                Params
+            }
             Logs {
                 CreatedAt
                 Text

react/src/index.css

@@ -107,8 +107,8 @@ body.modal-open {
   width: 3em;
 }
 
-.deals td.piece-size {
-  width: 6em;
+.deals td.size {
+  width: 5em;
   white-space: nowrap;
 }
 
@@ -164,11 +164,16 @@ body.modal-open {
 }
 
 #deal-detail table.deal-fields {
-  display: inline-block;
-  width: auto;
   margin-bottom: 1em;
 }
 
+#deal-detail table.deal-fields tr td:first-child {
+  width: 8em;
+}
+#deal-detail table.deal-fields tr td:last-child {
+  line-break: anywhere;
+}
+
 #deal-detail td {
   padding: 0.5em 1em;
 }