UI: Show peer configuration on clicking peer (#1168)

Shows the peer's config object when clicking on the peer buttons. Sensitive keys not exposed. ![Screenshot 2024-01-29 at 9 12 33 PM](https://github.com/PeerDB-io/peerdb/assets/65964360/f43ce1af-fb00-4331-9199-6328f7627b35)
PeerDB-io · Jan 29, 2024 · 75cdc2c · 75cdc2c
1 parent af121d3
commit 75cdc2c
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 26 deletions.
diff --git a/ui/app/alert-config/page.tsx b/ui/app/alert-config/page.tsx
@@ -22,7 +22,7 @@ const options: editor.IStandaloneEditorConstructionOptions = {
   scrollBeyondLastLine: false,
 };
 
-const ConfigJSONView = ({ config }: { config: string }) => {
+export const ConfigJSONView = ({ config }: { config: string }) => {
   return <Editor options={options} value={config} language='json' />;
 };
 

diff --git a/ui/app/peers/[peerName]/omitKeys.ts b/ui/app/peers/[peerName]/omitKeys.ts
@@ -0,0 +1,11 @@
+// sensitive keys
+const omitKeys = [
+  'privateKey', // snowflake and bigquery
+  'password', // postgres, metadatadb for non-dwh peers, snowflake
+  'secretAccessKey', // s3/gcs
+  'subscriptionId', // eventhub
+  'privateKeyId', // bigquery
+  'type', // peer type
+];
+
+export default omitKeys;
diff --git a/ui/app/peers/[peerName]/page.tsx b/ui/app/peers/[peerName]/page.tsx
@@ -2,7 +2,7 @@ import ReloadButton from '@/components/ReloadButton';
 import { PeerSlotResponse, PeerStatResponse } from '@/grpc_generated/route';
 import { Label } from '@/lib/Label';
 import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
-import Link from 'next/link';
+import PeerDetails from './peerDetails';
 import SlotTable from './slottable';
 import StatTable from './stattable';
 
@@ -61,35 +61,22 @@ const PeerData = async ({ params: { peerName } }: DataConfigProps) => {
         <div style={{ fontSize: 20, fontWeight: 'bold' }}>{peerName}</div>
         <ReloadButton />
       </div>
+      <PeerDetails peerName={peerName} />
       {slots && stats ? (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            height: '70vh',
-          }}
-        >
+        <div>
           <SlotTable data={slots} />
           <StatTable data={stats} />
         </div>
       ) : (
-        <div style={{ fontSize: 15, marginTop: '2rem' }}>
-          We do not have stats to show for this peer at the moment. Please check
-          if your PostgreSQL peer is open for connections. Note that peer
-          replication slot information and stat activity is currently only
-          supported for PostgreSQL peers.
+        <div>
           <Label
-            as={Link}
-            style={{
-              color: 'teal',
-              cursor: 'pointer',
-              textDecoration: 'underline',
-            }}
-            target='_blank'
-            href='https://docs.peerdb.io/sql/commands/supported-connectors'
+            as='label'
+            style={{ fontSize: 18, marginTop: '1rem', display: 'block' }}
           >
-            More information about PeerDB connector support
+            Peer Statistics
+          </Label>
+          <Label as='label' style={{ fontSize: 15, marginTop: '1rem' }}>
+            No stats to show
           </Label>
         </div>
       )}

diff --git a/ui/app/peers/[peerName]/peerDetails.tsx b/ui/app/peers/[peerName]/peerDetails.tsx
@@ -0,0 +1,58 @@
+import { ConfigJSONView } from '@/app/alert-config/page';
+import { getTruePeer } from '@/app/api/peers/getTruePeer';
+import prisma from '@/app/utils/prisma';
+import { Label } from '@/lib/Label';
+import omitKeys from './omitKeys';
+
+interface PeerDetailsProps {
+  peerName: string;
+}
+
+const PeerDetails = async ({ peerName }: PeerDetailsProps) => {
+  const peer = await prisma.peers.findFirst({
+    where: {
+      name: peerName,
+    },
+  });
+  const peerConfig = getTruePeer(peer!);
+
+  return (
+    <div>
+      <div
+        style={{
+          padding: '0.5rem',
+          minWidth: '30%',
+          marginTop: '1rem',
+          marginBottom: '1rem',
+        }}
+      >
+        <div>
+          <div>
+            <Label variant='subheadline'>Configuration:</Label>
+          </div>
+          <div
+            style={{
+              height: peerConfig.postgresConfig ? '14em' : '20em',
+              whiteSpace: 'pre-wrap',
+              marginTop: '1rem',
+            }}
+          >
+            <ConfigJSONView
+              config={JSON.stringify(
+                peerConfig,
+                (key, value) => {
+                  if (omitKeys.includes(key)) {
+                    return undefined;
+                  }
+                  return value;
+                },
+                2
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default PeerDetails;
diff --git a/ui/app/peers/[peerName]/slottable.tsx b/ui/app/peers/[peerName]/slottable.tsx
@@ -6,7 +6,7 @@ import { tableStyle } from './style';
 
 const SlotTable = ({ data }: { data: SlotInfo[] }) => {
   return (
-    <div style={{ height: '30%', marginTop: '2rem', marginBottom: '1rem' }}>
+    <div style={{ minHeight: '10%', marginTop: '2rem', marginBottom: '2rem' }}>
       <Label
         as='label'
         variant='subheadline'

diff --git a/ui/app/peers/[peerName]/stattable.tsx b/ui/app/peers/[peerName]/stattable.tsx
@@ -18,7 +18,7 @@ const StatTable = ({ data }: { data: StatInfo[] }) => {
   }, [data, search]);
 
   return (
-    <div style={{ height: '50%' }}>
+    <div style={{ minHeight: '10%' }}>
       <Label
         as='label'
         variant='subheadline'