Merge branch 'main' into composite-keys-v2

PeerDB-io · Oct 17, 2023 · ed793d4 · ed793d4
2 parents d130609 + 8cb21cf
commit ed793d4
Show file tree

Hide file tree

Showing 33 changed files with 493 additions and 252 deletions.
diff --git a/flow/connectors/snowflake/qrep_avro_sync.go b/flow/connectors/snowflake/qrep_avro_sync.go
@@ -265,31 +265,24 @@ func (sc *SnowflakeConnector) GetCopyTransformation(dstTableName string) (*CopyI
 
 	var transformations []string
 	var columnOrder []string
-	for col, colType := range colInfo.ColumnMap {
-		if col == "_PEERDB_IS_DELETED" {
+	for colName, colType := range colInfo.ColumnMap {
+		if colName == "_PEERDB_IS_DELETED" {
 			continue
 		}
-		colName := strings.ToLower(col)
-		// No need to quote raw table columns
-		if strings.Contains(dstTableName, "_PEERDB_RAW") {
-			columnOrder = append(columnOrder, colName)
-		} else {
-			columnOrder = append(columnOrder, fmt.Sprintf("\"%s\"", colName))
-		}
-
+		columnOrder = append(columnOrder, fmt.Sprintf("\"%s\"", colName))
 		switch colType {
 		case "GEOGRAPHY":
 			transformations = append(transformations,
-				fmt.Sprintf("TO_GEOGRAPHY($1:\"%s\"::string) AS \"%s\"", colName, colName))
+				fmt.Sprintf("TO_GEOGRAPHY($1:\"%s\"::string, true) AS \"%s\"", strings.ToLower(colName), colName))
 		case "GEOMETRY":
 			transformations = append(transformations,
-				fmt.Sprintf("TO_GEOMETRY($1:\"%s\"::string) AS \"%s\"", colName, colName))
+				fmt.Sprintf("TO_GEOMETRY($1:\"%s\"::string, true) AS \"%s\"", strings.ToLower(colName), colName))
 		case "NUMBER":
 			transformations = append(transformations,
-				fmt.Sprintf("$1:\"%s\" AS \"%s\"", colName, colName))
+				fmt.Sprintf("$1:\"%s\" AS \"%s\"", strings.ToLower(colName), colName))
 		default:
 			transformations = append(transformations,
-				fmt.Sprintf("($1:\"%s\")::%s AS \"%s\"", colName, colType, colName))
+				fmt.Sprintf("($1:\"%s\")::%s AS \"%s\"", strings.ToLower(colName), colType, colName))
 		}
 	}
 	transformationSQL := strings.Join(transformations, ",")

