UI: Better postgres peer page (#732)

- Displays connection string for postgres peer - Search bar for query in stats table --------- Co-authored-by: Kaushik Iska <[email protected]>
PeerDB-io · Nov 28, 2023 · ed514f4 · ed514f4
1 parent 2752413
commit ed514f4
Show file tree

Hide file tree

Showing 6 changed files with 241 additions and 172 deletions.
diff --git a/ui/app/peers/[peerName]/datatables.tsx b/ui/app/peers/[peerName]/datatables.tsx
diff --git a/ui/app/peers/[peerName]/page.tsx b/ui/app/peers/[peerName]/page.tsx
@@ -1,15 +1,36 @@
+import { CopyButton } from '@/components/CopyButton';
 import ReloadButton from '@/components/ReloadButton';
+import { PostgresConfig } from '@/grpc_generated/peers';
 import { PeerSlotResponse, PeerStatResponse } from '@/grpc_generated/route';
 import { Label } from '@/lib/Label';
 import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
 import Link from 'next/link';
-import { SlotTable, StatTable } from './datatables';
+import prisma from '../../utils/prisma';
+import SlotTable from './slottable';
+import StatTable from './stattable';
+import { connStringStyle } from './style';
 export const dynamic = 'force-dynamic';
 
 type DataConfigProps = {
   params: { peerName: string };
 };
 
+async function fetchConnectionString(peerName: string) {
+  const config = await prisma.peers.findUnique({
+    select: {
+      options: true,
+    },
+    where: {
+      name: peerName,
+    },
+  });
+  if (config) {
+    const pgConfig = PostgresConfig.decode(config.options);
+    return `postgresql://${pgConfig.user}:${pgConfig.password}@${pgConfig.host}:${pgConfig.port}`;
+  }
+  return '';
+}
+
 const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
   const getSlotData = async () => {
     const flowServiceAddr = GetFlowHttpAddressFromEnv();
@@ -50,13 +71,21 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
 
   const slots = await getSlotData();
   const stats = await getStatData();
+  const connectionString = await fetchConnectionString(peerName);
 
   return (
     <div style={{ padding: '2rem', display: 'flex', flexDirection: 'column' }}>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <div style={{ fontSize: 20, fontWeight: 'bold' }}>{peerName}</div>
         <ReloadButton />
       </div>
+      <div style={{ marginTop: '1rem' }}>
+        <Label variant='subheadline'>Connection string:</Label>
+        <div style={connStringStyle}>
+          {connectionString}
+          <CopyButton text={connectionString} />
+        </div>
+      </div>
       {slots && stats ? (
         <div
           style={{

diff --git a/ui/app/peers/[peerName]/slottable.tsx b/ui/app/peers/[peerName]/slottable.tsx
@@ -0,0 +1,75 @@
+import { SlotInfo } from '@/grpc_generated/route';
+import { Label } from '@/lib/Label';
+import { Table, TableCell, TableRow } from '@/lib/Table';
+import { SlotNameDisplay } from './helpers';
+import { tableStyle } from './style';
+
+const SlotTable = ({ data }: { data: SlotInfo[] }) => {
+  return (
+    <div style={{ height: '30%', marginTop: '2rem', marginBottom: '1rem' }}>
+      <Label
+        as='label'
+        variant='subheadline'
+        style={{ marginBottom: '1rem', fontWeight: 'bold' }}
+      >
+        Replication Slot Information
+      </Label>
+      <div style={tableStyle}>
+        <Table
+          header={
+            <TableRow>
+              {[
+                'Slot Name',
+                'Active',
+                'Redo LSN',
+                'Restart LSN',
+                'Lag (In MB)',
+              ].map((heading, index) => (
+                <TableCell as='th' key={index}>
+                  <Label
+                    as='label'
+                    style={{ fontWeight: 'bold', fontSize: 14 }}
+                  >
+                    {heading}
+                  </Label>
+                </TableCell>
+              ))}
+            </TableRow>
+          }
+        >
+          {data.map(({ slotName, active, redoLSN, restartLSN, lagInMb }) => {
+            return (
+              <TableRow key={slotName}>
+                <TableCell>
+                  <SlotNameDisplay slotName={slotName} />
+                </TableCell>
+                <TableCell>
+                  <Label as='label' style={{ fontSize: 14 }}>
+                    {active ? 'Yes' : 'No'}
+                  </Label>
+                </TableCell>
+                <TableCell>
+                  <Label as='label' style={{ fontSize: 14 }}>
+                    {redoLSN}
+                  </Label>
+                </TableCell>
+                <TableCell>
+                  <Label as='label' style={{ fontSize: 14 }}>
+                    {restartLSN}
+                  </Label>
+                </TableCell>
+                <TableCell>
+                  <Label as='label' style={{ fontSize: 14 }}>
+                    {lagInMb < 0 ? 0 : lagInMb}
+                  </Label>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default SlotTable;