BIGTOP-4208: Split routes into modules (#53)

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>

bigtop-manager-ui/src/router/guard.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 type { Router } from 'vue-router'
+import type { ServiceVO } from '@/api/service/types.ts'
+import { storeToRefs } from 'pinia'
+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)
+
+      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'
+      }
+    }
+  })
+}
+
+function createRouterGuard(router: Router) {
+  /** common guard */
+  setCommonGuard(router)
+}
+
+export { createRouterGuard }

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

bigtop-manager-ui/src/router/routes/index.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 { RouteRecordRaw } from 'vue-router'
+import { mergeRouteModules } from '@/utils/router-util'
+
+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

bigtop-manager-ui/src/router/routes/modules/clusters.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 { RouteRecordRaw } from 'vue-router'
+import {
+  SettingOutlined,
+  BarsOutlined,
+  UserOutlined
+} from '@ant-design/icons-vue'
+import { h } from 'vue'
+
+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 }

bigtop-manager-ui/src/router/routes/modules/dashboard.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { RouteRecordRaw } from 'vue-router'
+import { PieChartOutlined } from '@ant-design/icons-vue'
+import { h } from 'vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/dashboard',
+    component: () => import('@/pages/dashboard/index.vue'),
+    meta: {
+      title: 'Dashboard',
+      icon: h(PieChartOutlined)
+    }
+  }
+]
+
+export { routes }