Show both sealing and index / announce status, if there's an error announcing

gql/resolver_sector.go

@@ -0,0 +1,38 @@
+package gql
+
+import (
+	"context"
+	"github.com/filecoin-project/boost/gql/types"
+	"github.com/filecoin-project/go-state-types/abi"
+	"github.com/filecoin-project/lotus/api"
+)
+
+type sectorStatusResolver struct {
+	si api.SectorInfo
+}
+
+func (r *sectorStatusResolver) Number() types.Uint64 {
+	return types.Uint64(r.si.SectorID)
+}
+
+func (r *sectorStatusResolver) State() string {
+	return string(r.si.State)
+}
+
+func (r *sectorStatusResolver) DealIDs() []types.Uint64 {
+	ids := make([]types.Uint64, 0, len(r.si.Deals))
+	for _, id := range r.si.Deals {
+		ids = append(ids, types.Uint64(id))
+	}
+	return ids
+}
+
+func (dr *resolver) SectorStatus(ctx context.Context, args struct{ SectorNumber types.Uint64 }) (*sectorStatusResolver, error) {
+	sec := abi.SectorNumber(args.SectorNumber)
+	si, err := dr.spApi.SectorsStatus(ctx, sec, false)
+	if err != nil {
+		return nil, err
+	}
+
+	return &sectorStatusResolver{si: si}, nil
+}

gql/schema.graphql

@@ -320,6 +320,12 @@ type SealingPipeline {
   Workers: [Worker]!
 }
 
