Bunch of UI improvements (#1456)

## UI Usability Changes This PR performs a handful of improvements, fixes and changes across the board for our UI. ### Create Mirror Page - Moves `Snapshot Number of Tables In Parallel` , `CDC Staging Path` ,`Snapshot Staging Path` to **Advanced Settings** - Publication name is now a dropdown field and is mandatory. - Table picker now shows the size of every table <img width="1491" alt="Screenshot 2024-03-10 at 6 59 42 PM" src="https://github.com/PeerDB-io/peerdb/assets/65964360/bb67d946-1445-44e4-a076-6822ae2d6964"> <img width="1240" alt="Screenshot 2024-03-10 at 6 01 11 PM" src="https://github.com/PeerDB-io/peerdb/assets/65964360/2107f5e3-7973-4d21-be13-c7b0fe4eea81"> ### Edit Mirror Page - Added a banner regarding adding tables. This banner pops up only when atleast one table has been selected for addition. - Made Edit and Back button float to reduce scrolling hassle <img width="1491" alt="Screenshot 2024-03-10 at 6 59 20 PM" src="https://github.com/PeerDB-io/peerdb/assets/65964360/94fbffdb-3cf9-4964-9fd1-bc31d18de092"> ### Create Peer Pages - Dropdown now has options for RDS, Azure and GCP - Errors now show in toast bars - Added link to corresponding PeerDB doc. <img width="1016" alt="Screenshot 2024-03-10 at 7 46 11 PM" src="https://github.com/PeerDB-io/peerdb/assets/65964360/c0cb59ca-c34e-4a33-871c-7865df75989a"> <img width="557" alt="Screenshot 2024-03-10 at 7 46 30 PM" src="https://github.com/PeerDB-io/peerdb/assets/65964360/481e9a7c-17ce-4416-90c3-7929a6adc63f">
PeerDB-io · Mar 10, 2024 · 9757a31 · 9757a31
1 parent 5970cc0
commit 9757a31
Show file tree

Hide file tree

Showing 24 changed files with 342 additions and 105 deletions.
diff --git a/flow/cmd/peer_data.go b/flow/cmd/peer_data.go
@@ -92,7 +92,8 @@ func (h *FlowRequestHandler) GetTablesInSchema(
     CASE
         WHEN con.contype = 'p' OR t.relreplident = 'i' OR t.relreplident = 'f' THEN true
         ELSE false
-    END AS can_mirror
+    END AS can_mirror,
+	pg_size_pretty(pg_total_relation_size(quote_ident(n.nspname) || '.' || quote_ident(t.relname))) :: text AS table_size
 	FROM
 		pg_class t
 	LEFT JOIN
@@ -108,6 +109,7 @@ func (h *FlowRequestHandler) GetTablesInSchema(
     can_mirror DESC;
 `, req.SchemaName)
 	if err != nil {
+		slog.Info("failed to fetch publications", slog.Any("error", err))
 		return &protos.SchemaTablesResponse{Tables: nil}, err
 	}
 
@@ -116,10 +118,15 @@ func (h *FlowRequestHandler) GetTablesInSchema(
 	for rows.Next() {
 		var table pgtype.Text
 		var hasPkeyOrReplica pgtype.Bool
-		err := rows.Scan(&table, &hasPkeyOrReplica)
+		var tableSize pgtype.Text
+		err := rows.Scan(&table, &hasPkeyOrReplica, &tableSize)
 		if err != nil {
 			return &protos.SchemaTablesResponse{Tables: nil}, err
 		}
+		var sizeOfTable string
+		if tableSize.Valid {
+			sizeOfTable = tableSize.String
+		}
 		canMirror := false
 		if hasPkeyOrReplica.Valid && hasPkeyOrReplica.Bool {
 			canMirror = true
@@ -128,8 +135,14 @@ func (h *FlowRequestHandler) GetTablesInSchema(
 		tables = append(tables, &protos.TableResponse{
 			TableName: table.String,
 			CanMirror: canMirror,
+			TableSize: sizeOfTable,
 		})
 	}
+
+	if err := rows.Err(); err != nil {
+		slog.Info("failed to fetch publications", slog.Any("error", err))
+		return &protos.SchemaTablesResponse{Tables: nil}, err
+	}
 	return &protos.SchemaTablesResponse{Tables: tables}, nil
 }
 
@@ -325,3 +338,26 @@ func (h *FlowRequestHandler) GetStatInfo(
 		StatData: statInfoRows,
 	}, nil
 }
+
+func (h *FlowRequestHandler) GetPublications(
+	ctx context.Context,
+	req *protos.PostgresPeerActivityInfoRequest,
+) (*protos.PeerPublicationsResponse, error) {
+	tunnel, peerConn, err := h.getConnForPGPeer(ctx, req.PeerName)
+	if err != nil {
+		return &protos.PeerPublicationsResponse{PublicationNames: nil}, err
+	}
+	defer tunnel.Close()
+	defer peerConn.Close(ctx)
+
+	rows, err := peerConn.Query(ctx, "select pubname from pg_publication;")
+	if err != nil {
+		return &protos.PeerPublicationsResponse{PublicationNames: nil}, err
+	}
+
+	publications, err := pgx.CollectRows[string](rows, pgx.RowTo)
+	if err != nil {
+		return &protos.PeerPublicationsResponse{PublicationNames: nil}, err
+	}
+	return &protos.PeerPublicationsResponse{PublicationNames: publications}, nil
+}
diff --git a/protos/route.proto b/protos/route.proto
@@ -109,6 +109,10 @@ message PeerSchemasResponse {
   repeated string schemas = 1;
 }
 
+message PeerPublicationsResponse {
+  repeated string publication_names = 1;
+}
+
 message SchemaTablesRequest {
   string peer_name = 1;
   string schema_name = 2;
@@ -121,6 +125,7 @@ message SchemaTablesResponse {
 message TableResponse {
   string table_name = 1;
   bool can_mirror = 2;
+  string table_size = 3;
 }
 
 message AllTablesResponse {
@@ -265,6 +270,10 @@ service FlowService {
     option (google.api.http) = { get: "/v1/peers/schemas" };
   }
 
+  rpc GetPublications(PostgresPeerActivityInfoRequest) returns (PeerPublicationsResponse) {
+    option (google.api.http) = { get: "/v1/peers/publications" };
+  }
+
   rpc GetTablesInSchema(SchemaTablesRequest) returns (SchemaTablesResponse) {
     option (google.api.http) = { get: "/v1/peers/tables" };
   }

diff --git a/ui/app/api/peers/publications/route.ts b/ui/app/api/peers/publications/route.ts
@@ -0,0 +1,22 @@
+import { UPublicationsResponse } from '@/app/dto/PeersDTO';
+import { PeerPublicationsResponse } from '@/grpc_generated/route';
+import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { peerName } = body;
+  const flowServiceAddr = GetFlowHttpAddressFromEnv();
+  try {
+    const publicationList: PeerPublicationsResponse = await fetch(
+      `${flowServiceAddr}/v1/peers/publications?peer_name=${peerName}`
+    ).then((res) => {
+      return res.json();
+    });
+    let response: UPublicationsResponse = {
+      publicationNames: publicationList.publicationNames,
+    };
+    return new Response(JSON.stringify(response));
+  } catch (e) {
+    console.log(e);
+  }
+}
diff --git a/ui/app/api/peers/schemas/route.ts b/ui/app/api/peers/schemas/route.ts
@@ -14,11 +14,6 @@ export async function POST(request: Request) {
     let response: USchemasResponse = {
       schemas: schemaList.schemas,
     };
-    if (schemaList.message === 'no rows in result set') {
-      response = {
-        schemas: [],
-      };
-    }
     return new Response(JSON.stringify(response));
   } catch (e) {
     console.log(e);

diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts
@@ -26,6 +26,7 @@ export type TableMapRow = {
   exclude: Set<string>;
   selected: boolean;
   canMirror: boolean;
+  tableSize: string;
 };
 
 export type SyncStatusRow = {

diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts
@@ -56,3 +56,7 @@ export type SlotLagPoint = {
   updatedAt: string;
   slotSize?: string;
 };
+
+export type UPublicationsResponse = {
+  publicationNames: string[];
+};
diff --git a/ui/app/mirrors/[mirrorId]/edit/page.tsx b/ui/app/mirrors/[mirrorId]/edit/page.tsx
@@ -11,13 +11,15 @@ import { Label } from '@/lib/Label';
 import { RowWithTextField } from '@/lib/Layout';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import { TextField } from '@/lib/TextField';
+import { Callout } from '@tremor/react';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import TableMapping from '../../create/cdc/tablemapping';
 import { reformattedTableMapping } from '../../create/handlers';
 import { blankCDCSetting } from '../../create/helpers/common';
+import * as styles from '../../create/styles';
 type EditMirrorProps = {
   params: { mirrorId: string };
 };
@@ -120,8 +122,6 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
 
   return (
     <div>
-      <Label variant='title3'>Edit {mirrorId}</Label>
-
       <RowWithTextField
         key={1}
         label={<Label>{'Pull Batch Size'} </Label>}
@@ -174,6 +174,22 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
         }
       />
 
+      <Label variant='action' as='label' style={{ marginTop: '1rem' }}>
+        Adding Tables
+      </Label>
+      {!isNotPaused && rows.some((row) => row.selected === true) && (
+        <Callout
+          title='Note on adding tables'
+          color={'gray'}
+          style={{ marginTop: '1rem' }}
+        >
+          CDC will be put on hold until initial load for these added tables have
+          been completed.
+          <br></br>
+          The <b>replication slot will grow</b> during this period.
+        </Callout>
+      )}
+
       <TableMapping
         sourcePeerName={mirrorState.cdcStatus?.config?.source?.name || ''}
         peerType={mirrorState.cdcStatus?.config?.destination?.type}
@@ -182,19 +198,23 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
         omitAdditionalTablesMapping={omitAdditionalTablesMapping}
       />
 
-      {isNotPaused ? (
-        <Label>Mirror can only be edited while paused.</Label>
-      ) : (
-        <Label>Editing mirror will automatically unpause it.</Label>
+      {isNotPaused && (
+        <Callout title='' color={'rose'} style={{ marginTop: '1rem' }}>
+          Mirror can only be edited while paused.
+        </Callout>
       )}
-      <div style={{ display: 'flex' }}>
+
+      <div style={styles.MirrorButtonContainer}>
         <Button
-          style={{
-            marginTop: '1rem',
-            marginRight: '1rem',
-            width: '8%',
-            height: '2.5rem',
+          style={styles.MirrorButtonStyle}
+          onClick={() => {
+            push(`/mirrors/${mirrorId}`);
           }}
+        >
+          Back
+        </Button>
+        <Button
+          style={styles.MirrorButtonStyle}
           variant='normalSolid'
           disabled={loading || isNotPaused}
           onClick={sendFlowStateChangeRequest}
@@ -205,14 +225,6 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
             'Edit Mirror'
           )}
         </Button>
-        <Button
-          style={{ marginTop: '1rem', width: '8%', height: '2.5rem' }}
-          onClick={() => {
-            push(`/mirrors/${mirrorId}`);
-          }}
-        >
-          Back
-        </Button>
       </div>
       <ToastContainer />
     </div>

diff --git a/ui/app/mirrors/create/cdc/cdc.tsx b/ui/app/mirrors/create/cdc/cdc.tsx
@@ -2,8 +2,9 @@
 import { DBType } from '@/grpc_generated/peers';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
-import { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { CDCConfig, MirrorSetter, TableMapRow } from '../../../dto/MirrorsDTO';
+import { fetchPublications } from '../handlers';
 import { MirrorSetting } from '../helpers/common';
 import CDCField from './fields';
 import TableMapping from './tablemapping';
@@ -36,6 +37,7 @@ export default function CDCConfigForm({
   rows,
   setRows,
 }: MirrorConfigProps) {
+  const [publications, setPublications] = useState<string[]>();
   const [show, setShow] = useState(false);
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean = val;
@@ -64,7 +66,26 @@ export default function CDCConfigForm({
     return true;
   };
 
-  if (mirrorConfig.source != undefined && mirrorConfig.destination != undefined)
+  const optionsForField = (setting: MirrorSetting) => {
+    switch (setting.label) {
+      case 'Publication Name':
+        return publications;
+      default:
+        return [];
+    }
+  };
+
+  useEffect(() => {
+    fetchPublications(mirrorConfig.source?.name || '').then((pubs) => {
+      setPublications(pubs);
+    });
+  }, [mirrorConfig.source?.name]);
+
+  if (
+    mirrorConfig.source != undefined &&
+    mirrorConfig.destination != undefined &&
+    publications != undefined
+  )
     return (
       <>
         {normalSettings.map((setting, id) => {
@@ -74,6 +95,7 @@ export default function CDCConfigForm({
                 key={id}
                 handleChange={handleChange}
                 setting={setting}
+                options={optionsForField(setting)}
               />
             )
           );
@@ -101,9 +123,10 @@ export default function CDCConfigForm({
           advancedSettings.map((setting, id) => {
             return (
               <CDCField
-                key={id}
+                key={setting.label}
                 handleChange={handleChange}
                 setting={setting}
+                options={optionsForField(setting)}
               />
             );
           })}

diff --git a/ui/app/mirrors/create/cdc/fields.tsx b/ui/app/mirrors/create/cdc/fields.tsx
@@ -1,21 +1,29 @@
 'use client';
+import SelectTheme from '@/app/styles/select';
 import { RequiredIndicator } from '@/components/RequiredIndicator';
 import { Label } from '@/lib/Label';
-import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
+import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
+import ReactSelect from 'react-select';
 import { InfoPopover } from '../../../../components/InfoPopover';
 import { MirrorSetting } from '../helpers/common';
 
 interface FieldProps {
   setting: MirrorSetting;
   handleChange: (val: string | boolean, setting: MirrorSetting) => void;
+  options?: string[];
 }
 
-const CDCField = ({ setting, handleChange }: FieldProps) => {
+const CDCField = ({ setting, handleChange, options }: FieldProps) => {
   return setting.type === 'switch' ? (
     <RowWithSwitch
-      label={<Label>{setting.label}</Label>}
+      label={
+        <Label>
+          {setting.label}
+          {RequiredIndicator(setting.required)}
+        </Label>
+      }
       action={
         <div
           style={{
@@ -34,6 +42,40 @@ const CDCField = ({ setting, handleChange }: FieldProps) => {
         </div>
       }
     />
+  ) : setting.type === 'select' ? (
+    <RowWithSelect
+      label={
+        <Label>
+          {setting.label}
+          {RequiredIndicator(setting.required)}
+        </Label>
+      }
+      action={
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ width: '100%' }}>
+            <ReactSelect
+              placeholder={`Select a publication`}
+              onChange={(val, action) =>
+                val && handleChange(val.option, setting)
+              }
+              options={options?.map((option) => ({ option, label: option }))}
+              getOptionLabel={(option) => option.label}
+              getOptionValue={(option) => option.option}
+              theme={SelectTheme}
+            />
+          </div>
+          {setting.tips && (
+            <InfoPopover tips={setting.tips} link={setting.helpfulLink} />
+          )}
+        </div>
+      }
+    />
   ) : (
     <RowWithTextField
       label={