You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@celeborn.apache.org by ni...@apache.org on 2024/01/22 07:15:14 UTC
(incubator-celeborn) branch main updated: [CELEBORN-1232] Add Menu to Celeborn Web
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-celeborn.git
The following commit(s) were added to refs/heads/main by this push:
new 3422198df [CELEBORN-1232] Add Menu to Celeborn Web
3422198df is described below
commit 3422198dfab98d2cb5cae83f97ec41cadb2063f4
Author: tiny-dust <id...@foxmail.com>
AuthorDate: Mon Jan 22 15:15:05 2024 +0800
[CELEBORN-1232] Add Menu to Celeborn Web
### What changes were proposed in this pull request?
### Why are the changes needed?
Configure the following menu and routing files for the Web UI:
- Overview
- Master
- Worker
- Application
- Tenant
### Does this PR introduce _any_ user-facing change?
No.
### How was this patch tested?
Local test.
Closes #2244 from tiny-dust/CELEBORN-1232.
Authored-by: tiny-dust <id...@foxmail.com>
Signed-off-by: SteNicholas <pr...@163.com>
---
web/.eslintrc.cjs | 4 ++--
web/.prettierrc.json | 1 +
web/src/App.vue | 8 +++----
.../components/menus/index.vue} | 28 ++++++++++++++++++----
web/src/layouts/layoutPage.vue | 27 ++++++++++++++++++---
web/src/router/index.ts | 2 +-
.../router/modules/{overview.ts => application.ts} | 17 ++++---------
web/src/router/modules/{overview.ts => master.ts} | 17 ++++---------
web/src/router/modules/overview.ts | 17 ++++---------
web/src/router/modules/{overview.ts => tenant.ts} | 17 ++++---------
web/src/router/modules/{overview.ts => worker.ts} | 17 ++++---------
web/src/router/routes.ts | 18 ++++++++++----
.../views/{OverView.vue => application/index.vue} | 10 ++++----
web/src/views/{OverView.vue => master/index.vue} | 10 ++++----
web/src/views/{OverView.vue => overview/index.vue} | 10 ++++----
web/src/views/{OverView.vue => tenant/index.vue} | 10 ++++----
web/src/views/{OverView.vue => worker/index.vue} | 10 ++++----
web/vite.config.ts | 19 +++++++--------
18 files changed, 122 insertions(+), 120 deletions(-)
diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
index fa030c20e..5d47455ab 100644
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@@ -20,11 +20,11 @@ require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
- 'extends': [
+ extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
- '@vue/eslint-config-prettier/skip-formatting'
+ '@vue/eslint-config-prettier'
],
parserOptions: {
ecmaVersion: 'latest'
diff --git a/web/.prettierrc.json b/web/.prettierrc.json
index ecdf3e07a..6237b1b69 100644
--- a/web/.prettierrc.json
+++ b/web/.prettierrc.json
@@ -1,5 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
+ "printWidth": 100,
"semi": false,
"tabWidth": 2,
"singleQuote": true,
diff --git a/web/src/App.vue b/web/src/App.vue
index 742eac8c6..3ed59396d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -16,14 +16,12 @@
* limitations under the License.
-->
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
<template>
- <n-config-provider style="height: 100%;">
+ <n-config-provider style="height: 100%">
<router-view />
</n-config-provider>
</template>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/web/src/views/OverView.vue b/web/src/layouts/components/menus/index.vue
similarity index 64%
copy from web/src/views/OverView.vue
copy to web/src/layouts/components/menus/index.vue
index ea8eb3074..70b876ee1 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/layouts/components/menus/index.vue
@@ -17,11 +17,31 @@
-->
<script setup lang="ts">
+import type { MenuOption } from 'naive-ui'
+import type { PropType } from 'vue'
+
+const router = useRouter()
+
+defineOptions({
+ name: 'SiderMenu'
+})
+
+defineProps({
+ menus: {
+ type: Array as PropType<MenuOption[]>,
+ default: () => []
+ }
+})
+
+const path = computed(() => {
+ return router.currentRoute.value.fullPath
+})
+
+const updateValue = (value: string) => {
+ router.push(value)
+}
</script>
<template>
- Welcome to Apache Celeborn.
+ <n-menu :options="menus" :default-value="path" @update:value="updateValue" />
</template>
-
-<style scoped lang="scss">
-</style>
diff --git a/web/src/layouts/layoutPage.vue b/web/src/layouts/layoutPage.vue
index 19822ea66..3acb369f7 100644
--- a/web/src/layouts/layoutPage.vue
+++ b/web/src/layouts/layoutPage.vue
@@ -17,18 +17,39 @@
-->
<script setup lang="ts">
+import type { MenuOption } from 'naive-ui'
+import SiderMenu from './components/menus/index.vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { children_routes } from '@/router/routes'
+
+const menus = ref<MenuOption[]>([])
+
+const mapRouterToMenu = (routes: RouteRecordRaw[]) => {
+ if (routes) {
+ menus.value = routes.map((item) => {
+ return {
+ label: item.meta?.title ?? '',
+ key: item.path,
+ path: item.path
+ }
+ })
+ }
+}
+
+mapRouterToMenu(children_routes)
</script>
<template>
- <div style="height: 100%; position: relative;">
+ <div style="height: 100%; position: relative">
<n-layout position="absolute">
<n-layout-header style="height: 64px; padding: 12px 24px" bordered>
<div class="logo">
- <img src="@/assets/logo.svg" alt="">
+ <img src="@/assets/logo.svg" alt="" />
</div>
</n-layout-header>
- <n-layout has-sider position="absolute" style="top: 64px;">
+ <n-layout has-sider position="absolute" style="top: 64px">
<n-layout-sider bordered content-style="padding: 24px;">
+ <sider-menu :menus="menus" />
</n-layout-sider>
<n-layout content-style="padding: 24px;">
<router-view />
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 9f8d6022b..205176a21 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -24,7 +24,7 @@ import {
import routes from './routes'
const router = createRouter({
- history: createWebHashHistory (import.meta.env.BASE_URL),
+ history: createWebHashHistory(import.meta.env.BASE_URL),
routes
})
diff --git a/web/src/router/modules/overview.ts b/web/src/router/modules/application.ts
similarity index 74%
copy from web/src/router/modules/overview.ts
copy to web/src/router/modules/application.ts
index 77c48c789..8d8d7f90b 100644
--- a/web/src/router/modules/overview.ts
+++ b/web/src/router/modules/application.ts
@@ -16,17 +16,8 @@
*/
export default {
- path: '/home',
- name: 'home',
- meta: { title: 'Home' },
- redirect: { name: 'overview' },
- sub: false,
- children: [
- {
- path: '/overview',
- name: 'overview',
- meta: { title: 'overview' },
- component: () => import('@/views/OverView.vue')
- },
- ]
+ path: '/application',
+ name: 'application',
+ meta: { title: 'Application' },
+ component: () => import('@/views/application/index.vue')
}
diff --git a/web/src/router/modules/overview.ts b/web/src/router/modules/master.ts
similarity index 74%
copy from web/src/router/modules/overview.ts
copy to web/src/router/modules/master.ts
index 77c48c789..d8215f190 100644
--- a/web/src/router/modules/overview.ts
+++ b/web/src/router/modules/master.ts
@@ -16,17 +16,8 @@
*/
export default {
- path: '/home',
- name: 'home',
- meta: { title: 'Home' },
- redirect: { name: 'overview' },
- sub: false,
- children: [
- {
- path: '/overview',
- name: 'overview',
- meta: { title: 'overview' },
- component: () => import('@/views/OverView.vue')
- },
- ]
+ path: '/master',
+ name: 'master',
+ meta: { title: 'Master' },
+ component: () => import('@/views/master/index.vue')
}
diff --git a/web/src/router/modules/overview.ts b/web/src/router/modules/overview.ts
index 77c48c789..fd30c9700 100644
--- a/web/src/router/modules/overview.ts
+++ b/web/src/router/modules/overview.ts
@@ -16,17 +16,8 @@
*/
export default {
- path: '/home',
- name: 'home',
- meta: { title: 'Home' },
- redirect: { name: 'overview' },
- sub: false,
- children: [
- {
- path: '/overview',
- name: 'overview',
- meta: { title: 'overview' },
- component: () => import('@/views/OverView.vue')
- },
- ]
+ path: '/overview',
+ name: 'overview',
+ meta: { title: 'Overview' },
+ component: () => import('@/views/overview/index.vue')
}
diff --git a/web/src/router/modules/overview.ts b/web/src/router/modules/tenant.ts
similarity index 74%
copy from web/src/router/modules/overview.ts
copy to web/src/router/modules/tenant.ts
index 77c48c789..a61d4e6bf 100644
--- a/web/src/router/modules/overview.ts
+++ b/web/src/router/modules/tenant.ts
@@ -16,17 +16,8 @@
*/
export default {
- path: '/home',
- name: 'home',
- meta: { title: 'Home' },
- redirect: { name: 'overview' },
- sub: false,
- children: [
- {
- path: '/overview',
- name: 'overview',
- meta: { title: 'overview' },
- component: () => import('@/views/OverView.vue')
- },
- ]
+ path: '/tenant',
+ name: 'tenant',
+ meta: { title: 'Tenant' },
+ component: () => import('@/views/tenant/index.vue')
}
diff --git a/web/src/router/modules/overview.ts b/web/src/router/modules/worker.ts
similarity index 74%
copy from web/src/router/modules/overview.ts
copy to web/src/router/modules/worker.ts
index 77c48c789..965b50419 100644
--- a/web/src/router/modules/overview.ts
+++ b/web/src/router/modules/worker.ts
@@ -16,17 +16,8 @@
*/
export default {
- path: '/home',
- name: 'home',
- meta: { title: 'Home' },
- redirect: { name: 'overview' },
- sub: false,
- children: [
- {
- path: '/overview',
- name: 'overview',
- meta: { title: 'overview' },
- component: () => import('@/views/OverView.vue')
- },
- ]
+ path: '/worker',
+ name: 'worker',
+ meta: { title: 'Worker' },
+ component: () => import('@/views/worker/index.vue')
}
diff --git a/web/src/router/routes.ts b/web/src/router/routes.ts
index 08da925db..7bc8486c5 100644
--- a/web/src/router/routes.ts
+++ b/web/src/router/routes.ts
@@ -16,16 +16,26 @@
*/
import overview_routes from './modules/overview'
+import master_routes from './modules/master'
+import worker_routes from './modules/worker'
+import application_routes from './modules/application'
+import tenant_routes from './modules/tenant'
+
+export const children_routes = [
+ overview_routes,
+ master_routes,
+ worker_routes,
+ application_routes,
+ tenant_routes
+]
export const basePage = [
{
path: '/',
- redirect: '/home',
+ redirect: { name: 'overview' },
sub: true,
component: () => import('@/layouts/layoutPage.vue'),
- children: [
- overview_routes
- ]
+ children: children_routes
}
]
diff --git a/web/src/views/OverView.vue b/web/src/views/application/index.vue
similarity index 84%
copy from web/src/views/OverView.vue
copy to web/src/views/application/index.vue
index ea8eb3074..cf78e361c 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/views/application/index.vue
@@ -17,11 +17,11 @@
-->
<script setup lang="ts">
+defineOptions({
+ name: 'ApplicationView'
+})
</script>
-<template>
- Welcome to Apache Celeborn.
-</template>
+<template>Welcome to Apache Celeborn. There is Application.</template>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/views/OverView.vue b/web/src/views/master/index.vue
similarity index 85%
copy from web/src/views/OverView.vue
copy to web/src/views/master/index.vue
index ea8eb3074..f73226811 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/views/master/index.vue
@@ -17,11 +17,11 @@
-->
<script setup lang="ts">
+defineOptions({
+ name: 'MasterView'
+})
</script>
-<template>
- Welcome to Apache Celeborn.
-</template>
+<template>Welcome to Apache Celeborn. There is Master.</template>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/views/OverView.vue b/web/src/views/overview/index.vue
similarity index 85%
copy from web/src/views/OverView.vue
copy to web/src/views/overview/index.vue
index ea8eb3074..c3da90346 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/views/overview/index.vue
@@ -17,11 +17,11 @@
-->
<script setup lang="ts">
+defineOptions({
+ name: 'OverView'
+})
</script>
-<template>
- Welcome to Apache Celeborn.
-</template>
+<template>Welcome to Apache Celeborn. There is OverView.</template>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/views/OverView.vue b/web/src/views/tenant/index.vue
similarity index 85%
copy from web/src/views/OverView.vue
copy to web/src/views/tenant/index.vue
index ea8eb3074..3062c1e7c 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/views/tenant/index.vue
@@ -17,11 +17,11 @@
-->
<script setup lang="ts">
+defineOptions({
+ name: 'TenantView'
+})
</script>
-<template>
- Welcome to Apache Celeborn.
-</template>
+<template>Welcome to Apache Celeborn. There is Tenant.</template>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/src/views/OverView.vue b/web/src/views/worker/index.vue
similarity index 85%
rename from web/src/views/OverView.vue
rename to web/src/views/worker/index.vue
index ea8eb3074..8005cf169 100644
--- a/web/src/views/OverView.vue
+++ b/web/src/views/worker/index.vue
@@ -17,11 +17,11 @@
-->
<script setup lang="ts">
+defineOptions({
+ name: 'WorkerView'
+})
</script>
-<template>
- Welcome to Apache Celeborn.
-</template>
+<template>Welcome to Apache Celeborn. There is Worker.</template>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 0a49b3c82..ed4dcf0a3 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -31,14 +31,11 @@ export default defineConfig({
AutoImport({
dts: './src/auto-imports.d.ts',
imports: [
- 'vue', 'vue-router', 'pinia',
+ 'vue',
+ 'vue-router',
+ 'pinia',
{
- 'naive-ui': [
- 'useDialog',
- 'useMessage',
- 'useNotification',
- 'useLoadingBar'
- ]
+ 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar']
}
]
}),
@@ -55,8 +52,8 @@ export default defineConfig({
css: {
preprocessorOptions: {
scss: {
- additionalData: `@import "@/assets/styles/base.scss";`,
- },
- },
- },
+ additionalData: `@import "@/assets/styles/base.scss";`
+ }
+ }
+ }
})