Some UI cleanup

ui/app/dto/MirrorsDTO.ts

@@ -21,3 +21,10 @@ export type TableMapRow = {
   exclude: string[];
   selected: boolean;
 };
+
+export type SyncStatusRow = {
+  batchId: bigint;
+  startTime: Date;
+  endTime: Date | null;
+  numRows: number;
+};

ui/app/mirrors/edit/[mirrorId]/cdc.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import TimeLabel from '@/components/TimeComponent';
 import {
   CDCMirrorStatus,
@@ -272,13 +273,6 @@ const Trigger = styled(
   }
 `;
 
-type SyncStatusRow = {
-  batchId: number;
-  startTime: Date;
-  endTime: Date | null;
-  numRows: number;
-};
-
 type CDCMirrorStatusProps = {
   cdc: CDCMirrorStatus;
   rows: SyncStatusRow[];

ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import MirrorInfo from '@/components/MirrorInfo';
 import PeerButton from '@/components/PeerComponent';
 import TimeLabel from '@/components/TimeComponent';
@@ -11,13 +12,6 @@ import moment from 'moment';
 import MirrorValues from './configValues';
 import TablePairs from './tablePairs';
 
-type SyncStatusRow = {
-  batchId: number;
-  startTime: Date;
-  endTime: Date | null;
-  numRows: number;
-};
-
 type props = {
   syncs: SyncStatusRow[];
   mirrorConfig: FlowConnectionConfigs | undefined;

ui/app/mirrors/edit/[mirrorId]/cdcGraph.tsx

@@ -1,18 +1,12 @@
 'use client';
+import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import { formatGraphLabel, timeOptions } from '@/app/utils/graph';
 import { Label } from '@/lib/Label';
 import { BarChart } from '@tremor/react';
 import { useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
 import aggregateCountsByInterval from './aggregatedCountsByInterval';
 
-type SyncStatusRow = {
-  batchId: number;
-  startTime: Date;
-  endTime: Date | null;
-  numRows: number;
-};
-
 function CdcGraph({ syncs }: { syncs: SyncStatusRow[] }) {
   let [aggregateType, setAggregateType] = useState('hour');
   const initialCount: [string, number][] = [];

ui/app/mirrors/edit/[mirrorId]/page.tsx

@@ -65,7 +65,7 @@ export default async function EditMirror({
   }
 
   const rows = syncs.map((sync) => ({
-    batchId: sync.id,
+    batchId: sync.batch_id,
     startTime: sync.start_time,
     endTime: sync.end_time,
     numRows: sync.rows_in_batch,

ui/app/mirrors/edit/[mirrorId]/syncStatus.tsx

@@ -32,7 +32,7 @@ export default async function SyncStatus({
   });
 
   const rows = syncs.map((sync) => ({
-    batchId: sync.id,
+    batchId: sync.batch_id,
     startTime: sync.start_time,
     endTime: sync.end_time,
     numRows: sync.rows_in_batch,

ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import TimeLabel from '@/components/TimeComponent';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
@@ -10,12 +11,6 @@ import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
 import { useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
-type SyncStatusRow = {
-  batchId: number;
-  startTime: Date;
-  endTime: Date | null;
-  numRows: number;
-};
 
 type SyncStatusTableProps = {
   rows: SyncStatusRow[];

ui/app/mirrors/status/qrep/[mirrorId]/qrepConfigViewer.tsx

@@ -2,6 +2,7 @@ import prisma from '@/app/utils/prisma';
 import { QRepConfig } from '@/grpc_generated/flow';
 import { Badge } from '@/lib/Badge';
 import { Icon } from '@/lib/Icon';
+import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 
 export const dynamic = 'force-dynamic';
@@ -27,9 +28,9 @@ export default async function QRepConfigViewer({
 
   if (!configBuffer?.config_proto) {
     return (
-      <div>
+      <div className='m-4' style={{ display: 'flex', alignItems: 'center' }}>
         <ProgressCircle variant='determinate_progress_circle' />
-        Waiting for mirror to start...
+        <Label>Waiting for mirror to start...</Label>
       </div>
     );
   }