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 492e01b [Feature] Optimize router & metadata Menu (#64)
492e01b is described below
commit 492e01ba603f7ea6a69480df29985975ae9c6d74
Author: xiaomo <[email protected]>
AuthorDate: Wed Oct 18 11:09:04 2023 +0800
[Feature] Optimize router & metadata Menu (#64)
---
.../layouts/content/components/menubar/index.tsx | 20 +++-
paimon-web-ui-new/src/locales/en/modules/login.ts | 2 +-
.../modules/cdc_ingestion.ts} | 18 +--
.../modules/metadata.ts} | 17 +--
paimon-web-ui-new/src/router/modules/playground.ts | 53 ++++----
.../index.module.scss => router/modules/system.ts} | 18 +--
paimon-web-ui-new/src/router/routes.ts | 22 +++-
paimon-web-ui-new/src/themes/modules/dark.ts | 2 +-
paimon-web-ui-new/src/themes/modules/light.ts | 2 +-
.../src/views/login/index.module.scss | 2 +-
.../components/menu-tree}/index.module.scss | 24 ++--
.../views/metadata/components/menu-tree/index.tsx | 133 +++++++++++++++++++++
.../views/{login => metadata}/index.module.scss | 19 ++-
.../index.module.scss => metadata/index.tsx} | 29 +++--
14 files changed, 243 insertions(+), 118 deletions(-)
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 00f7e53..7a6d713 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/locales/en/modules/login.ts
b/paimon-web-ui-new/src/locales/en/modules/login.ts
index 28bf49b..95dc71a 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/views/login/index.module.scss
b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
similarity index 83%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
index 83efba4..4ec83e7 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++ b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
@@ -15,17 +15,9 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- height: 100vh;
- width: 100vw;
+export default {
+ path: '/cdc_ingestion',
+ name: 'cdc_ingestion',
+ meta: { title: 'CDC Ingestion' },
+ component: () => import('@/layouts/content'),
}
-
-.form-container {
- padding: 30px 50px;
- width: 488px;
-}
-
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
diff --git a/paimon-web-ui-new/src/views/login/index.module.scss
b/paimon-web-ui-new/src/router/modules/metadata.ts
similarity index 84%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to paimon-web-ui-new/src/router/modules/metadata.ts
index 83efba4..becbb8f 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++ b/paimon-web-ui-new/src/router/modules/metadata.ts
@@ -15,17 +15,10 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- height: 100vh;
- width: 100vw;
+export default {
+ path: '/metadata',
+ name: 'metadata',
+ meta: { title: 'Metadata' },
+ component: () => import('@/views/metadata')
}
-.form-container {
- padding: 30px 50px;
- width: 488px;
-}
-
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
diff --git a/paimon-web-ui-new/src/router/modules/playground.ts
b/paimon-web-ui-new/src/router/modules/playground.ts
index 07863af..200d086 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/views/login/index.module.scss
b/paimon-web-ui-new/src/router/modules/system.ts
similarity index 83%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to paimon-web-ui-new/src/router/modules/system.ts
index 83efba4..d3fde59 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++ b/paimon-web-ui-new/src/router/modules/system.ts
@@ -15,17 +15,9 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- height: 100vh;
- width: 100vw;
+export default {
+ path: '/system',
+ name: 'system',
+ meta: { title: 'System' },
+ component: () => import('@/layouts/content'),
}
-
-.form-container {
- padding: 30px 50px;
- width: 488px;
-}
-
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
diff --git a/paimon-web-ui-new/src/router/routes.ts
b/paimon-web-ui-new/src/router/routes.ts
index 15339e4..5e5e8e1 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/themes/modules/dark.ts
b/paimon-web-ui-new/src/themes/modules/dark.ts
index 0a712c5..ca94a4b 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 5e91405..46e50f6 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 83efba4..d322757 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
+}
diff --git a/paimon-web-ui-new/src/views/login/index.module.scss
b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
similarity index 84%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to
paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
index 83efba4..536333a 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++
b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
@@ -16,16 +16,18 @@ specific language governing permissions and limitations
under the License. */
.container {
- height: 100vh;
- width: 100vw;
-}
+ width: 100%;
+ height: 100%;
-.form-container {
- padding: 30px 50px;
- width: 488px;
-}
+ .card {
+ height: 100%;
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
+ .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 0000000..5ec874e
--- /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 (
+ <div class={styles.container}>
+ <n-card class={styles.card} content-style={'padding:20px 18px;'}>
+ <n-space vertical>
+ <n-input placeholder={this.t('playground.search')} style="width:
100%;"
+ v-model:value={this.filterValue}
+ v-slots={{
+ prefix: () => <n-icon component={Search} />
+ }}
+ >
+ </n-input>
+ <n-tree
+ block-line
+ expand-on-click
+ selected-keys={this.selectedKeys}
+ on-update:selected-keys={this.handleTreeSelect}
+ data={this.treeData}
+ pattern={this.filterValue}
+ node-props={this.nodeProps}
+ />
+ </n-space>
+ </n-card>
+ </div>
+ );
+ }
+});
diff --git a/paimon-web-ui-new/src/views/login/index.module.scss
b/paimon-web-ui-new/src/views/metadata/index.module.scss
similarity index 85%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to paimon-web-ui-new/src/views/metadata/index.module.scss
index 83efba4..fe437d9 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/index.module.scss
@@ -16,16 +16,13 @@ specific language governing permissions and limitations
under the License. */
.container {
- height: 100vh;
- width: 100vw;
-}
+ display: flex;
+ width: 100%;
+ height: 100%;
-.form-container {
- padding: 30px 50px;
- width: 488px;
+ .content {
+ display: flex;
+ width: calc(100% - 60px);
+ height: 100%;
+ }
}
-
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
diff --git a/paimon-web-ui-new/src/views/login/index.module.scss
b/paimon-web-ui-new/src/views/metadata/index.tsx
similarity index 68%
copy from paimon-web-ui-new/src/views/login/index.module.scss
copy to paimon-web-ui-new/src/views/metadata/index.tsx
index 83efba4..3785271 100644
--- a/paimon-web-ui-new/src/views/login/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/index.tsx
@@ -15,17 +15,20 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- height: 100vh;
- width: 100vw;
-}
+import styles from './index.module.scss'
+import MenuTree from "./components/menu-tree"
-.form-container {
- padding: 30px 50px;
- width: 488px;
-}
-
-.logo {
- height: 80px;
- width: 80px;
-}
\ No newline at end of file
+export default defineComponent({
+ name: 'MetadataPage',
+ setup() { },
+ render() {
+ return (
+ <div class={styles.container}>
+ <MenuTree />
+ <div class={styles.content}>
+ <router-view />
+ </div>
+ </div>
+ );
+ },
+});
