sort for qrep, use minwidth instead

PeerDB-io · Dec 11, 2023 · e9590e3 · e9590e3
1 parent 52f9439
commit e9590e3
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 13 deletions.
diff --git 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) => {
               >
                 <Icon name='refresh' />
               </Button>
-              <div style={{ width: '10em' }}>
+              <div style={{ minWidth: '10em' }}>
                 <ReactSelect
                   options={sortOptions}
                   onChange={(val, _) => {

diff --git 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) => {
             >
               <Icon name='refresh' />
             </Button>
-            <div style={{ width: '10em' }}>
+            <div style={{ minWidth: '10em' }}>
               <ReactSelect
                 options={sortOptions}
                 value={{

diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -9,6 +9,7 @@ import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
 import { useMemo, useState } from 'react';
+import ReactSelect from 'react-select';
 
 export type QRepPartitionStatus = {
   partitionId: string;
@@ -61,9 +62,7 @@ function RowPerPartition({
         <TimeLabel timeVal={moment(startTime)?.format('YYYY-MM-DD HH:mm:ss')} />
       </TableCell>
       <TableCell>
-        <Label>
-          <TimeOrProgressBar time={endTime} />
-        </Label>
+        <TimeOrProgressBar time={endTime} />
       </TableCell>
       <TableCell>
         <Label>{numRows}</Label>
@@ -91,15 +90,35 @@ export default function QRepStatusTable({
   );
 
   const [searchQuery, setSearchQuery] = useState<string>('');
-  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 (
     <Table
       title={<Label>Progress</Label>}
       toolbar={{
         left: (
-          <>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
             <Button
               variant='normalBorderless'
               onClick={handlePrevious}
@@ -138,12 +162,45 @@ export default function QRepStatusTable({
             <Button variant='normalBorderless' disabled>
               <Icon name='download' />
             </Button>
+            <div style={{ minWidth: '10em' }}>
+              <ReactSelect
+                options={sortOptions}
+                value={{
+                  value: sortField,
+                  label: sortOptions.find((opt) => opt.value === sortField)
+                    ?.label,
+                }}
+                onChange={(val, _) => {
+                  const sortVal =
+                    (val?.value as 'startTime' | 'endTime' | 'numRows') ??
+                    'startTime';
+                  setSortField(sortVal);
+                }}
+                defaultValue={{ value: 'startTime', label: 'Start Time' }}
+              />
+            </div>
+            <button
+              className='IconButton'
+              onClick={() => setSortDir('asc')}
+              aria-label='sort up'
+              style={{ color: sortDir == 'asc' ? 'green' : 'gray' }}
+            >
+              <Icon name='arrow_upward' />
+            </button>
+            <button
+              className='IconButton'
+              onClick={() => setSortDir('dsc')}
+              aria-label='sort down'
+              style={{ color: sortDir == 'dsc' ? 'green' : 'gray' }}
+            >
+              <Icon name='arrow_downward' />
+            </button>
             <div>
               <Label>
                 {currentPage} of {totalPages}
               </Label>
             </div>
-          </>
+          </div>
         ),
         right: (
           <SearchField