remove sync mode fields and prettify login

PeerDB-io · Nov 24, 2023 · 58af334 · 58af334
1 parent b7b6a8d
commit 58af334
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 177 deletions.
diff --git a/ui/app/login/page.tsx b/ui/app/login/page.tsx
@@ -4,13 +4,15 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 import { Button } from '@/lib/Button';
-import { Layout, LayoutMain } from '@/lib/Layout';
+import { Icon } from '@/lib/Icon';
+import { Layout } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 
 export default function Login() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [pass, setPass] = useState('');
+  const [show, setShow] = useState(false);
   const [error, setError] = useState(() =>
     searchParams.has('reject') ? 'Authentication failed, please login' : ''
   );
@@ -21,41 +23,89 @@ export default function Login() {
     })
       .then((res) => res.json())
       .then((res) => {
-        if (res.error) setError(res.error);
-        else router.push('/');
+        if (res.error) {
+          if (res.error === 'wrong password')
+            setError(
+              'Your password is incorrect. Please check your password and try again.'
+            );
+          else setError(res.error);
+        } else router.push('/');
       });
   };
   return (
     <Layout>
-      <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
-        <Image src='/images/peerdb-combinedMark.svg' alt='PeerDB' width={512} />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 'full',
+        }}
+      >
+        <Image
+          style={{ marginBottom: '2rem' }}
+          src='/images/peerdb-combinedMark.svg'
+          alt='PeerDB'
+          width={400}
+          height={300}
+        />
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '20%',
+            height: '4%',
+          }}
+        >
+          <TextField
+            variant='simple'
+            placeholder='Password'
+            type={show ? 'text' : 'password'}
+            style={{
+              width: '100%',
+              height: '100%',
+              borderRadius: '0.5rem',
+              marginRight: '1rem',
+            }}
+            value={pass}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setPass(e.target.value)
+            }
+            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+              if (e.key === 'Enter') {
+                login();
+              }
+            }}
+          />
+          <Button onClick={() => setShow((curr) => !curr)}>
+            <Icon name={show ? 'visibility_off' : 'visibility'} />
+          </Button>
+        </div>
+        <Button
+          style={{
+            marginTop: '1rem',
+            width: '6em',
+            height: '2em',
+            boxShadow: '0px 4px 4px rgba(0,0,0,0.15)',
+          }}
+          variant='normalSolid'
+          onClick={login}
+        >
+          Log in
+        </Button>
         {error && (
           <div
             style={{
-              borderRadius: '8px',
-              fontWeight: 'bold',
-              color: '#600',
-              backgroundColor: '#c66',
+              borderRadius: '0.2rem',
+              padding: '0.5rem',
+              color: '#d46363',
             }}
           >
             {error}
           </div>
         )}
-        <TextField
-          variant='simple'
-          placeholder='Password'
-          value={pass}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setPass(e.target.value)
-          }
-          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === 'Enter') {
-              login();
-            }
-          }}
-        />
-        <Button onClick={login}>Login</Button>
-      </LayoutMain>
+      </div>
     </Layout>
   );
 }
diff --git a/ui/app/mirrors/create/cdc/cdc.tsx b/ui/app/mirrors/create/cdc/cdc.tsx
@@ -3,11 +3,10 @@ import { RequiredIndicator } from '@/components/RequiredIndicator';
 import { QRepSyncMode } from '@/grpc_generated/flow';
 import { DBType } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
-import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
+import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Dispatch, SetStateAction } from 'react';
-import ReactSelect from 'react-select';
 import { InfoPopover } from '../../../../components/InfoPopover';
 import { CDCConfig, MirrorSetter, TableMapRow } from '../../../dto/MirrorsDTO';
 import { MirrorSetting } from '../helpers/common';
@@ -21,17 +20,13 @@ interface MirrorConfigProps {
   setRows: Dispatch<SetStateAction<TableMapRow[]>>;
 }
 
