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 199ad8e [Feature] Support metadata module left and right linkage and
empty (#130)
199ad8e is described below
commit 199ad8e10af688265634cf2acfb8d06e2c24f7c9
Author: xiaomo <[email protected]>
AuthorDate: Sun Dec 17 10:06:17 2023 +0800
[Feature] Support metadata module left and right linkage and empty (#130)
---
paimon-web-ui-new/src/api/models/catalog/index.ts | 8 ++--
.../src/api/models/catalog/types/table.ts | 4 ++
paimon-web-ui-new/src/api/request.ts | 4 +-
paimon-web-ui-new/src/store/catalog/index.ts | 17 +++++--
.../views/metadata/components/breadcrumb/index.tsx | 53 ++++++++++++++++++++--
.../views/metadata/components/datafile/index.tsx | 18 ++++----
.../views/metadata/components/manifest/index.tsx | 18 ++++----
.../views/metadata/components/menu-tree/index.tsx | 23 +++++++++-
.../src/views/metadata/components/schema/index.tsx | 18 ++++----
.../views/metadata/components/snapshot/index.tsx | 19 ++++----
.../src/views/metadata/index.module.scss | 4 ++
paimon-web-ui-new/src/views/metadata/index.tsx | 20 ++++++--
12 files changed, 156 insertions(+), 50 deletions(-)
diff --git a/paimon-web-ui-new/src/api/models/catalog/index.ts
b/paimon-web-ui-new/src/api/models/catalog/index.ts
index ad3f077..ffb46f4 100644
--- a/paimon-web-ui-new/src/api/models/catalog/index.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/index.ts
@@ -48,7 +48,7 @@ export const getTables = (params: TableQuery) => {
* # Get schema
*/
export const getSchema = () => {
- return httpRequest.createHooks!<ResponseOptions<Schema[]>, Schema[]>({
+ return httpRequest.createHooks!<Schema[]>({
url: '/metadata/query/schema',
method: 'post',
})
@@ -58,7 +58,7 @@ export const getSchema = () => {
* # Get manifest
*/
export const getManifest = () => {
- return httpRequest.createHooks!<ResponseOptions<Manifest[]>, Manifest[]>({
+ return httpRequest.createHooks!<Manifest[]>({
url: '/metadata/query/manifest',
method: 'post',
})
@@ -68,7 +68,7 @@ export const getManifest = () => {
* # Get data file
*/
export const getDataFile = () => {
- return httpRequest.createHooks!<ResponseOptions<Datafile[]>, Datafile[]>({
+ return httpRequest.createHooks!<Datafile[]>({
url: '/metadata/query/dataFile',
method: 'post',
})
@@ -78,7 +78,7 @@ export const getDataFile = () => {
* # Get snapshot
*/
export const getSnapshot = () => {
- return httpRequest.createHooks!<ResponseOptions<Snapshot[]>, Snapshot[]>({
+ return httpRequest.createHooks!<Snapshot[]>({
url: '/metadata/query/snapshot',
method: 'post',
})
diff --git a/paimon-web-ui-new/src/api/models/catalog/types/table.ts
b/paimon-web-ui-new/src/api/models/catalog/types/table.ts
index 958d630..e299ab0 100644
--- a/paimon-web-ui-new/src/api/models/catalog/types/table.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/types/table.ts
@@ -26,3 +26,7 @@ export interface TableQuery {
catalogId: number;
databaseName: string;
}
+
+export interface TableParams extends Table {
+ tableName: string;
+}
diff --git a/paimon-web-ui-new/src/api/request.ts
b/paimon-web-ui-new/src/api/request.ts
index aaf5bd3..f59e325 100644
--- a/paimon-web-ui-new/src/api/request.ts
+++ b/paimon-web-ui-new/src/api/request.ts
@@ -57,8 +57,8 @@ const useAxle = createUseAxle({
axle
})
-function createHooks<T, R>(options: FetchOptions<T, R>) {
- return useAxle<ResponseOptions<T>, R, Record<string, any>>(options)
+function createHooks<T>(options: FetchOptions<T>) {
+ return useAxle<ResponseOptions<T>, ResponseOptions<T>, Record<string,
any>>(options)
}
axle.createHooks = createHooks
diff --git a/paimon-web-ui-new/src/store/catalog/index.ts
b/paimon-web-ui-new/src/store/catalog/index.ts
index 729aaab..948d2df 100644
--- a/paimon-web-ui-new/src/store/catalog/index.ts
+++ b/paimon-web-ui-new/src/store/catalog/index.ts
@@ -20,22 +20,27 @@ import { FileTrayOutline, FolderOutline } from
'@vicons/ionicons5'
import { getAllCatalogs, getDatabasesByCatalogId, getTables } from
'@/api/models/catalog'
-import type { Catalog, Database, Table, TableQuery } from
'@/api/models/catalog'
+import type { Catalog, Database, Table, TableParams, TableQuery } from
'@/api/models/catalog'
export interface CatalogState {
catalogs: TreeOption[];
_catalogLoading: boolean;
+ _currentTable?: TableParams
}
export const useCatalogStore = defineStore('catalog', {
state: (): CatalogState => ({
catalogs: [],
- _catalogLoading: false
+ _catalogLoading: false,
+ _currentTable: undefined
}),
persist: true,
getters: {
catalogLoading: (state): boolean => {
return state._catalogLoading
+ },
+ currentTable: (state): TableParams | undefined => {
+ return state._currentTable
}
},
actions: {
@@ -55,6 +60,12 @@ export const useCatalogStore = defineStore('catalog', {
const res = await getTables(params)
return Promise.resolve(transformTable(res.data))
+ },
+ async setCurrentTable(table: TableParams) {
+ this._currentTable = table
+ },
+ async resetCurrentTable() {
+ this._currentTable = undefined
}
}
})
@@ -89,7 +100,7 @@ const transformTable = (tables: Table[]): TreeOption[] => {
return tables.map(table => ({
label: table.name,
type: 'table',
- key: `${table.catalogId} ${table.databaseName} ${table.name}`,
+ key: `${table.catalogId} ${table.catalogName} ${table.databaseName}
${table.name}`,
isLeaf: true,
prefix: () =>
h(NIcon, null, {
diff --git
a/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
index 3941c2a..cb1928e 100644
--- a/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
@@ -17,18 +17,63 @@ under the License. */
import { Folder, FileTray } from '@vicons/ionicons5'
+import { useCatalogStore } from '@/store/catalog'
+
export default defineComponent({
name: 'MetaDataBreadcrumb',
- setup() { },
+ setup() {
+ const catalogStore = useCatalogStore()
+ const catalogStoreRef = storeToRefs(catalogStore)
+
+ return {
+ currentTable: catalogStoreRef.currentTable
+ }
+ },
render() {
return (
<n-breadcrumb>
<n-breadcrumb-item>
- <n-icon component={Folder} /> paimon2</n-breadcrumb-item>
+ <n-button text>
+ {{
+ default: () => {
+ return this.currentTable?.catalogName
+ },
+ icon: () => {
+ return <n-icon>
+ <Folder />
+ </n-icon>
+ }
+ }}
+ </n-button>
+ </n-breadcrumb-item>
<n-breadcrumb-item>
- <n-icon component={Folder} /> user</n-breadcrumb-item>
+ <n-button text>
+ {{
+ default: () => {
+ return this.currentTable?.databaseName
+ },
+ icon: () => {
+ return <n-icon>
+ <Folder />
+ </n-icon>
+ }
+ }}
+ </n-button>
+ </n-breadcrumb-item>
<n-breadcrumb-item>
- <n-icon component={FileTray} /> user_table</n-breadcrumb-item>
+ <n-button text>
+ {{
+ default: () => {
+ return this.currentTable?.tableName
+ },
+ icon: () => {
+ return <n-icon>
+ <FileTray />
+ </n-icon>
+ }
+ }}
+ </n-button>
+ </n-breadcrumb-item>
</n-breadcrumb>
);
}
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
index ef32e76..b5c9535 100644
--- a/paimon-web-ui-new/src/views/metadata/components/datafile/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/datafile/index.tsx
@@ -18,12 +18,15 @@ under the License. */
import { type DataTableColumns } from 'naive-ui'
import { getDataFile, type Datafile } from '@/api/models/catalog'
+import { useCatalogStore } from '@/store/catalog'
export default defineComponent({
name: 'MetadataDataFile',
setup() {
const [datafiles, useDataFile, { loading }] = getDataFile()
+ const catalogStore = useCatalogStore()
+
const columns: DataTableColumns<Datafile> = [
{
title: 'Partition',
@@ -43,16 +46,15 @@ export default defineComponent({
}
]
- onMounted(() => {
+ const onFetchData = async () => {
useDataFile({
- params: {
- catalogId: -1632763902,
- catalogName: "streaming_warehouse",
- databaseName: "ods",
- tableName: "t_user"
- }
+ params: catalogStore.currentTable
})
- })
+ }
+
+ watch(() => catalogStore.currentTable, onFetchData)
+
+ onMounted(onFetchData)
return {
columns,
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
index 7b97427..16e05cb 100644
--- a/paimon-web-ui-new/src/views/metadata/components/manifest/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/manifest/index.tsx
@@ -18,6 +18,7 @@ under the License. */
import { type DataTableColumns } from 'naive-ui'
import { getManifest, type Manifest } from '@/api/models/catalog'
+import { useCatalogStore } from '@/store/catalog'
export default defineComponent({
name: 'MetadataManifest',
@@ -25,6 +26,8 @@ export default defineComponent({
const { t } = useLocaleHooks()
const [manifest, useManifest, { loading }] = getManifest()
+ const catalogStore = useCatalogStore()
+
const columns: DataTableColumns<Manifest> = [
{
title: 'File Name',
@@ -40,16 +43,15 @@ export default defineComponent({
},
]
- onMounted(() => {
+ const onFetchData = async () => {
useManifest({
- params: {
- catalogId: -1632763902,
- catalogName: "streaming_warehouse",
- databaseName: "ods",
- tableName: "t_user"
- }
+ params: catalogStore.currentTable
})
- })
+ }
+
+ watch(() => catalogStore.currentTable, onFetchData)
+
+ onMounted(onFetchData)
return {
columns,
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 509df56..e1728b7 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
@@ -85,6 +85,8 @@ export default defineComponent({
onMounted(catalogStore.getAllCatalogs)
+ onUnmounted(catalogStore.resetCurrentTable)
+
const onLoadMenu = async (node: TreeOption) => {
if (node.type === 'catalog') {
node.children = await catalogStore.getDatabasesById(node.key as number)
@@ -101,6 +103,23 @@ export default defineComponent({
return Promise.resolve()
}
+ const nodeProps = ({ option }: { option: TreeOption }) => {
+ return {
+ onClick () {
+ const { type } = option
+ if (type === 'table') {
+ const [ catalogId, catalogName, databaseName, name ] =
(option.key?.toString() || '')?.split(' ') || []
+ catalogStore.setCurrentTable({
+ catalogId: Number(catalogId),
+ catalogName,
+ databaseName,
+ tableName: name
+ })
+ }
+ }
+ }
+ }
+
return {
menuLoading: catalogStoreRef.catalogLoading,
menuList: catalogStoreRef.catalogs,
@@ -109,7 +128,8 @@ export default defineComponent({
t,
onLoadMenu,
updatePrefixWithExpanded,
- renderSuffix
+ renderSuffix,
+ nodeProps
}
},
render() {
@@ -136,6 +156,7 @@ export default defineComponent({
<n-tree
block-line
expand-on-click
+ nodeProps={this.nodeProps}
renderSuffix={this.renderSuffix}
onUpdate:expandedKeys={this.updatePrefixWithExpanded}
onLoad={this.onLoadMenu}
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
index 3fe46c2..170c834 100644
--- a/paimon-web-ui-new/src/views/metadata/components/schema/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/schema/index.tsx
@@ -19,6 +19,7 @@ import { type DataTableColumns } from 'naive-ui'
import dayjs from 'dayjs'
import { getSchema, type Schema } from '@/api/models/catalog'
+import { useCatalogStore } from '@/store/catalog'
import { fieldsColumns, optionsColumns } from './columns'
import styles from './index.module.scss'
@@ -27,6 +28,8 @@ export default defineComponent({
name: 'MetadataSchema',
setup() {
const { t } = useLocaleHooks()
+
+ const catalogStore = useCatalogStore()
const [schemaData, useSchemaInfo, { loading }] = getSchema()
@@ -82,16 +85,15 @@ export default defineComponent({
}
]
- onMounted(() => {
+ const onFetchData = async () => {
useSchemaInfo({
- params: {
- catalogId: -1632763902,
- catalogName: "streaming_warehouse",
- databaseName: "ods",
- tableName: "t_user"
- }
+ params: catalogStore.currentTable
})
- })
+ }
+
+ watch(() => catalogStore.currentTable, onFetchData)
+
+ onMounted(onFetchData)
return {
columns,
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
index b909820..6870105 100644
--- a/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
@@ -19,12 +19,15 @@ import { type DataTableColumns } from 'naive-ui'
import dayjs from 'dayjs'
import { getSnapshot, type Snapshot } from '@/api/models/catalog'
+import { useCatalogStore } from '@/store/catalog'
export default defineComponent({
name: 'MetadataSnapshot',
setup() {
const [snapshots, useSnapshot, { loading }] = getSnapshot()
+ const catalogStore = useCatalogStore()
+
const columns: DataTableColumns<Snapshot> = [
{
title: 'Snapshot ID',
@@ -52,16 +55,16 @@ export default defineComponent({
}
]
- onMounted(() => {
+ const onFetchData = async () => {
useSnapshot({
- params: {
- catalogId: -1632763902,
- catalogName: "streaming_warehouse",
- databaseName: "ods",
- tableName: "t_user"
- }
+ params: catalogStore.currentTable
})
- })
+ }
+
+ watch(() => catalogStore.currentTable, onFetchData)
+
+ onMounted(onFetchData)
+
return {
columns,
diff --git a/paimon-web-ui-new/src/views/metadata/index.module.scss
b/paimon-web-ui-new/src/views/metadata/index.module.scss
index 31c4b17..458f8d8 100644
--- a/paimon-web-ui-new/src/views/metadata/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/index.module.scss
@@ -27,5 +27,9 @@ under the License. */
width: calc(100% - 60px);
padding: 14px 20px;
+
+ :global(.n-empty) {
+ margin-top: 200px;
+ }
}
}
diff --git a/paimon-web-ui-new/src/views/metadata/index.tsx
b/paimon-web-ui-new/src/views/metadata/index.tsx
index 22c0f6a..13917f0 100644
--- a/paimon-web-ui-new/src/views/metadata/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/index.tsx
@@ -15,6 +15,8 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
+import { useCatalogStore } from '@/store/catalog'
+
import styles from './index.module.scss'
import MenuTree from "./components/menu-tree"
import Breadcrumb from './components/breadcrumb'
@@ -22,15 +24,25 @@ import Tabs from './components/metadata-tabs'
export default defineComponent({
name: 'MetadataPage',
- setup() { },
+ setup() {
+ const catalogStore = useCatalogStore()
+ const catalogStoreRef = storeToRefs(catalogStore)
+
+ return {
+ currentTable: catalogStoreRef.currentTable
+ }
+ },
render() {
return (
<div class={styles.container}>
<MenuTree />
<div class={styles.content}>
- <Breadcrumb />
- <Tabs />
- <router-view />
+ {
+ this.currentTable ? <>
+ <Breadcrumb />
+ <Tabs />
+ </> : <n-empty description='Select the table. Please'></n-empty>
+ }
</div>
</div>
);
