From 09e4ae7c6079df680577522117c824c542c6320c Mon Sep 17 00:00:00 2001
From: LexLuthr <lexluthr@curiostorage.org>
Date: Tue, 21 Jan 2025 12:35:58 +0530
Subject: [PATCH] add pagination to storageGC page

---
 web/api/webrpc/storage_stats.go | 32 ++++++++++++++-----
 web/static/gc/gc-marks.mjs      | 55 +++++++++++++++++++++++++++------
 2 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/web/api/webrpc/storage_stats.go b/web/api/webrpc/storage_stats.go
index 6a43bed88..02865f9ae 100644
--- a/web/api/webrpc/storage_stats.go
+++ b/web/api/webrpc/storage_stats.go
@@ -8,6 +8,7 @@ import (
 
 	"github.com/samber/lo"
 	"github.com/snadrus/must"
+	"golang.org/x/xerrors"
 
 	"github.com/filecoin-project/go-address"
 
@@ -102,16 +103,27 @@ type StorageGCMarks struct {
 	Miner string
 }
 
-func (a *WebRPC) StorageGCMarks(ctx context.Context) ([]*StorageGCMarks, error) {
+func (a *WebRPC) StorageGCMarks(ctx context.Context, limit int, offset int) ([]*StorageGCMarks, int, error) {
 	var marks []*StorageGCMarks
-	err := a.deps.DB.Select(ctx, &marks, `
+
+	var total int
+
+	// Get the total count of rows
+	err := a.deps.DB.Select(ctx, &total, `SELECT COUNT(*) FROM storage_removal_marks`)
+	if err != nil {
+		return nil, 0, xerrors.Errorf("querying storage removal marks: %w", err)
+	}
+
+	err = a.deps.DB.Select(ctx, &marks, `
 		SELECT m.sp_id, m.sector_num, m.sector_filetype, m.storage_id, m.created_at, m.approved, m.approved_at, sl.can_seal, sl.can_store, sl.urls
 			FROM storage_removal_marks m LEFT JOIN storage_path sl ON m.storage_id = sl.storage_id
-			ORDER BY created_at DESC`)
+			ORDER BY created_at DESC LIMIT $1 OFFSET $2`, limit, offset)
 	if err != nil {
-		return nil, err
+		return nil, 0, err
 	}
 
+	minerMap := make(map[int64]address.Address)
+
 	for i, m := range marks {
 		marks[i].TypeName = storiface.SectorFileType(m.FileType).String()
 
@@ -129,14 +141,18 @@ func (a *WebRPC) StorageGCMarks(ctx context.Context) ([]*StorageGCMarks, error)
 			return must.One(url.Parse(u)).Host
 		})
 		marks[i].Urls = strings.Join(us, ", ")
-		maddr, err := address.NewIDAddress(uint64(marks[i].Actor))
-		if err != nil {
-			return nil, err
+		maddr, ok := minerMap[marks[i].Actor]
+		if !ok {
+			maddr, err := address.NewIDAddress(uint64(marks[i].Actor))
+			if err != nil {
+				return nil, 0, err
+			}
+			minerMap[marks[i].Actor] = maddr
 		}
 		marks[i].Miner = maddr.String()
 	}
 
-	return marks, nil
+	return marks, total, nil
 }
 
 func (a *WebRPC) StorageGCApprove(ctx context.Context, actor int64, sectorNum int64, fileType int64, storageID string) error {
diff --git a/web/static/gc/gc-marks.mjs b/web/static/gc/gc-marks.mjs
index 3fe9d3827..5681d5aaa 100644
--- a/web/static/gc/gc-marks.mjs
+++ b/web/static/gc/gc-marks.mjs
@@ -3,25 +3,62 @@ import RPCCall from '/lib/jsonrpc.mjs';
 
 class StorageGCStats extends LitElement {
     static properties = {
-        data: { type: Array }
+        data: { type: Array },
+        pageSize: { type: Number }, // Make pageSize a reactive property
+        currentPage: { type: Number },
+        totalPages: { type: Number },
+        totalCount: { type: Number },
     };
 
     constructor() {
         super();
         this.data = [];
-        this.loadData();
+        this.pageSize = 100; // Default value for page size
+        this.currentPage = 1;
+        this.totalPages = 0;
+        this.totalCount = 0;
+        this.loadData(); // Load the initial data for page 1
     }
 
-    async loadData() {
-        this.data = await RPCCall('StorageGCMarks');
+    async loadData(page = 1) {
+        const offset = (page - 1) * this.pageSize;
+
+        // Fetch data from the backend with limit and offset
+        const response = await RPCCall('StorageGCMarks', { limit: this.pageSize, offset });
+
+        this.data = response.marks; // Data for the current page
+        this.totalCount = response.total; // Total number of rows
+        this.totalPages = Math.ceil(this.totalCount / this.pageSize); // Calculate total pages
+        this.currentPage = page; // Update the current page
         this.requestUpdate();
     }
 
+
     async approveEntry(entry) {
         await RPCCall('StorageGCApprove', [entry.Actor, entry.SectorNum, entry.FileType, entry.StorageID]);
         this.loadData();
     }
 
+    renderPagination() {
+        return html`
+            <nav>
+                <ul class="pagination">
+                    <li class="page-item ${this.currentPage === 1 ? 'disabled' : ''}">
+                        <button class="page-link" @click="${() => this.loadData(this.currentPage - 1)}">Previous</button>
+                    </li>
+                    <li class="page-item disabled">
+                        <span class="page-link">
+                            Page ${this.currentPage} of ${this.totalPages}
+                        </span>
+                    </li>
+                    <li class="page-item ${this.currentPage === this.totalPages ? 'disabled' : ''}">
+                        <button class="page-link" @click="${() => this.loadData(this.currentPage + 1)}">Next</button>
+                    </li>
+                </ul>
+            </nav>
+        `;
+    }
+
     render() {
         return html`
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
@@ -55,15 +92,15 @@ class StorageGCStats extends LitElement {
                         <td>${entry.TypeName}</td>
                         <td>${entry.CreatedAt}</td>
                         <td>
-                            ${entry.Approved ?
-            "Yes " + entry.ApprovedAt :
-            html`No <button @click="${() => this.approveEntry(entry)}" class="btn btn-primary btn-sm">Approve</button>`
-        }
+                            ${entry.Approved
+                                    ? `Yes ${entry.ApprovedAt}`
+                                    : html`No <button @click="${() => this.approveEntry(entry)}" class="btn btn-primary btn-sm">Approve</button>`}
                         </td>
                     </tr>
-                    `)}
+                `)}
                 </tbody>
             </table>
+            ${this.renderPagination()}
         `;
     }
 }