From cf3ca5fe6e172f86f493e083d032f3ae518e2c88 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Tue, 31 Oct 2023 14:31:18 -0700
Subject: [PATCH] better mirror page

---
 ui/app/mirrors/page.tsx             | 304 ++++++++++++++--------------
 ui/app/peers/[peerName]/helpers.tsx |   1 -
 2 files changed, 150 insertions(+), 155 deletions(-)

diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
index 7873841102..b0bd52b9fe 100644
--- a/ui/app/mirrors/page.tsx
+++ b/ui/app/mirrors/page.tsx
@@ -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';
@@ -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>
+    </>
   );
 }
 
@@ -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>
+    </>
   );
 }
 
diff --git a/ui/app/peers/[peerName]/helpers.tsx b/ui/app/peers/[peerName]/helpers.tsx
index 4eb85060d0..4aaf178326 100644
--- a/ui/app/peers/[peerName]/helpers.tsx
+++ b/ui/app/peers/[peerName]/helpers.tsx
@@ -14,7 +14,6 @@ export const SlotNameDisplay = ({ slotName }: { slotName: string }) => {
     <Label
       as={Link}
       style={{
-        color: 'darkblue',
         cursor: 'pointer',
         textDecoration: 'underline',
       }}