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/12/15 09:56:27 UTC
(incubator-paimon-webui) branch main updated: [Feature] Support management of schema metadata fetch data (#119)
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 fbfc77f [Feature] Support management of schema metadata fetch data (#119)
fbfc77f is described below
commit fbfc77fc46c309a8ea9a5e139ebed073b8cfcd9c
Author: xiaomo <we...@gmail.com>
AuthorDate: Fri Dec 15 17:56:22 2023 +0800
[Feature] Support management of schema metadata fetch data (#119)
---
paimon-web-ui-new/package.json | 5 +-
paimon-web-ui-new/pnpm-lock.yaml | 21 +++
paimon-web-ui-new/src/api/models/catalog/index.ts | 4 +-
paimon-web-ui-new/src/api/request.ts | 4 +-
paimon-web-ui-new/src/api/types.ts | 2 +-
paimon-web-ui-new/src/layouts/content/index.tsx | 3 +-
.../schema/columns.ts} | 46 +++++--
.../src/views/metadata/components/schema/index.tsx | 143 +++++----------------
.../src/views/metadata/index.module.scss | 1 -
9 files changed, 99 insertions(+), 130 deletions(-)
diff --git a/paimon-web-ui-new/package.json b/paimon-web-ui-new/package.json
index a1b45a0..419bb48 100644
--- a/paimon-web-ui-new/package.json
+++ b/paimon-web-ui-new/package.json
@@ -15,13 +15,14 @@
"@antv/x6": "^2.15.3",
"@antv/x6-plugin-dnd": "^2.1.1",
"@antv/x6-vue-shape": "^2.1.1",
+ "@vicons/antd": "^0.12.0",
+ "@vicons/carbon": "^0.12.0",
"dart-sass": "^1.25.0",
+ "dayjs": "^1.11.10",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"monaco-editor": "^0.43.0",
"pinia": "^2.1.6",
- "@vicons/antd": "^0.12.0",
- "@vicons/carbon": "^0.12.0",
"pinia-plugin-persistedstate": "^3.2.0",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
diff --git a/paimon-web-ui-new/pnpm-lock.yaml b/paimon-web-ui-new/pnpm-lock.yaml
index c1019e4..4eec1b4 100644
--- a/paimon-web-ui-new/pnpm-lock.yaml
+++ b/paimon-web-ui-new/pnpm-lock.yaml
@@ -29,9 +29,18 @@ dependencies:
'@antv/x6-vue-shape':
specifier: ^2.1.1
version: 2.1.1(@antv/x6@2.15.3)(vue@3.3.4)
+ '@vicons/antd':
+ specifier: ^0.12.0
+ version: 0.12.0
+ '@vicons/carbon':
+ specifier: ^0.12.0
+ version: 0.12.0
dart-sass:
specifier: ^1.25.0
version: 1.25.0
+ dayjs:
+ specifier: ^1.11.10
+ version: 1.11.10
lodash:
specifier: ^4.17.21
version: 4.17.21
@@ -1061,6 +1070,14 @@ packages:
resolution: {integrity: sha512-gLLqAm/Wg4jqO9B2RKSMoewOC1qnM70/8nJDmkYkduc3dG+wpbacI2NBRj5d9YDrYvKnqk/AIz4Z3h5Slgxtpw==}
dev: true
+ /@vicons/antd@0.12.0:
+ resolution: {integrity: sha512-C0p6aO1EmGG1QHrqgUWQS1No20934OdWSRQshM5NIDK5H1On6tC26U0hT6Rmp40KfUsvhvX5YW8BoWJdNFifPg==}
+ dev: false
+
+ /@vicons/carbon@0.12.0:
+ resolution: {integrity: sha512-kCOgr/ZOhZzoiFLJ8pwxMa2TMxrkCUOA22qExPabus35F4+USqzcsxaPoYtqRd9ROOYiHrSqwapak/ywF0D9bg==}
+ dev: false
+
/@vicons/ionicons5@0.12.0:
resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
dev: true
@@ -1745,6 +1762,10 @@ packages:
'@babel/runtime': 7.22.15
dev: true
+ /dayjs@1.11.10:
+ resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+ dev: false
+
/de-indent@1.0.2:
resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
dev: true
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 ae50657..52ae2b8 100644
--- a/paimon-web-ui-new/src/api/models/catalog/index.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/index.ts
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
under the License. */
import httpRequest from '@/api/request'
-import type { Catalog, Database, Table, TableQuery } from './types'
+import type { Catalog, Database, Table, Schema, TableQuery } from './types'
import type { ResponseOptions } from '@/api/types'
export * from './types'
@@ -48,7 +48,7 @@ export const getTables = (params: TableQuery) => {
* # Get schema
*/
export const getSchema = () => {
- return httpRequest.createHooks!<Table, any[]>({
+ return httpRequest.createHooks!<ResponseOptions<Schema[]>, Schema[]>({
url: '/metadata/query/schema',
method: 'post',
})
diff --git a/paimon-web-ui-new/src/api/request.ts b/paimon-web-ui-new/src/api/request.ts
index 188daa8..aaf5bd3 100644
--- a/paimon-web-ui-new/src/api/request.ts
+++ b/paimon-web-ui-new/src/api/request.ts
@@ -18,7 +18,7 @@ under the License. */
import { createAxle, type AxleInstance } from '@varlet/axle'
import { createUseAxle } from '@varlet/axle/use'
-import type { FetchOptions } from './types'
+import type { FetchOptions, ResponseOptions } from './types'
const axle: AxleInstance & { createHooks?: typeof createHooks } = createAxle({
baseURL: '/api'
@@ -58,7 +58,7 @@ const useAxle = createUseAxle({
})
function createHooks<T, R>(options: FetchOptions<T, R>) {
- return useAxle(options)
+ return useAxle<ResponseOptions<T>, R, Record<string, any>>(options)
}
axle.createHooks = createHooks
diff --git a/paimon-web-ui-new/src/api/types.ts b/paimon-web-ui-new/src/api/types.ts
index d48a32a..ea0363e 100644
--- a/paimon-web-ui-new/src/api/types.ts
+++ b/paimon-web-ui-new/src/api/types.ts
@@ -24,7 +24,7 @@ export interface ResponseOptions<P> {
msg: string
}
-export type FetchOptions<V, R = any, P = Record<string, any>> = Partial<UseAxleOptions<V, ResponseOptions<R>, P>> & {
+export type FetchOptions<V, R = any, P = Record<string, any>> = Partial<UseAxleOptions<ResponseOptions<V>, R, P>> & {
method: RunnerMethod
url: string
}
diff --git a/paimon-web-ui-new/src/layouts/content/index.tsx b/paimon-web-ui-new/src/layouts/content/index.tsx
index 23eb469..08382a7 100644
--- a/paimon-web-ui-new/src/layouts/content/index.tsx
+++ b/paimon-web-ui-new/src/layouts/content/index.tsx
@@ -25,7 +25,6 @@ export default defineComponent({
name: 'ContentPage',
setup() {
const configStore = useConfigStore()
- const route = useRoute()
const { menuOptions, state } = useData()
const getSideOption = (state: any) => {
const activeNavKey = configStore.getCurrentNavActive
@@ -53,7 +52,7 @@ export default defineComponent({
<SideBar
sideMenuOptions={this.sideMenuOptions}
/>
- ):<></>}
+ ) : null}
<n-layout-content content-style="height: calc(100vh - 64px);">
<router-view />
</n-layout-content>
diff --git a/paimon-web-ui-new/src/views/metadata/index.module.scss b/paimon-web-ui-new/src/views/metadata/components/schema/columns.ts
similarity index 56%
copy from paimon-web-ui-new/src/views/metadata/index.module.scss
copy to paimon-web-ui-new/src/views/metadata/components/schema/columns.ts
index f4df25c..3ae23c0 100644
--- a/paimon-web-ui-new/src/views/metadata/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/components/schema/columns.ts
@@ -15,18 +15,40 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- display: flex;
- width: 100%;
- height: 100%;
+import type { DataTableColumns } from 'naive-ui'
- .content {
- display: flex;
- flex-direction: column;
-
- width: calc(100% - 60px);
- height: 100%;
+import type { SchemaField, SchemaOption } from '@/api/models/catalog'
- padding: 14px 20px;
+export const fieldsColumns: DataTableColumns<SchemaField> = [
+ {
+ title: 'ID',
+ key: 'id'
+ },
+ {
+ title: 'Name',
+ key: 'name'
+ },
+ {
+ title: 'Type',
+ key: 'type'
+ },
+ {
+ title: 'Comment',
+ key: 'comment',
+ align: 'center',
+ render: (row) => {
+ return row.comment || '-'
+ }
+ },
+]
+
+export const optionsColumns: DataTableColumns<SchemaOption> = [
+ {
+ title: 'Key',
+ key: 'key'
+ },
+ {
+ title: 'Value',
+ key: 'value'
}
-}
+]
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 d097e6c..3fe46c2 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
@@ -15,87 +15,39 @@ 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 { type DataTableColumns } from 'naive-ui'
+import dayjs from 'dayjs'
-import { getSchema } from '@/api/models/catalog'
+import { getSchema, type Schema } from '@/api/models/catalog'
+import { fieldsColumns, optionsColumns } from './columns'
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 [, useSchemaInfo, { loading }] = getSchema()
-
- 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 [schemaData, useSchemaInfo, { loading }] = getSchema()
- const columns: DataTableColumns<RowData> = [
+ const columns: DataTableColumns<Schema> = [
{
title: '#',
type: 'expand',
- renderExpand: () => {
+ renderExpand: (row) => {
+ const { fields = [], option = [] } = row
+
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' }
- ]}
+ columns={fieldsColumns}
+ data={fields}
+ bordered={false}
+ />
+ <div class={styles.schema_field_title}>Options: </div>
+ <n-data-table
+ columns={optionsColumns}
+ data={option}
bordered={false}
/>
</div>
@@ -103,56 +55,29 @@ export default defineComponent({
},
{
title: 'ID',
- key: 'id',
- render: (_, index) => {
- return `${index + 1}`
- }
- },
- {
- title: 'Name',
- key: 'name'
+ key: 'schemaId',
},
{
- title: 'Age',
- key: 'age'
+ title: 'Partition Keys',
+ key: 'partitionKeys'
},
{
- title: 'Address',
- key: 'address'
+ title: 'Primary Keys',
+ key: 'primaryKeys'
},
{
- 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: 'Comment',
+ key: 'comment',
+ align: 'center',
+ render: (row) => {
+ return row.comment || '-'
}
},
{
- title: 'Action',
- key: 'actions',
- render() {
- return h(
- NButton,
- {
- size: 'small',
- },
- { default: () => 'Send Email' }
- )
+ title: 'Update Time',
+ key: 'updateTime',
+ render: (row) => {
+ return dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss')
}
}
]
@@ -170,7 +95,7 @@ export default defineComponent({
return {
columns,
- data,
+ schemaData,
loading,
t,
}
@@ -178,10 +103,12 @@ export default defineComponent({
render() {
return (
<n-card>
+ {this.loading}
<n-spin show={this.loading}>
<n-data-table
columns={this.columns}
- data={this.data}
+ data={this.schemaData?.data || []}
+ max-height="calc(100vh - 260px)"
/>
</n-spin>
</n-card>
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 f4df25c..31c4b17 100644
--- a/paimon-web-ui-new/src/views/metadata/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/index.module.scss
@@ -25,7 +25,6 @@ under the License. */
flex-direction: column;
width: calc(100% - 60px);
- height: 100%;
padding: 14px 20px;
}