diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx index d90bf65364..7f54d227ab 100644 --- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx +++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx @@ -170,7 +170,7 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => { > -
+
{ diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx index 846abd4f4b..251c5cfb49 100644 --- a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx +++ b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx @@ -118,7 +118,7 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => { > -
+
- + @@ -91,15 +90,35 @@ export default function QRepStatusTable({ ); const [searchQuery, setSearchQuery] = useState(''); - const displayedPartitions = useMemo( - () => - visiblePartitions.filter((partition: QRepPartitionStatus) => { + const [sortField, setSortField] = useState< + 'startTime' | 'endTime' | 'numRows' + >('startTime'); + const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('dsc'); + const displayedPartitions = useMemo(() => { + let currentPartitions = [...visiblePartitions]; + (currentPartitions = currentPartitions.filter( + (partition: QRepPartitionStatus) => { return partition.partitionId .toLowerCase() .includes(searchQuery.toLowerCase()); - }), - [visiblePartitions, searchQuery] - ); + } + )), + currentPartitions.sort((a, b) => { + const aValue = a[sortField]; + const bValue = b[sortField]; + if (aValue === null || bValue === null) { + return 0; + } + if (aValue < bValue) { + return sortDir === 'dsc' ? 1 : -1; + } else if (aValue > bValue) { + return sortDir === 'dsc' ? -1 : 1; + } else { + return 0; + } + }); + return currentPartitions; + }, [visiblePartitions, searchQuery, sortField, sortDir]); const handleNext = () => { if (currentPage < totalPages) setCurrentPage(currentPage + 1); @@ -109,12 +128,17 @@ export default function QRepStatusTable({ if (currentPage > 1) setCurrentPage(currentPage - 1); }; + const sortOptions = [ + { value: 'startTime', label: 'Start Time' }, + { value: 'endTime', label: 'End Time' }, + { value: 'numRows', label: 'Rows Synced' }, + ]; return ( Progress} toolbar={{ left: ( - <> +
+
+ opt.value === sortField) + ?.label, + }} + onChange={(val, _) => { + const sortVal = + (val?.value as 'startTime' | 'endTime' | 'numRows') ?? + 'startTime'; + setSortField(sortVal); + }} + defaultValue={{ value: 'startTime', label: 'Start Time' }} + /> +
+ +
- +
), right: (