more ui improv.

PeerDB-io · Oct 31, 2023 · 9920934 · 9920934
1 parent cf3ca5f
commit 9920934
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 26 deletions.
diff --git a/ui/app/mirrors/create/cdc.tsx b/ui/app/mirrors/create/cdc.tsx
@@ -24,21 +24,18 @@ interface MirrorConfigProps {
   setSchema: Dispatch<SetStateAction<string>>;
 }
 
-export default function CDCConfigForm(props: MirrorConfigProps) {
-  const defaultSyncMode = (
-    dtype: DBType | undefined,
-    setting: MirrorSetting
-  ) => {
-    switch (dtype) {
-      case DBType.POSTGRES:
-        return 'Copy with Binary';
-      case DBType.SNOWFLAKE:
-        return 'AVRO';
-      default:
-        return 'Copy with Binary';
-    }
-  };
+export const defaultSyncMode = (dtype: DBType | undefined) => {
+  switch (dtype) {
+    case DBType.POSTGRES:
+      return 'Copy with Binary';
+    case DBType.SNOWFLAKE:
+      return 'AVRO';
+    default:
+      return 'Copy with Binary';
+  }
+};
 
+export default function CDCConfigForm(props: MirrorConfigProps) {
   const setToDefault = (setting: MirrorSetting) => {
     const destinationPeerType = props.mirrorConfig.destination?.type;
     return (
@@ -47,7 +44,6 @@ export default function CDCConfigForm(props: MirrorConfigProps) {
         destinationPeerType === DBType.SNOWFLAKE)
     );
   };
-
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean | Peer | QRepSyncMode = val;
     if (setting.label.includes('Peer')) {
@@ -210,10 +206,7 @@ export default function CDCConfigForm(props: MirrorConfigProps) {
                     disabled={setToDefault(setting)}
                     value={
                       setToDefault(setting)
-                        ? defaultSyncMode(
-                            props.mirrorConfig.destination?.type,
-                            setting
-                          )
+                        ? defaultSyncMode(props.mirrorConfig.destination?.type)
                         : undefined
                     }
                   >

diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -207,8 +207,8 @@ export default function CreateMirrors() {
               />
               <Label>
                 <div style={{ fontSize: 14 }}>
-                  XMIN mode is a sync method which uses the xmin system column
-                  of PostgreSQL as a watermark column for replication.
+                  XMIN mode uses the xmin system column of PostgreSQL as a
+                  watermark column for replication.
                 </div>
               </Label>
               <Label

diff --git a/ui/app/mirrors/create/qrep.tsx b/ui/app/mirrors/create/qrep.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { RequiredIndicator } from '@/components/RequiredIndicator';
 import { QRepConfig, QRepSyncMode, QRepWriteType } from '@/grpc_generated/flow';
-import { Peer } from '@/grpc_generated/peers';
+import { DBType, Peer } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
 import { Select, SelectItem } from '@/lib/Select';
@@ -10,6 +10,7 @@ import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import { InfoPopover } from '../../../components/InfoPopover';
 import { MirrorSetter } from '../../dto/MirrorsDTO';
+import { defaultSyncMode } from './cdc';
 import { MirrorSetting } from './helpers/common';
 interface QRepConfigProps {
   settings: MirrorSetting[];
@@ -20,6 +21,15 @@ interface QRepConfigProps {
 }
 
 export default function QRepConfigForm(props: QRepConfigProps) {
+  const setToDefault = (setting: MirrorSetting) => {
+    const destinationPeerType = props.mirrorConfig.destinationPeer?.type;
+    return (
+      setting.label.includes('Sync') &&
+      (destinationPeerType === DBType.POSTGRES ||
+        destinationPeerType === DBType.SNOWFLAKE)
+    );
+  };
+
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal:
       | string
@@ -30,9 +40,26 @@ export default function QRepConfigForm(props: QRepConfigProps) {
       | string[] = val;
     if (setting.label.includes('Peer')) {
       stateVal = props.peers.find((peer) => peer.name === val)!;
+      if (setting.label === 'Destination Peer') {
+        if (stateVal.type === DBType.POSTGRES) {
+          props.setter((curr) => {
+            return {
+              ...curr,
+              syncMode: QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
+            };
+          });
+        } else if (stateVal.type === DBType.SNOWFLAKE) {
+          props.setter((curr) => {
+            return {
+              ...curr,
+              syncMode: QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO,
+            };
+          });
+        }
+      }
     } else if (setting.label.includes('Sync Mode')) {
       stateVal =
-        val === 'avro'
+        val === 'AVRO'
           ? QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO
           : QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT;
     } else if (setting.label.includes('Write Type')) {
@@ -127,11 +154,19 @@ export default function QRepConfigForm(props: QRepConfigProps) {
                       setting.label.includes('Peer') ? 'a peer' : 'a mode'
                     }`}
                     onValueChange={(val) => handleChange(val, setting)}
+                    disabled={setToDefault(setting)}
+                    value={
+                      setToDefault(setting)
+                        ? defaultSyncMode(
+                            props.mirrorConfig.destinationPeer?.type
+                          )
+                        : undefined
+                    }
                   >
                     {(setting.label.includes('Peer')
                       ? (props.peers ?? []).map((peer) => peer.name)
                       : setting.label.includes('Sync')
-                      ? ['avro', 'sql']
+                      ? ['AVRO', 'Copy with Binary']
                       : ['Append', 'Upsert', 'Overwrite']
                     ).map((item, id) => {
                       return (

diff --git a/ui/components/DropDialog.tsx b/ui/components/DropDialog.tsx
@@ -31,6 +31,7 @@ export const DropDialog = (dropArgs: {
     setLoading(false);
     if (dropRes.dropped !== true)
       setMsg('Something went wrong when trying to drop the mirror.');
+    else setMsg('Mirror dropped successfully.');
   };
 
   return (
@@ -66,11 +67,14 @@ export const DropDialog = (dropArgs: {
               color: 'white',
             }}
           >
-            {loading ? <BarLoader /> : 'Delete'}
+            {loading ? <BarLoader /> : 'Drop'}
           </Button>
         </div>
         {msg && (
-          <Label as='label' style={{ color: '#dc3545' }}>
+          <Label
+            as='label'
+            style={{ color: msg.includes('success') ? 'green' : '#dc3545' }}
+          >
             {msg}
           </Label>
         )}