From 67c1b04b3c7a7b94bc317a9f371fbc09a71a2f5f Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Thu, 8 Aug 2019 22:54:43 +0530
Subject: [PATCH] refactor config and make it small and light

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/CloudMonkey/Resource.vue    |  22 +-
 ui/src/components/tools/UserMenu.vue          |   2 +-
 ui/src/components/tools/setting.js            |   4 +-
 ui/src/config/apiConfig.js                    | 163 ---------
 ui/src/config/{router.config.js => router.js} | 310 +++++-------------
 ui/src/config/section/compute.js              |  61 ++++
 ui/src/config/section/image.js                |  22 ++
 ui/src/config/section/network.js              |  35 ++
 ui/src/config/section/project.js              |   7 +
 ui/src/config/section/storage.js              |  88 +++++
 .../{defaultSettings.js => settings.js}       |   0
 ui/src/core/bootstrap.js                      |   2 +-
 ui/src/core/lazy_use.js                       |   2 +-
 ui/src/core/use.js                            |   2 +-
 ui/src/router/index.js                        |   2 +-
 ui/src/store/modules/permission.js            |   5 +-
 ui/src/utils/domUtil.js                       |   2 +-
 ui/src/utils/request.js                       |   2 +-
 18 files changed, 315 insertions(+), 416 deletions(-)
 delete mode 100644 ui/src/config/apiConfig.js
 rename ui/src/config/{router.config.js => router.js} (65%)
 create mode 100644 ui/src/config/section/compute.js
 create mode 100644 ui/src/config/section/image.js
 create mode 100644 ui/src/config/section/network.js
 create mode 100644 ui/src/config/section/project.js
 create mode 100644 ui/src/config/section/storage.js
 rename ui/src/config/{defaultSettings.js => settings.js} (100%)

diff --git a/ui/src/components/CloudMonkey/Resource.vue b/ui/src/components/CloudMonkey/Resource.vue
index 65fc523b4f8..e1a7a276b17 100644
--- a/ui/src/components/CloudMonkey/Resource.vue
+++ b/ui/src/components/CloudMonkey/Resource.vue
@@ -187,7 +187,6 @@
 
 <script>
 import { api } from '@/api'
