You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@paimon.apache.org by ni...@apache.org on 2024/01/08 03:20:06 UTC
(incubator-paimon-webui) branch main updated: [Improvement] Enable the frontend to support creating catalogs that use object storage (#135)
This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new dcc1c4a [Improvement] Enable the frontend to support creating catalogs that use object storage (#135)
dcc1c4a is described below
commit dcc1c4a6dafc282e064453303fe3f6243fd9a943
Author: yangyang zhong <35...@users.noreply.github.com>
AuthorDate: Mon Jan 8 11:20:01 2024 +0800
[Improvement] Enable the frontend to support creating catalogs that use object storage (#135)
---
.../src/api/models/catalog/types/catalog.ts | 35 ++++---
.../src/locales/en/modules/metadata.ts | 4 +
.../src/locales/zh/modules/metadata.ts | 5 +
.../metadata/components/menu-tree/catalog-form.tsx | 103 ++++++++++++++-------
4 files changed, 99 insertions(+), 48 deletions(-)
diff --git a/paimon-web-ui-new/src/api/models/catalog/types/catalog.ts b/paimon-web-ui-new/src/api/models/catalog/types/catalog.ts
index 2ced40d..62a4136 100644
--- a/paimon-web-ui-new/src/api/models/catalog/types/catalog.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/types/catalog.ts
@@ -16,20 +16,29 @@ specific language governing permissions and limitations
under the License. */
export interface Catalog {
- id: number;
- createTime: string;
- updateTime?: string;
- catalogType: string;
- catalogName: string;
- warehouse: string;
- hiveUri?: string;
- hiveConfDir?: string;
+ id: number
+ createTime: string
+ updateTime?: string
+ catalogType: string
+ catalogName: string
+ warehouse: string
+ hiveUri?: string
+ hiveConfDir?: string
+ options?: FileSystemOption
}
export interface CatalogDTO {
- type: string;
- name: string;
- warehouse: string;
- hiveUri?: string;
- hiveConfDir?: string;
+ type: string
+ name: string
+ warehouse: string
+ hiveUri?: string
+ hiveConfDir?: string
+ options: FileSystemOption
+}
+
+export interface FileSystemOption {
+ fileSystemType:string,
+ endpoint?:string,
+ accessKey?:string,
+ secretKey?:string
}
diff --git a/paimon-web-ui-new/src/locales/en/modules/metadata.ts b/paimon-web-ui-new/src/locales/en/modules/metadata.ts
index 0ed7f17..9fdb26a 100644
--- a/paimon-web-ui-new/src/locales/en/modules/metadata.ts
+++ b/paimon-web-ui-new/src/locales/en/modules/metadata.ts
@@ -29,6 +29,10 @@ export default {
catalog_warehouse: 'Warehouse',
catalog_hiveuri: 'Hive Uri',
catalog_hive_conf_dir: 'Hive Conf Dir',
+ catalog_filesystem_type:'File System type',
+ catalog_endpoint:'Endpoint',
+ catalog_access_key:'Access Key',
+ catalog_secret_key:'Secret Key',
create_database: 'Create Database',
database_name: 'Database Name',
diff --git a/paimon-web-ui-new/src/locales/zh/modules/metadata.ts b/paimon-web-ui-new/src/locales/zh/modules/metadata.ts
index 646223e..792e4af 100644
--- a/paimon-web-ui-new/src/locales/zh/modules/metadata.ts
+++ b/paimon-web-ui-new/src/locales/zh/modules/metadata.ts
@@ -29,8 +29,13 @@ export default {
catalog_warehouse: 'Warehouse',
catalog_hiveuri: 'Hive Uri',
catalog_hive_conf_dir: 'Hive Conf Dir',
+ catalog_filesystem_type:'文件系统类型',
+ catalog_endpoint:'Endpoint',
+ catalog_access_key:'Access Key',
+ catalog_secret_key:'Secret Key',
create_database: '创建 Database',
database_name: 'Database 名称',
database_des: 'Database 描述',
}
+
diff --git a/paimon-web-ui-new/src/views/metadata/components/menu-tree/catalog-form.tsx b/paimon-web-ui-new/src/views/metadata/components/menu-tree/catalog-form.tsx
index 90d0eb0..48edb88 100644
--- a/paimon-web-ui-new/src/views/metadata/components/menu-tree/catalog-form.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/menu-tree/catalog-form.tsx
@@ -73,6 +73,12 @@ export default defineComponent({
name: '',
type: '',
warehouse: '',
+ options: {
+ fileSystemType:'local',
+ endpoint:'',
+ accessKey:'',
+ secretKey:''
+ }
})
const showModal = ref(false)
@@ -81,7 +87,7 @@ export default defineComponent({
await createFetch({
params: toRaw(formValue.value)
})
-
+
if (result.value.code === 200) {
handleCloseModal()
message.success(t('Create Successfully'))
@@ -89,6 +95,12 @@ export default defineComponent({
name: '',
type: '',
warehouse: '',
+ options: {
+ fileSystemType:'local',
+ endpoint:'',
+ accessKey:'',
+ secretKey:''
+ }
}
catalogStore.getAllCatalogs(true)
}
@@ -121,60 +133,81 @@ export default defineComponent({
render() {
return (
<>
- <n-button
- quaternary
- circle
- size='tiny'
- onClick={this.handleOpenModal}
- >
+ <n-button quaternary circle size="tiny" onClick={this.handleOpenModal}>
<n-icon>
<Add />
</n-icon>
</n-button>
- <n-modal
- v-model:show={this.showModal}
- mask-closable={false}
- >
+ <n-modal v-model:show={this.showModal} mask-closable={false}>
<n-card bordered={false} title={this.t('metadata.create_catalog')} style="width: 600px">
{{
default: () => (
<n-form
- ref='formRef'
- label-placement="left"
+ ref="formRef"
+ label-placement="top"
label-width="auto"
- label-align="right"
+ label-align="left"
rules={this.rules}
model={this.formValue}
>
- <n-form-item label={this.t('metadata.catalog_name')} path='name'>
+ <n-form-item label={this.t('metadata.catalog_name')} path="name">
<n-input v-model:value={this.formValue.name} />
</n-form-item>
- <n-form-item label={this.t('metadata.catalog_type')} path='type'>
- <n-select v-model:value={this.formValue.type} options={this.catalogTypeOptions} />
+ <n-form-item label={this.t('metadata.catalog_type')} path="type">
+ <n-select
+ v-model:value={this.formValue.type}
+ options={this.catalogTypeOptions}
+ />
</n-form-item>
- <n-form-item label={this.t('metadata.catalog_warehouse')} path='warehouse'>
+ <n-form-item label={this.t('metadata.catalog_warehouse')} path="warehouse">
<n-input v-model:value={this.formValue.warehouse} />
</n-form-item>
- {
- this.formValue.type === 'hive' && (
- <>
- <n-form-item label={this.t('metadata.catalog_hiveuri')} path='hiveUri'>
- <n-input v-model:value={this.formValue.hiveUri} />
- </n-form-item>
- <n-form-item label={this.t('metadata.catalog_hive_conf_dir')} path='hiveConfDir'>
- <n-input v-model:value={this.formValue.hiveConfDir} />
- </n-form-item>
- </>
- )
- }
+ {this.formValue.type === 'hive' && (
+ <>
+ <n-form-item label={this.t('metadata.catalog_hiveuri')} path="hiveUri">
+ <n-input v-model:value={this.formValue.hiveUri} />
+ </n-form-item>
+ <n-form-item
+ label={this.t('metadata.catalog_hive_conf_dir')}
+ path="hiveConfDir"
+ >
+ <n-input v-model:value={this.formValue.hiveConfDir} />
+ </n-form-item>
+ </>
+ )}
+ {this.formValue.type === 'filesystem' && (
+ <>
+ <n-form-item label={this.t('metadata.catalog_filesystem_type')}>
+ <n-radio-group v-model:value={this.formValue.options.fileSystemType}>
+ <n-space>
+ <n-radio value="local">local</n-radio>
+ <n-radio value="s3">s3</n-radio>
+ <n-radio value="oss">oss</n-radio>
+ </n-space>
+ </n-radio-group>
+ </n-form-item>
+ {(this.formValue.options.fileSystemType === 's3' ||
+ this.formValue.options.fileSystemType === 'oss') && (
+ <>
+ <n-form-item label={this.t('metadata.catalog_endpoint')}>
+ <n-input v-model:value={this.formValue.options.endpoint} />
+ </n-form-item>
+ <n-form-item label={this.t('metadata.catalog_access_key')}>
+ <n-input v-model:value={this.formValue.options.accessKey} />
+ </n-form-item>
+ <n-form-item label={this.t('metadata.catalog_secret_key')}>
+ <n-input v-model:value={this.formValue.options.secretKey} />
+ </n-form-item>
+ </>
+ )}
+ </>
+ )}
</n-form>
),
footer: () => (
- <n-space justify='end'>
- <n-button onClick={this.handleCloseModal}>
- {this.t('layout.cancel')}
- </n-button>
- <n-button type='primary' loading={this.loading} onClick={this.handleConfirm}>
+ <n-space justify="end">
+ <n-button onClick={this.handleCloseModal}>{this.t('layout.cancel')}</n-button>
+ <n-button type="primary" loading={this.loading} onClick={this.handleConfirm}>
{this.t('layout.confirm')}
</n-button>
</n-space>