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 2023/10/23 06:32:47 UTC
[incubator-paimon-webui] branch main updated: [Feature] Enhance metadata table info module style (#74)
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 59fb611 [Feature] Enhance metadata table info module style (#74)
59fb611 is described below
commit 59fb6118c371941980223ca670edd07481bbce23
Author: xiaomo <we...@gmail.com>
AuthorDate: Mon Oct 23 14:32:42 2023 +0800
[Feature] Enhance metadata table info module style (#74)
---
.../metadata/components/metadata-tabs/index.tsx | 3 +-
.../src/views/metadata/components/table/index.tsx | 166 +++++++++++++++++++++
2 files changed, 168 insertions(+), 1 deletion(-)
diff --git a/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
index fb0a160..3d51fe5 100644
--- a/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
@@ -20,6 +20,7 @@ import type { TabsInst } from 'naive-ui'
import { useConfigStore } from '@/store/config'
import MetaDataSchema from '../schema';
+import MetaDataTable from '../table';
import styles from './index.module.scss'
@@ -45,7 +46,7 @@ export default defineComponent({
<div class={styles.tabs}>
<n-tabs ref="tabsInstRef" type='bar' animated default-value="table">
<n-tab-pane name='table' tab={this.t('metadata.table_info')}>
- Table 信息
+ <MetaDataTable />
</n-tab-pane>
<n-tab-pane name='option' tab={this.t('metadata.option_info')}>
Option 信息
diff --git a/paimon-web-ui-new/src/views/metadata/components/table/index.tsx b/paimon-web-ui-new/src/views/metadata/components/table/index.tsx
new file mode 100644
index 0000000..d18e2b3
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/table/index.tsx
@@ -0,0 +1,166 @@
+/* Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License. */
+
+import { type DataTableColumns } from 'naive-ui'
+import { AddCircleOutline, CreateOutline, RemoveCircleOutline } from '@vicons/ionicons5'
+
+
+type RowData = {
+ key: number
+ columnName: string
+ dataType: string
+ nullAble: boolean
+ primaryKey: boolean
+ partitionKey: boolean
+ defaultValue?: string
+ description?: string
+}
+
+export default defineComponent({
+ name: 'MetadataTable',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ const data: RowData[] = [
+ {
+ key: 0,
+ columnName: 'ID',
+ dataType: 'INT',
+ nullAble: true,
+ primaryKey: false,
+ partitionKey: false,
+ },
+ {
+ key: 1,
+ columnName: 'Name',
+ dataType: 'STRING',
+ nullAble: false,
+ primaryKey: true,
+ partitionKey: false
+ },
+ {
+ key: 2,
+ columnName: 'Description',
+ dataType: 'STRING',
+ nullAble: false,
+ primaryKey: true,
+ partitionKey: false,
+ defaultValue: '123'
+ }
+ ]
+
+ const columns: DataTableColumns<RowData> = [
+ {
+ title: 'Column Name',
+ key: 'columnName'
+ },
+ {
+ title: 'Data Type',
+ key: 'dataType'
+ },
+ {
+ title: 'Nullable',
+ key: 'nullAble',
+ align: 'center',
+ render(rowData) {
+ return <n-checkbox v-model:checked={rowData.nullAble} />
+ },
+ },
+ {
+ title: 'Primary Key',
+ key: 'primaryKey',
+ align: 'center',
+ render(rowData) {
+ return <n-checkbox v-model:checked={rowData.primaryKey} />
+ },
+ },
+ {
+ title: 'Partition Key',
+ key: 'partitionKey',
+ align: 'center',
+ render(rowData) {
+ return <n-checkbox v-model:checked={rowData.partitionKey} />
+ },
+ },
+ {
+ title: 'Default Value',
+ key: 'defaultValue',
+ align: 'center',
+ render(rowData) {
+ return rowData.defaultValue || '-'
+ },
+ },
+ {
+ title: 'Description',
+ key: 'description',
+ align: 'center',
+ render(rowData) {
+ return rowData.defaultValue || '-'
+ },
+ },
+ {
+ title: 'Operation',
+ key: 'operation',
+ render() {
+ return <n-space>
+ <n-button strong secondary circle>
+ {{
+ icon: () => <n-icon component={CreateOutline} />,
+ }}
+ </n-button>
+ <n-button strong secondary circle type="error">
+ {{
+ icon: () => <n-icon component={RemoveCircleOutline} />,
+ }}
+ </n-button>
+ </n-space>
+ }
+ }
+ ]
+
+ return {
+ columns,
+ data,
+ pagination: {
+ pageSize: 10
+ },
+ t,
+ }
+ },
+ render() {
+ return (
+ <n-card title='Common Column'>
+ {{
+ 'header-extra': () => (
+ <n-button strong secondary circle>
+ {{
+ icon: () => <n-icon component={AddCircleOutline} />,
+ }}
+ </n-button>
+ ),
+ default: () => (
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ pagination={this.pagination}
+ />
+ )
+ }}
+ </n-card>
+ );
+ },
+});