restores metadatadb ui

PeerDB-io · Nov 17, 2023 · e7e1ac5 · e7e1ac5
1 parent 7595ac3
commit e7e1ac5
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 5 deletions.
diff --git a/ui/app/peers/create/[peerType]/helpers/s3.ts b/ui/app/peers/create/[peerType]/helpers/s3.ts
@@ -45,12 +45,23 @@ export const s3Setting: PeerSetting[] = [
   },
 ];
 
+export const blankMetadata = {
+  host: '',
+  port: 5432,
+  user: 'postgres',
+  password: '',
+  database: 'postgres',
+  transactionSnapshot: '',
+};
+
 export const blankS3Setting: S3Config = {
   url: 's3://<bucket_name>/<prefix_name>',
   accessKeyId: undefined,
   secretAccessKey: undefined,
   roleArn: undefined,
   region: undefined,
   endpoint: '',
-  metadataDb: undefined,
+  // For Storage peers created in UI
+  // we use catalog as the metadata DB
+  metadataDb: blankMetadata,
 };
diff --git a/ui/app/peers/create/[peerType]/schema.ts b/ui/app/peers/create/[peerType]/schema.ts
@@ -234,4 +234,5 @@ export const s3Schema = z.object({
       invalid_type_error: 'Endpoint must be a string',
     })
     .optional(),
+  metadataDb: pgSchema.optional(),
 });
diff --git a/ui/components/S3Form.tsx b/ui/components/S3Form.tsx
@@ -1,8 +1,15 @@
 'use client';
-import { s3Setting } from '@/app/peers/create/[peerType]/helpers/s3';
+import { PeerConfig } from '@/app/dto/PeersDTO';
+import { postgresSetting } from '@/app/peers/create/[peerType]/helpers/pg';
+import {
+  blankS3Setting,
+  s3Setting,
+} from '@/app/peers/create/[peerType]/helpers/s3';
+import { PostgresConfig } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { RowWithRadiobutton, RowWithTextField } from '@/lib/Layout';
 import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
+import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import { useEffect, useState } from 'react';
@@ -13,6 +20,10 @@ interface S3Props {
   setter: PeerSetter;
 }
 const S3ConfigForm = ({ setter }: S3Props) => {
+  const [showMetadata, setShowMetadata] = useState<boolean>(false);
+  const [metadataDB, setMetadataDB] = useState<PeerConfig>(
+    blankS3Setting.metadataDb!
+  );
   const [storageType, setStorageType] = useState<'S3' | 'GCS'>('S3');
   const displayCondition = (label: string) => {
     return !(
@@ -22,15 +33,23 @@ const S3ConfigForm = ({ setter }: S3Props) => {
   };
   useEffect(() => {
     const endpoint = storageType === 'S3' ? '' : 'storage.googleapis.com';
-    const region = storageType === 'S3' ? '' : 'auto';
     setter((prev) => {
       return {
         ...prev,
+        metadataDb: showMetadata ? (metadataDB as PostgresConfig) : undefined,
         endpoint,
-        region,
       };
     });
-  }, [storageType, setter]);
+
+    if (storageType === 'GCS') {
+      setter((prev) => {
+        return {
+          ...prev,
+          region: 'auto',
+        };
+      });
+    }
+  }, [metadataDB, storageType, setter, showMetadata]);
 
   return (
     <div>
@@ -113,6 +132,78 @@ const S3ConfigForm = ({ setter }: S3Props) => {
             />
           );
       })}
+
+      <Label
+        as='label'
+        style={{ marginTop: '1rem' }}
+        variant='subheadline'
+        colorName='lowContrast'
+      >
+        Metadata Database
+      </Label>
+      <Label>
+        For S3/GCS storage peers, PeerDB uses an external PostgreSQL database to
+        store metadata (last sync state) for mirrors.
+        <br></br>
+        By default, PeerDB will use its internal Catalog as the metadata
+        database.
+        <br></br>
+        <br></br>
+        You can also choose to use your own PostgreSQL database:
+      </Label>
+      <div style={{ width: '50%', display: 'flex', alignItems: 'center' }}>
+        <Label variant='subheadline'>Use my own metadata detabase</Label>
+        <Switch onCheckedChange={(state) => setShowMetadata(state)} />
+      </div>
+      {showMetadata &&
+        postgresSetting.map(
+          (pgSetting, index) =>
+            pgSetting.label !== 'Transaction Snapshot' && (
+              <RowWithTextField
+                key={index}
+                label={
+                  <Label>
+                    {pgSetting.label}{' '}
+                    <Tooltip
+                      style={{ width: '100%' }}
+                      content={'This is a required field.'}
+                    >
+                      <Label colorName='lowContrast' colorSet='destructive'>
+                        *
+                      </Label>
+                    </Tooltip>
+                  </Label>
+                }
+                action={
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <TextField
+                      variant='simple'
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        pgSetting.stateHandler(e.target.value, setMetadataDB)
+                      }
+                      defaultValue={
+                        (metadataDB as PostgresConfig)[
+                          pgSetting.label.toLowerCase() as keyof PostgresConfig
+                        ] || ''
+                      }
+                    />
+                    {pgSetting.tips && (
+                      <InfoPopover
+                        tips={pgSetting.tips}
+                        link={pgSetting.helpfulLink}
+                      />
+                    )}
+                  </div>
+                }
+              />
+            )
+        )}
     </div>
   );
 };