This is an automated email from the ASF dual-hosted git repository.
wuzhiguo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/bigtop-manager.git
The following commit(s) were added to refs/heads/main by this push:
new 3bd8be3 BIGTOP-4208: Split routes into modules (#53)
3bd8be3 is described below
commit 3bd8be30c18d9a3b3819fbbdb4b364cd0fa8c3fa
Author: Fdefined <[email protected]>
AuthorDate: Wed Aug 28 09:58:35 2024 +0800
BIGTOP-4208: Split routes into modules (#53)
---
bigtop-manager-ui/src/layouts/sider.vue | 10 +-
.../src/router/{index.ts => guard.ts} | 54 ++++-----
bigtop-manager-ui/src/router/index.ts | 27 +----
bigtop-manager-ui/src/router/routes.ts | 132 ---------------------
.../{types/route.d.ts => router/routes/index.ts} | 30 +++--
.../routes/modules/clusters.ts} | 42 +++++--
.../routes/modules/dashboard.ts} | 21 ++--
.../route.d.ts => router/routes/modules/hosts.ts} | 21 ++--
.../routes/modules/services.ts} | 22 ++--
.../route.d.ts => router/routes/modules/user.ts} | 43 +++++--
bigtop-manager-ui/src/store/user/index.ts | 8 +-
bigtop-manager-ui/src/store/user/types.ts | 2 +
bigtop-manager-ui/src/types/route.d.ts | 2 +
.../src/{types/route.d.ts => utils/router-util.ts} | 27 ++++-
14 files changed, 205 insertions(+), 236 deletions(-)
diff --git a/bigtop-manager-ui/src/layouts/sider.vue
b/bigtop-manager-ui/src/layouts/sider.vue
index 1681360..67b338a 100644
--- a/bigtop-manager-ui/src/layouts/sider.vue
+++ b/bigtop-manager-ui/src/layouts/sider.vue
@@ -18,7 +18,7 @@
-->
<script setup lang="ts">
- import { onMounted, ref, watch } from 'vue'
+ import { computed, onMounted, ref, watch } from 'vue'
import { useUIStore } from '@/store/ui'
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'
@@ -35,6 +35,12 @@
const selectedKeys = ref<string[]>([])
const openKeys = ref<string[]>([])
+ const siderMenu = computed(() =>
+ menuItems.value
+ .filter((menuItem) => !menuItem.hidden)
+ .sort((pre, next) => (pre.priority ?? 0) - (next.priority ?? 0))
+ )
+
const updateSideBar = () => {
const splitPath = router.currentRoute.value.path.split('/')
const selectedKey = splitPath[splitPath.length - 1]
@@ -67,7 +73,7 @@
theme="dark"
mode="inline"
>
- <template v-for="item in menuItems">
+ <template v-for="item in siderMenu">
<template v-if="item.children">
<a-sub-menu :key="item.key">
<template #title>
diff --git a/bigtop-manager-ui/src/router/index.ts
b/bigtop-manager-ui/src/router/guard.ts
similarity index 51%
copy from bigtop-manager-ui/src/router/index.ts
copy to bigtop-manager-ui/src/router/guard.ts
index 85bdd13..dc95599 100644
--- a/bigtop-manager-ui/src/router/index.ts
+++ b/bigtop-manager-ui/src/router/guard.ts
@@ -17,38 +17,38 @@
* under the License.
*/
-import routes from './routes'
-import { createRouter, createWebHistory } from 'vue-router'
-import { useServiceStore } from '@/store/service'
+import type { Router } from 'vue-router'
+import type { ServiceVO } from '@/api/service/types.ts'
import { storeToRefs } from 'pinia'
-import { ServiceVO } from '@/api/service/types.ts'
+import { useServiceStore } from '@/store/service'
import { useClusterStore } from '@/store/cluster'
+function setCommonGuard(router: Router) {
+ router.beforeEach(async (to) => {
+ if (to.name === 'services') {
+ const clusterStore = useClusterStore()
+ const serviceStore = useServiceStore()
+ const { clusterId } = storeToRefs(clusterStore)
+ const { installedServices } = storeToRefs(serviceStore)
-const router = createRouter({
- routes,
- history: createWebHistory(import.meta.env.VITE_APP_BASE)
-})
+ if (clusterId.value === 0) {
+ await clusterStore.loadClusters()
+ await serviceStore.loadServices()
+ }
-router.beforeEach(async (to) => {
- if (to.name === 'services') {
- const clusterStore = useClusterStore()
- const serviceStore = useServiceStore()
- const { clusterId } = storeToRefs(clusterStore)
- const { installedServices } = storeToRefs(serviceStore)
+ const installedServiceNames = installedServices.value.map(
+ (service: ServiceVO) => service.serviceName
+ )
- if (clusterId.value === 0) {
- await clusterStore.loadClusters()
- await serviceStore.loadServices()
+ if (!installedServiceNames.includes(to.params.serviceName as string)) {
+ return '/404'
+ }
}
+ })
+}
- const installedServiceNames = installedServices.value.map(
- (service: ServiceVO) => service.serviceName
- )
-
- if (!installedServiceNames.includes(to.params.serviceName as string)) {
- return '/404'
- }
- }
-})
+function createRouterGuard(router: Router) {
+ /** common guard */
+ setCommonGuard(router)
+}
-export default router
+export { createRouterGuard }
diff --git a/bigtop-manager-ui/src/router/index.ts
b/bigtop-manager-ui/src/router/index.ts
index 85bdd13..a8b87dc 100644
--- a/bigtop-manager-ui/src/router/index.ts
+++ b/bigtop-manager-ui/src/router/index.ts
@@ -19,36 +19,13 @@
import routes from './routes'
import { createRouter, createWebHistory } from 'vue-router'
-import { useServiceStore } from '@/store/service'
-import { storeToRefs } from 'pinia'
-import { ServiceVO } from '@/api/service/types.ts'
-import { useClusterStore } from '@/store/cluster'
+import { createRouterGuard } from './guard'
const router = createRouter({
routes,
history: createWebHistory(import.meta.env.VITE_APP_BASE)
})
-router.beforeEach(async (to) => {
- if (to.name === 'services') {
- const clusterStore = useClusterStore()
- const serviceStore = useServiceStore()
- const { clusterId } = storeToRefs(clusterStore)
- const { installedServices } = storeToRefs(serviceStore)
-
- if (clusterId.value === 0) {
- await clusterStore.loadClusters()
- await serviceStore.loadServices()
- }
-
- const installedServiceNames = installedServices.value.map(
- (service: ServiceVO) => service.serviceName
- )
-
- if (!installedServiceNames.includes(to.params.serviceName as string)) {
- return '/404'
- }
- }
-})
+createRouterGuard(router)
export default router
diff --git a/bigtop-manager-ui/src/router/routes.ts
b/bigtop-manager-ui/src/router/routes.ts
deleted file mode 100644
index 0eefd1c..0000000
--- a/bigtop-manager-ui/src/router/routes.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * 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
- *
- * https://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 { h } from 'vue'
-import { RouteRecordRaw } from 'vue-router'
-import {
- AppstoreOutlined,
- DesktopOutlined,
- PieChartOutlined,
- SettingOutlined,
- UserOutlined,
- ProfileOutlined,
- BarsOutlined
-} from '@ant-design/icons-vue'
-
-const initialRoutes: RouteRecordRaw[] = [
- {
- path: '/dashboard',
- component: () => import('@/pages/dashboard/index.vue'),
- meta: {
- title: 'Dashboard',
- icon: h(PieChartOutlined)
- }
- }
-]
-
-const layoutRoutes: RouteRecordRaw[] = [
- ...initialRoutes,
- {
- path: '/hosts',
- component: () => import('@/pages/hosts/index.vue'),
- meta: {
- title: 'Hosts',
- icon: h(DesktopOutlined)
- }
- },
- {
- name: 'services',
- path: '/services/:serviceName',
- component: () => import('@/pages/service/index.vue'),
- meta: {
- title: 'Services',
- icon: h(AppstoreOutlined)
- }
- },
- {
- path: '/cluster/',
- meta: {
- title: 'Cluster',
- icon: h(SettingOutlined)
- },
- children: [
- {
- path: 'stack',
- component: () => import('@/pages/cluster/stack/index.vue'),
- meta: {
- title: 'Stack',
- icon: h(BarsOutlined)
- }
- },
- {
- path: 'account',
- component: () => import('@/pages/cluster/account/index.vue'),
- meta: {
- title: 'Account',
- icon: h(UserOutlined)
- }
- }
- ]
- }
-]
-
-const notDisplayedRoutes = [
- {
- path: '/user/',
- meta: {
- title: 'user',
- icon: h(UserOutlined)
- },
- children: [
- {
- path: 'profile',
- component: () => import('@/pages/user/profile/index.vue'),
- meta: {
- title: 'Profile',
- icon: h(ProfileOutlined)
- }
- },
- {
- path: 'settings',
- component: () => import('@/pages/user/settings/index.vue'),
- meta: {
- title: 'Settings',
- icon: h(SettingOutlined)
- }
- }
- ]
- }
-]
-
-const routes: RouteRecordRaw[] = [
- { path: '/login', component: () => import('@/pages/login/index.vue') },
- {
- path: '/',
- redirect: '/dashboard',
- component: () => import('@/layouts/index.vue'),
- children: [...layoutRoutes, ...notDisplayedRoutes]
- },
- {
- path: '/:pathMatch(.*)',
- component: () => import('@/pages/error/404.vue')
- }
-]
-
-export { initialRoutes, layoutRoutes }
-export default routes
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/index.ts
similarity index 56%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/index.ts
index db18401..23e4d8d 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/index.ts
@@ -17,12 +17,28 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import { mergeRouteModules } from '@/utils/router-util'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const dynamicRoutesFiles = import.meta.glob('./modules/**/*.ts', {
+ eager: true
+})
+
+export const dynamicRoutes: RouteRecordRaw[] =
+ mergeRouteModules(dynamicRoutesFiles)
+
+const routes: RouteRecordRaw[] = [
+ { path: '/login', component: () => import('@/pages/login/index.vue') },
+ {
+ path: '/',
+ redirect: '/dashboard',
+ component: () => import('@/layouts/index.vue'),
+ children: [...dynamicRoutes]
+ },
+ {
+ path: '/:pathMatch(.*)',
+ component: () => import('@/pages/error/404.vue')
}
-}
+]
+
+export default routes
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
similarity index 52%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/modules/clusters.ts
index db18401..c1afab5 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/clusters.ts
@@ -17,12 +17,40 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import {
+ SettingOutlined,
+ BarsOutlined,
+ UserOutlined
+} from '@ant-design/icons-vue'
+import { h } from 'vue'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/cluster/',
+ meta: {
+ title: 'Cluster',
+ icon: h(SettingOutlined)
+ },
+ children: [
+ {
+ path: 'stack',
+ component: () => import('@/pages/cluster/stack/index.vue'),
+ meta: {
+ title: 'Stack',
+ icon: h(BarsOutlined)
+ }
+ },
+ {
+ path: 'account',
+ component: () => import('@/pages/cluster/account/index.vue'),
+ meta: {
+ title: 'Account',
+ icon: h(UserOutlined)
+ }
+ }
+ ]
}
-}
+]
+
+export { routes }
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/modules/dashboard.ts
similarity index 70%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/modules/dashboard.ts
index db18401..d3bf5f4 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/dashboard.ts
@@ -17,12 +17,19 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import { PieChartOutlined } from '@ant-design/icons-vue'
+import { h } from 'vue'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/dashboard',
+ component: () => import('@/pages/dashboard/index.vue'),
+ meta: {
+ title: 'Dashboard',
+ icon: h(PieChartOutlined)
+ }
}
-}
+]
+
+export { routes }
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/modules/hosts.ts
similarity index 71%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/modules/hosts.ts
index db18401..ec8771e 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/hosts.ts
@@ -17,12 +17,19 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import { DesktopOutlined } from '@ant-design/icons-vue'
+import { h } from 'vue'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/hosts',
+ component: () => import('@/pages/hosts/index.vue'),
+ meta: {
+ title: 'Hosts',
+ icon: h(DesktopOutlined)
+ }
}
-}
+]
+
+export { routes }
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/modules/services.ts
similarity index 68%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/modules/services.ts
index db18401..9bcb738 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/services.ts
@@ -17,12 +17,20 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import { AppstoreOutlined } from '@ant-design/icons-vue'
+import { h } from 'vue'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const routes: RouteRecordRaw[] = [
+ {
+ name: 'services',
+ path: '/services/:serviceName',
+ component: () => import('@/pages/service/index.vue'),
+ meta: {
+ title: 'Services',
+ icon: h(AppstoreOutlined)
+ }
}
-}
+]
+
+export { routes }
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/router/routes/modules/user.ts
similarity index 52%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/router/routes/modules/user.ts
index db18401..9d0f95c 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/router/routes/modules/user.ts
@@ -17,12 +17,41 @@
* under the License.
*/
-import 'vue-router'
-import { VNode } from 'vue'
+import { RouteRecordRaw } from 'vue-router'
+import {
+ SettingOutlined,
+ UserOutlined,
+ ProfileOutlined
+} from '@ant-design/icons-vue'
+import { h } from 'vue'
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/user/',
+ meta: {
+ title: 'user',
+ icon: h(UserOutlined),
+ hidden: true
+ },
+ children: [
+ {
+ path: 'profile',
+ component: () => import('@/pages/user/profile/index.vue'),
+ meta: {
+ title: 'Profile',
+ icon: h(ProfileOutlined)
+ }
+ },
+ {
+ path: 'settings',
+ component: () => import('@/pages/user/settings/index.vue'),
+ meta: {
+ title: 'Settings',
+ icon: h(SettingOutlined)
+ }
+ }
+ ]
}
-}
+]
+
+export { routes }
diff --git a/bigtop-manager-ui/src/store/user/index.ts
b/bigtop-manager-ui/src/store/user/index.ts
index 27ad861..3f7d60f 100644
--- a/bigtop-manager-ui/src/store/user/index.ts
+++ b/bigtop-manager-ui/src/store/user/index.ts
@@ -22,11 +22,13 @@ import { getCurrentUser, updateUser } from '@/api/user'
import { computed, h, shallowRef } from 'vue'
import { UserReq, UserVO } from '@/api/user/types.ts'
import { MenuItem } from '@/store/user/types.ts'
-import { initialRoutes, layoutRoutes } from '@/router/routes.ts'
+import { routes as initialRoutes } from '@/router/routes/modules/dashboard.ts'
+import { dynamicRoutes as layoutRoutes } from '@/router/routes/index'
import { useClusterStore } from '@/store/cluster'
import { RouteRecordRaw } from 'vue-router'
import { useServiceStore } from '@/store/service'
import SvgIcon from '@/components/common/svg-icon/index.vue'
+import { routePriorityMap } from '@/utils/router-util'
export const useUserStore = defineStore(
'user',
@@ -45,7 +47,9 @@ export const useUserStore = defineStore(
key: route.meta?.title?.toLowerCase(),
to: route.path,
title: route.meta?.title,
- icon: route.meta?.icon
+ icon: route.meta?.icon,
+ hidden: Boolean(route.meta?.hidden),
+ priority: routePriorityMap[`${route.meta?.title}`] || 0
}
if (route.meta?.title === 'Services') {
diff --git a/bigtop-manager-ui/src/store/user/types.ts
b/bigtop-manager-ui/src/store/user/types.ts
index 4c2d0db..d79d071 100644
--- a/bigtop-manager-ui/src/store/user/types.ts
+++ b/bigtop-manager-ui/src/store/user/types.ts
@@ -25,6 +25,8 @@ type MenuItem = {
title?: string
icon?: VNode
children?: MenuItem[]
+ hidden?: boolean
+ priority?: number
}
export type { MenuItem }
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/types/route.d.ts
index db18401..1cbcb95 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/types/route.d.ts
@@ -24,5 +24,7 @@ declare module 'vue-router' {
interface RouteMeta {
title?: string
icon?: VNode
+ hidden?: boolean
+ priority?: number
}
}
diff --git a/bigtop-manager-ui/src/types/route.d.ts
b/bigtop-manager-ui/src/utils/router-util.ts
similarity index 57%
copy from bigtop-manager-ui/src/types/route.d.ts
copy to bigtop-manager-ui/src/utils/router-util.ts
index db18401..7e89af8 100644
--- a/bigtop-manager-ui/src/types/route.d.ts
+++ b/bigtop-manager-ui/src/utils/router-util.ts
@@ -16,13 +16,28 @@
* specific language governing permissions and limitations
* under the License.
*/
+import type { RouteRecordRaw } from 'vue-router'
-import 'vue-router'
-import { VNode } from 'vue'
+interface RouteModuleType {
+ routes: RouteRecordRaw[]
+}
+
+type RoutePriorityMap = { [key: string]: number }
+export const routePriorityMap: RoutePriorityMap = {
+ Dashboard: 1,
+ Hosts: 2,
+ Services: 3,
+ Cluster: 4
+}
-declare module 'vue-router' {
- interface RouteMeta {
- title?: string
- icon?: VNode
+export function mergeRouteModules(
+ routeModules: Record<string, unknown>
+): RouteRecordRaw[] {
+ const mergedRoutes: RouteRecordRaw[] = []
+ for (const routeModule of Object.values(routeModules)) {
+ const moduleRoutes = (routeModule as RouteModuleType)?.routes ?? []
+ mergedRoutes.push(...moduleRoutes)
}
+
+ return mergedRoutes
}
