Revert "Bunch of UI improvements" (#1458)

Reverts #1456
PeerDB-io · Mar 10, 2024 · 7d6c489 · 7d6c489
1 parent 9757a31
commit 7d6c489
Show file tree

Hide file tree

Showing 24 changed files with 105 additions and 342 deletions.
diff --git a/flow/cmd/peer_data.go b/flow/cmd/peer_data.go
@@ -92,8 +92,7 @@ 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,
-	pg_size_pretty(pg_total_relation_size(quote_ident(n.nspname) || '.' || quote_ident(t.relname))) :: text AS table_size
+    END AS can_mirror
 	FROM
 		pg_class t
 	LEFT JOIN
@@ -109,7 +108,6 @@ 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
 	}
 
@@ -118,15 +116,10 @@ func (h *FlowRequestHandler) GetTablesInSchema(
 	for rows.Next() {
 		var table pgtype.Text
 		var hasPkeyOrReplica pgtype.Bool
-		var tableSize pgtype.Text
-		err := rows.Scan(&table, &hasPkeyOrReplica, &tableSize)
+		err := rows.Scan(&table, &hasPkeyOrReplica)
 		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
@@ -135,14 +128,8 @@ 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
 }
 
@@ -338,26 +325,3 @@ 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,10 +109,6 @@ message PeerSchemasResponse {
   repeated string schemas = 1;
 }
 
-message PeerPublicationsResponse {
-  repeated string publication_names = 1;
-}
-
 message SchemaTablesRequest {
   string peer_name = 1;
   string schema_name = 2;
@@ -125,7 +121,6 @@ message SchemaTablesResponse {
 message TableResponse {
   string table_name = 1;
   bool can_mirror = 2;
-  string table_size = 3;
 }
 
 message AllTablesResponse {
@@ -270,10 +265,6 @@ 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
diff --git a/ui/app/api/peers/schemas/route.ts b/ui/app/api/peers/schemas/route.ts
@@ -14,6 +14,11 @@ 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,7 +26,6 @@ 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,7 +56,3 @@ 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,15 +11,13 @@ 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 };
 };
@@ -122,6 +120,8 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
 
   return (
     <div>
+      <Label variant='title3'>Edit {mirrorId}</Label>
+
       <RowWithTextField
         key={1}
         label={<Label>{'Pull Batch Size'} </Label>}
@@ -174,22 +174,6 @@ 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}
@@ -198,23 +182,19 @@ const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
         omitAdditionalTablesMapping={omitAdditionalTablesMapping}
       />
 
-      {isNotPaused && (
-        <Callout title='' color={'rose'} style={{ marginTop: '1rem' }}>
-          Mirror can only be edited while paused.
-        </Callout>
+      {isNotPaused ? (
+        <Label>Mirror can only be edited while paused.</Label>
+      ) : (
+        <Label>Editing mirror will automatically unpause it.</Label>
       )}
-
-      <div style={styles.MirrorButtonContainer}>
+      <div style={{ display: 'flex' }}>
         <Button
-          style={styles.MirrorButtonStyle}
-          onClick={() => {
-            push(`/mirrors/${mirrorId}`);
+          style={{
+            marginTop: '1rem',
+            marginRight: '1rem',
+            width: '8%',
+            height: '2.5rem',
           }}
-        >
-          Back
-        </Button>
-        <Button
-          style={styles.MirrorButtonStyle}
           variant='normalSolid'
           disabled={loading || isNotPaused}
           onClick={sendFlowStateChangeRequest}
@@ -225,6 +205,14 @@ 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,9 +2,8 @@
 import { DBType } from '@/grpc_generated/peers';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, 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';
@@ -37,7 +36,6 @@ 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;
@@ -66,26 +64,7 @@ export default function CDCConfigForm({
     return true;
   };
 
-  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
-  )
+  if (mirrorConfig.source != undefined && mirrorConfig.destination != undefined)
     return (
       <>
         {normalSettings.map((setting, id) => {
@@ -95,7 +74,6 @@ export default function CDCConfigForm({
                 key={id}
                 handleChange={handleChange}
                 setting={setting}
-                options={optionsForField(setting)}
               />
             )
           );
@@ -123,10 +101,9 @@ export default function CDCConfigForm({
           advancedSettings.map((setting, id) => {
             return (
               <CDCField
-                key={setting.label}
+                key={id}
                 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,29 +1,21 @@
 'use client';
-import SelectTheme from '@/app/styles/select';
 import { RequiredIndicator } from '@/components/RequiredIndicator';
 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 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, options }: FieldProps) => {
+const CDCField = ({ setting, handleChange }: FieldProps) => {
   return setting.type === 'switch' ? (
     <RowWithSwitch
-      label={
-        <Label>
-          {setting.label}
-          {RequiredIndicator(setting.required)}
-        </Label>
-      }
+      label={<Label>{setting.label}</Label>}
       action={
         <div
           style={{
@@ -42,40 +34,6 @@ const CDCField = ({ setting, handleChange, options }: 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={