update local index directory ui (#1477)

* feat: update local index directory ui * comment out wrench as docker doesnt build * rearrange menu * refactor: remove sectors list --------- Co-authored-by: Anton Evangelatov <anton.evangelatov@gmail.com>
filecoin-project · Jun 5, 2023 · a614b3d · a614b3d
1 parent 5e511a8
commit a614b3d
Show file tree

Hide file tree

Showing 16 changed files with 406 additions and 395 deletions.
diff --git a/react/src/App.js b/react/src/App.js
@@ -17,9 +17,8 @@ import {Epoch} from "./Epoch";
 import {LegacyDealDetail} from "./LegacyDealDetail"
 import {SettingsPage} from "./Settings";
 import {Banner} from "./Banner";
-import {PieceDirectoryDetail, PieceDirectoryPage} from "./PieceDirectory";
 import {ProposalLogsPage} from "./ProposalLogs";
-import {InspectPage, InspectPiecePage} from "./Inspect";
+import {PieceDoctorPage, InspectPiecePage, LIDPage} from "./LID";
 import {RetrievalLogsPage} from "./RetrievalLogs";
 import {RetrievalLogDetail} from "./RetrievalLogDetail";
 
@@ -46,20 +45,20 @@ function App(props) {
                                         <Route path="/retrieval-logs/from/:cursor/page/:pageNum" element={<RetrievalLogsPage />} />
                                         <Route path="/retrieval-logs/:peerID/:transferID" element={<RetrievalLogDetail />} />
                                         <Route path="/storage-space" element={<StorageSpacePage />} />
+                                        <Route path="/lid" element={<LIDPage />} />
                                         <Route path="/sealing-pipeline" element={<SealingPipelinePage />} />
                                         <Route path="/funds" element={<FundsPage />} />
                                         <Route path="/funds/from/:cursor/page/:pageNum" element={<FundsPage />} />
                                         <Route path="/deal-publish" element={<DealPublishPage />} />
                                         <Route path="/deal-transfers" element={<DealTransfersPage />} />
                                         <Route path="/mpool" element={<MpoolPage />} />
                                         <Route path="/settings" element={<SettingsPage />} />
-                                        <Route path="/piece-directory" element={<PieceDirectoryPage />} />
                                         <Route path="/deals/:dealID" element={<DealDetail />} />
                                         <Route path="/legacy-deals/:dealID" element={<LegacyDealDetail />} />
-                                        <Route path="/inspect" element={<InspectPage />} />
-                                        <Route path="/inspect/piece/:pieceCID" element={<InspectPiecePage />} />
-                                        <Route path="/inspect/from/:cursor/page/:pageNum" element={<InspectPage />} />
-                                        <Route path="/inspect/:query" element={<InspectPage />} />
+                                        <Route path="/piece-doctor" element={<PieceDoctorPage />} />
+                                        <Route path="/piece-doctor/piece/:pieceCID" element={<InspectPiecePage />} />
+                                        <Route path="/piece-doctor/from/:cursor/page/:pageNum" element={<PieceDoctorPage />} />
+                                        <Route path="/piece-doctor/:query" element={<PieceDoctorPage />} />
                                         <Route path="/" element={<StorageDealsPage />} />
                                     </Routes>
                                 </div>

diff --git a/react/src/CumulativeBarChart.js b/react/src/CumulativeBarChart.js
@@ -1,5 +1,5 @@
 /* global BigInt */
-import {humanFIL, humanFileSize} from "./util";
+import {addCommas, humanFIL, humanFileSize, isInteger} from "./util";
 import React from "react";
 import './CumulativeBarChart.css'
 
@@ -72,7 +72,11 @@ function amountToString(unit, amount) {
         case 'attoFIL':
             return humanFIL(amount)
         default:
-            return amount.toString()
+            const amtStr = amount.toString()
+            if (isInteger(amtStr)) {
+                return addCommas(amtStr)
+            }
+            return amtStr
     }
 }
 
diff --git a/react/src/DealDetail.js b/react/src/DealDetail.js
@@ -146,7 +146,7 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Deal Data Root CID</th>
-                    <td><Link to={'/inspect/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.DealDataRoot}>{deal.DealDataRoot}</Link></td>
                 </tr>
                 <tr>
                     <th>Verified</th>
@@ -162,7 +162,7 @@ export function DealDetail(props) {
                 </tr>
                 <tr>
                     <th>Piece CID</th>
-                    <td><Link to={'/inspect/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
+                    <td><Link to={'/piece-doctor/'+deal.PieceCid}>{deal.PieceCid}</Link></td>
                 </tr>
                 <tr>
                     <th>Piece Size</th>

diff --git a/react/src/DealTransfers.js b/react/src/DealTransfers.js
@@ -5,7 +5,6 @@ import {TransfersQuery, TransferStatsQuery} from "./gql";
 import moment from "moment"
 import {PageContainer} from "./Components";
 import {Link} from "react-router-dom";
-import {toFixed} from "./util";
 import arrowLeftRightImg from './bootstrap-icons/icons/arrow-left-right.svg'
 import './DealTransfers.css'
 

diff --git a/react/src/LID.css b/react/src/LID.css
@@ -0,0 +1,45 @@
+.block-stats th {
+    text-align: left;
+}
+
+.block-stats td, .block-stats th {
+    padding: 0.5em 1em;
+}
+
+.lid-graphs {
+    margin-top: 2em;
+    width: 100%;
+}
+
+.lid-graphs td {
+    vertical-align: top;
+}
+
+.storage-chart {
+    padding: 1em;
+}
+
+.storage-chart .indexed, .storage-chart .unsealed, .storage-chart .active {
+    background-color: rgb(44, 123, 229);
+}
+
+.storage-chart .flagged {
+    background-color: rgb(166, 197, 247);
+}
+
+.storage-chart .sealed, .storage-chart .inactive {
+    background-color: #b3b3b3;
+}
+
+.storage-fields td {
+    padding: 0.5em 1em;
+    font-weight: normal;
+}
+
+.sectors-list-link p, .flagged-pieces-link p {
+    padding: 1em;
+}
+
+.sectors-list-link a, .flagged-pieces-link a {
+    margin-left: 1em;
+}