improvements

PeerDB-io · Oct 26, 2023 · f72ac27 · f72ac27
1 parent 28ffec9
commit f72ac27
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/flow/cmd/peer_data.go b/flow/cmd/peer_data.go
@@ -40,7 +40,7 @@ func (h *FlowRequestHandler) GetSlotInfo(
 	if err != nil {
 		return &protos.PeerSlotResponse{SlotData: nil}, err
 	}
-
+	defer peerPool.Close()
 	rows, err := peerPool.Query(ctx, "SELECT slot_name, redo_lsn::Text,restart_lsn::text,"+
 		"round((redo_lsn-restart_lsn) / 1024 / 1024 , 2) AS MB_Behind"+
 		" FROM pg_control_checkpoint(), pg_replication_slots;")
@@ -79,7 +79,7 @@ func (h *FlowRequestHandler) GetStatInfo(
 	if err != nil {
 		return &protos.PeerStatResponse{StatData: nil}, err
 	}
-
+	defer peerPool.Close()
 	rows, err := peerPool.Query(ctx, "SELECT pid, query, EXTRACT(epoch FROM(now()-query_start)) AS dur"+
 		" FROM pg_stat_activity WHERE query_start IS NOT NULL;")
 	if err != nil {

diff --git a/ui/app/peers/[peerName]/datatables.tsx b/ui/app/peers/[peerName]/datatables.tsx
@@ -1,6 +1,5 @@
+import { CopyButton } from '@/components/CopyButton';
 import { SlotInfo, StatInfo } from '@/grpc_generated/route';
-import { Button } from '@/lib/Button';
-import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import Link from 'next/link';
@@ -13,9 +12,11 @@ export const SlotTable = ({ data }: { data: SlotInfo[] }) => {
     return '';
   };
   return (
-    <>
-      <div style={{ fontSize: 17 }}>Replication Slot Information</div>
-      <div style={{ maxHeight: '50%', overflow: 'scroll' }}>
+    <div style={{ height: '30%', marginTop: '2rem' }}>
+      <div style={{ fontSize: 17, marginBottom: '1rem' }}>
+        Replication Slot Information
+      </div>
+      <div style={{ maxHeight: '100%', overflow: 'scroll' }}>
         <Table
           header={
             <TableRow>
@@ -55,15 +56,17 @@ export const SlotTable = ({ data }: { data: SlotInfo[] }) => {
           })}
         </Table>
       </div>
-    </>
+    </div>
   );
 };
 
 export const StatTable = ({ data }: { data: StatInfo[] }) => {
   return (
-    <>
-      <div style={{ fontSize: 17 }}>Stat Activity Information</div>
-      <div style={{ maxHeight: '50%', overflow: 'scroll' }}>
+    <div style={{ height: '50%' }}>
+      <div style={{ fontSize: 17, marginBottom: '1rem' }}>
+        Stat Activity Information
+      </div>
+      <div style={{ maxHeight: '100%', overflow: 'scroll' }}>
         <Table
           header={
             <TableRow>
@@ -97,15 +100,13 @@ export const StatTable = ({ data }: { data: StatInfo[] }) => {
                   }}
                 >
                   {query}
-                  <Button>
-                    <Icon name='content_copy' />
-                  </Button>
+                  <CopyButton text={query} />
                 </div>
               </TableCell>
             </TableRow>
           ))}
         </Table>
       </div>
-    </>
+    </div>
   );
 };
diff --git a/ui/app/peers/[peerName]/page.tsx b/ui/app/peers/[peerName]/page.tsx
@@ -37,7 +37,6 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
             display: 'flex',
             flexDirection: 'column',
             height: '80vh',
-            justifyContent: 'space-around',
           }}
         >
           <SlotTable data={slots} />

diff --git a/ui/components/CopyButton.tsx b/ui/components/CopyButton.tsx
@@ -0,0 +1,20 @@
+'use client';
+import { Button } from '@/lib/Button';
+import { Icon } from '@/lib/Icon';
+import { useState } from 'react';
+
+export const CopyButton = ({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+  const handleClick = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+  };
+  return (
+    <Button
+      onClick={handleClick}
+      style={{ backgroundColor: copied ? 'lightgreen' : 'auto' }}
+    >
+      <Icon name={copied ? 'check' : 'content_copy'} />
+    </Button>
+  );
+};