Skip to content

Commit

Permalink
better mirror page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amogh-Bharadwaj
Amogh-Bharadwaj committed Oct 31, 2023
1 parent 3b1f4d6 commit cf3ca5f
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 155 deletions.
304 changes: 150 additions & 154 deletions ui/app/mirrors/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { DropDialog } from '@/components/DropDialog';
import { Badge } from '@/lib/Badge';
import { Button } from '@/lib/Button';
import { Checkbox } from '@/lib/Checkbox';
import { Header } from '@/lib/Header';
import { Icon } from '@/lib/Icon';
import { Label } from '@/lib/Label';
Expand Down Expand Up @@ -29,83 +27,81 @@ async function CDCFlows() {
});

return (
<Table
title={<Label variant='headline'>Change-data capture</Label>}
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button variant='normalBorderless'>
<Icon name='refresh' />
</Button>
<Button variant='normalBorderless'>
<Icon name='help' />
</Button>
<Button variant='normalBorderless' disabled>
<Icon name='download' />
</Button>
</>
),
right: <SearchField placeholder='Search' />,
}}
header={
<TableRow>
<TableCell as='th' variant='button'>
<Checkbox variant='mixed' defaultChecked />
</TableCell>
<TableCell as='th'>Name</TableCell>
<TableCell as='th'>Source</TableCell>
<TableCell as='th'>Destination</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'></TableCell>
</TableRow>
}
>
{cdcFlows.map((flow) => (
<TableRow key={flow.id}>
<TableCell variant='button'>
<Checkbox />
</TableCell>
<TableCell>
<Label as={Link} href={`/mirrors/edit/${flow.name}`}>
<div className='cursor-pointer underline'>{flow.name}</div>
</Label>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.sourcePeer.name}`}>
{flow.sourcePeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.destinationPeer.name}`}>
{flow.destinationPeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<Label>
{moment(flow.created_at).format('YYYY-MM-DD HH:mm:ss')}
</Label>
</TableCell>
<TableCell>
<DropDialog
workflowId={flow.workflow_id}
flowJobName={flow.name}
sourcePeer={getTruePeer(flow.sourcePeer)}
destinationPeer={getTruePeer(flow.destinationPeer)}
/>
</TableCell>
</TableRow>
))}
</Table>
<>
<Label variant='headline'>Change-data capture</Label>
<div style={{ maxHeight: '35vh', overflow: 'scroll', width: '100%' }}>
<Table
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button variant='normalBorderless'>
<Icon name='refresh' />
</Button>
<Button variant='normalBorderless'>
<Icon name='help' />
</Button>
<Button variant='normalBorderless' disabled>
<Icon name='download' />
</Button>
</>
),
right: <SearchField placeholder='Search' />,
}}
header={
<TableRow>
<TableCell as='th'>Name</TableCell>
<TableCell as='th'>Source</TableCell>
<TableCell as='th'>Destination</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'></TableCell>
</TableRow>
}
>
{cdcFlows.map((flow) => (
<TableRow key={flow.id}>
<TableCell>
<Label as={Link} href={`/mirrors/edit/${flow.name}`}>
<div className='cursor-pointer underline'>{flow.name}</div>
</Label>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.sourcePeer.name}`}>
{flow.sourcePeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.destinationPeer.name}`}>
{flow.destinationPeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<Label>
{moment(flow.created_at).format('YYYY-MM-DD HH:mm:ss')}
</Label>
</TableCell>
<TableCell>
<DropDialog
workflowId={flow.workflow_id}
flowJobName={flow.name}
sourcePeer={getTruePeer(flow.sourcePeer)}
destinationPeer={getTruePeer(flow.destinationPeer)}
/>
</TableCell>
</TableRow>
))}
</Table>
</div>
</>
);
}

Expand All @@ -123,81 +119,81 @@ async function QRepFlows() {
});

return (
<Table
title={<Label variant='headline'>Query replication</Label>}
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button variant='normalBorderless'>
<Icon name='refresh' />
</Button>
<Button variant='normalBorderless'>
<Icon name='help' />
</Button>
<Button variant='normalBorderless' disabled>
<Icon name='download' />
</Button>
</>
),
right: <SearchField placeholder='Search' />,
}}
header={
<TableRow>
<TableCell as='th' variant='button'>
<Checkbox variant='mixed' defaultChecked />
</TableCell>
<TableCell as='th'>Name</TableCell>
<TableCell as='th'>Source</TableCell>
<TableCell as='th'>Destination</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'></TableCell>
</TableRow>
}
>
{qrepFlows.map((flow) => (
<TableRow key={flow.id}>
<TableCell variant='button'>
<Checkbox />
</TableCell>
<TableCell>
<Label as={Link} href={`/mirrors/edit/${flow.name}`}>
<div className='cursor-pointer underline'>{flow.name}</div>
</Label>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.sourcePeer.name}`}>
{flow.sourcePeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.destinationPeer.name}`}>
{flow.destinationPeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<Label>
{moment(flow.created_at).format('YYYY-MM-DD HH:mm:ss')}
</Label>
</TableCell>
<TableCell>
<Badge variant='positive' key={1}>
<Icon name='play_circle' />
Active
</Badge>
</TableCell>
</TableRow>
))}
</Table>
<>
<Label variant='headline'>Query replication</Label>
<div style={{ maxHeight: '35vh', overflow: 'scroll', width: '100%' }}>
<Table
toolbar={{
left: (
<>
<Button variant='normalBorderless'>
<Icon name='chevron_left' />
</Button>
<Button variant='normalBorderless'>
<Icon name='chevron_right' />
</Button>
<Button variant='normalBorderless'>
<Icon name='refresh' />
</Button>
<Button variant='normalBorderless'>
<Icon name='help' />
</Button>
<Button variant='normalBorderless' disabled>
<Icon name='download' />
</Button>
</>
),
right: <SearchField placeholder='Search' />,
}}
header={
<TableRow>
<TableCell as='th'>Name</TableCell>
<TableCell as='th'>Source</TableCell>
<TableCell as='th'>Destination</TableCell>
<TableCell as='th'>Start Time</TableCell>
<TableCell as='th'></TableCell>
</TableRow>
}
>
{qrepFlows.map((flow) => (
<TableRow key={flow.id}>
<TableCell>
<Label as={Link} href={`/mirrors/edit/${flow.name}`}>
<div className='cursor-pointer underline'>{flow.name}</div>
</Label>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.sourcePeer.name}`}>
{flow.sourcePeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<div style={{ cursor: 'pointer' }}>
<Label as={Link} href={`/peers/${flow.destinationPeer.name}`}>
{flow.destinationPeer.name}
</Label>
</div>
</TableCell>
<TableCell>
<Label>
{moment(flow.created_at).format('YYYY-MM-DD HH:mm:ss')}
</Label>
</TableCell>
<TableCell>
<DropDialog
workflowId={flow.workflow_id}
flowJobName={flow.name}
sourcePeer={getTruePeer(flow.sourcePeer)}
destinationPeer={getTruePeer(flow.destinationPeer)}
/>
</TableCell>
</TableRow>
))}
</Table>
</div>
</>
);
}

Expand Down
1 change: 0 additions & 1 deletion ui/app/peers/[peerName]/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const SlotNameDisplay = ({ slotName }: { slotName: string }) => {
<Label
as={Link}
style={{
color: 'darkblue',
cursor: 'pointer',
textDecoration: 'underline',
}}
Expand Down

0 comments on commit cf3ca5f

Please sign in to comment.