refactoring and better qrep page

PeerDB-io · Nov 6, 2023 · fabf7ea · fabf7ea
1 parent f02e916
commit fabf7ea
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 35 deletions.
diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -103,26 +103,15 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
       }}
       header={
         <TableRow>
-          <TableCell as='th'>
-            <Label as='label' style={{ fontWeight: 'bold' }}>
-              Batch ID
-            </Label>
-          </TableCell>
-          <TableCell as='th'>
-            <Label as='label' style={{ fontWeight: 'bold' }}>
-              Start Time
-            </Label>
-          </TableCell>
-          <TableCell as='th'>
-            <Label as='label' style={{ fontWeight: 'bold' }}>
-              End Time (Duration)
-            </Label>
-          </TableCell>
-          <TableCell as='th'>
-            <Label as='label' style={{ fontWeight: 'bold' }}>
-              Num Rows Synced
-            </Label>
-          </TableCell>
+          {['Batch ID', 'Start Time', 'End Time (Duration)', 'Rows Synced'].map(
+            (heading, index) => (
+              <TableCell as='th' key={index}>
+                <Label as='label' style={{ fontWeight: 'bold' }}>
+                  {heading}
+                </Label>
+              </TableCell>
+            )
+          )}
         </TableRow>
       }
     >

diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import SearchBar from '@/components/Search';
+import TimeLabel from '@/components/TimeComponent';
 import { Button } from '@/lib/Button';
-import { Checkbox } from '@/lib/Checkbox';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
@@ -23,7 +23,7 @@ function TimeOrProgressBar({ time }: { time: Date | null }) {
   if (time === null) {
     return <ProgressCircle variant='determinate_progress_circle' />;
   } else {
-    return <Label>{moment(time)?.format('YYYY-MM-DD HH:mm:ss')}</Label>;
+    return <TimeLabel timeVal={moment(time)?.format('YYYY-MM-DD HH:mm:ss')} />;
   }
 }
 
@@ -44,9 +44,6 @@ function RowPerPartition({
 
   return (
     <TableRow key={partitionId}>
-      <TableCell variant='button'>
-        <Checkbox />
-      </TableCell>
       <TableCell>
         <Label>{partitionId}</Label>
       </TableCell>
@@ -57,7 +54,7 @@ function RowPerPartition({
         <Label>{duration}</Label>
       </TableCell>
       <TableCell>
-        <Label>{moment(startTime)?.format('YYYY-MM-DD HH:mm:ss')}</Label>
+        <TimeLabel timeVal={moment(startTime)?.format('YYYY-MM-DD HH:mm:ss')} />
       </TableCell>
       <TableCell>
         <Label>
@@ -154,15 +151,20 @@ export default function QRepStatusTable({
       }}
       header={
         <TableRow>
-          <TableCell as='th' variant='button'>
-            <Checkbox variant='mixed' defaultChecked />
-          </TableCell>
-          <TableCell as='th'>Partition UUID</TableCell>
-          <TableCell as='th'>Run UUID</TableCell>
-          <TableCell as='th'>Duration</TableCell>
-          <TableCell as='th'>Start Time</TableCell>
-          <TableCell as='th'>End Time</TableCell>
-          <TableCell as='th'>Num Rows Synced</TableCell>
+          {[
+            'Partition UUID',
+            'Run UUID',
+            'Duration',
+            'Start Time',
+            'End Time',
+            'Num Rows Synced',
+          ].map((heading, index) => (
+            <TableCell as='th' key={index}>
+              <Label as='label' style={{ fontWeight: 'bold' }}>
+                {heading}
+              </Label>
+            </TableCell>
+          ))}
         </TableRow>
       }
     >