primate: enable dynamic routes on API discovery

This would load Primate before API discovery finishes with some most
commonly available routes and make it seem Primate loads faster. After
login APIs are cached and further refreshes or opening views in another
tab would be super quick and won't require API discovery until session
expiry.

Fixes #332

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/page/GlobalLayout.vue

@@ -44,7 +44,6 @@
         :collapsed="collapsed"
         :collapsible="true"></side-menu>
     </template>
-    <!-- 下次优化这些代码 -->
     <template v-else>
       <a-drawer
         v-if="isMobile()"
@@ -112,7 +111,6 @@ export default {
   },
   computed: {
     ...mapState({
-      // 主路由
       mainMenu: state => state.permission.addRouters
     }),
     contentPaddingLeft () {
@@ -128,6 +126,9 @@ export default {
   watch: {
     sidebarOpened (val) {
       this.collapsed = !val
+    },
+    mainMenu (newMenu) {
+      this.menus = newMenu.find((item) => item.path === '/').children
     }
   },
   created () {

ui/src/config/router.js

@@ -35,7 +35,7 @@ import config from '@/config/section/config'
 import quota from '@/config/section/plugin/quota'
 import cloudian from '@/config/section/plugin/cloudian'
 
-export function generateRouterMap (section) {
+function generateRouterMap (section) {
   var map = {
     name: section.name,
     path: '/' + section.name,
@@ -167,8 +167,8 @@ export function generateRouterMap (section) {
   return map
 }
 
-export const asyncRouterMap = [
-  {
+export function asyncRouterMap () {
+  return [{
     path: '/',
     name: 'index',
     component: BasicLayout,
@@ -255,8 +255,8 @@ export const asyncRouterMap = [
   },
   {
     path: '*', redirect: '/exception/404', hidden: true
-  }
-]
+  }]
+}
 
 export const constantRouterMap = [
   {

ui/src/permission.js

@@ -43,8 +43,8 @@ router.beforeEach((to, from, next) => {
     } else {
       if (Object.keys(store.getters.apis).length === 0) {
         const cachedApis = Vue.ls.get(APIS, {})
-        if (Object.keys(cachedApis).length === 0) {
-          message.loading('Loading...', 4)
+        if (Object.keys(cachedApis).length > 0) {
+          message.loading('Loading...', 1.5)
         }
         store
           .dispatch('GetInfo')

ui/src/store/modules/permission.js

@@ -57,7 +57,7 @@ const permission = {
     GenerateRoutes ({ commit }, data) {
       return new Promise(resolve => {
         const apis = Object.keys(data.apis)
-        const accessedRouters = filterAsyncRouter(asyncRouterMap, apis)
+        const accessedRouters = filterAsyncRouter(asyncRouterMap(), apis)
         commit('SET_ROUTERS', accessedRouters)
         resolve()
       })

ui/src/store/modules/user.js

@@ -18,6 +18,9 @@
 import Cookies from 'js-cookie'
 import Vue from 'vue'
 import md5 from 'md5'
+import message from 'ant-design-vue/es/message'
+import router from '@/router'
+import store from '@/store'
 import { login, logout, api } from '@/api'
 import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS } from '@/store/mutation-types'
 
@@ -116,11 +119,25 @@ const user = {
     GetInfo ({ commit }) {
       return new Promise((resolve, reject) => {
         const cachedApis = Vue.ls.get(APIS, {})
-        if (Object.keys(cachedApis).length > 0) {
+        const hasAuth = Object.keys(cachedApis).length > 0
+        if (hasAuth) {
           console.log('Login detected, using cached APIs')
           commit('SET_APIS', cachedApis)
           resolve(cachedApis)
         } else {
+          // This will show the dashboard and some common navigation sections
+          // to most users/roles, while we complete API autodiscovery
+          const apis = {}
+          apis.listVirtualMachinesMetrics = {}
+          apis.listVolumesMetrics = {}
+          apis.listNetworks = {}
+          apis.listTemplates = {}
+          apis.listUsers = {}
+          apis.listAccounts = {}
+          commit('SET_APIS', apis)
+          resolve(apis)
+
+          const hide = message.loading('Discovering features...', 0)
           api('listApis').then(response => {
             const apis = {}
             const apiList = response.listapisresponse.api
@@ -133,7 +150,11 @@ const user = {
               }
             }
             commit('SET_APIS', apis)
-            resolve(apis)
+            store.dispatch('GenerateRoutes', { apis }).then(() => {
+              router.addRoutes(store.getters.addRouters)
+            })
+            hide()
+            message.success('Discovered all available features!')
           }).catch(error => {
             reject(error)
           })

ui/src/views/dashboard/Dashboard.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="page-header-index-wide">
-    <div v-if="showCapacityDashboard && !project">
+    <div v-if="$store.getters.userInfo.roletype === 'Admin' && !project">
       <capacity-dashboard/>
     </div>
     <div v-else>