Skip to content

Commit

Permalink
UI for CH column settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amogh-Bharadwaj
Amogh-Bharadwaj committed Sep 5, 2024
1 parent c1f5982 commit 66b1734
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 57 deletions.
12 changes: 8 additions & 4 deletions flow/connectors/clickhouse/normalize.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,15 @@ func generateCreateTableSQLForNormalizedTable(
}

if colType == qvalue.QValueKindNumeric {
precision, scale := datatypes.GetNumericTypeForWarehouse(column.TypeModifier, datatypes.ClickHouseNumericCompatibility{})
if column.Nullable {
stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(DECIMAL(%d, %d)), ", dstColName, precision, scale))
if clickhouseType != "" && clickhouseType != "Decimal128(9)" {
stmtBuilder.WriteString(fmt.Sprintf("`%s` %s, ", dstColName, clickhouseType))
} else {
stmtBuilder.WriteString(fmt.Sprintf("`%s` DECIMAL(%d, %d), ", dstColName, precision, scale))
precision, scale := datatypes.GetNumericTypeForWarehouse(column.TypeModifier, datatypes.ClickHouseNumericCompatibility{})
if column.Nullable {
stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(DECIMAL(%d, %d)), ", dstColName, precision, scale))
} else {
stmtBuilder.WriteString(fmt.Sprintf("`%s` DECIMAL(%d, %d), ", dstColName, precision, scale))
}
}
} else if tableSchema.NullableEnabled && column.Nullable && !colType.IsArray() {
stmtBuilder.WriteString(fmt.Sprintf("`%s` Nullable(%s), ", dstColName, clickhouseType))
Expand Down
197 changes: 154 additions & 43 deletions ui/app/mirrors/create/cdc/columnbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
'use client';
import { TableMapRow } from '@/app/dto/MirrorsDTO';
import { Button } from '@/lib/Button';
import { Checkbox } from '@/lib/Checkbox';
import { Icon } from '@/lib/Icon';
import { Label } from '@/lib/Label';
import { RowWithCheckbox } from '@/lib/Layout';
import { TextField } from '@/lib/TextField';
import { Dispatch, SetStateAction } from 'react';
import { Divider } from '@tremor/react';
import { Dispatch, SetStateAction, useState } from 'react';

interface ColumnProps {
columns: string[];
column: string;
tableRow: TableMapRow;
rows: TableMapRow[];
setRows: Dispatch<SetStateAction<TableMapRow[]>>;
showOrdering: boolean;
showColumnSettings: boolean;
}
export default function ColumnBox({
columns,
column,
tableRow,
rows,
setRows,
showOrdering,
showColumnSettings,
}: ColumnProps) {
const [show, setShow] = useState(false);
const handleColumnExclusion = (column: string, include: boolean) => {
const source = tableRow.source;
const currRows = [...rows];
Expand Down Expand Up @@ -65,35 +69,119 @@ export default function ColumnBox({
}
};

return columns.map((column) => {
const [columnName, columnType, isPkeyStr] = column.split(':');
const isPkey = isPkeyStr === 'true';
return (
<RowWithCheckbox
key={columnName}
label={
<Label
as='label'
style={{
fontSize: 13,
display: 'flex',
alignItems: 'center',
}}
const handleColumnTypeChange = (column: string, type: string) => {
const source = tableRow.source;
const currRows = [...rows];
const rowIndex = currRows.findIndex((row) => row.source === source);
if (rowIndex !== -1) {
const sourceRow = currRows[rowIndex];
const columns = [...sourceRow.columns];
const colIndex = columns.findIndex((col) => col.sourceName === column);
if (colIndex !== -1) {
columns[colIndex] = {
...columns[colIndex],
destinationType: type,
};
} else {
columns.push({
sourceName: column,
destinationName: '',
destinationType: type,
ordering: 0,
});
}
currRows[rowIndex] = {
...sourceRow,
columns,
};
setRows(currRows);
}
};

const [columnName, columnType, isPkeyStr] = column?.split(':');
const isPkey = isPkeyStr === 'true';
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
rowGap: '0.5rem',
marginBottom: '0.5rem',
minWidth: '20%',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<RowWithCheckbox
key={columnName}
label={
<Label
as='label'
style={{
fontSize: 13,
display: 'flex',
alignItems: 'center',
}}
>
{columnName}
<p
style={{
marginLeft: '0.5rem',
color: 'gray',
}}
>
{columnType}
</p>
</Label>
}
action={
<Checkbox
style={{ cursor: 'pointer' }}
disabled={isPkey}
checked={!tableRow.exclude.has(columnName)}
onCheckedChange={(state: boolean) =>
handleColumnExclusion(columnName, state)
}
/>
}
/>
{showColumnSettings && (
<Button
variant='peer'
style={{ padding: 0 }}
onClick={() => setShow((prev) => !prev)}
>
{columnName}
<p
<Label as='label' style={{ fontSize: 12 }}>
{' '}
Configure{' '}
</Label>
<Icon name='arrow_drop_down' />
</Button>
)}
</div>
{show && showColumnSettings && (
<div style={{ padding: '4px 8px' }}>
{!isPkey && (
<div
style={{
marginLeft: '0.5rem',
color: 'gray',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
columnGap: '1rem',
}}
>
{columnType}
</p>
{showOrdering && !isPkey && (
<div>
<p style={{ fontSize: 13 }}>Ordering</p>
</div>
<TextField
variant='simple'
type='number'
style={{ width: '3rem', marginLeft: '1rem', fontSize: 13 }}
style={{ fontSize: 13, width: '3rem' }}
value={
tableRow.columns.find((col) => col.sourceName === columnName)
?.ordering ?? 0
Expand All @@ -102,20 +190,43 @@ export default function ColumnBox({
handleColumnOrdering(columnName, +e.target.value)
}
/>
)}
</Label>
}
action={
<Checkbox
style={{ cursor: 'pointer' }}
disabled={isPkey}
checked={!tableRow.exclude.has(columnName)}
onCheckedChange={(state: boolean) =>
handleColumnExclusion(columnName, state)
}
/>
}
/>
);
});
</div>
)}

<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
columnGap: '1rem',
}}
>
<div>
<p
style={{
fontSize: 13,
}}
>
Custom column type
</p>
</div>

<TextField
variant='simple'
placeholder='Custom column type'
style={{ width: '10rem', padding: '4px 8px', fontSize: 13 }}
value={
tableRow.columns.find((col) => col.sourceName === columnName)
?.destinationType ?? ''
}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
handleColumnTypeChange(columnName, e.target.value)
}
/>
</div>
<Divider style={{ marginTop: '0.5rem', marginBottom: '0.5rem' }} />
</div>
)}
</div>
);
}
26 changes: 16 additions & 10 deletions ui/app/mirrors/create/cdc/schemabox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,16 +377,22 @@ export default function SchemaBox({
Columns
</Label>
{columns ? (
<ColumnBox
columns={columns}
tableRow={row}
rows={rows}
setRows={setRows}
showOrdering={
peerType?.toString() ===
DBType[DBType.CLICKHOUSE].toString()
}
/>
columns.map(
(column) =>
column != '' && (
<ColumnBox
key={row.source + column}
column={column}
tableRow={row}
rows={rows}
setRows={setRows}
showColumnSettings={
peerType?.toString() ===
DBType[DBType.CLICKHOUSE].toString()
}
/>
)
)
) : columnsLoading ? (
<BarLoader />
) : (
Expand Down

0 comments on commit 66b1734

Please sign in to comment.