1
0
forked from baron/baron-sso

perf(admin): full-stack performance optimization for all list tables

- Implemented server-side search, infinite scrolling, and list virtualization for Tenants, Users, and Audit Logs.
- Backend: Enhanced Repository, Service, and Handler layers to support 'search' and 'cursor' parameters.
- Frontend: Integrated @tanstack/react-virtual and useInfiniteQuery for high-performance rendering.
- Quality: Updated all unit tests and E2E tests to match the new asynchronous server-side search architecture.
- i18n: Synced all translation keys and cleaned up unused resources.
This commit is contained in:
2026-06-04 16:06:30 +09:00
parent 6d3f128282
commit b2f155e35b
26 changed files with 1103 additions and 440 deletions

View File

@@ -720,6 +720,11 @@ function TenantListPage() {
className="h-9 pl-9"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
query.refetch();
}
}}
/>
</div>
@@ -1529,8 +1534,8 @@ const TenantHierarchyView: React.FC<{
const parentRef = React.useRef<HTMLDivElement>(null);
const { subTree } = React.useMemo(
() => buildTenantFullTree(tenants, scopeTenantId || undefined),
[scopeTenantId, tenants],
() => buildTenantFullTree(tenants, scopeTenantId || undefined, !!search),
[scopeTenantId, tenants, search],
);
// Initial expanded state: everything open
@@ -1582,7 +1587,7 @@ const TenantHierarchyView: React.FC<{
const flattenedRows = React.useMemo(() => {
if (viewMode === "table") {
return sortItems(
getTenantViewRows(tenants, "table", scopeTenantId),
getTenantViewRows(tenants, "table", scopeTenantId, !!search),
sortConfig,
tenantSortResolvers,
);
@@ -1615,6 +1620,7 @@ const TenantHierarchyView: React.FC<{
tenantSortResolvers,
tenants,
viewMode,
search,
]);
const rowVirtualizer = useVirtualizer({

View File

@@ -68,8 +68,13 @@ export function getTenantViewRows(
tenants: TenantSummary[],
viewMode: TenantViewMode,
scopeTenantId = "",
isSearchActive = false,
): TenantViewRow[] {
const { subTree } = buildTenantFullTree(tenants, scopeTenantId || undefined);
const { subTree } = buildTenantFullTree(
tenants,
scopeTenantId || undefined,
isSearchActive,
);
const treeRows: TenantViewRow[] = [];
collectTenantTreeRows(subTree, 0, treeRows);