From 500c946118f2a3beab764df5e10c5676143664ac Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 1 Apr 2021 15:00:06 +0700
Subject: [PATCH 1/6] add multiple management server support

---
 ui/public/config.json                 |  7 ++++
 ui/src/components/widgets/Console.vue | 14 +++++++-
 ui/src/main.js                        |  2 +-
 ui/src/permission.js                  | 15 +++++++-
 ui/src/store/getters.js               |  3 +-
 ui/src/store/modules/app.js           | 13 +++++--
 ui/src/store/mutation-types.js        |  1 +
 ui/src/views/auth/Login.vue           | 49 ++++++++++++++++++++++++++-
 8 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/ui/public/config.json b/ui/public/config.json
index 45cc974ffeba..bb18d2a4228c 100644
--- a/ui/public/config.json
+++ b/ui/public/config.json
@@ -1,5 +1,12 @@
 {
   "apiBase": "/client/api",
+  "servers": [
+    {
+      "name": "Local-Server",
+      "apiHost": "",
+      "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.",
diff --git a/ui/src/components/widgets/Console.vue b/ui/src/components/widgets/Console.vue
index 3064d8f0def4..b9a5b05536a6 100644
--- a/ui/src/components/widgets/Console.vue
+++ b/ui/src/components/widgets/Console.vue
@@ -18,7 +18,7 @@
 <template>
   <a
     v-if="['vm', 'systemvm', 'router', 'ilbvm'].includes($route.meta.name) && 'updateVirtualMachine' in $store.getters.apis"
-    :href="'/client/console?cmd=access&vm=' + resource.id"
+    :href="server + '/client/console?cmd=access&vm=' + resource.id"
     target="_blank">
     <a-button style="margin-left: 5px" shape="circle" type="dashed" :size="size" :disabled="['Stopped', 'Error', 'Destroyed'].includes(resource.state)" >
       <a-icon type="code" />
@@ -27,6 +27,9 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import { SERVER_MANAGER } from '@/store/mutation-types'
+
 export default {
   name: 'Console',
   props: {
@@ -38,6 +41,15 @@ export default {
       type: String,
       default: 'small'
     }
+  },
+  computed: {
+    server () {
+      const serverStorage = Vue.ls.get(SERVER_MANAGER)
+      if (!serverStorage.apiHost || serverStorage.apiHost === '/') {
+        return location.origin
+      }
+      return serverStorage.apiHost
+    }
   }
 }
 </script>
diff --git a/ui/src/main.js b/ui/src/main.js
index 064314b98de8..b60080c0d678 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -37,7 +37,7 @@ Vue.use(toLocaleDatePlugin)
 
 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].apiHost || '') + config.servers[0].apiBase
 
   loadLanguageAsync().then(() => {
     new Vue({
diff --git a/ui/src/permission.js b/ui/src/permission.js
index 8e975118611e..d931f5f5a2a8 100644
--- a/ui/src/permission.js
+++ b/ui/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,19 @@ router.beforeEach((to, from, next) => {
     const title = i18n.t(to.meta.title) + ' - ' + Vue.prototype.$config.appTitle
     setDocumentTitle(title)
   }
+
+  const servers = Vue.prototype.$config.servers
+  const serverStorage = Vue.ls.get(SERVER_MANAGER)
+  let apiFullPath = ''
+  if (serverStorage) {
+    apiFullPath = (serverStorage.apiHost || '') + serverStorage.apiBase
+  }
+  const serverFilter = servers.filter(ser => (ser.apiHost || '') + ser.apiBase === apiFullPath)
+  const server = serverFilter[0] || servers[0]
+
+  Vue.axios.defaults.baseURL = (server.apiHost || '') + server.apiBase
+  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') {
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index 4e2d5eb21a60..1571502b4db0 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -35,7 +35,8 @@ const getters = {
   cloudian: state => state.user.cloudian,
   zones: state => state.user.zones,
   timezoneoffset: state => state.user.timezoneoffset,
-  usebrowsertimezone: state => state.user.usebrowsertimezone
+  usebrowsertimezone: state => state.user.usebrowsertimezone,
+  server: state => state.app.server
 }
 
 export default getters
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
index a03fc63b2ef4..e512c42f3728 100644
--- a/ui/src/store/modules/app.js
+++ b/ui/src/store/modules/app.js
@@ -27,7 +27,8 @@ import {
   DEFAULT_FIXED_HEADER_HIDDEN,
   DEFAULT_CONTENT_WIDTH_TYPE,
   DEFAULT_MULTI_TAB,
-  USE_BROWSER_TIMEZONE
+  USE_BROWSER_TIMEZONE,
+  SERVER_MANAGER
 } from '@/store/mutation-types'
 
 const app = {
@@ -44,7 +45,8 @@ const app = {
     color: null,
     inverted: true,
     multiTab: true,
-    metrics: false
+    metrics: false,
+    server: ''
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -100,6 +102,10 @@ const app = {
     SET_USE_BROWSER_TIMEZONE: (state, bool) => {
       Vue.ls.set(USE_BROWSER_TIMEZONE, bool)
       state.usebrowsertimezone = bool
+    },
+    SET_SERVER: (state, server) => {
+      Vue.ls.set(SERVER_MANAGER, server)
+      state.server = server
     }
   },
   actions: {
@@ -147,6 +153,9 @@ const app = {
     },
     SetUseBrowserTimezone ({ commit }, bool) {
       commit('SET_USE_BROWSER_TIMEZONE', bool)
+    },
+    SetServer ({ commit }, server) {
+      commit('SET_SERVER', server)
     }
   }
 }
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index 9d735610e072..16d0ac10463c 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -32,6 +32,7 @@ export const ZONES = 'ZONES'
 export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
 export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
+export const SERVER_MANAGER = 'SERVER_MANAGER'
 
 export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',
diff --git a/ui/src/views/auth/Login.vue b/ui/src/views/auth/Login.vue
index a3fdf3bb96aa..ccd07477ab2c 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/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.apiHost || '') + server.apiBase
+              }
+            ]"
+            @change="onChangeServer">
+            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
+              <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
         <a-form-item>
           <a-input
             size="large"
@@ -85,6 +102,23 @@
           <a-icon type="audit" />
           {{ $t('label.login.single.signon') }}
         </span>
+        <a-form-item>
+          <a-select
+            size="large"
+            :placeholder="$t('server')"
+            v-decorator="[
+              'server',
+              {
+                initialValue: (server.apiHost || '') + server.apiBase
+              }
+            ]"
+            @change="onChangeServer">
+            <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
+              <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
+              {{ item.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]
   },
   mounted () {
     this.fetchData()
@@ -178,6 +217,9 @@ export default {
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
+          this.axios.defaults.baseURL = (this.server.apiHost || '') + this.server.apiBase
+          store.dispatch('SetServer', this.server)
+
           if (customActiveKey === 'cs') {
             const loginParams = { ...values }
             delete loginParams.username
@@ -218,6 +260,11 @@ export default {
       } else {
         this.$message.error(this.$t('message.login.failed'))
       }
+    },
+    onChangeServer (server) {
+      const servers = this.$config.servers || []
+      const serverFilter = servers.filter(ser => (ser.apiHost || '') + ser.apiBase === server)
+      this.server = serverFilter[0] || {}
     }
   }
 }

From 11b1c87f66ff7f08d169ad209511192120a3dd4c Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 7 Jun 2021 13:20:33 +0700
Subject: [PATCH 2/6] display the server on the user menu

---
 ui/src/components/header/UserMenu.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 33335c6efd15..7332d54577b5 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -20,6 +20,15 @@
 
     <translation-menu class="action"/>
     <header-notice class="action"/>
+    <label class="user-menu-server-info action">
+      <a-icon
+        slot="prefix"
+        type="database"
+        :style="[{
+          color: $config.theme['@primary-color']
+        }]"></a-icon>
+      {{ server.name || server.apiBase || 'Local-Server' }}
+    </label>
     <a-dropdown>
       <span class="user-menu-dropdown action">
         <a-avatar class="user-menu-avatar avatar" size="small" :src="avatar()"/>
@@ -59,9 +68,11 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import HeaderNotice from './HeaderNotice'
 import TranslationMenu from './TranslationMenu'
 import { mapActions, mapGetters } from 'vuex'
+import { SERVER_MANAGER } from '@/store/mutation-types'
 
 export default {
   name: 'UserMenu',
@@ -69,6 +80,11 @@ export default {
     TranslationMenu,
     HeaderNotice
   },
+  computed: {
+    server () {
+      return Vue.ls.get(SERVER_MANAGER) || this.$config.servers[0]
+    }
+  },
   methods: {
     ...mapActions(['Logout']),
     ...mapGetters(['nickname', 'avatar']),
@@ -108,5 +124,11 @@ export default {
     min-width: 12px;
     margin-right: 8px;
   }
+
+  &-server-info {
+    .anticon {
+      margin-right: 5px;
+    }
+  }
 }
 </style>

From baaec384daa10a1fa36646b7a7bf808a3d113eb6 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 22 Jun 2021 12:51:04 +0700
Subject: [PATCH 3/6] remove primary color in server icon

---
 ui/src/components/header/UserMenu.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 7332d54577b5..accf4b857ac6 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -21,12 +21,7 @@
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action">
-      <a-icon
-        slot="prefix"
-        type="database"
-        :style="[{
-          color: $config.theme['@primary-color']
-        }]"></a-icon>
+      <a-icon slot="prefix" type="database""></a-icon>
       {{ server.name || server.apiBase || 'Local-Server' }}
     </label>
     <a-dropdown>

