Skip to content

Commit

Permalink
Update datasource form and Rename addTags
Browse files Browse the repository at this point in the history 
Signed-off-by: Boli Guan <ifendoe@gmail.com>
  • Loading branch information
@Fendoe
Fendoe committed Jan 16, 2023
1 parent 96cc231 commit 3dda668
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 58 deletions.
68 changes: 34 additions & 34 deletions ui/src/components/AddTabs/index.tsx → ui/src/components/AddTags/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,84 +6,84 @@ import { Popconfirm, Button, Space, Table, Form, Input, Typography } from 'antd'
import EditTable from '@/components/EditTable'
import { EditTableInstance, EditColumnType } from '@/components/EditTable/interface'

export interface AddTabsProps {
onChange?: (tabs: Tab[]) => void
export interface AddTagsProps {
onChange?: (tabs: Tag[]) => void
}

export interface AddTabsInstance {
getTabs: () => Tab[]
export interface AddTagsInstance {
getTags: () => Tag[]
}

export interface Tab {
export interface Tag {
name: string
value: string
}

const { Link } = Typography

const AddTabs = (props: AddTabsProps, ref: any) => {
const AddTags = (props: AddTagsProps, ref: any) => {
const [form] = Form.useForm()

const { onChange } = props

const [tabs, setTabs] = useState<Tab[]>([])
const [tags, setTags] = useState<Tag[]>([])

const editTableRef = useRef<EditTableInstance>(null)

const [editingKey, setEditingKey] = useState('')

const isEditing = (record: Tab) => record.name === editingKey
const isEditing = (record: Tag) => record.name === editingKey

const updateTabs = (oldTab: Tab, newTab: Tab) => {
const newData = [...tabs]
const index = newData.findIndex((item) => oldTab.name === item.name)
const updateTabs = (oldTag: Tag, newTag: Tag) => {
const newData = [...tags]
const index = newData.findIndex((item) => oldTag.name === item.name)
if (index > -1) {
const item = newData[index]
newData.splice(index, 1, {
...item,
...newTab
...newTag
})
setTabs(newData)
setTags(newData)
setEditingKey('')
} else {
newData.push(newTab)
setTabs(newData)
newData.push(newTag)
setTags(newData)
setEditingKey('')
}
}
const onSave = (record: Tab) => {
const onSave = (record: Tag) => {
const { form } = editTableRef.current!
form.validateFields().then((tab: Tab) => {
updateTabs(record, tab)
form.validateFields().then((tag: Tag) => {
updateTabs(record, tag)
})
}

const onCancel = () => {
setEditingKey('')
}

const onEdit = (record: Tab) => {
const onEdit = (record: Tag) => {
const { form } = editTableRef.current!
form?.setFieldsValue(record)
setEditingKey(record.name)
}

const onDelete = (record: Tab) => {
setTabs((tabs) => {
const index = tabs.findIndex((tab) => tab.name === record.name)
tabs.splice(index, 1)
return [...tabs]
const onDelete = (record: Tag) => {
setTags((tags) => {
const index = tags.findIndex((tag) => tag.name === record.name)
tags.splice(index, 1)
return [...tags]
})
}

const onAdd = () => {
form.validateFields().then((value: Tab) => {
form.validateFields().then((value: Tag) => {
updateTabs(value, value)
form.resetFields()
})
}

const columns: EditColumnType<Tab>[] = [
const columns: EditColumnType<Tag>[] = [
{
title: 'Name',
dataIndex: 'name',
Expand All @@ -97,7 +97,7 @@ const AddTabs = (props: AddTabsProps, ref: any) => {
{
title: 'Actions',
width: 120,
render: (record: Tab) => {
render: (record: Tag) => {
const editable = isEditing(record)
return (
<Space>
Expand Down Expand Up @@ -140,21 +140,21 @@ const AddTabs = (props: AddTabsProps, ref: any) => {
}
]

useImperativeHandle<any, AddTabsInstance>(
useImperativeHandle<any, AddTagsInstance>(
ref,
() => {
return {
getTabs: () => {
return tabs
getTags: () => {
return tags
}
}
},
[form]
)

useEffect(() => {
onChange?.(tabs)
}, [tabs])
onChange?.(tags)
}, [tags])

return (
<EditTable
Expand Down Expand Up @@ -200,9 +200,9 @@ const AddTabs = (props: AddTabsProps, ref: any) => {
isEditing={isEditing}
columns={columns}
pagination={false}
dataSource={tabs}
dataSource={tags}
/>
)
}

export default forwardRef<AddTabsInstance, AddTabsProps>(AddTabs)
export default forwardRef<AddTagsInstance, AddTagsProps>(AddTags)
22 changes: 20 additions & 2 deletions ui/src/models/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,12 +133,30 @@ export interface NewFeature {
export interface NewDatasource {
eventTimestampColumn?: string
name: string
path: string
path?: string
preprocessing?: string
qualifiedName: string
tags: any
timestampFormat?: string
type: string

sourceType?: string
url?: string
dbtable?: string
query?: string
auth?: string

format?: string
'spark.cosmos.accountKey'?: string
'spark.cosmos.accountEndpoint'?: string
'spark.cosmos.database'?: string
'spark.cosmos.container'?: string

endpoint?: string
container?: string

sql?: string
table?: string
}

export const ValueType = [
Expand All @@ -156,4 +174,4 @@ export const TensorCategory = ['DENSE', 'SPARSE']

export const VectorType = ['TENSOR']

export const SourceType = ['PASSTHROUGH', 'wasbs']
export const JdbcAuth = ['userpass', 'token', 'None']
4 changes: 2 additions & 2 deletions ui/src/pages/NewFeature/components/FeatureForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { forwardRef, Fragment } from 'react'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd'

import AddTabs from '@/components/AddTabs'
import AddTags from '@/components/AddTags'
import ProjectsSelect from '@/components/ProjectsSelect'

import { useForm, FeatureEnum, TransformationTypeEnum } from './useForm'
Expand Down Expand Up @@ -101,7 +101,7 @@ const FeatureForm = (props: FeatureFormProps, ref: any) => {
<Divider orientation="left">Feature Tags</Divider>
<Row>
<Col xs={24} sm={{ span: 22, offset: 2 }}>
<AddTabs onChange={onTabsChange} />
<AddTags onChange={onTabsChange} />
</Col>
</Row>
<Divider orientation="left">Feature Keys</Divider>
Expand Down
10 changes: 5 additions & 5 deletions ui/src/pages/NewFeature/components/FeatureForm/useForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FormInstance, Form, SelectProps, message } from 'antd'
import { useNavigate } from 'react-router-dom'

import { fetchProjectLineages, createAnchorFeature, createDerivedFeature } from '@/api'
import { Tab } from '@/components/AddTabs'
import { Tag } from '@/components/AddTags'
import { ValueType, TensorCategory, VectorType, NewFeature } from '@/models/model'

const valueOptions = ValueType.map((value: string) => ({
Expand Down Expand Up @@ -42,7 +42,7 @@ export const useForm = (form: FormInstance<any>, projectStr?: string) => {

const [loading, setLoading] = useState<boolean>(false)

const tabsRef = useRef<Tab[]>([])
const tagsRef = useRef<Tag[]>([])

const [anchorOptions, setAnchorOptions] = useState<Options>([])
const [anchorFeatureOptions, setAnchorFeatureOptions] = useState<Options>([])
Expand Down Expand Up @@ -99,7 +99,7 @@ export const useForm = (form: FormInstance<any>, projectStr?: string) => {
const onFinish = async (values: any) => {
setCreateLoading(true)
try {
const tags = tabsRef.current.reduce((tags: any, item: any) => {
const tags = tagsRef.current.reduce((tags: any, item: any) => {
tags[item.name.trim()] = item.value.trim() || ''
return tags
}, {} as any)
Expand Down Expand Up @@ -144,8 +144,8 @@ export const useForm = (form: FormInstance<any>, projectStr?: string) => {
}
}

const onTabsChange = (tabs: Tab[]) => {
tabsRef.current = tabs
const onTabsChange = (tags: Tag[]) => {
tagsRef.current = tags
}

useEffect(() => {
Expand Down
82 changes: 75 additions & 7 deletions ui/src/pages/NewSource/components/SourceForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React, { forwardRef } from 'react'

import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'

import AddTabs from '@/components/AddTabs'
import AddTags from '@/components/AddTags'
import ProjectsSelect from '@/components/ProjectsSelect'

import { useForm } from './useForm'
import { useForm, SourceTypeEnum } from './useForm'

export interface SourceFormProps {
project?: string
Expand All @@ -29,7 +29,8 @@ const SourceForm = (props: SourceFormProps, ref: any) => {
const { project } = props
const [form] = Form.useForm()

const { createLoading, sourceTypeOptions, onTabsChange, onFinish } = useForm(form, project)
const { createLoading, sourceTypeOptions, jdbcAuthOptions, type, onTabsChange, onFinish } =
useForm(form, project)

return (
<>
Expand Down Expand Up @@ -58,9 +59,76 @@ const SourceForm = (props: SourceFormProps, ref: any) => {
<Item label="Type" name="type" rules={[{ required: true }]}>
<Select options={sourceTypeOptions} />
</Item>
<Item name="path" label="Path" rules={[{ required: true }]}>
<TextArea autoSize={{ maxRows: 3, minRows: 3 }} />
</Item>
<Divider orientation="left">Datasource Attributes</Divider>
{(type === SourceTypeEnum.HDFS || type === SourceTypeEnum.SNOWFLAKE) && (
<Item name="path" label="Path" rules={[{ required: true }]}>
<TextArea autoSize={{ maxRows: 3, minRows: 3 }} />
</Item>
)}
{type === SourceTypeEnum.JDBC && (
<>
<Item name="url" label="Url" rules={[{ required: true }]}>
<Input />
</Item>
<Form.Item
name={[SourceTypeEnum.JDBC, 'value']}
label="Type"
rules={[{ required: true, message: 'This is required' }]}
>
<Input
addonBefore={
<Item noStyle name={[SourceTypeEnum.JDBC, 'type']} rules={[{ required: true }]}>
<Select style={{ width: 100 }}>
<Select.Option value="dbtable">DBTABLE</Select.Option>
<Select.Option value="query">QUERY</Select.Option>
</Select>
</Item>
}
/>
</Form.Item>
<Item name="auth" label="Auth" rules={[{ required: true }]}>
<Select options={jdbcAuthOptions} />
</Item>
</>
)}
{type === SourceTypeEnum.COSMOSDB && (
<>
<Item name="endpoint" label="Endpoint" rules={[{ required: true }]}>
<Input />
</Item>
<Item name="dbtable" label="Database Table" rules={[{ required: true }]}>
<Input />
</Item>
<Item name="container" label="Container" rules={[{ required: true }]}>
<Input />
</Item>
</>
)}
{type === SourceTypeEnum.SPARKSQL && (
<>
<Form.Item
name={[SourceTypeEnum.SPARKSQL, 'value']}
label="Type"
rules={[{ required: true, message: 'This is required' }]}
>
<Input
addonBefore={
<Item
noStyle
name={[SourceTypeEnum.SPARKSQL, 'type']}
rules={[{ required: true }]}
>
<Select style={{ width: 100 }}>
<Select.Option value="sql">SQL</Select.Option>
<Select.Option value="table">TABLE</Select.Option>
</Select>
</Item>
}
/>
</Form.Item>
</>
)}

<Item name="preprocessing" label="Preprocessing">
<TextArea autoSize={{ maxRows: 3, minRows: 3 }} />
</Item>
Expand All @@ -73,7 +141,7 @@ const SourceForm = (props: SourceFormProps, ref: any) => {
<Divider orientation="left">Datasource Tags</Divider>
<Row>
<Col xs={24} sm={{ span: 22, offset: 2 }}>
<AddTabs onChange={onTabsChange} />
<AddTags onChange={onTabsChange} />
</Col>
</Row>
<Divider />
Expand Down
Loading

0 comments on commit 3dda668

Please sign in to comment.