From 5ac794e6515a1da53321136fb003bc7efbb5b124 Mon Sep 17 00:00:00 2001 From: zhangmo8 Date: Wed, 18 Oct 2023 10:09:23 +0800 Subject: [PATCH 1/3] [Feature] Optimize router & metadata Menu --- .../content/components/menubar/index.tsx | 20 ++- .../src/router/modules/cdc_ingestion.ts | 23 +++ .../src/router/modules/metadata.ts | 23 +++ .../src/router/modules/playground.ts | 53 +++---- .../src/router/modules/system.ts | 23 +++ paimon-web-ui-new/src/router/routes.ts | 22 ++- .../components/menu-tree/index.module.scss | 33 +++++ .../metadata/components/menu-tree/index.tsx | 133 ++++++++++++++++++ .../src/views/metadata/index.module.scss | 28 ++++ .../src/views/metadata/index.tsx | 34 +++++ 10 files changed, 351 insertions(+), 41 deletions(-) create mode 100644 paimon-web-ui-new/src/router/modules/cdc_ingestion.ts create mode 100644 paimon-web-ui-new/src/router/modules/metadata.ts create mode 100644 paimon-web-ui-new/src/router/modules/system.ts create mode 100644 paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss create mode 100644 paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx create mode 100644 paimon-web-ui-new/src/views/metadata/index.module.scss create mode 100644 paimon-web-ui-new/src/views/metadata/index.tsx diff --git a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx index 00f7e5326..7a6d71343 100644 --- a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx +++ b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx @@ -15,26 +15,38 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import { RouterLink } from "vue-router" + export default defineComponent({ name: 'MenuBar', setup() { const { t } = useLocaleHooks() + const renderLabel = (label: string, link: string) => { + return h( + RouterLink, + { + to: {name: link} + }, + { default: () => label } + ) + } + const menuOptions = computed(() => ([ { - label: t('layout.playground'), + label: () => renderLabel(t('layout.playground'), 'playground'), key: 'playground', }, { - label: t('layout.metadata'), + label: () => renderLabel(t('layout.metadata'), 'metadata'), key: 'metadata', }, { - label: t('layout.cdc_ingestion'), + label: () => renderLabel(t('layout.cdc_ingestion'), 'cdc_ingestion'), key: 'cdc_ingestion', }, { - label: t('layout.system'), + label: () => renderLabel(t('layout.system'), 'system'), key: 'system', }, ])) diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts new file mode 100644 index 000000000..4ec83e7da --- /dev/null +++ b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts @@ -0,0 +1,23 @@ +/* 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. */ + +export default { + path: '/cdc_ingestion', + name: 'cdc_ingestion', + meta: { title: 'CDC Ingestion' }, + component: () => import('@/layouts/content'), +} diff --git a/paimon-web-ui-new/src/router/modules/metadata.ts b/paimon-web-ui-new/src/router/modules/metadata.ts new file mode 100644 index 000000000..d5e1a4850 --- /dev/null +++ b/paimon-web-ui-new/src/router/modules/metadata.ts @@ -0,0 +1,23 @@ +/* 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. */ + +export default { + path: '/metadata', + name: 'metadata', + meta: { title: '元数据查询' }, + component: () => import('@/views/metadata') +} diff --git a/paimon-web-ui-new/src/router/modules/playground.ts b/paimon-web-ui-new/src/router/modules/playground.ts index 07863afe2..200d0861c 100644 --- a/paimon-web-ui-new/src/router/modules/playground.ts +++ b/paimon-web-ui-new/src/router/modules/playground.ts @@ -15,35 +15,24 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -export default [ - { - path: '/', - name: 'homepage', - meta: { title: '首页' }, - redirect: { name: 'playground' }, - component: () => import('@/layouts/content'), - children: [ - { - path: '/playground', - name: 'playground', - meta: { title: '查询控制台' }, - redirect: { name: 'playground-query' }, - component: () => import('@/views/playground'), - children: [ - { - path: '/playground/query', - name: 'playground-query', - meta: { title: '查询' }, - component: () => import('@/views/playground/components/query') - }, - { - path: '/playground/workbench', - name: 'playground-workbench', - meta: { title: '工作台' }, - component: () => import('@/views/playground/components/workbench') - }, - ] - }, - ] - } -] +export default { + path: '/playground', + name: 'playground', + meta: { title: 'Playground' }, + redirect: { name: 'playground-query' }, + component: () => import('@/views/playground'), + children: [ + { + path: '/playground/query', + name: 'playground-query', + meta: { title: 'Query' }, + component: () => import('@/views/playground/components/query') + }, + { + path: '/playground/workbench', + name: 'playground-workbench', + meta: { title: 'Workbench' }, + component: () => import('@/views/playground/components/workbench') + }, + ] +} diff --git a/paimon-web-ui-new/src/router/modules/system.ts b/paimon-web-ui-new/src/router/modules/system.ts new file mode 100644 index 000000000..d3fde59a3 --- /dev/null +++ b/paimon-web-ui-new/src/router/modules/system.ts @@ -0,0 +1,23 @@ +/* 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. */ + +export default { + path: '/system', + name: 'system', + meta: { title: 'System' }, + component: () => import('@/layouts/content'), +} diff --git a/paimon-web-ui-new/src/router/routes.ts b/paimon-web-ui-new/src/router/routes.ts index 15339e49b..5e5e8e1c6 100644 --- a/paimon-web-ui-new/src/router/routes.ts +++ b/paimon-web-ui-new/src/router/routes.ts @@ -17,14 +17,26 @@ under the License. */ import type { RouteRecordRaw } from 'vue-router' import playground_routes from './modules/playground' +import metadata_routes from './modules/metadata' +import cdc_ingestion_routes from './modules/cdc_ingestion' +import system from './modules/system' /** * Basic page */ -const basePage: RouteRecordRaw[] = [ - ...playground_routes, -] - +const basePage: RouteRecordRaw = { + path: '/', + name: 'homepage', + meta: { title: 'Home' }, + redirect: { name: 'playground' }, + component: () => import('@/layouts/content'), + children: [ + playground_routes, + metadata_routes, + cdc_ingestion_routes, + system, + ] +} /** * Login page */ @@ -37,6 +49,6 @@ const loginPage: RouteRecordRaw[] = [ ] -const routes: RouteRecordRaw[] = [...basePage, ...loginPage] +const routes: RouteRecordRaw[] = [basePage, ...loginPage] export default routes diff --git a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss new file mode 100644 index 000000000..536333ae0 --- /dev/null +++ b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss @@ -0,0 +1,33 @@ +/* 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. */ + +.container { + width: 100%; + height: 100%; + + .card { + height: 100%; + + .search { + display: flex; + } + + .icon { + display: flex; + } + } +} 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 new file mode 100644 index 000000000..5ec874e64 --- /dev/null +++ b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx @@ -0,0 +1,133 @@ +/* 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 { FileTrayFullOutline, Search, FolderOpenOutline } from '@vicons/ionicons5'; +import styles from './index.module.scss' +import { NIcon } from 'naive-ui'; + +export default defineComponent({ + name: 'MenuTree', + setup() { + const { t } = useLocaleHooks() + + const treeVariables = reactive({ + treeData: [ + { + key: 'paimon2', + label: 'paimon2', + type: 'folder', + prefix: () => + h(NIcon, null, { + default: () => h(FolderOpenOutline) + }), + 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: '', + selectedKeys: [] + }) + + const dropdownMenu = [ + { + label: t('playground.new_folder'), + key: 'new_folder', + }, + { + label: t('playground.new_file'), + key: 'new_file', + }, + ] + + const nodeProps = () => { + return { + onClick () { + }, + } + } + + const handleTreeSelect = (value: never[], option: { children: any; }[]) => { + if (option[0]?.children) return + treeVariables.selectedKeys = value + } + + return { + dropdownMenu, + t, + ...toRefs(treeVariables), + nodeProps, + handleTreeSelect, + } + }, + render() { + return ( +
+ + + + }} + > + + + + +
+ ); + } +}); diff --git a/paimon-web-ui-new/src/views/metadata/index.module.scss b/paimon-web-ui-new/src/views/metadata/index.module.scss new file mode 100644 index 000000000..fe437d971 --- /dev/null +++ b/paimon-web-ui-new/src/views/metadata/index.module.scss @@ -0,0 +1,28 @@ +/* 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. */ + +.container { + display: flex; + width: 100%; + height: 100%; + + .content { + display: flex; + width: calc(100% - 60px); + height: 100%; + } +} diff --git a/paimon-web-ui-new/src/views/metadata/index.tsx b/paimon-web-ui-new/src/views/metadata/index.tsx new file mode 100644 index 000000000..37852716a --- /dev/null +++ b/paimon-web-ui-new/src/views/metadata/index.tsx @@ -0,0 +1,34 @@ +/* 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 styles from './index.module.scss' +import MenuTree from "./components/menu-tree" + +export default defineComponent({ + name: 'MetadataPage', + setup() { }, + render() { + return ( +
+ +
+ +
+
+ ); + }, +}); From ca78f98ec51c37ac2211a9498914c2022377d866 Mon Sep 17 00:00:00 2001 From: zhangmo8 Date: Wed, 18 Oct 2023 10:12:04 +0800 Subject: [PATCH 2/3] [Chore] router meta Chinese into English --- paimon-web-ui-new/src/router/modules/metadata.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paimon-web-ui-new/src/router/modules/metadata.ts b/paimon-web-ui-new/src/router/modules/metadata.ts index d5e1a4850..c3218a664 100644 --- a/paimon-web-ui-new/src/router/modules/metadata.ts +++ b/paimon-web-ui-new/src/router/modules/metadata.ts @@ -18,6 +18,6 @@ under the License. */ export default { path: '/metadata', name: 'metadata', - meta: { title: '元数据查询' }, + meta: { title: 'Metadata' }, component: () => import('@/views/metadata') } From 9d9d39206237afe3247aa9548e94626c9800a005 Mon Sep 17 00:00:00 2001 From: zhangmo8 Date: Wed, 18 Oct 2023 10:50:53 +0800 Subject: [PATCH 3/3] [Chore] line break --- paimon-web-ui-new/src/locales/en/modules/login.ts | 2 +- paimon-web-ui-new/src/router/modules/metadata.ts | 1 + paimon-web-ui-new/src/themes/modules/dark.ts | 2 +- paimon-web-ui-new/src/themes/modules/light.ts | 2 +- paimon-web-ui-new/src/views/login/index.module.scss | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/paimon-web-ui-new/src/locales/en/modules/login.ts b/paimon-web-ui-new/src/locales/en/modules/login.ts index 28bf49ba4..95dc71a3a 100644 --- a/paimon-web-ui-new/src/locales/en/modules/login.ts +++ b/paimon-web-ui-new/src/locales/en/modules/login.ts @@ -23,4 +23,4 @@ export default { password_tips: 'Please input password', light: 'Light', dark: 'Dark' -} \ No newline at end of file +} diff --git a/paimon-web-ui-new/src/router/modules/metadata.ts b/paimon-web-ui-new/src/router/modules/metadata.ts index c3218a664..becbb8fa9 100644 --- a/paimon-web-ui-new/src/router/modules/metadata.ts +++ b/paimon-web-ui-new/src/router/modules/metadata.ts @@ -21,3 +21,4 @@ export default { meta: { title: 'Metadata' }, component: () => import('@/views/metadata') } + diff --git a/paimon-web-ui-new/src/themes/modules/dark.ts b/paimon-web-ui-new/src/themes/modules/dark.ts index 0a712c5a1..ca94a4b47 100644 --- a/paimon-web-ui-new/src/themes/modules/dark.ts +++ b/paimon-web-ui-new/src/themes/modules/dark.ts @@ -70,4 +70,4 @@ const dark: GlobalThemeOverrides = { } } -export default dark \ No newline at end of file +export default dark diff --git a/paimon-web-ui-new/src/themes/modules/light.ts b/paimon-web-ui-new/src/themes/modules/light.ts index 5e9140557..46e50f6f9 100644 --- a/paimon-web-ui-new/src/themes/modules/light.ts +++ b/paimon-web-ui-new/src/themes/modules/light.ts @@ -37,4 +37,4 @@ const light: GlobalThemeOverrides = { } } -export default light \ No newline at end of file +export default light diff --git a/paimon-web-ui-new/src/views/login/index.module.scss b/paimon-web-ui-new/src/views/login/index.module.scss index 83efba4b6..d3227570b 100644 --- a/paimon-web-ui-new/src/views/login/index.module.scss +++ b/paimon-web-ui-new/src/views/login/index.module.scss @@ -28,4 +28,4 @@ under the License. */ .logo { height: 80px; width: 80px; -} \ No newline at end of file +}