From a3bf6eb1fe8c36e7341b94f1c668612dbcdccaea Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 13 Jul 2021 08:29:42 +0700
Subject: [PATCH 4/6] using `/client` from apiBase

---
 ui/src/components/widgets/Console.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/widgets/Console.vue b/ui/src/components/widgets/Console.vue
index b9a5b05536a6..d3a6fa95948b 100644
--- a/ui/src/components/widgets/Console.vue
+++ b/ui/src/components/widgets/Console.vue
@@ -18,7 +18,7 @@
 <template>
   <a
     v-if="['vm', 'systemvm', 'router', 'ilbvm'].includes($route.meta.name) && 'updateVirtualMachine' in $store.getters.apis"
-    :href="server + '/client/console?cmd=access&vm=' + resource.id"
+    :href="server + '/console?cmd=access&vm=' + resource.id"
     target="_blank">
     <a-button style="margin-left: 5px" shape="circle" type="dashed" :size="size" :disabled="['Stopped', 'Error', 'Destroyed'].includes(resource.state)" >
       <a-icon type="code" />
@@ -45,10 +45,11 @@ export default {
   computed: {
     server () {
       const serverStorage = Vue.ls.get(SERVER_MANAGER)
+      const apiBase = serverStorage.apiBase.replace('/api', '')
       if (!serverStorage.apiHost || serverStorage.apiHost === '/') {
-        return location.origin
+        return [location.origin, apiBase].join('')
       }
-      return serverStorage.apiHost
+      return [serverStorage.apiHost, apiBase].join('')
     }
   }
 }

