-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add pagination to storageGC page (#376)
* add pagination to storageGC page * add search * fix row count
- Loading branch information
Showing
4 changed files
with
184 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,29 +3,117 @@ import RPCCall from '/lib/jsonrpc.mjs'; | |
|
|
||
| class StorageGCStats extends LitElement { | ||
| static properties = { | ||
| data: { type: Array } | ||
| data: { type: Array }, | ||
| pageSize: { type: Number }, | ||
| currentPage: { type: Number }, | ||
| totalPages: { type: Number }, | ||
| totalCount: { type: Number }, | ||
| miner: { type: String }, | ||
| sectorNum: { type: Number }, | ||
| }; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.data = []; | ||
| this.loadData(); | ||
| this.pageSize = 50; // Default number of rows per page | ||
| this.currentPage = 1; | ||
| this.totalPages = 0; | ||
| this.totalCount = 0; | ||
| this.miner = null; // Default: No Miner filter | ||
| this.sectorNum = null; // Default: No Sector Number filter | ||
| this.loadData(); // Load 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, offset, and optional filters | ||
| const response = await RPCCall('StorageGCMarks', [ | ||
| this.miner, // Include Miner filter if set | ||
| this.sectorNum, // Include Sector Number filter if set | ||
| this.pageSize, | ||
| offset, | ||
| ]); | ||
|
|
||
| this.data = response.Marks || []; // Data for the current page | ||
| this.totalCount = response.Total || 0; // Total rows matching the filters | ||
| 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(this.currentPage); // Reload current page | ||
| } | ||
|
|
||
| updateFilters(event) { | ||
| const { name, value } = event.target; | ||
| if (name === 'miner') { | ||
| this.miner = value ? value.trim() : null; // Trim spaces for miner ID | ||
| } else if (name === 'sectorNum') { | ||
| this.sectorNum = value ? Number(value) : null; // Convert sectorNum to a number | ||
| } | ||
| } | ||
|
|
||
| applyFilters() { | ||
| this.currentPage = 1; // Reset to page 1 when filters are applied | ||
| this.loadData(); | ||
| } | ||
|
|
||
| renderFilters() { | ||
| return html` | ||
| <div class="filter-container mb-3"> | ||
| <label for="miner">Miner:</label> | ||
| <input | ||
| id="miner" | ||
| name="miner" | ||
| type="text" | ||
| @input="${this.updateFilters}" | ||
| placeholder="Enter Miner ID" | ||
| > | ||
| <label for="sectorNum">Sector Number:</label> | ||
| <input | ||
| id="sectorNum" | ||
| name="sectorNum" | ||
| type="number" | ||
| @input="${this.updateFilters}" | ||
| placeholder="Enter Sector Number" | ||
| > | ||
| <p></p> | ||
| <button @click="${this.applyFilters}" class="btn btn-primary">Apply Filters</button> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="/ux/main.css" onload="document.body.style.visibility = 'initial'"> | ||
| <p></p> | ||
| ${this.renderFilters()} | ||
| <p></p> | ||
| <table class="table table-dark"> | ||
| <thead> | ||
| <tr> | ||
|
|
@@ -44,26 +132,22 @@ class StorageGCStats extends LitElement { | |
| <td>${entry.Miner}</td> | ||
| <td>${entry.SectorNum}</td> | ||
| <td> | ||
| <div> | ||
| ${entry.StorageID} | ||
| </div> | ||
| <div> | ||
| ${entry.Urls} | ||
| </div> | ||
| <div>${entry.StorageID}</div> | ||
| <div>${entry.Urls}</div> | ||
| </td> | ||
| <td>${entry.PathType}</td> | ||
| <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()} | ||
| `; | ||
| } | ||
| } | ||
|
|
@@ -76,7 +160,7 @@ class ApproveAllButton extends LitElement { | |
|
|
||
| constructor() { | ||
| super(); | ||
| this.unapprove = false; // default is false, meaning "Approve All" | ||
| this.unapprove = false; // Default is "Approve All" | ||
| } | ||
|
|
||
| async handleClick() { | ||
|
|
@@ -98,4 +182,4 @@ class ApproveAllButton extends LitElement { | |
| `; | ||
| } | ||
| } | ||
| customElements.define('approve-all-button', ApproveAllButton); | ||
| customElements.define('approve-all-button', ApproveAllButton); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters