Skip to content

Commit

Permalink
fix status screen and removes logs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amogh-Bharadwaj
Amogh-Bharadwaj committed Nov 10, 2023
1 parent 0cfe0b4 commit 2ee316e
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 172 deletions.
3 changes: 1 addition & 2 deletions ui/app/mirrors/create/handlers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const handleCreateQRep = async (
query = config.query;
config.initialCopyOnly = false;
}
console.log('handle Qrep:', config);

if (
config.writeMode?.writeType == QRepWriteType.QREP_WRITE_MODE_UPSERT &&
!config.writeMode?.upsertKeyColumns
Expand Down Expand Up @@ -210,7 +210,6 @@ export const fetchColumns = async (
setLoading: Dispatch<SetStateAction<boolean>>
) => {
if (peerName?.length === 0) return [];
console.log(peerName, schemaName, tableName);
setLoading(true);
const columnsRes: UColumnsResponse = await fetch('/api/peers/columns', {
method: 'POST',
Expand Down
1 change: 0 additions & 1 deletion ui/app/mirrors/create/tablemapping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ const TableMapping = ({
const [searchQuery, setSearchQuery] = useState('');

useEffect(() => {
console.log('peertype and schema in useeffect:', peerType, schema);
if (peerType != undefined && dBTypeToJSON(peerType) == 'BIGQUERY') {
setRows((rows) => {
const newRows = [...rows];
Expand Down
241 changes: 82 additions & 159 deletions ui/app/mirrors/edit/[mirrorId]/cdc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,15 @@

import SearchBar from '@/components/Search';
import TimeLabel from '@/components/TimeComponent';
import {
CDCMirrorStatus,
QRepMirrorStatus,
SnapshotStatus,
} from '@/grpc_generated/route';
import { QRepMirrorStatus, SnapshotStatus } from '@/grpc_generated/route';
import { Button } from '@/lib/Button';
import { Icon } from '@/lib/Icon';
import { Label } from '@/lib/Label';
import { ProgressBar } from '@/lib/ProgressBar';
import { Table, TableCell, TableRow } from '@/lib/Table';
import * as Tabs from '@radix-ui/react-tabs';
import moment, { Duration, Moment } from 'moment';
import { useQueryState } from 'next-usequerystate';
import Link from 'next/link';
import { useState } from 'react';
import styled from 'styled-components';

class TableCloneSummary {
flowJobName: string;
Expand Down Expand Up @@ -94,162 +87,92 @@ function summarizeTableClone(clone: QRepMirrorStatus): TableCloneSummary {
type SnapshotStatusProps = {
status: SnapshotStatus;
};
const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
const [snapshotRows, setSnapshotRows] = useState(
status.clones.map(summarizeTableClone)
);
return (
<Table
title={<Label variant='headline'>Initial Copy</Label>}
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button
variant='normalBorderless'
onClick={() => window.location.reload()}
>
<Icon name='refresh' />
</Button>
</>
),
right: (
<SearchBar
allItems={status.clones.map(summarizeTableClone)}
setItems={setSnapshotRows}
filterFunction={(query: string) =>
status.clones.map(summarizeTableClone).filter((row: any) => {
return row.tableName
.toLowerCase()
.includes(query.toLowerCase());
})
}
/>
),
}}
header={
<TableRow>
<TableCell as='th'>Table Identifier</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'>Progress Partitions</TableCell>
<TableCell as='th'>Num Rows Synced</TableCell>
<TableCell as='th'>Avg Time Per Partition</TableCell>
</TableRow>
}
>
{snapshotRows.map((clone, index) => (
<TableRow key={index}>
<TableCell>
<Label>
<Link
href={`/mirrors/status/qrep/${clone.flowJobName}`}
className='underline cursor-pointer'
<div style={{ marginTop: '2rem' }}>
<Table
title={<Label variant='headline'>Initial Copy</Label>}
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button
variant='normalBorderless'
onClick={() => window.location.reload()}
>
{clone.tableName}
</Link>
</Label>
</TableCell>
<TableCell>
<Label>
{
<TimeLabel
timeVal={
clone.cloneStartTime?.format('YYYY-MM-DD HH:mm:ss') || 'N/A'
}
/>
<Icon name='refresh' />
</Button>
</>
),
right: (
<SearchBar
allItems={status.clones.map(summarizeTableClone)}
setItems={setSnapshotRows}
filterFunction={(query: string) =>
status.clones.map(summarizeTableClone).filter((row: any) => {
return row.tableName
.toLowerCase()
.includes(query.toLowerCase());
})
}
</Label>
</TableCell>
<TableCell>
<ProgressBar progress={clone.getPartitionProgressPercentage()} />
{clone.completedNumPartitions} / {clone.totalNumPartitions}
</TableCell>
<TableCell>{clone.completedNumRows}</TableCell>
<TableCell>
<Label>
{clone.avgTimePerPartition?.humanize({ ss: 1 }) || 'N/A'}
</Label>
</TableCell>
</TableRow>
))}
</Table>
/>
),
}}
header={
<TableRow>
<TableCell as='th'>Table Identifier</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'>Progress Partitions</TableCell>
<TableCell as='th'>Num Rows Synced</TableCell>
<TableCell as='th'>Avg Time Per Partition</TableCell>
</TableRow>
}
>
{snapshotRows.map((clone, index) => (
<TableRow key={index}>
<TableCell>
<Label>
<Link
href={`/mirrors/status/qrep/${clone.flowJobName}`}
className='underline cursor-pointer'
>
{clone.tableName}
</Link>
</Label>
</TableCell>
<TableCell>
<Label>
{
<TimeLabel
timeVal={
clone.cloneStartTime?.format('YYYY-MM-DD HH:mm:ss') ||
'N/A'
}
/>
}
</Label>
</TableCell>
<TableCell>
<ProgressBar progress={clone.getPartitionProgressPercentage()} />
{clone.completedNumPartitions} / {clone.totalNumPartitions}
</TableCell>
<TableCell>{clone.completedNumRows}</TableCell>
<TableCell>
<Label>
{clone.avgTimePerPartition?.humanize({ ss: 1 }) || 'N/A'}
</Label>
</TableCell>
</TableRow>
))}
</Table>
</div>
);
};

const Trigger = styled(
({ isActive, ...props }: { isActive?: boolean } & Tabs.TabsTriggerProps) => (
<Tabs.Trigger {...props} />
)
)<{ isActive?: boolean }>`
background-color: ${({ theme, isActive }) =>
isActive ? theme.colors.accent.surface.selected : 'white'};
font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')};
&:hover {
color: ${({ theme }) => theme.colors.accent.text.highContrast};
}
`;

type CDCMirrorStatusProps = {
cdc: CDCMirrorStatus;
syncStatusChild?: React.ReactNode;
};
export function CDCMirror({ cdc, syncStatusChild }: CDCMirrorStatusProps) {
const [selectedTab, setSelectedTab] = useQueryState('tab', {
history: 'push',
defaultValue: 'tab1',
});

let snapshot = <></>;
if (cdc.snapshotStatus) {
snapshot = <SnapshotStatusTable status={cdc.snapshotStatus} />;
}

return (
<Tabs.Root
className='flex flex-col w-full'
defaultValue={selectedTab}
onValueChange={setSelectedTab}
style={{ marginTop: '2rem' }}
>
<Tabs.List className='flex border-b' aria-label='Details'>
<Trigger
isActive={selectedTab === 'tab1'}
className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
value='tab1'
>
Details
</Trigger>
<Trigger
isActive={selectedTab === 'tab2'}
className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
value='tab2'
>
Sync Status
</Trigger>
<Trigger
isActive={selectedTab === 'tab3'}
className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
value='tab3'
>
Initial Copy
</Trigger>
</Tabs.List>
<Tabs.Content className='p-5 rounded-b-md' value='tab1'>
{/* <CDCDetails config={cdc.config} /> */}
</Tabs.Content>
<Tabs.Content className='p-5 rounded-b-md' value='tab2'>
{syncStatusChild}
</Tabs.Content>
<Tabs.Content className='p-5 rounded-b-md' value='tab3'>
{snapshot}
</Tabs.Content>
</Tabs.Root>
);
}
12 changes: 6 additions & 6 deletions ui/app/mirrors/edit/[mirrorId]/cdcGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ function CdcGraph({ syncs }: { syncs: SyncStatusRow[] }) {
const initialCount: [string, number][] = [];
let [counts, setCounts] = useState(initialCount);

let rows = syncs.map((sync) => ({
timestamp: sync.startTime,
count: sync.numRows,
}));

useEffect(() => {
let rows = syncs.map((sync) => ({
timestamp: sync.startTime,
count: sync.numRows,
}));

let counts = aggregateCountsByInterval(rows, aggregateType);
counts = counts.slice(0, 29);
counts = counts.reverse();
setCounts(counts);
}, [aggregateType, rows]);
}, [aggregateType, syncs]);

return (
<div>
Expand Down
16 changes: 12 additions & 4 deletions ui/app/mirrors/edit/[mirrorId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { LayoutMain } from '@/lib/Layout';
import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
import { redirect } from 'next/navigation';
import { Suspense } from 'react';
import { SnapshotStatusTable } from './cdc';
import CdcDetails from './cdcDetails';
import SyncStatus from './syncStatus';

Expand Down Expand Up @@ -69,10 +70,17 @@ export default async function EditMirror({
<Header variant='title2'>{mirrorId}</Header>
<Suspense fallback={<Loading />}>
{mirrorStatus.cdcStatus && (
<CdcDetails
syncs={rows}
mirrorConfig={mirrorStatus.cdcStatus.config}
/>
<>
<CdcDetails
syncs={rows}
mirrorConfig={mirrorStatus.cdcStatus.config}
/>
{mirrorStatus.cdcStatus.snapshotStatus && (
<SnapshotStatusTable
status={mirrorStatus.cdcStatus.snapshotStatus}
/>
)}
</>
)}
<div className='mt-10'>{syncStatusChild}</div>
</Suspense>
Expand Down

0 comments on commit 2ee316e

Please sign in to comment.