From f29e0b9972c3a6f1c4b6ac8728a2f59ea19d16c6 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Mon, 26 Jul 2021 08:50:40 +0700
Subject: [PATCH 5/6] add a setting that allows users to customize whether to
 use multiple servers or not

---
 ui/public/config.json                 |  1 +
 ui/src/components/header/UserMenu.vue |  4 ++--
 ui/src/components/widgets/Console.vue |  3 +++
 ui/src/main.js                        |  7 ++++++-
 ui/src/permission.js                  | 21 +++++++++++----------
 ui/src/views/auth/Login.vue           | 15 ++++++++++-----
 6 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/ui/public/config.json b/ui/public/config.json
index 314f75f799e2..24d3056b47e0 100644
--- a/ui/public/config.json
+++ b/ui/public/config.json
@@ -55,5 +55,6 @@
   },
   "plugins": [],
   "basicZoneEnabled": true,
+  "multipleServer": true,
   "docHelpMappings": {}
 }
diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index accf4b857ac6..33f4bc33b006 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -20,8 +20,8 @@
 
     <translation-menu class="action"/>
     <header-notice class="action"/>
-    <label class="user-menu-server-info action">
-      <a-icon slot="prefix" type="database""></a-icon>
+    <label class="user-menu-server-info action" v-if="$config.multipleServer">
+      <a-icon slot="prefix" type="database" />
       {{ server.name || server.apiBase || 'Local-Server' }}
     </label>
     <a-dropdown>
