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 d216749 [Feature]: Enhance metadata manifest info & snapshot info &
datafile (#87)
d216749 is described below
commit d216749333c14d5506dc8b4f1fd6c82254d0a3a1
Author: xiaomo <[email protected]>
AuthorDate: Tue Oct 31 11:33:34 2023 +0800
[Feature]: Enhance metadata manifest info & snapshot info & datafile (#87)
---
.../views/metadata/components/datafile/index.tsx | 95 ++++++++++++++++++++++
.../views/metadata/components/manifest/index.tsx | 86 ++++++++++++++++++++
.../views/metadata/components/menu-tree/index.tsx | 50 +-----------
.../metadata/components/metadata-tabs/index.tsx | 19 +++--
.../views/metadata/components/snapshot/index.tsx | 91 +++++++++++++++++++++
5 files changed, 287 insertions(+), 54 deletions(-)
diff --git a/paimon-web-ui-new/src/views/metadata/components/datafile/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/datafile/index.tsx
new file mode 100644
index 0000000..fc93fa7
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/datafile/index.tsx
@@ -0,0 +1,95 @@
+/* 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'
+
+type RowData = {
+ partition: string
+ bucket: number
+ filePath: string
+ fileFormat: string
+}
+
+
+export default defineComponent({
+ name: 'MetadataDataFile',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ const data: RowData[] = [
+ {
+ partition: '[1]',
+ bucket: 0,
+ filePath: 'opt/paimon/warehouse/ods.db/t_role',
+ fileFormat: 'ORC'
+ },
+ {
+ partition: '[2]',
+ bucket: 0,
+ filePath: 'opt/paimon/warehouse/ods.db/t_role',
+ fileFormat: 'PARQUET'
+ },
+ {
+ partition: '[3]',
+ bucket: 1,
+ filePath: 'opt/paimon/warehouse/ods.db/t_role',
+ fileFormat: 'ORC'
+ },
+ {
+ partition: '[4]',
+ bucket: 1,
+ filePath: 'opt/paimon/warehouse/ods.db/t_role',
+ fileFormat: 'PARQUET'
+ },
+ ]
+
+ const columns: DataTableColumns<RowData> = [
+ {
+ title: 'Partition',
+ key: 'partition'
+ },
+ {
+ title: 'Bucket',
+ key: 'bucket'
+ },
+ {
+ title: 'File Path',
+ key: 'filePath'
+ },
+ {
+ title: 'File Format',
+ key: 'fileFormat'
+ }
+ ]
+
+ return {
+ columns,
+ data,
+ t,
+ }
+ },
+ render() {
+ return (
+ <n-card>
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ />
+ </n-card>
+ );
+ },
+});
diff --git a/paimon-web-ui-new/src/views/metadata/components/manifest/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/manifest/index.tsx
new file mode 100644
index 0000000..226300a
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/manifest/index.tsx
@@ -0,0 +1,86 @@
+/* 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'
+
+type RowData = {
+ fileName: string
+ fileSize: number
+ numAddFiles: number
+}
+
+
+export default defineComponent({
+ name: 'MetadataManifest',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ const data: RowData[] = [
+ {
+ fileName: 'manifest-wekfj',
+ fileSize: 29838,
+ numAddFiles: 19,
+ },
+ {
+ fileName: 'manifest-akagerjgerg38746',
+ fileSize: 827387,
+ numAddFiles: 27,
+ },
+ {
+ fileName: 'manifest-aka38reophkrpoth746',
+ fileSize: 36423,
+ numAddFiles: 37,
+ },
+ {
+ fileName: 'manifest-gerjgoiejrog',
+ fileSize: 387423,
+ numAddFiles: 34,
+ },
+ ]
+
+ const columns: DataTableColumns<RowData> = [
+ {
+ title: 'File Name',
+ key: 'fileName'
+ },
+ {
+ title: 'File Size',
+ key: 'fileSize'
+ },
+ {
+ title: 'Number of Add Files',
+ key: 'numAddFiles'
+ },
+ ]
+
+ return {
+ columns,
+ data,
+ t,
+ }
+ },
+ render() {
+ return (
+ <n-card>
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ />
+ </n-card>
+ );
+ },
+});
diff --git
a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
index a0fe236..7e17e4c 100644
--- a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
@@ -15,8 +15,7 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import { FileTrayFullOutline, Search, FolderOpenOutline } from
'@vicons/ionicons5'
-import { NIcon } from 'naive-ui'
+import { Search } from '@vicons/ionicons5'
import { useCatalogStore } from '@/store/catalog'
@@ -30,49 +29,7 @@ export default defineComponent({
const catalogStore = useCatalogStore()
const catalogStoreRef = storeToRefs(catalogStore)
- const treeVariables = reactive({
- treeData: [
- {
- key: 'paimon2',
- label: 'paimon2',
- type: 'folder',
- children: [
- {
- key: 'user',
- label: 'user',
- type: 'folder',
- prefix: () =>
- h(NIcon, null, {
- default: () => h(FolderOpenOutline)
- }),
- children: [
- {
- label: 'user_table',
- key: '1',
- type: 'file',
- content: 'select * from abc where abc.a="abc";select * from
cba where cba.a="cba";',
- prefix: () =>
- h(NIcon, null, {
- default: () => h(FileTrayFullOutline)
- })
- },
- {
- label: 'people_table',
- key: '2',
- type: 'file',
- content: 'select * from abc where abc.a="abc";',
- prefix: () =>
- h(NIcon, null, {
- default: () => h(FileTrayFullOutline)
- })
- }
- ]
- }
- ]
- }
- ],
- filterValue: '',
- })
+ const filterValue = ref('')
const dropdownMenu = [
{
@@ -98,8 +55,8 @@ export default defineComponent({
menuLoading: catalogStoreRef.catalogLoading,
menuList: catalogStoreRef.catalogs,
dropdownMenu,
+ filterValue,
t,
- ...toRefs(treeVariables),
nodeProps,
}
},
@@ -118,6 +75,7 @@ export default defineComponent({
<n-spin show={this.menuLoading}>
<n-tree
block-line
+ expand-on-click
on-load={() => {}}
data={this.menuList}
pattern={this.filterValue}
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 3d51fe5..6704ce0 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,8 +19,11 @@ import type { TabsInst } from 'naive-ui'
import { useConfigStore } from '@/store/config'
-import MetaDataSchema from '../schema';
-import MetaDataTable from '../table';
+import Table from '../table'
+import Schema from '../schema'
+import SnapShot from '../snapshot'
+import Manifest from '../manifest'
+import DataFile from '../datafile'
import styles from './index.module.scss'
@@ -46,22 +49,22 @@ 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')}>
- <MetaDataTable />
+ <Table />
</n-tab-pane>
<n-tab-pane name='option' tab={this.t('metadata.option_info')}>
- Option 信息
+ Option
</n-tab-pane>
<n-tab-pane name='schema' tab={this.t('metadata.schema_info')}>
- <MetaDataSchema />
+ <Schema />
</n-tab-pane>
<n-tab-pane name='snapshot' tab={this.t('metadata.snapshot_file')}>
- Snapshot 文件
+ <SnapShot />
</n-tab-pane>
<n-tab-pane name='manifest' tab={this.t('metadata.manifests_file')}>
- Manifest 文件
+ <Manifest />
</n-tab-pane>
<n-tab-pane name='datafile' tab={this.t('metadata.data_file')}>
- 数据文件
+ <DataFile />
</n-tab-pane>
</n-tabs>
</div>
diff --git a/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
new file mode 100644
index 0000000..d7d0218
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
@@ -0,0 +1,91 @@
+/* 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'
+
+type RowData = {
+ snapshotId: number
+ schemaId: number
+ commitIdentifier: number
+ commitKind: string
+ commitTime: string
+}
+
+
+export default defineComponent({
+ name: 'MetadataSnapshot',
+ setup() {
+ const { t } = useLocaleHooks()
+
+ const data: RowData[] = [
+ {
+ snapshotId: 0,
+ schemaId: 2,
+ commitIdentifier: 3,
+ commitKind: 'APPEND',
+ commitTime: '2023-10-30 10:00:00'
+ },
+ {
+ snapshotId: 1,
+ schemaId: 1,
+ commitIdentifier: 1,
+ commitKind: 'APPEND',
+ commitTime: '2023-10-28 11:08:14'
+ },
+ ]
+
+ const columns: DataTableColumns<RowData> = [
+ {
+ title: 'Snapshot ID',
+ key: 'snapshotId'
+ },
+ {
+ title: 'Schema ID',
+ key: 'schemaId'
+ },
+ {
+ title: 'Commit Identifier',
+ key: 'commitIdentifier'
+ },
+
+ {
+ title: 'Commit Kind',
+ key: 'commitKind'
+ },
+ {
+ title: 'Commit Time',
+ key: 'commitTime'
+ }
+ ]
+
+ return {
+ columns,
+ data,
+ t,
+ }
+ },
+ render() {
+ return (
+ <n-card>
+ <n-data-table
+ columns={this.columns}
+ data={this.data}
+ />
+ </n-card>
+ );
+ },
+});