+type SectorStatus {
+  Number: Uint64!
+  State: String!
+  DealIDs: [Uint64!]!
+}
+
 type ScanProgress {
   Progress: Float!
   LastScan: Time
@@ -555,6 +561,9 @@ type RootQuery {
   """Get sealing pipeline state"""
   sealingpipeline: SealingPipeline!
 
+  """Get status of a particular sector"""
+  sectorStatus(sectorNumber: Uint64!): SectorStatus!
+
   """Get IPNI Provider configuration and state"""
   ipniProviderInfo: IpniProviderInfo!
 

react/src/Deals.css

@@ -54,10 +54,33 @@
     align-items: center;
 }
 
-.deals tr.show-actions td.message .message-content .message-text {
+.deals .message-content {
+    position: relative;
+}
+
+.deals .message-content .message-text {
     flex-grow: 1;
 }
 
+.deals .message-content .warning-msg {
+    position: absolute;
+    top: -1em;
+    left: -1em;
+    padding: 1em;
+    background-color: #fff;
+    box-shadow: 0em 0em 1em #ddd;
+    border-radius: 0.5em;
+    z-index: 10;
+    display: none;
+}
+.deals .message-content .warning-msg.showing {
+    display: flex;
+}
+
+.deals .message-content .warning {
+    margin-right: 0.5em;
+}
+
 .deals tr.show-actions td.message .message-content .message-text .transfer-rate {
     padding-left: 1em;
     color: #999999;

react/src/Deals.js

@@ -1,8 +1,7 @@
-/* global BigInt */
 import {useQuery} from "@apollo/react-hooks";
 import {
     DealsCountQuery,
-    DealsListQuery, LegacyDealsCountQuery,
+    DealsListQuery, LegacyDealsCountQuery, SectorStatusQuery,
 } from "./gql";
 import moment from "moment";
 import {DebounceInput} from 'react-debounce-input';
@@ -17,6 +16,7 @@ import {DealsPerPage} from "./deals-per-page";
 import columnsGapImg from './bootstrap-icons/icons/columns-gap.svg'
 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 {humanTransferRate} from "./DealTransfers";
@@ -290,9 +290,11 @@ function DealRow(props) {
         }
     }
 
-    const showActions = (IsPaused(deal) || IsTransferring(deal) || IsOfflineWaitingForData(deal))
+    // Show deal action buttons if the deal can be retried / cancelled
+    var showActions = (IsPaused(deal) || IsTransferring(deal) || IsOfflineWaitingForData(deal))
+    const hasAnnounceError = deal.Err && deal.Checkpoint === 'AddedPiece' && (deal.Sector || {}).ID
     var rowClassName = ''
-    if (showActions) {
+    if (showActions || hasAnnounceError) {
         rowClassName = 'show-actions'
     }
 
@@ -310,17 +312,81 @@ function DealRow(props) {
             </td>
             <td className="message">
                 <div className="message-content">
-                    <span className="message-text">
-                        {deal.Message}
-                        <TransferRate deal={deal} />
-                    </span>
-                    {showActions ? <DealActions deal={props.deal} refetchQueries={[DealsListQuery]} compact={true} /> : null}
+                    { hasAnnounceError ? (
+                        <DealRowAnnounceError deal={deal} />
+                    ) : (
+                        <>
+                            <span className="message-text">
+                                {deal.Message}
+                                <TransferRate deal={deal} />
+                            </span>
+                            {showActions ? <DealActions deal={props.deal} refetchQueries={[DealsListQuery]} compact={true} /> : null}
+                        </>
+                    ) }
                 </div>
             </td>
         </tr>
     )
 }
 
+// DealRowAnnounceError shows a row with the sealing status, and a warning icon.
+// When the user hovers on the warning icon it shows a box with the warning and
+// action buttons to retry / pause
+function DealRowAnnounceError({deal}) {
+    const warningMsgElId = "message-"+deal.ID
+    const warningImgElId = "img-warn-"+deal.ID
+    const messageBoxId = "message-box-"+deal.ID
+    useEffect(() => {
+        const warningImg = document.getElementById(warningImgElId)
+        const warningMsg = document.getElementById(warningMsgElId)
+        const messageBox = document.getElementById(messageBoxId)
+        if(!warningImg || !warningMsg || !messageBox) {
+            return
+        }
+
+        warningImg.addEventListener("mouseover", () => {
+            warningMsg.classList.add('showing')
+        })
+        messageBox.addEventListener("mouseleave", () => {
+            warningMsg.classList.remove('showing')
+        })
+
+        return function () {
+            warningImg.removeEventListener("mouseover")
+            messageBox.removeEventListener("mouseleave")
+        }
+    })
+
+    const {data, loading, error} = useQuery(SectorStatusQuery, {
+        pollInterval: 10000,
+        fetchPolicy: 'network-only',
+        variables: {
+            sectorNumber: deal.Sector.ID
+        }
+    })
+
+    if (error) {
+        return <span>Sealer: {error.message}</span>
+    }
+    if (loading) {
+        return null
+    }
+
+    return <div id={messageBoxId}>
+        <span>
+            <img id={warningImgElId} className="warning" src={warningImg} />
+            <span>Sealer: {data.sectorStatus.State}</span>
+        </span>
+        <span id={warningMsgElId} className="warning-msg">
+            <span className="message-text">
+                <img className="warning" src={warningImg} />
+                <span id={warningMsgElId}>{deal.Message}</span>
+            </span>
+            <DealActions deal={deal} refetchQueries={[DealsListQuery]} compact={true} />
+        </span>
+    </div>
+}
+
 function TransferRate({deal}) {
     if (!IsTransferring(deal) || IsPaused(deal) || deal.Transferred === 0 || deal.IsTransferStalled) {
         return null

react/src/gql.js

@@ -637,6 +637,16 @@ const SealingPipelineQuery = gql`
     }
 `;
 
+const SectorStatusQuery = gql`
+    query AppSectorStatusQuery($sectorNumber: Uint64!) {
+        sectorStatus(sectorNumber: $sectorNumber) {
+            Number
+            State
+            DealIDs
+        }
+    }
+`;
+
 const FundsQuery = gql`
     query AppFundsQuery {
         funds {
@@ -833,6 +843,7 @@ export {
     TransferStatsQuery,
     MpoolQuery,
     SealingPipelineQuery,
+    SectorStatusQuery,
     Libp2pAddrInfoQuery,
     StorageAskQuery,
     PublishPendingDealsMutation,