apache · utchoang · Dec 16, 2020 · Dec 22, 2020 · Dec 22, 2020 · Dec 22, 2020
diff --git a/public/config.json b/public/config.json
@@ -1,5 +1,11 @@
 {
-  "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/src/components/widgets/Console.vue b/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/src/main.js b/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/src/permission.js b/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/src/store/getters.js b/src/store/getters.js
@@ -35,6 +35,7 @@ const getters = {
  cloudian: state => state.user.cloudian,
  zones: state => state.user.zones,
  timezoneoffset: state => state.user.timezoneoffset,
+  server: state => state.app.server,
  usebrowsertimezone: state => state.user.usebrowsertimezone
 }


diff --git a/src/store/modules/app.js b/src/store/modules/app.js
@@ -27,6 +27,7 @@ import {
  DEFAULT_FIXED_HEADER_HIDDEN,
  DEFAULT_CONTENT_WIDTH_TYPE,
  DEFAULT_MULTI_TAB,
+  SERVER_MANAGER,
  USE_BROWSER_TIMEZONE
 } from '@/store/mutation-types'

@@ -44,7 +45,8 @@ const app = {
    color: null,
    inverted: true,
    multiTab: true,
-    metrics: false
+    metrics: false,
+    server: ''
  },
  mutations: {
    SET_SIDEBAR_TYPE: (state, type) => {
@@ -97,6 +99,10 @@ const app = {
    SET_METRICS: (state, bool) => {
      state.metrics = bool
    },
+    SET_SERVER: (state, server) => {
+      Vue.ls.set(SERVER_MANAGER, server)
+      state.server = server
+    },
    SET_USE_BROWSER_TIMEZONE: (state, bool) => {
      Vue.ls.set(USE_BROWSER_TIMEZONE, bool)
      state.usebrowsertimezone = bool
@@ -145,6 +151,9 @@ const app = {
    SetMetrics ({ commit }, bool) {
      commit('SET_METRICS', bool)
    },
+    SetServer ({ commit }, server) {
+      commit('SET_SERVER', server)
+    },
    SetUseBrowserTimezone ({ commit }, bool) {
      commit('SET_USE_BROWSER_TIMEZONE', bool)
    }

diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
@@ -31,6 +31,7 @@ export const APIS = 'APIS'
 export const ZONES = 'ZONES'
 export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
 export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
+export const SERVER_MANAGER = 'SERVER_MANAGER'
 export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'

 export const CONTENT_WIDTH_TYPE = {

diff --git a/src/views/auth/Login.vue b/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] || {}
    }
  }
 }