Add multiple management server support

public/config.json

@@ -1,5 +1,10 @@
 {
-  "apiBase": "/client/api",
+  "servers": [
+    {
+      "name": "Manager 1",
+      "apiBase": "/client/api"
+    }
+  ],
   "docBase": "http://docs.cloudstack.apache.org/en/latest",
   "appTitle": "CloudStack",
   "footer": "Licensed under the <a href='http://www.apache.org/licenses/' target='_blank'>Apache License</a>, Version 2.0.",

src/main.js

@@ -36,7 +36,8 @@ Vue.use(notifierPlugin)
 
 fetch('config.json').then(response => response.json()).then(config => {
   Vue.prototype.$config = config
-  Vue.axios.defaults.baseURL = config.apiBase
+  Vue.axios.defaults.baseURL = config.servers[0].apiBase
+
   new Vue({
     router,
     store,

src/permission.js

@@ -26,7 +26,7 @@ import 'nprogress/nprogress.css' // progress bar style
 import message from 'ant-design-vue/es/message'
 import notification from 'ant-design-vue/es/notification'
 import { setDocumentTitle } from '@/utils/domUtil'
-import { ACCESS_TOKEN, APIS } from '@/store/mutation-types'
+import { ACCESS_TOKEN, APIS, SERVER_MANAGER } from '@/store/mutation-types'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -39,6 +39,10 @@ router.beforeEach((to, from, next) => {
     const title = i18n.t(to.meta.title) + ' - ' + Vue.prototype.$config.appTitle
     setDocumentTitle(title)
   }
+  const server = Vue.ls.get(SERVER_MANAGER) || Vue.prototype.$config.servers[0].apiBase
+  Vue.axios.defaults.baseURL = server
+  store.dispatch('SetServer', server)
+
   const validLogin = Vue.ls.get(ACCESS_TOKEN) || Cookies.get('userid') || Cookies.get('userid', { path: '/client' })
   if (validLogin) {
     if (to.path === '/user/login') {

src/store/getters.js

@@ -33,7 +33,8 @@ const getters = {
   asyncJobIds: state => state.user.asyncJobIds,
   isLdapEnabled: state => state.user.isLdapEnabled,
   cloudian: state => state.user.cloudian,
-  zones: state => state.user.zones
+  zones: state => state.user.zones,
+  server: state => state.app.server
 }
 
 export default getters

src/store/modules/app.js

@@ -26,7 +26,8 @@ import {
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_FIXED_HEADER_HIDDEN,
   DEFAULT_CONTENT_WIDTH_TYPE,
-  DEFAULT_MULTI_TAB
+  DEFAULT_MULTI_TAB,
+  SERVER_MANAGER
 } from '@/store/mutation-types'
 
 const app = {
@@ -43,7 +44,8 @@ const app = {
     color: null,
     inverted: true,
     multiTab: true,
-    metrics: false
+    metrics: false,
+    server: ''
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -95,6 +97,10 @@ const app = {
     },
     SET_METRICS: (state, bool) => {
       state.metrics = bool
+    },
+    SET_SERVER: (state, server) => {
+      Vue.ls.set(SERVER_MANAGER, server)
+      state.server = server
     }
   },
   actions: {
@@ -139,6 +145,9 @@ const app = {
     },
     SetMetrics ({ commit }, bool) {
       commit('SET_METRICS', bool)
+    },
+    SetServer ({ commit }, server) {
+      commit('SET_SERVER', server)
     }
   }
 }

src/store/mutation-types.js

@@ -30,6 +30,7 @@ export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
 export const APIS = 'APIS'
 export const ZONES = 'ZONES'
 export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
+export const SERVER_MANAGER = 'SERVER_MANAGER'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',

src/views/auth/Login.vue

@@ -35,6 +35,23 @@
           <a-icon type="safety" />
           {{ $t('label.login.portal') }}
         </span>
+        <a-form-item>
+          <a-select
+            size="large"
+            :placeholder="$t('server')"
+            v-decorator="[
+              'server',
+              {
+                initialValue: server
+              }
+            ]"
+            @change="onChangeServer">
+            <a-select-option v-for="server in $config.servers" :key="server.apiBase">
+              <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
+              {{ server.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
         <a-form-item>
           <a-input
             size="large"
@@ -85,6 +102,23 @@
           <a-icon type="audit" />
           Single Sign-On
         </span>
+        <a-form-item>
+          <a-select
+            size="large"
+            :placeholder="$t('server')"
+            v-decorator="[
+              'server',
+              {
+                initialValue: server
+              }
+            ]"
+            @change="onChangeServer">
+            <a-select-option v-for="server in $config.servers" :key="server.apiBase">
+              <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
+              {{ server.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
         <a-form-item>
           <a-select v-decorator="['idp', { initialValue: selectedIdp } ]">
             <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id">
@@ -110,8 +144,11 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import { api } from '@/api'
+import store from '@/store'
 import { mapActions } from 'vuex'
+import { SERVER_MANAGER } from '@/store/mutation-types'
 import TranslationMenu from '@/components/header/TranslationMenu'
 
 export default {
@@ -130,10 +167,12 @@ export default {
         time: 60,
         loginBtn: false,
         loginType: 0
-      }
+      },
+      server: ''
     }
   },
   created () {
+    this.server = Vue.ls.get(SERVER_MANAGER) || this.$config.servers[0].apiBase
   },
   mounted () {
     this.fetchData()
@@ -178,6 +217,9 @@ export default {
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
+          this.axios.defaults.baseURL = this.server
+          store.dispatch('SetServer', this.server)
+
           if (customActiveKey === 'cs') {
             const loginParams = { ...values }
             delete loginParams.username
@@ -218,6 +260,9 @@ export default {
       } else {
         this.$message.error(this.$t('message.login.failed'))
       }
+    },
+    onChangeServer (server) {
+      this.server = server
     }
   }
 }