set sort to dsc, fix select component width

PeerDB-io · Dec 11, 2023 · 52f9439 · 52f9439
1 parent a7b615f
commit 52f9439
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 53 deletions.
diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -137,21 +137,23 @@ export default function CreateMirrors() {
                     alignItems: 'center',
                   }}
                 >
-                  <ReactSelect
-                    placeholder={`Select the ${
-                      peerEnd === 'src' ? 'source' : 'destination'
-                    } peer`}
-                    onChange={(val, action) =>
-                      handlePeer(val, peerEnd as 'src' | 'dst', setConfig)
-                    }
-                    options={
-                      (peerEnd === 'src'
-                        ? peers.filter((peer) => peer.type == DBType.POSTGRES)
-                        : peers) ?? []
-                    }
-                    getOptionValue={getPeerValue}
-                    formatOptionLabel={getPeerLabel}
-                  />
+                  <div style={{ width: '100%' }}>
+                    <ReactSelect
+                      placeholder={`Select the ${
+                        peerEnd === 'src' ? 'source' : 'destination'
+                      } peer`}
+                      onChange={(val, action) =>
+                        handlePeer(val, peerEnd as 'src' | 'dst', setConfig)
+                      }
+                      options={
+                        (peerEnd === 'src'
+                          ? peers.filter((peer) => peer.type == DBType.POSTGRES)
+                          : peers) ?? []
+                      }
+                      getOptionValue={getPeerValue}
+                      formatOptionLabel={getPeerLabel}
+                    />
+                  </div>
                   <InfoPopover
                     tips={
                       'The peer from which we will be replicating data. Ensure the prerequisites for this peer are met.'

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -106,7 +106,7 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(allRows.length / ROWS_PER_PAGE);
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('asc');
+  const [sortDir, setSortDir] = useState<'asc' | 'dsc'>('dsc');
   const displayedRows = useMemo(() => {
     const shownRows = allRows.filter((row: any) =>
       row.tableName.toLowerCase().includes(searchQuery.toLowerCase())
@@ -156,7 +156,7 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
         title={<Label variant='headline'>Initial Copy</Label>}
         toolbar={{
           left: (
-            <>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
               <Button variant='normalBorderless' onClick={handlePrevPage}>
                 <Icon name='chevron_left' />
               </Button>
@@ -170,21 +170,27 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
               >
                 <Icon name='refresh' />
               </Button>
-              <ReactSelect
-                options={sortOptions}
-                onChange={(val, _) => {
-                  const sortVal =
-                    (val?.value as 'cloneStartTime' | 'avgTimePerPartition') ??
-                    'cloneStartTime';
-                  setSortField(sortVal);
-                }}
-                value={{
-                  value: sortField,
-                  label: sortOptions.find((opt) => opt.value === sortField)
-                    ?.label,
-                }}
-                defaultValue={{ value: 'cloneStartTime', label: 'Start Time' }}
-              />
+              <div style={{ width: '10em' }}>
+                <ReactSelect
+                  options={sortOptions}
+                  onChange={(val, _) => {
+                    const sortVal =
+                      (val?.value as
+                        | 'cloneStartTime'
+                        | 'avgTimePerPartition') ?? 'cloneStartTime';
+                    setSortField(sortVal);
+                  }}
+                  value={{
+                    value: sortField,
+                    label: sortOptions.find((opt) => opt.value === sortField)
+                      ?.label,
+                  }}
+                  defaultValue={{
+                    value: 'cloneStartTime',
+                    label: 'Start Time',
+                  }}
+                />
+              </div>
               <button
                 className='IconButton'
                 onClick={() => setSortDir('asc')}
@@ -201,7 +207,7 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
               >
                 <Icon name='arrow_downward' />
               </button>
-            </>
+            </div>
           ),
           right: (
             <SearchField

diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -104,7 +104,7 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
       title={<Label variant='headline'>CDC Syncs</Label>}
       toolbar={{
         left: (
-          <>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
             <Button variant='normalBorderless' onClick={handlePrevPage}>
               <Icon name='chevron_left' />
             </Button>
@@ -118,24 +118,26 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
             >
               <Icon name='refresh' />
             </Button>
-            <ReactSelect
-              options={sortOptions}
-              value={{
-                value: sortField,
-                label: sortOptions.find((opt) => opt.value === sortField)
-                  ?.label,
-              }}
-              onChange={(val, _) => {
-                const sortVal =
-                  (val?.value as
-                    | 'startTime'
-                    | 'endTime'
-                    | 'numRows'
-                    | 'batchId') ?? 'batchId';
-                setSortField(sortVal);
-              }}
-              defaultValue={{ value: 'batchId', label: 'Batch ID' }}
-            />
+            <div style={{ width: '10em' }}>
+              <ReactSelect
+                options={sortOptions}
+                value={{
+                  value: sortField,
+                  label: sortOptions.find((opt) => opt.value === sortField)
+                    ?.label,
+                }}
+                onChange={(val, _) => {
+                  const sortVal =
+                    (val?.value as
+                      | 'startTime'
+                      | 'endTime'
+                      | 'numRows'
+                      | 'batchId') ?? 'batchId';
+                  setSortField(sortVal);
+                }}
+                defaultValue={{ value: 'batchId', label: 'Batch ID' }}
+              />
+            </div>
             <button
               className='IconButton'
               onClick={() => setSortDir('asc')}
@@ -152,7 +154,7 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
             >
               <Icon name='arrow_downward' />
             </button>
-          </>
+          </div>
         ),
         right: (
           <SearchField

diff --git a/ui/components/SelectSource.tsx b/ui/components/SelectSource.tsx
@@ -37,6 +37,7 @@ export default function SelectSource({
 
   return (
     <ReactSelect
+      className='w-1/2'
       placeholder='Select a source'
       options={dbTypes}
       defaultValue={dbTypes.find((opt) => opt.value === peerType)}