fixes and improvements

flow/cmd/mirror_status.go

@@ -125,9 +125,7 @@ func (h *FlowRequestHandler) cloneTableSummary(
 	FROM 
 		peerdb_stats.qrep_partitions
 	WHERE 
-		flow_name = $1
-	GROUP BY 
-		flow_name;
+		flow_name = $1;
 	`
 
 	var startTime pgtype.Timestamp
@@ -160,7 +158,7 @@ func (h *FlowRequestHandler) cloneTableSummary(
 	}
 
 	if numRowsSynced.Valid {
-		res.NumRowsSynced = int64(numRowsSynced.Int64)
+		res.NumRowsSynced = numRowsSynced.Int64
 	}
 
 	if avgTimePerPartitionMs.Valid {
@@ -192,8 +190,8 @@ func (h *FlowRequestHandler) getPartitionStatuses(
 	ctx context.Context,
 	flowJobName string,
 ) ([]*protos.PartitionStatus, error) {
-	q := "SELECT start_time, end_time, rows_in_partition FROM peerdb_stats.qrep_partitions WHERE flow_name = $1"
-	rows, err := h.pool.Query(ctx, q, flowJobName)
+	q := "SELECT start_time, end_time, rows_in_partition FROM peerdb_stats.qrep_partitions WHERE flow_name ILIKE $1"
+	rows, err := h.pool.Query(ctx, q, "clone_"+flowJobName+"_%")
 	if err != nil {
 		slog.Error(fmt.Sprintf("unable to query qrep partition - %s: %s", flowJobName, err.Error()))
 		return nil, fmt.Errorf("unable to query qrep partition - %s: %w", flowJobName, err)

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

@@ -10,13 +10,15 @@ import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressBar } from '@/lib/ProgressBar';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
 import moment, { Duration, Moment } from 'moment';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
+import { useLocalStorage } from 'usehooks-ts';
 import CdcDetails from './cdcDetails';
 
 class TableCloneSummary {
@@ -68,8 +70,11 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('dsc');
   const displayedRows = useMemo(() => {
-    const shownRows = allRows.filter((row: any) =>
-      row.tableName.toLowerCase().includes(searchQuery.toLowerCase())
+    const shownRows = allRows.filter(
+      (row: TableCloneSummary) =>
+        row.cloneTableSummary.tableName
+          ?.toLowerCase()
+          .includes(searchQuery.toLowerCase())
     );
     shownRows.sort((a, b) => {
       const aValue = a[sortField];
@@ -237,27 +242,29 @@ export function CDCMirror({
   createdAt,
   syncStatusChild,
 }: CDCMirrorStatusProps) {
-  const [selectedTab, setSelectedTab] = useState(-1);
   const LocalStorageTabKey = 'cdctab';
-
+  const [selectedTab, setSelectedTab] = useLocalStorage(LocalStorageTabKey, 0);
+  const [mounted, setMounted] = useState(false);
   const handleTab = (index: number) => {
-    localStorage.setItem(LocalStorageTabKey, index.toString());
     setSelectedTab(index);
   };
 
   let snapshot = <></>;
   if (cdc.snapshotStatus) {
     snapshot = <SnapshotStatusTable status={cdc.snapshotStatus} />;
   }
-
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setSelectedTab(
-        parseInt(localStorage?.getItem(LocalStorageTabKey) ?? '0') | 0
-      );
-    }
+    setMounted(true);
   }, []);
-
+  if (!mounted) {
+    return (
+      <div style={{ marginTop: '1rem' }}>
+        <Label>
+          <ProgressCircle variant='determinate_progress_circle' />
+        </Label>
+      </div>
+    );
+  }
   return (
     <TabGroup
       index={selectedTab}

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

@@ -0,0 +1,28 @@
+import { Button } from '@/lib/Button';
+import { Label } from '@/lib/Label';
+import Link from 'next/link';
+
+const NoMirror = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        rowGap: '1rem',
+        justifyContent: 'center',
+      }}
+    >
+      <Label variant='title2'>Oops! </Label>
+      <Label as='label' style={{ fontSize: 18 }}>
+        We were unable to fetch details of this mirror. Please confirm if this
+        mirror exists.
+      </Label>
+      <Link href='/mirrors'>
+        <Button style={{ padding: '1rem' }}>Back to mirrors page</Button>
+      </Link>
+    </div>
+  );
+};
+
+export default NoMirror;

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

@@ -5,6 +5,7 @@ import { LayoutMain } from '@/lib/Layout';
 import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
 import { redirect } from 'next/navigation';
 import { CDCMirror } from './cdc';
+import NoMirror from './nomirror';
 import SyncStatus from './syncStatus';
 
 export const dynamic = 'force-dynamic';
@@ -54,6 +55,11 @@ export default async function EditMirror({
     },
   });
 
+  if (mirrorStatus.errorMessage) {
+    console.log(mirrorStatus.errorMessage);
+    return <NoMirror />;
+  }
+
   let syncStatusChild = <></>;
   if (mirrorStatus.cdcStatus) {
     let rowsSynced = syncs.reduce((acc, sync) => acc + sync.rows_in_batch, 0);

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

@@ -29,6 +29,7 @@ export default async function SyncStatus({
     orderBy: {
       start_time: 'desc',
     },
+    distinct: ['batch_id'],
   });
 
   const rows = syncs.map((sync) => ({

ui/app/mirrors/tables.tsx

@@ -17,7 +17,6 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
       }),
     [searchQuery, cdcFlows]
   );
-  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>

ui/components/TimeComponent.tsx

@@ -1,6 +1,8 @@
 'use client';
 import { Label } from '@/lib/Label';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import moment from 'moment-timezone';
+import { useEffect, useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 
 const TimeLabel = ({
@@ -11,6 +13,10 @@ const TimeLabel = ({
   fontSize?: number;
 }) => {
   const [timezone] = useLocalStorage('timezone-ui', 'UTC'); // ['UTC', 'Local', 'Relative']
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   const formattedTimestamp = (zone: string) => {
     switch (zone) {
       case 'Local':
@@ -23,6 +29,13 @@ const TimeLabel = ({
         return moment(timeVal).utc().format('YYYY-MM-DD HH:mm:ss');
     }
   };
+  if (!mounted) {
+    return (
+      <Label>
+        <ProgressCircle variant='determinate_progress_circle' />
+      </Label>
+    );
+  }
   return (
     <Label as='label' style={{ fontSize: fontSize }}>
       {formattedTimestamp(timezone)}