-import { apiConfig } from '@/config/apiConfig'
 import store from '@/store'
 
 export default {
@@ -195,7 +194,6 @@ export default {
   data () {
     return {
       apiName: '',
-      config: {},
       loading: false,
       columns: [],
       items: [],
@@ -229,7 +227,6 @@ export default {
       if (!this.routeName) {
         this.routeName = this.$route.matched[this.$route.matched.length - 1].parent.name
       }
-      this.config = apiConfig[this.routeName]
       this.apiName = ''
       this.actions = []
       this.columns = []
@@ -242,16 +239,19 @@ export default {
       if (search !== '') {
         params['keyword'] = search
       }
-      if (this.config) {
-        this.apiName = this.config.listApi
-        this.actions = this.config.actions
-        this.columnKeys = this.config.column
-      } else {
-        if (this.$route && this.$route.meta && this.$route.meta.permission) {
-          this.apiName = this.$route.meta.permission[0]
+      if (this.$route && this.$route.meta && this.$route.meta.permission) {
+        this.apiName = this.$route.meta.permission[0]
+        if (this.$route.meta.columns) {
+          this.columnKeys = this.$route.meta.columns
+        }
+        if (this.$route.meta.actions) {
+          this.actions = this.$route.meta.actions
         }
       }
-      if (this.apiName && this.apiName !== '' && !this.columnKeys || this.columnKeys.length === 0) {
+      if (this.apiName === '' || this.apiName === undefined) {
+        return
+      }
+      if (!this.columnKeys || this.columnKeys.length === 0) {
         for (const field of store.getters.apis[this.apiName]['response']) {
           this.columnKeys.push(field.name)
         }
diff --git a/ui/src/components/tools/UserMenu.vue b/ui/src/components/tools/UserMenu.vue
index 09eaacc3a8b..9df53f035bf 100644
--- a/ui/src/components/tools/UserMenu.vue
+++ b/ui/src/components/tools/UserMenu.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 import HeaderNotice from './HeaderNotice'
 import TranslationMenu from './TranslationMenu'
 import { mapActions, mapGetters } from 'vuex'
diff --git a/ui/src/components/tools/setting.js b/ui/src/components/tools/setting.js
index fdd592a258f..c801a8f75fc 100644
--- a/ui/src/components/tools/setting.js
+++ b/ui/src/components/tools/setting.js
@@ -1,5 +1,4 @@
 import { message } from 'ant-design-vue/es'
-// import defaultSettings from '../defaultSettings';
 
 let lessNodesAppended
 
@@ -88,8 +87,7 @@ const updateTheme = primaryColor => {
 }
 
 const updateInvertedMode = invertedMode => {
-  invertedMode = true;
-  console.log(invertedMode);
+  invertedMode = true
   invertedMode ? document.body.classList.add('layout-inverted-mode') : document.body.classList.remove('layout-inverted-mode')
 }
 
diff --git a/ui/src/config/apiConfig.js b/ui/src/config/apiConfig.js
deleted file mode 100644
index 0c6c3821023..00000000000
--- a/ui/src/config/apiConfig.js
+++ /dev/null
@@ -1,163 +0,0 @@
-// section -> list apis and actions
-
-export const apiConfig = {
-
-  // Instance
-  'vm': {
-    icon: 'cloud',
-    path: 'vm',
-    label: 'Instances',
-    listApi: 'listVirtualMachinesMetrics',
-    column: ['name', 'instancename', 'state', 'nic[].ipaddress', 'zonename', 'account', 'domain',
-      'cpunumber', 'cpuused', 'cputotal', 'memoryintfreekbs', 'memorytotal', 'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal'
-    ],
-    hidden: ['zonename', 'account', 'domain'],
-    actions: [
-      {
-        api: 'deployVirtualMachine',
-        icon: 'plus',
-        label: 'Deploy VM',
-        type: 'main',
-        params: ['name', 'zoneid', 'diskofferingid']
-      },
-      {
-        api: 'startVirtualMachine',
-        icon: 'caret-right',
-        label: 'Start VM',
-        type: 'main',
-        params: ['name', 'zoneid', 'diskofferingid'],
-        hidden: true
-      },
-      {
-        api: 'stopVirtualMachine',
-        icon: 'stop',
-        label: 'Stop VM',
-        type: 'main',
-        params: ['name', 'zoneid', 'diskofferingid']
-      }
-    ]
-  },
-
-  // Storage Group
-  'storage': {
-    icon: 'database',
-    path: 'storage',
-    label: 'Storage',
-    redirect: 'volume',
-    children: [
-      'volume',
-      'snapshot',
-      'vmsnapshot'
-    ]
-  },
-
-  // Volume
-  'volume': {
-    icon: 'hdd',
-    path: 'volume',
-    label: 'Volumes',
-    parent: 'storage',
-    listApi: 'listVolumesMetrics',
-    column: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'storage', 'hypervisor', 'account', 'domain', 'zonename'],
-    hidden: ['storage', 'utilization'],
-    actions: [
-      {
-        api: 'createVolume',
-        icon: 'plus',
-        label: 'Create Volumes',
-        type: 'main',
-        params: ['name', 'zoneid', 'diskofferingid']
-      }, {
-        api: 'uploadVolume',
-        icon: 'cloud-upload',
-        label: 'Upload Volume From URL',
-        type: 'main',
-        params: ['url', 'name', 'zoneid', 'format', 'diskofferingid', 'checksum']
-      }, {
-        api: 'getUploadParamsForVolume',
-        icon: 'upload',
-        label: 'Upload Local Volume',
-        params: ['@file', 'name', 'zoneid', 'format', 'checksum']
-      }, {
-        api: 'resizeVolume',
-        icon: 'fullscreen',
-        label: 'Resize Volume',
-        type: 'main',
-        params: ['id', 'virtualmachineid']
-      }, {
-        api: 'attachVolume',
-        icon: 'paper-clip',
-        label: 'Attach Volume',
-        params: ['id', 'virtualmachineid']
-      }, {
-        api: 'detachVolume',
-        icon: 'link',
-        label: 'Detach Volume',
-        params: ['id', 'virtualmachineid']
-      }, {
-        api: 'extractVolume',
-        icon: 'cloud-download',
-        label: 'Download Volume',
-        params: ['id', 'zoneid', 'mode'],
-        paramOptions: {
-          'mode': {
-            'value': 'HTTP_DOWNLOAD'
-          }
-        }
-      }, {
-        api: 'migrateVolume',
-        icon: 'drag',
-        label: 'Migrate Volume',
-        params: ['volumeid', 'storageid', 'livemigrate']
-      }, {
-        api: 'deleteVolume',
-        icon: 'delete',
-        label: 'Delete Volume',
-        params: ['id']
-      }
-    ]
-  },
-
-  // Snapshot Tab
-  'snapshot': {
-    icon: 'build',
-    path: 'snapshot',
-    label: 'Snapshots',
-    parent: 'storage',
-    listApi: 'listSnapshots',
-    column: ['volumename', 'name', 'state', 'intervaltype', 'created', 'account', 'domain'],
-    hidden: [],
-    actions: [
-    ]
-  },
-
-  // VM Snapshot Tab
-  'vmsnapshot': {
-    icon: 'camera',
-    path: 'vmsnapshot',
-    label: 'VM Snapshots',
-    parent: 'storage',
-    listApi: 'listVMSnapshot',
-    column: ['name', 'state', 'type', 'current', 'parent', 'created', 'account', 'domain'],
-    hidden: ['storage'],
-    actions: [
-    ]
-  },
-
-  // Guest Network
-  'guestnetwork': {
-    icon: 'wifi',
-    listApi: 'listNetworks',
-    column: [],
-    hidden: [],
-    actions: [
-      {
-        api: 'deleteNetwork',
-        icon: 'delete',
-        label: 'Delete Network',
-        params: ['id']
-      }
-    ]
-  }
-
-}
diff --git a/ui/src/config/router.config.js b/ui/src/config/router.js
similarity index 65%
rename from ui/src/config/router.config.js
rename to ui/src/config/router.js
index 185f4c03598..9a52c8d2293 100644
--- a/ui/src/config/router.config.js
+++ b/ui/src/config/router.js
@@ -1,6 +1,82 @@
 // eslint-disable-next-line
 import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
 
+import compute from '@/config/section/compute'
+import storage from '@/config/section/storage'
+import network from '@/config/section/network'
+import image from '@/config/section/image'
+import project from '@/config/section/project'
+
+export function generateRouterMap (section) {
+  var map = {
+    name: section.name,
+    path: '/' + section.name,
+    meta: { title: section.title, keepAlive: true, icon: section.icon },
+    component: RouteView
+  }
+
+  if (section.component) {
+    map.component = section.component
+  }
+
+  if (section.permission) {
+    map.meta.permission = section.permission
+  }
+
+  if (section.columns) {
+    map.meta.columns = section.columns
+  }
+
+  if (section.actions) {
+    map.meta.actions = section.actions
+  }
+
+  if (section.children && section.children.length > 0) {
+    map.redirect = '/' + section.children[0].name
+    map.meta.permission = section.children[0].permission
+    map.children = []
+    for (const child of section.children) {
+      map.children.push({
+        name: child.name,
+        path: '/' + child.name,
+        meta: {
+          title: child.title,
+          keepAlive: true,
+          icon: child.icon,
+          permission: child.permission,
+          params: child.params ? child.params : {},
+          columns: child.columns,
+          actions: child.actions
+        },
+        component: child.component,
+        hideChildrenInMenu: true,
+        children: [
+          {
+            path: '/' + child.name + '/:id',
+            meta: {
+              title: child.title,
+              keepAlive: true,
+              icon: child.icon,
+              permission: child.permission,
+              params: child.params ? child.params : {},
+              actions: child.actions ? child.actions : []
+            },
+            component: child.viewComponent ? child.viewComponent : child.component
+          }
+        ]
+      })
+    }
+  } else {
+    map.hideChildrenInMenu = true
+    map.children = [{
+      path: '/' + section.name + '/:id',
+      actions: section.actions ? section.actions : [],
+      component: section.viewComponent ? section.viewComponent : section.component
+    }]
+  }
+  return map
+}
+
 export const asyncRouterMap = [
   {
     path: '/',
@@ -17,235 +93,11 @@ export const asyncRouterMap = [
         component: () => import('@/views/dashboard/Dashboard')
       },
 
-      // compute
-      {
-        path: '/compute',
-        name: 'compute',
-        meta: { title: 'Compute', keepAlive: true, icon: 'cloud', permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ] },
-        component: RouteView,
-        redirect: '/vm',
-        children: [
-          {
-            path: '/vm',
-            name: 'vm',
-            meta: { title: 'Instances', keepAlive: true, icon: 'desktop', permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/vm/:id',
-                meta: { title: 'Instances', keepAlive: true, icon: 'cloud', permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ] },
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/kubernetes',
-            name: 'kubernetes',
-            meta: { title: 'Kubernetes', keepAlive: true, icon: 'radar-chart', permission: [ 'listVirtualMachines' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/kubernetes/:id',
-                meta: { title: 'Instances', keepAlive: true, icon: 'cloud', permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ] },
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/ssh',
-            name: 'ssh',
-            meta: { title: 'SSH Keys', icon: 'key', permission: [ 'listSSHKeyPairs' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/ssh/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/affinitygroups',
-            name: 'affinitygroups',
-            meta: { title: 'Affinity Groups', icon: 'swap', permission: [ 'listAffinityGroups' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/affinitygroups/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          }
-        ]
-      },
-
-      // storage
-      {
-        path: '/storage',
-        name: 'storage',
-        meta: { title: 'Storage', keepAlive: true, icon: 'database', permission: [ 'listVolumesMetrics', 'listVolumes' ] },
-        component: RouteView,
-        redirect: '/volume',
-        children: [
-          {
-            path: '/volume',
-            name: 'volume',
-            meta: { title: 'Volumes', icon: 'hdd', permission: [ 'listVolumesMetrics', 'listVolumes' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/volume/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/snapshot',
-            name: 'snapshot',
-            meta: { title: 'Snapshots', icon: 'build', permission: [ 'listSnapshots' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/snapshot/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/vmsnapshot',
-            name: 'vmsnapshot',
-            meta: { title: 'VM Snapshots', icon: 'camera', permission: [ 'listVMSnapshot' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/vmsnapshot/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          }
-        ]
-      },
-
-      // network
-      {
-        path: '/network',
-        name: 'network',
-        meta: { title: 'Network', keepAlive: true, icon: 'wifi', permission: [ 'listNetworks' ] },
-        component: RouteView,
-        redirect: '/guestnetwork',
-        children: [
-          {
-            path: '/guestnetwork',
-            name: 'guestnetwork',
-            meta: { title: 'Guest Networks', icon: 'gateway', permission: [ 'listNetworks' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/guestnetwork/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/vpc',
-            name: 'vpc',
-            meta: { title: 'VPCs', icon: 'deployment-unit', permission: [ 'listVPCs' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/vpc/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/securitygroups',
-            name: 'securitygroups',
-            meta: { title: 'Security Groups', icon: 'fire', permission: [ 'listSecurityGroups' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/securitygroups/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/vpngateway',
-            name: 'vpngateway',
-            meta: { title: 'VPN Gateways', icon: 'lock', permission: [ 'listVpnCustomerGateways' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/vpngateway/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          }
-        ]
-      },
-
-      // image
-      {
-        path: '/image',
-        name: 'image',
-        meta: { title: 'Images', keepAlive: true, icon: 'picture', permission: [ 'listTemplates' ] },
-        component: RouteView,
-        redirect: '/template',
-        children: [
-          {
-            path: '/template',
-            name: 'template',
-            meta: { title: 'Templates', icon: 'save', permission: [ 'listTemplates' ], params: { 'templatefilter': 'executable' } },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/template/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          },
-          {
-            path: '/iso',
-            name: 'iso',
-            meta: { title: 'Isos', icon: 'usb', permission: [ 'listIsos' ] },
-            component: () => import('@/components/CloudMonkey/Resource.vue'),
-            hideChildrenInMenu: true,
-            children: [
-              {
-                path: '/iso/:id',
-                component: () => import('@/components/CloudMonkey/Resource.vue')
-              }
-            ]
-          }
-        ]
-      },
-
-      // project
-      {
-        path: '/project',
-        name: 'project',
-        meta: { title: 'Projects', icon: 'project', permission: [ 'listProjects' ] },
-        component: () => import('@/components/CloudMonkey/Resource.vue'),
-        hideChildrenInMenu: true,
-        children: [
-          {
-            path: '/project/:id',
-            component: () => import('@/components/CloudMonkey/Resource.vue')
-          }
-        ]
-      },
+      generateRouterMap(compute),
+      generateRouterMap(storage),
+      generateRouterMap(network),
+      generateRouterMap(image),
+      generateRouterMap(project),
 
       // audit
       {
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
new file mode 100644
index 00000000000..b71f8224570
--- /dev/null
+++ b/ui/src/config/section/compute.js
@@ -0,0 +1,61 @@
+export default {
+  name: 'compute',
+  title: 'Compute',
+  icon: 'cloud',
+  children: [
+    {
+      name: 'vm',
+      title: 'Instances',
+      icon: 'desktop',
+      permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      columns: [
+        'name', 'instancename', 'state', 'nic[].ipaddress', 'zonename', 'account', 'domain',
+        'cpunumber', 'cpuused', 'cputotal', 'memoryintfreekbs', 'memorytotal',
+        'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal'
+      ],
+      hidden: ['zonename', 'account', 'domain'],
+      actions: [
+        {
+          api: 'deployVirtualMachine',
+          icon: 'plus',
+          label: 'Deploy VM',
+          params: ['name', 'zoneid', 'diskofferingid']
+        },
+        {
+          api: 'startVirtualMachine',
+          icon: 'caret-right',
+          label: 'Start VM',
+          params: ['name', 'zoneid', 'diskofferingid']
+        },
+        {
+          api: 'stopVirtualMachine',
+          icon: 'stop',
+          label: 'Stop VM',
+          params: ['name', 'zoneid', 'diskofferingid']
+        }
+      ]
+    },
+    {
+      name: 'kubernetes',
+      title: 'Kubernetes',
+      icon: 'radar-chart',
+      permission: [ 'listVirtualMachines' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'ssh',
+      title: 'SSH Keys',
+      icon: 'key',
+      permission: [ 'listSSHKeyPairs' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'affinitygroups',
+      title: 'Affinity Groups',
+      icon: 'swap',
+      permission: [ 'listAffinityGroups' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    }
+  ]
+}
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
new file mode 100644
index 00000000000..2fe31b12643
--- /dev/null
+++ b/ui/src/config/section/image.js
@@ -0,0 +1,22 @@
+export default {
+  name: 'image',
+  title: 'Images',
+  icon: 'picture',
+  children: [
+    {
+      name: 'template',
+      title: 'Templates',
+      icon: 'save',
+      permission: [ 'listTemplates' ],
+      params: { 'templatefilter': 'executable' },
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'iso',
+      title: 'ISOs',
+      icon: 'usb',
+      permission: [ 'listIsos' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    }
+  ]
+}
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
new file mode 100644
index 00000000000..9b37e01be95
--- /dev/null
+++ b/ui/src/config/section/network.js
@@ -0,0 +1,35 @@
+export default {
+  name: 'network',
+  title: 'Network',
+  icon: 'wifi',
+  children: [
+    {
+      name: 'guestnetwork',
+      title: 'Guest Networks',
+      icon: 'gateway',
+      permission: [ 'listNetworks' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'vpc',
+      title: 'VPCs',
+      icon: 'deployment-unit',
+      permission: [ 'listVPCs' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'securitygroups',
+      title: 'Security Groups',
+      icon: 'fire',
+      permission: [ 'listSecurityGroups' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    },
+    {
+      name: 'vpngateway',
+      title: 'VPN Gateways',
+      icon: 'lock',
+      permission: [ 'listVpnCustomerGateways' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue')
+    }
+  ]
+}
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
new file mode 100644
index 00000000000..29c8cc59590
--- /dev/null
+++ b/ui/src/config/section/project.js
@@ -0,0 +1,7 @@
+export default {
+  name: 'project',
+  title: 'Projects',
+  icon: 'project',
+  permission: [ 'listProjects' ],
+  component: () => import('@/components/CloudMonkey/Resource.vue')
+}
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
new file mode 100644
index 00000000000..08b10138de6
--- /dev/null
+++ b/ui/src/config/section/storage.js
@@ -0,0 +1,88 @@
+export default {
+  name: 'storage',
+  title: 'Storage',
+  icon: 'database',
+  children: [
+    {
+      name: 'volume',
+      title: 'Volumes',
+      icon: 'hdd',
+      permission: [ 'listVolumesMetrics', 'listVolumes' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'storage', 'hypervisor', 'account', 'domain', 'zonename'],
+      hidden: ['storage', 'utilization'],
+      actions: [
+        {
+          api: 'createVolume',
+          icon: 'plus',
+          label: 'Create Volumes',
+          type: 'main',
+          params: ['name', 'zoneid', 'diskofferingid']
+        }, {
+          api: 'uploadVolume',
+          icon: 'cloud-upload',
+          label: 'Upload Volume From URL',
+          type: 'main',
+          params: ['url', 'name', 'zoneid', 'format', 'diskofferingid', 'checksum']
+        }, {
+          api: 'getUploadParamsForVolume',
+          icon: 'upload',
+          label: 'Upload Local Volume',
+          params: ['@file', 'name', 'zoneid', 'format', 'checksum']
+        }, {
+          api: 'resizeVolume',
+          icon: 'fullscreen',
+          label: 'Resize Volume',
+          type: 'main',
+          params: ['id', 'virtualmachineid']
+        }, {
+          api: 'attachVolume',
+          icon: 'paper-clip',
+          label: 'Attach Volume',
+          params: ['id', 'virtualmachineid']
+        }, {
+          api: 'detachVolume',
+          icon: 'link',
+          label: 'Detach Volume',
+          params: ['id', 'virtualmachineid']
+        }, {
+          api: 'extractVolume',
+          icon: 'cloud-download',
+          label: 'Download Volume',
+          params: ['id', 'zoneid', 'mode'],
+          paramOptions: {
+            'mode': {
+              'value': 'HTTP_DOWNLOAD'
+            }
+          }
+        }, {
+          api: 'migrateVolume',
+          icon: 'drag',
+          label: 'Migrate Volume',
+          params: ['volumeid', 'storageid', 'livemigrate']
+        }, {
+          api: 'deleteVolume',
+          icon: 'delete',
+          label: 'Delete Volume',
+          params: ['id']
+        }
+      ]
+    },
+    {
+      name: 'snapshot',
+      title: 'Snapshots',
+      icon: 'build',
+      permission: [ 'listSnapshots' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      columns: ['volumename', 'name', 'state', 'intervaltype', 'created', 'account', 'domain']
+    },
+    {
+      name: 'vmsnapshot',
+      title: 'VM Snapshots',
+      icon: 'camera',
+      permission: [ 'listVMSnapshot' ],
+      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      columns: ['name', 'state', 'type', 'current', 'parent', 'created', 'account', 'domain']
+    }
+  ]
+}
diff --git a/ui/src/config/defaultSettings.js b/ui/src/config/settings.js
similarity index 100%
rename from ui/src/config/defaultSettings.js
rename to ui/src/config/settings.js
diff --git a/ui/src/core/bootstrap.js b/ui/src/core/bootstrap.js
index 6e926aaada9..08678f7f6a1 100644
--- a/ui/src/core/bootstrap.js
+++ b/ui/src/core/bootstrap.js
@@ -14,7 +14,7 @@ import {
   DEFAULT_CONTENT_WIDTH_TYPE,
   DEFAULT_MULTI_TAB
 } from '@/store/mutation-types'
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 
 export default function Initializer () {
   store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
diff --git a/ui/src/core/lazy_use.js b/ui/src/core/lazy_use.js
index 9d95097beb5..f2965c136f9 100644
--- a/ui/src/core/lazy_use.js
+++ b/ui/src/core/lazy_use.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 
 // base library
 import '@/core/lazy_lib/components_use'
diff --git a/ui/src/core/use.js b/ui/src/core/use.js
index febdc341b2a..934cfeadcba 100644
--- a/ui/src/core/use.js
+++ b/ui/src/core/use.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 
 // base library
 import Antd from 'ant-design-vue'
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index e14b9435036..9d508a8ac6d 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import { constantRouterMap } from '@/config/router.config'
+import { constantRouterMap } from '@/config/router'
 
 Vue.use(Router)
 
diff --git a/ui/src/store/modules/permission.js b/ui/src/store/modules/permission.js
index ddad5986eeb..809f4b39e87 100644
--- a/ui/src/store/modules/permission.js
+++ b/ui/src/store/modules/permission.js
@@ -1,5 +1,4 @@
-import { apiConfig } from '@/config/apiConfig'
-import { asyncRouterMap, constantRouterMap } from '@/config/router.config'
+import { asyncRouterMap, constantRouterMap } from '@/config/router'
 
 function hasApi (apis, route) {
   if (route.meta && route.meta.permission) {
@@ -42,7 +41,7 @@ const permission = {
       return new Promise(resolve => {
         const apis = Object.keys(data.apis)
         const accessedRouters = filterAsyncRouter(asyncRouterMap, apis)
-        commit('SET_ROUTERS', asyncRouterMap)
+        commit('SET_ROUTERS', accessedRouters)
         resolve()
       })
     }
diff --git a/ui/src/utils/domUtil.js b/ui/src/utils/domUtil.js
index 65d6463c443..d8220ce9d41 100644
--- a/ui/src/utils/domUtil.js
+++ b/ui/src/utils/domUtil.js
@@ -1,4 +1,4 @@
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 
 export const setDocumentTitle = function (title) {
   document.title = title
diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
index c1c95fbf57e..eef7cd37574 100644
--- a/ui/src/utils/request.js
+++ b/ui/src/utils/request.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import store from '@/store'
-import config from '@/config/defaultSettings'
+import config from '@/config/settings'
 import { VueAxios } from './axios'
 import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN, CURRENT_PROJECT } from '@/store/mutation-types'