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 54d7a59 [Feature] Enhance metadata schema module style (#72)
54d7a59 is described below
commit 54d7a595fdce1f1272e1d34e7efbc6b4f698ff61
Author: xiaomo <[email protected]>
AuthorDate: Fri Oct 20 20:00:43 2023 +0800
[Feature] Enhance metadata schema module style (#72)
---
.../metadata/components/metadata-tabs/index.tsx | 4 +-
.../metadata/components/schema/index.module.scss | 20 +++
.../src/views/metadata/components/schema/index.tsx | 172 +++++++++++++++++++++
3 files changed, 195 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 a2130f7..e757fb9 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
@@ -19,6 +19,8 @@ import type { TabsInst } from 'naive-ui'
import { useConfigStore } from '@/store/config'
+import MetaDataSchema from '../schema';
+
import styles from './index.module.scss'
@@ -49,7 +51,7 @@ export default defineComponent({
Option 信息
</n-tab-pane>
<n-tab-pane name='schema' tab={this.t('metadata.schema_info')}>
- Schema 信息
+ <MetaDataSchema />
</n-tab-pane>
<n-tab-pane name='snapshot' tab={this.t('metadata.snapshot_file')}>
Snapshot 文件
diff --git
a/paimon-web-ui-new/src/views/metadata/components/schema/index.module.scss
b/paimon-web-ui-new/src/views/metadata/components/schema/index.module.scss
new file mode 100644
index 0000000..ba4209c
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/schema/index.module.scss
@@ -0,0 +1,20 @@
+/* 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. */
+
+.schema_field_title {
+ margin-bottom: 10px;
+}
diff --git a/paimon-web-ui-new/src/views/metadata/components/schema/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/schema/index.tsx
new file mode 100644
index 0000000..7d146a9
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/schema/index.tsx
@@ -0,0 +1,172 @@
+/* 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 { NTag, type DataTableColumns, NButton } from "naive-ui";
+
+import styles from './index.module.scss'
+
+type RowData = {
+ key: number
+ name: string
+ age: number
+ address: string
+ tags: string[]
+}
+
+
+type Song = {
+ no: number
+ title: string
+ length: string
+}
+
+export default defineComponent({
+ name: 'MetadataSchema',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ const data: RowData[] = [
+ {
+ key: 0,
+ name: 'John Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+ tags: ['nice', 'developer']
+ },
+ {
+ key: 1,
+ name: 'Jim Green',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+ tags: ['wow']
+ },
+ {
+ key: 2,
+ name: 'Joe Black',
+ age: 32,
+ address: 'Sidney No. 1 Lake Park',
+ tags: ['cool', 'teacher']
+ }
+ ]
+
+ const childColumns: DataTableColumns<Song> = [
+ {
+ title: 'No',
+ key: 'no'
+ },
+ {
+ title: 'Title',
+ key: 'title'
+ },
+ {
+ title: 'Length',
+ key: 'length'
+ }
+ ]
+
+ const columns: DataTableColumns<RowData> = [
+ {
+ title: '#',
+ type: 'expand',
+ renderExpand: () => {
+ return <div>
+ <div class={styles.schema_field_title}>Fields: </div>
+ <n-data-table
+ columns={childColumns}
+ data={[
+ { no: 3, title: 'Wonderwall', length: '4:18' },
+ { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
+ { no: 12, title: 'Champagne Supernova', length: '7:27' }
+ ]}
+ bordered={false}
+ />
+ </div>
+ }
+ },
+ {
+ title: 'ID',
+ key: 'id',
+ render: (_, index) => {
+ return `${index + 1}`
+ }
+ },
+ {
+ title: 'Name',
+ key: 'name'
+ },
+ {
+ title: 'Age',
+ key: 'age'
+ },
+ {
+ title: 'Address',
+ key: 'address'
+ },
+ {
+ title: 'Tags',
+ key: 'tags',
+ render(row) {
+ const tags = row.tags.map((tagKey) => {
+ return h(
+ NTag,
+ {
+ style: {
+ marginRight: '6px'
+ },
+ type: 'info',
+ bordered: false
+ },
+ {
+ default: () => tagKey
+ }
+ )
+ })
+ return tags
+ }
+ },
+ {
+ title: 'Action',
+ key: 'actions',
+ render() {
+ return h(
+ NButton,
+ {
+ size: 'small',
+ },
+ { default: () => 'Send Email' }
+ )
+ }
+ }
+ ]
+
+ return {
+ columns,
+ data,
+ t,
+ }
+ },
+ render() {
+ return (
+ <n-card>
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ />
+ </n-card>
+ );
+ },
+});