diff --git a/ui/README.md b/ui/README.md
@@ -36,15 +36,3 @@ yarn storybook
 Open [http://localhost:6000](http://localhost:6000) with your browser to see the result.
 
 The stories and their corresponding components resides inside the `lib` folder.
-
-## Storybook Github pages
-
-The Storybook in this repositories Github pages at [Storybook](https://peerdb-io.github.io/peerdb-cloud-template).
-
-To deploy a new version of Storybook to Github pages run the script
-
-```bash
-yarn storybook:deploy
-```
-
-It will automatically run the storybook build, push the content to the branch `gh-pages` to automatically deply the newly built Storybook to Github pages.
diff --git a/ui/app/api/mirrors/status/route.ts b/ui/app/api/mirrors/status/route.ts
diff --git a/ui/app/api/peers/route.ts b/ui/app/api/peers/route.ts
@@ -1,5 +1,8 @@
-import { UCreatePeerResponse, UValidatePeerResponse } from '@/app/dto/PeersDTO';
-import { PeerConfig } from '@/app/peers/create/configuration/types';
+import {
+  PeerConfig,
+  UCreatePeerResponse,
+  UValidatePeerResponse,
+} from '@/app/dto/PeersDTO';
 import prisma from '@/app/utils/prisma';
 import {
   DBType,

diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts
@@ -1,3 +1,5 @@
+import { PostgresConfig, SnowflakeConfig } from '@/grpc_generated/peers';
+
 export type UValidatePeerResponse = {
   valid: boolean;
   message: string;
@@ -7,3 +9,5 @@ export type UCreatePeerResponse = {
   created: boolean;
   message: string;
 };
+
+export type PeerConfig = PostgresConfig | SnowflakeConfig;
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { AppThemeProvider, StyledComponentsRegistry } from '../lib/AppTheme';
 
 export const metadata: Metadata = {
-  title: 'Peerdb Cloud Template',
+  title: 'Peerdb UI',
 };
 
 export default function RootLayout({

diff --git a/ui/app/mirrors/create/config.tsx b/ui/app/mirrors/create/config.tsx
@@ -96,7 +96,7 @@ export default function MirrorConfig(props: MirrorConfigProps) {
                     onValueChange={(val) => handleChange(val, setting)}
                   >
                     {(setting.label.includes('Peer')
-                      ? props.peers?.map((peer) => peer.name)
+                      ? (props.peers ?? []).map((peer) => peer.name)
                       : ['avro', 'sql']
                     ).map((item, id) => {
                       return (

diff --git a/ui/app/mirrors/create/handlers.ts b/ui/app/mirrors/create/handlers.ts
@@ -1,5 +1,4 @@
 import { UCreateMirrorResponse } from '@/app/dto/MirrorsDTO';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
 import { Dispatch, SetStateAction } from 'react';
 import { MirrorConfig, TableMapRow } from '../types';
 import { cdcSchema, tableMappingSchema } from './schema';
@@ -47,7 +46,7 @@ export const handleCreate = async (
     }>
   >,
   setLoading: Dispatch<SetStateAction<boolean>>,
-  router: AppRouterInstance
+  route: RouteCallback
 ) => {
   if (!flowJobName) {
     setMsg({ ok: false, msg: 'Mirror name is required' });
@@ -71,6 +70,6 @@ export const handleCreate = async (
     return;
   }
   setMsg({ ok: true, msg: 'CDC Mirror created successfully' });
-  router.push('/mirrors');
+  route();
   setLoading(false);
 };
diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -35,13 +35,19 @@ export default function CreateMirrors() {
   const [rows, setRows] = useState<TableMapRow[]>([
     { source: '', destination: '' },
   ]);
+
   useEffect(() => {
     fetch('/api/peers')
       .then((res) => res.json())
       .then((res) => {
-        setPeers(res.peers);
+        setPeers(res);
       });
   }, []);
+
+  let listPeersPage = () => {
+    router.push('/peers');
+  };
+
   return (
     <LayoutMain width='xxLarge' alignSelf='center' justifySelf='center'>
       <Panel>
@@ -112,7 +118,7 @@ export default function CreateMirrors() {
                 config,
                 setFormMessage,
                 setLoading,
-                router
+                listPeersPage
               )
             }
           >

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -5,35 +5,19 @@ import {
   QRepMirrorStatus,
   SnapshotStatus,
 } from '@/grpc_generated/route';
-import { Badge } from '@/lib/Badge';
 import { Button } from '@/lib/Button';
 import { Checkbox } from '@/lib/Checkbox';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressBar } from '@/lib/ProgressBar';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
+import * as Tabs from '@radix-ui/react-tabs';
 import moment, { Duration, Moment } from 'moment';
 import Link from 'next/link';
-
-const Badges = [
-  <Badge variant='positive' key={1}>
-    <Icon name='play_circle' />
-    Active
-  </Badge>,
-  <Badge variant='warning' key={1}>
-    <Icon name='pause_circle' />
-    Paused
-  </Badge>,
-  <Badge variant='destructive' key={1}>
-    <Icon name='dangerous' />
-    Broken
-  </Badge>,
-  <Badge variant='normal' key={1}>
-    <Icon name='pending' />
-    Incomplete
-  </Badge>,
-];
+import { useState } from 'react';
+import styled from 'styled-components';
+import CDCDetails from './cdcDetails';
 
 class TableCloneSummary {
   flowJobName: string;
@@ -112,7 +96,7 @@ type SnapshotStatusProps = {
 };
 const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   <Table
-    title={<Label variant='headline'>Initial Snapshot</Label>}
+    title={<Label variant='headline'>Initial Copy</Label>}
     toolbar={{
       left: (
         <>
@@ -125,12 +109,6 @@ const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
           <Button variant='normalBorderless'>
             <Icon name='refresh' />
           </Button>
-          <Button variant='normalBorderless'>
-            <Icon name='help' />
-          </Button>
-          <Button variant='normalBorderless' disabled>
-            <Icon name='download' />
-          </Button>
         </>
       ),
       right: <SearchField placeholder='Search' />,
@@ -179,13 +157,69 @@ const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   </Table>
 );
 
+const Trigger = styled(({ isActive, ...props }) => (
+  <Tabs.Trigger {...props} />
+))<{ isActive?: boolean }>`
+  background-color: ${({ theme, isActive }) =>
+    isActive ? theme.colors.accent.surface.selected : 'white'};
+
+  font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.accent.text.highContrast};
+  }
+`;
+
 type CDCMirrorStatusProps = {
   cdc: CDCMirrorStatus;
+  syncStatusChild?: React.ReactNode;
 };
-export function CDCMirror({ cdc }: CDCMirrorStatusProps) {
+export function CDCMirror({ cdc, syncStatusChild }: CDCMirrorStatusProps) {
+  const [selectedTab, setSelectedTab] = useState<string>('tab1');
+
   let snapshot = <></>;
   if (cdc.snapshotStatus) {
     snapshot = <SnapshotStatusTable status={cdc.snapshotStatus} />;
   }
-  return <>{snapshot}</>;
+
+  return (
+    <Tabs.Root
+      className='flex flex-col w-full'
+      defaultValue={selectedTab}
+      onValueChange={setSelectedTab}
+    >
+      <Tabs.List className='flex border-b' aria-label='Details'>
+        <Trigger
+          isActive={selectedTab === 'tab1'}
+          className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
+          value='tab1'
+        >
+          Details
+        </Trigger>
+        <Trigger
+          isActive={selectedTab === 'tab2'}
+          className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
+          value='tab2'
+        >
+          Sync Status
+        </Trigger>
+        <Trigger
+          isActive={selectedTab === 'tab3'}
+          className='flex-1 px-5 h-[45px] flex items-center justify-center text-sm focus:shadow-outline focus:outline-none'
+          value='tab3'
+        >
+          Initial Copy
+        </Trigger>
+      </Tabs.List>
+      <Tabs.Content className='p-5 rounded-b-md' value='tab1'>
+        <CDCDetails config={cdc.config} />
+      </Tabs.Content>
+      <Tabs.Content className='p-5 rounded-b-md' value='tab2'>
+        {syncStatusChild}
+      </Tabs.Content>
+      <Tabs.Content className='p-5 rounded-b-md' value='tab3'>
+        {snapshot}
+      </Tabs.Content>
+    </Tabs.Root>
+  );
 }
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx b/ui/app/mirrors/edit/[mirrorId]/cdcDetails.tsx
@@ -0,0 +1,35 @@
+import { FlowConnectionConfigs } from '@/grpc_generated/flow';
+
+type CDCDetailsProps = {
+  config: FlowConnectionConfigs | undefined;
+};
+
+export default function CDCDetails({ config }: CDCDetailsProps) {
+  if (!config) {
+    return <div className='text-red-500'>No configuration provided</div>;
+  }
+
+  return (
+    <div className='p-4 rounded-md'>
+      <h2 className='text-xl font-semibold mb-4'>CDC Details</h2>
+      <div className='overflow-x-auto'>
+        <table className='min-w-full divide-y divide-gray-300'>
+          <tbody>
+            <tr>
+              <td className='px-4 py-2 font-medium'>Source</td>
+              <td className='px-4 py-2'>{config.source?.name || '-'}</td>
+            </tr>
+            <tr>
+              <td className='px-4 py-2 font-medium'>Destination</td>
+              <td className='px-4 py-2'>{config.destination?.name || '-'}</td>
+            </tr>
+            <tr>
+              <td className='px-4 py-2 font-medium'>Flow Job Name</td>
+              <td className='px-4 py-2'>{config.flowJobName}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}