feat: add info boxes on LID UI page

filecoin-project · Jun 12, 2023 · 4cca849 · 4cca849
1 parent f73cf3d
commit 4cca849
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/react/src/Info.css b/react/src/Info.css
@@ -7,8 +7,8 @@
     display: inline-block;
     cursor: pointer;
     font-size: 1em;
-    width: 1em;
-    height: 1em;
+    width: 16px;
+    height: 16px;
     vertical-align: top;
     margin-left: 0.5em;
     background: url("./bootstrap-icons/icons/info-circle.svg");

diff --git a/react/src/LID.js b/react/src/LID.js
@@ -115,23 +115,36 @@ function LIDContent() {
             <tr>
                 <td width="50%">
                   <div>
-                      <h3>Pieces</h3>
+                      <h3>Pieces<PiecesInfo/></h3>
 
                       <div className="storage-chart">
                           <CumulativeBarChart bars={piecesBars} />
                           <CumulativeBarLabels bars={piecesBars} />
                       </div>
 
                       <div className="flagged-pieces-link">
-                          <h3>Flagged Pieces</h3>
+                          <h3>
+                              Flagged Pieces
+                              <Info>
+                                  Flagged Pieces are pieces that have been flagged by the Piece Doctor because it was
+                                  not possible to index the piece data. This could be because there was no unsealed copy
+                                  of the piece data, or because the piece data was inaccessible or corrupted.
+                              </Info>
+                          </h3>
                           <p>
                               <b>{addCommas(d.FlaggedPieces)}</b> Flagged Pieces
                               <Link to={"/piece-doctor"} className="button">View Flagged Pieces</Link>
                           </p>
                       </div>
 
                       <div>
-                          <h3>Deal Sectors Copies</h3>
+                          <h3>
+                              Deal Sectors Copies
+                              <Info>
+                                  Deal Sectors Copies indicates how many sectors contain deals, and how many of those
+                                  sectors have an unsealed copy.
+                              </Info>
+                          </h3>
 
                           <div className="storage-chart">
                               <CumulativeBarChart bars={barsSuc} />
@@ -140,7 +153,12 @@ function LIDContent() {
                       </div>
 
                       <div>
-                          <h3>Sectors Proving State</h3>
+                          <h3>
+                              Sectors Proving State
+                              <Info>
+                                Sectors Proving State indicates how many sectors are in an Active state on chain
+                              </Info>
+                          </h3>
 
                           <div className="storage-chart">
                               <CumulativeBarChart bars={barsSps} />
@@ -155,6 +173,29 @@ function LIDContent() {
     </div>
 }
 
+function PiecesInfo() {
+    return <Info>
+        The pieces stored by the Local Index Directory are in one of these states:
+        <p>
+            <b>Indexed</b><br/>
+            The piece was successfully indexed
+        </p>
+        <p>
+            <b>Flagged (unsealed)</b><br/>
+            Flagged by the Piece Doctor because there was some problem
+            creating an index. This could be because it was not possible
+            to read the data from the sealing subsystem, the data is
+            corrupt, etc.
+        </p>
+        <p>
+            <b>Flagged (sealed only)</b><br/>
+            Flagged by the Piece Doctor because there is no unsealed copy
+            of the piece data. This usually means the unsealed copy of the
+            sector containing the piece was deleted.
+        </p>
+    </Info>
+}
+
 function BlockStatsSection() {
     return <div>
         <h3>Block Stats</h3>