diff --git a/ui/src/components/widgets/Console.vue b/ui/src/components/widgets/Console.vue
index d3a6fa95948b..0c65600ea45c 100644
--- a/ui/src/components/widgets/Console.vue
+++ b/ui/src/components/widgets/Console.vue
@@ -44,6 +44,9 @@ export default {
   },
   computed: {
     server () {
+      if (!this.$config.multipleServer) {
+        return this.$config.apiBase.replace('/api', '')
+      }
       const serverStorage = Vue.ls.get(SERVER_MANAGER)
       const apiBase = serverStorage.apiBase.replace('/api', '')
       if (!serverStorage.apiHost || serverStorage.apiHost === '/') {
diff --git a/ui/src/main.js b/ui/src/main.js
index b60080c0d678..9ed69683ec3e 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -37,7 +37,12 @@ Vue.use(toLocaleDatePlugin)
 
 fetch('config.json').then(response => response.json()).then(config => {
   Vue.prototype.$config = config
-  Vue.axios.defaults.baseURL = (config.servers[0].apiHost || '') + config.servers[0].apiBase
+  let basUrl = config.apiBase
+  if (config.multipleServer) {
+    basUrl = (config.servers[0].apiHost || '') + config.servers[0].apiBase
+  }
+
+  Vue.axios.defaults.baseURL = basUrl
 
   loadLanguageAsync().then(() => {
     new Vue({
diff --git a/ui/src/permission.js b/ui/src/permission.js
index d931f5f5a2a8..1b6c468afa00 100644
--- a/ui/src/permission.js
+++ b/ui/src/permission.js
@@ -40,17 +40,18 @@ router.beforeEach((to, from, next) => {
     setDocumentTitle(title)
   }
 
-  const servers = Vue.prototype.$config.servers
-  const serverStorage = Vue.ls.get(SERVER_MANAGER)
-  let apiFullPath = ''
-  if (serverStorage) {
-    apiFullPath = (serverStorage.apiHost || '') + serverStorage.apiBase
+  if (Vue.prototype.$config.multipleServer) {
+    const servers = Vue.prototype.$config.servers
+    const serverStorage = Vue.ls.get(SERVER_MANAGER)
+    let apiFullPath = ''
+    if (serverStorage) {
+      apiFullPath = (serverStorage.apiHost || '') + serverStorage.apiBase
+    }
+    const serverFilter = servers.filter(ser => (ser.apiHost || '') + ser.apiBase === apiFullPath)
+    const server = serverFilter[0] || servers[0]
+    Vue.axios.defaults.baseURL = (server.apiHost || '') + server.apiBase
+    store.dispatch('SetServer', server)
   }
-  const serverFilter = servers.filter(ser => (ser.apiHost || '') + ser.apiBase === apiFullPath)
-  const server = serverFilter[0] || servers[0]
-
-  Vue.axios.defaults.baseURL = (server.apiHost || '') + server.apiBase
-  store.dispatch('SetServer', server)
 
   const validLogin = Vue.ls.get(ACCESS_TOKEN) || Cookies.get('userid') || Cookies.get('userid', { path: '/client' })
   if (validLogin) {
diff --git a/ui/src/views/auth/Login.vue b/ui/src/views/auth/Login.vue
index eba14efda024..db5ff67b0e5d 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@@ -35,7 +35,7 @@
           <a-icon type="safety" />
           {{ $t('label.login.portal') }}
         </span>
-        <a-form-item>
+        <a-form-item v-if="$config.multipleServer">
           <a-select
             size="large"
             :placeholder="$t('server')"
@@ -102,7 +102,7 @@
           <a-icon type="audit" />
           {{ $t('label.login.single.signon') }}
         </span>
-        <a-form-item>
+        <a-form-item v-if="$config.multipleServer">
           <a-select
             size="large"
             :placeholder="$t('server')"
@@ -172,7 +172,10 @@ export default {
     }
   },
   created () {
-    this.server = Vue.ls.get(SERVER_MANAGER) || this.$config.servers[0]
+    if (this.$config.multipleServer) {
+      this.server = Vue.ls.get(SERVER_MANAGER) || this.$config.servers[0]
+    }
+
     this.fetchData()
   },
   methods: {
@@ -215,8 +218,10 @@ export default {
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
-          this.axios.defaults.baseURL = (this.server.apiHost || '') + this.server.apiBase
-          store.dispatch('SetServer', this.server)
+          if (this.$config.multipleServer) {
+            this.axios.defaults.baseURL = (this.server.apiHost || '') + this.server.apiBase
+            store.dispatch('SetServer', this.server)
+          }
 
           if (customActiveKey === 'cs') {
             const loginParams = { ...values }

From 3242383055136b9ac5ebb435ed32fa248e2f0d88 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 10 Aug 2021 09:32:54 +0700
Subject: [PATCH 6/6] set default hidden the multiple server config

---
 ui/public/config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/public/config.json b/ui/public/config.json
index 24d3056b47e0..6c134087101b 100644
--- a/ui/public/config.json
+++ b/ui/public/config.json
@@ -55,6 +55,6 @@
   },
   "plugins": [],
   "basicZoneEnabled": true,
-  "multipleServer": true,
+  "multipleServer": false,
   "docHelpMappings": {}
 }