feat(PaginatedStorage): add grouping #1364
Conversation
| const chunkOffset = id * limit; | ||
| const remainingLenght = totalLength - chunkOffset; | ||
| const calculatedChunkLength = remainingLenght < limit ? remainingLenght : limit; |
There was a problem hiding this comment.
This allows not to show 50 (limit) loading rows for the last chunk, when we know how many entities are left. Also it allows to set some predefined initial length to table
| @@ -21,7 +21,7 @@ | |||
| } | |||
|
|
|||
| &__vdisks-item { | |||
| flex-basis: 5px; | |||
| flex-basis: 3px; | |||
There was a problem hiding this comment.
Allow PDisk to have more compact VDisks on it. It's needed to make StorageNodes to have the same row height, allowing switching from variable RDT rendering to uniform
| @@ -9,6 +9,7 @@ | |||
| align-items: flex-end; | |||
|
|
|||
| width: max-content; | |||
| height: 40px; | |||
There was a problem hiding this comment.
Make PDisk row to have the same height. It's needed to make StorageNodes to have the same row height, allowing switching from variable RDT rendering to uniform
| <StorageGroupsControls | ||
| withTypeSelector | ||
| entitiesCountCurrent={storageGroups.length} | ||
| entitiesCountTotal={groupsTotalCount} | ||
| entitiesLoading={isLoading} | ||
| columnsToSelect={storageGroupsColumnsToSelect} | ||
| handleSelectedColumnsUpdate={setStorageGroupsSelectedColumns} | ||
| /> | ||
| ) : null} | ||
| {isNodes ? ( | ||
| <StorageNodesControls | ||
| withTypeSelector | ||
| entitiesCountCurrent={storageNodes.length} | ||
| entitiesCountTotal={nodesTotalCount} | ||
| entitiesLoading={isLoading} | ||
| columnsToSelect={storageNodesColumnsToSelect} | ||
| handleSelectedColumnsUpdate={setStorageNodesSelectedColumns} | ||
| /> | ||
| ) : null} |
There was a problem hiding this comment.
Added different controls to the same component. As the next step Storage could be split into two components like PaginatedStorage
| const getConcurrentId = (limit?: number, offset?: number) => { | ||
| return `getStorageGroups|offset${offset}|limit${limit}`; | ||
| }; |
There was a problem hiding this comment.
Requests are managed by PaginatedTable and rtk-query, there is no need to manage it additionally by axios, moreover - in case with grouping it creates a bug
|
|
||
| const b = cn('usage-filter'); | ||
|
|
||
| export const UsageFilter = (props: UsageFilterProps) => { |
There was a problem hiding this comment.
UsageFilter has been disabled in our UI for months. The problem it solved now is solved by grouping, it can be deleted
artemmufazalov
force-pushed
the
1302-paginated-storage-grouping
branch
2 times, most recently
from
a34479b
to
a16b0be
Compare
artemmufazalov
force-pushed
the
1302-paginated-storage-grouping
branch
from
a16b0be
to
451e279
Compare
Closes: #1365
Stand: https://nda.ya.ru/t/_9dz2Iw678WGs4
To test grouping, enable
Use paginated tablessetting in experimentsCI Results
Test Status: ✅ PASSED
📊 Full Report
Bundle Size: 🔺
Current: 79.12 MB | Main: 79.10 MB
Diff: +0.02 MB (0.02%)
ℹ️ CI Information