From 53e26b484bc4ef07bd7dcb189cbc2c4dcb0840ed Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sun, 24 May 2020 00:05:15 +0530
Subject: [PATCH] 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 |  5 +++--
 ui/src/config/router.js                 | 10 +++++-----
 ui/src/permission.js                    |  4 ++--
 ui/src/store/modules/permission.js      |  2 +-
 ui/src/store/modules/user.js            | 25 +++++++++++++++++++++++--
 ui/src/views/dashboard/Dashboard.vue    |  2 +-
 6 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index a37e0a55901..0ddf934b868 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/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 () {
diff --git a/ui/src/config/router.js b/ui/src/config/router.js
index 58bc558c368..3ca17e4b1c5 100644
--- a/ui/src/config/router.js
+++ b/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 = [
   {
diff --git a/ui/src/permission.js b/ui/src/permission.js
index 22dab80720b..97aff53b668 100644
--- a/ui/src/permission.js
+++ b/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')
diff --git a/ui/src/store/modules/permission.js b/ui/src/store/modules/permission.js
index 1104a9f9509..3b080be5f63 100644
--- a/ui/src/store/modules/permission.js
+++ b/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()
       })
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index ad2c253233b..ad7497cf44a 100644
--- a/ui/src/store/modules/user.js
+++ b/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)
           })
diff --git a/ui/src/views/dashboard/Dashboard.vue b/ui/src/views/dashboard/Dashboard.vue
index c46ba8246f6..0147b4f8d49 100644
--- a/ui/src/views/dashboard/Dashboard.vue
+++ b/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>