-const SyncModeOptions = ['AVRO', 'Copy with Binary'].map((value) => ({
-  label: value,
-  value,
-}));
-
 export const defaultSyncMode = (dtype: DBType | undefined) => {
   switch (dtype) {
     case DBType.POSTGRES:
       return 'Copy with Binary';
     case DBType.SNOWFLAKE:
     case DBType.BIGQUERY:
+    case DBType.S3:
       return 'AVRO';
     default:
       return 'Copy with Binary';
@@ -45,32 +40,17 @@ export default function CDCConfigForm({
   rows,
   setRows,
 }: MirrorConfigProps) {
-  const setToDefault = (setting: MirrorSetting) => {
-    const destinationPeerType = mirrorConfig.destination?.type;
-    return (
-      setting.label.includes('Sync') &&
-      (destinationPeerType === DBType.POSTGRES ||
-        destinationPeerType === DBType.SNOWFLAKE)
-    );
-  };
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean | QRepSyncMode = val;
-    if (setting.label.includes('Sync Mode')) {
-      stateVal =
-        val === 'AVRO'
-          ? QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO
-          : QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT;
-    }
     setting.stateHandler(stateVal, setter);
   };
+
   const paramDisplayCondition = (setting: MirrorSetting) => {
     const label = setting.label.toLowerCase();
     if (
       (label.includes('snapshot') && mirrorConfig.doInitialCopy !== true) ||
-      (label.includes('snapshot staging') &&
-        mirrorConfig.snapshotSyncMode?.toString() !== '1') ||
-      (label.includes('cdc staging') &&
-        mirrorConfig.cdcSyncMode?.toString() !== '1')
+      (label.includes('staging path') &&
+        defaultSyncMode(mirrorConfig.destination?.type) !== 'AVRO')
     ) {
       return false;
     }
@@ -115,49 +95,6 @@ export default function CDCConfigForm({
                   </div>
                 }
               />
-            ) : setting.type === 'select' ? (
-              <RowWithSelect
-                key={id}
-                label={
-                  <Label>
-                    {setting.label}
-                    {RequiredIndicator(setting.required)}
-                  </Label>
-                }
-                action={
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <ReactSelect
-                      placeholder='Select a sync mode'
-                      onChange={(val, action) =>
-                        val && handleChange(val.value, setting)
-                      }
-                      isDisabled={setToDefault(setting)}
-                      value={
-                        setToDefault(setting)
-                          ? SyncModeOptions.find(
-                              (opt) =>
-                                opt.value ===
-                                defaultSyncMode(mirrorConfig.destination?.type)
-                            )
-                          : undefined
-                      }
-                      options={SyncModeOptions}
-                    />
-                    {setting.tips && (
-                      <InfoPopover
-                        tips={setting.tips}
-                        link={setting.helpfulLink}
-                      />
-                    )}
-                  </div>
-                }
-              />
             ) : (
               <RowWithTextField
                 key={id}

diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
@@ -155,12 +155,21 @@ export const handleCreateCDC = async (
     setMsg({ ok: false, msg: flowNameErr });
     return;
   }
+
   const tableNameMapping = reformattedTableMapping(rows);
   const isValid = validateCDCFields(tableNameMapping, setMsg, config);
   if (!isValid) return;
 
   config['tableMappings'] = tableNameMapping as TableMapping[];
   config['flowJobName'] = flowJobName;
+
+  if (config.destination?.type == DBType.POSTGRES) {
+    config.cdcSyncMode = QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT;
+    config.snapshotSyncMode = QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT;
+  } else {
+    config.cdcSyncMode = QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO;
+    config.snapshotSyncMode = QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO;
+  }
   setLoading(true);
   const statusMessage: UCreateMirrorResponse = await fetch('/api/mirrors/cdc', {
     method: 'POST',
@@ -220,6 +229,13 @@ export const handleCreateQRep = async (
   if (!isValid) return;
   config.flowJobName = flowJobName;
   config.query = query;
+
+  if (config.destinationPeer?.type == DBType.POSTGRES) {
+    config.syncMode = QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT;
+  } else {
+    config.syncMode = QRepSyncMode.QREP_SYNC_MODE_STORAGE_AVRO;
+  }
+
   setLoading(true);
   const statusMessage: UCreateMirrorResponse = await fetch(
     '/api/mirrors/qrep',

diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
@@ -1,4 +1,3 @@
-import { QRepSyncMode } from '@/grpc_generated/flow';
 import { CDCConfig } from '../../../dto/MirrorsDTO';
 import { MirrorSetting } from './common';
 export const cdcSettings: MirrorSetting[] = [
@@ -63,38 +62,14 @@ export const cdcSettings: MirrorSetting[] = [
     default: '4',
     type: 'number',
   },
-  {
-    label: 'Snapshot Sync Mode',
-    stateHandler: (value, setter) =>
-      setter((curr: CDCConfig) => ({
-        ...curr,
-        snapshotSyncMode:
-          (value as QRepSyncMode) || QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-      })),
-    tips: 'Specify whether you want the sync mode for initial load to be via SQL or by staging AVRO files. The default mode is SQL.',
-    default: 'SQL',
-    type: 'select',
-  },
-  {
-    label: 'CDC Sync Mode',
-    stateHandler: (value, setter) =>
-      setter((curr: CDCConfig) => ({
-        ...curr,
-        cdcSyncMode:
-          (value as QRepSyncMode) || QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-      })),
-    tips: 'Specify whether you want the sync mode for CDC to be via SQL or by staging AVRO files. The default mode is SQL.',
-    default: 'SQL',
-    type: 'select',
-  },
   {
     label: 'Snapshot Staging Path',
     stateHandler: (value, setter) =>
       setter((curr: CDCConfig) => ({
         ...curr,
         snapshotStagingPath: value as string | '',
       })),
-    tips: 'You can specify staging path if you have set the Snapshot sync mode as AVRO. For Snowflake as destination peer, this must be either empty or an S3 bucket URL.',
+    tips: 'You can specify staging path for Snapshot sync mode AVRO. For Snowflake as destination peer, this must be either empty or an S3 bucket URL. For BigQuery, this must be either empty or an existing GCS bucket name. In both cases, if empty, the local filesystem will be used.',
   },
   {
     label: 'CDC Staging Path',
@@ -103,7 +78,7 @@ export const cdcSettings: MirrorSetting[] = [
         ...curr,
         cdcStagingPath: (value as string) || '',
       })),
-    tips: 'You can specify staging path if you have set the CDC sync mode as AVRO. For Snowflake as destination peer, this must be either empty or an S3 bucket url',
+    tips: 'You can specify staging path for CDC sync mode AVRO. For Snowflake as destination peer, this must be either empty or an S3 bucket URL. For BigQuery, this must be either empty or an existing GCS bucket name. In both cases, if empty, the local filesystem will be used.',
   },
   {
     label: 'Soft Delete',

diff --git a/ui/app/mirrors/create/helpers/qrep.ts b/ui/app/mirrors/create/helpers/qrep.ts
@@ -1,6 +1,5 @@
 import {
   QRepConfig,
-  QRepSyncMode,
   QRepWriteMode,
   QRepWriteType,
 } from '@/grpc_generated/flow';
@@ -71,28 +70,14 @@ export const qrepSettings: MirrorSetting[] = [
     default: '4',
     type: 'number',
   },
-  {
-    label: 'Sync Mode',
-    stateHandler: (value, setter) =>
-      setter((curr: QRepConfig) => ({
-        ...curr,
-        syncMode:
-          (value as QRepSyncMode) || QRepSyncMode.QREP_SYNC_MODE_MULTI_INSERT,
-      })),
-    tips: 'Specify whether you want the sync mode to be via SQL or by staging AVRO files. The default mode is SQL.',
-    default: 'SQL',
-    type: 'select',
-  },
-
   {
     label: 'Staging Path',
     stateHandler: (value, setter) =>
       setter((curr: QRepConfig) => ({
         ...curr,
         stagingPath: (value as string) || '',
       })),
-    tips: `You can specify staging path if you have set the sync mode as AVRO. For Snowflake as destination peer.
-    If this starts with gs:// then it will be written to GCS.
+    tips: `You can specify staging path for sync mode AVRO. For Snowflake as destination peer:
     If this starts with s3:// then it will be written to S3.
     If nothing is specified then it will be written to local disk.`,
   },