iam: Fix users form, network SG and VPC (#552)

* Fix the add and edit users form

* Fix the edit users form

* Fix: Hide SG feature when there are no zones with SG enabled

* fix add instance from VPC tab

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/config/router.js

@@ -51,6 +51,9 @@ function generateRouterMap (section) {
     map.meta.permission = section.children[0].permission
     map.children = []
     for (const child of section.children) {
+      if ('show' in child && !child.show()) {
+        continue
+      }
       var component = child.component ? child.component : AutogenView
       var route = {
         name: child.name,

ui/src/config/section/network.js

@@ -184,6 +184,16 @@ export default {
         name: 'egress.rule',
         component: () => import('@/views/network/IngressEgressRuleConfigure.vue')
       }],
+      show: () => {
+        if (!store.getters.zones || store.getters.zones.length === 0) {
+          return false
+        }
+        const listZoneHaveSGEnabled = store.getters.zones.filter(zone => zone.securitygroupsenabled === true)
+        if (!listZoneHaveSGEnabled || listZoneHaveSGEnabled.length === 0) {
+          return false
+        }
+        return true
+      },
       actions: [
         {
           api: 'createSecurityGroup',

ui/src/config/section/user.js

@@ -30,14 +30,16 @@ export default {
       icon: 'plus',
       label: 'label.add.user',
       listView: true,
-      args: ['username', 'password', 'confirmpassword', 'email', 'firstname', 'lastname', 'timezone', 'account', 'domainid']
+      popup: true,
+      component: () => import('@/views/iam/AddUser.vue')
     },
     {
       api: 'updateUser',
       icon: 'edit',
       label: 'label.edit',
       dataView: true,
-      args: ['username', 'email', 'firstname', 'lastname', 'timezone']
+      popup: true,
+      component: () => import('@/views/iam/EditUser.vue')
     },
     {
       api: 'updateUser',

ui/src/locales/en.json

@@ -608,6 +608,7 @@
 "label.create.nfs.secondary.staging.storage": "Create NFS Secondary Staging Store",
 "label.create.nfs.secondary.staging.store": "Create NFS secondary staging store",
 "label.create.project": "Create project",
+"label.create.user": "Create user",
 "label.create.site.vpn.connection": "Create Site-to-Site VPN Connection",
 "label.create.site.vpn.gateway": "Create Site-to-Site VPN Gateway",
 "label.create.ssh.key.pair": "Create a SSH Key Pair",
@@ -795,6 +796,7 @@
 "label.edit.region": "Edit Region",
 "label.edit.role": "Edit Role",
 "label.edit.rule": "Edit rule",
+"label.edit.user": "Edit user",
 "label.edit.secondary.ips": "Edit secondary IPs",
 "label.edit.tags": "Edit tags",
 "label.edit.traffic.type": "Edit traffic type",
@@ -2996,6 +2998,9 @@
 "message.step.4.continue": "Please select at least one network to continue",
 "message.step.4.desc": "Please select the primary network that your virtual instance will be connected to.",
 "message.storage.traffic": "Traffic between CloudStack's internal resources, including any components that communicate with the Management Server, such as hosts and CloudStack system VMs. Please configure storage traffic here.",
+"message.success.enable.saml.auth": "Successfully enabled SAML Authorization",
+"message.success.create.user": "Successfully created user",
+"message.success.update.user": "Successfully updated user",
 "message.success.acquire.ip": "Successfully acquired IP",
 "message.success.add.egress.rule": "Successfully added new Egress rule",
 "message.success.add.firewall.rule": "Successfully added new Firewall rule",

ui/src/store/getters.js

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

ui/src/store/modules/user.js

@@ -23,7 +23,7 @@ import router from '@/router'
 import store from '@/store'
 import { login, logout, api } from '@/api'
 import i18n from '@/locales'
-import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS } from '@/store/mutation-types'
+import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES } from '@/store/mutation-types'
 
 const user = {
   state: {
@@ -36,7 +36,8 @@ const user = {
     project: {},
     asyncJobIds: [],
     isLdapEnabled: false,
-    cloudian: {}
+    cloudian: {},
+    zones: {}
   },
 
   mutations: {
@@ -75,6 +76,10 @@ const user = {
     },
     RESET_THEME: (state) => {
       Vue.ls.set(DEFAULT_THEME, 'light')
+    },
+    SET_ZONES: (state, zones) => {
+      state.zones = zones
+      Vue.ls.set(ZONES, zones)
     }
   },
 
@@ -119,9 +124,11 @@ const user = {
     GetInfo ({ commit }) {
       return new Promise((resolve, reject) => {
         const cachedApis = Vue.ls.get(APIS, {})
+        const cachedZones = Vue.ls.get(ZONES, [])
         const hasAuth = Object.keys(cachedApis).length > 0
         if (hasAuth) {
           console.log('Login detected, using cached APIs')
+          commit('SET_ZONES', cachedZones)
           commit('SET_APIS', cachedApis)
 
           // Ensuring we get the user info so that store.getters.user is never empty when the page is freshly loaded
@@ -140,6 +147,10 @@ const user = {
           })
         } else {
           const hide = message.loading(i18n.t('message.discovering.feature'), 0)
+          api('listZones', { listall: true }).then(json => {
+            const zones = json.listzonesresponse.zone || []
+            commit('SET_ZONES', zones)
+          })
           api('listApis').then(response => {
             const apis = {}
             const apiList = response.listapisresponse.api

ui/src/store/mutation-types.js

@@ -28,6 +28,7 @@ export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
 export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
 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 CONTENT_WIDTH_TYPE = {

ui/src/views/compute/DeployVM.vue

@@ -215,6 +215,7 @@
                 <template slot="description">
                   <div v-if="zoneSelected">
                     <network-selection
+                      v-if="!networkId"
                       :items="options.networks"
                       :row-count="rowCount.networks"
                       :value="networkOfferingIds"
@@ -765,6 +766,12 @@ export default {
           value: keyboard
         }
       })
+    },
+    networkId () {
+      return this.$route.query.networkid || null
+    },
+    networkName () {
+      return this.$route.query.name || null
     }
   },
   watch: {
@@ -786,7 +793,9 @@ export default {
       this.diskOffering = _.find(this.options.diskOfferings, (option) => option.id === instanceConfig.diskofferingid)
       this.zone = _.find(this.options.zones, (option) => option.id === instanceConfig.zoneid)
       this.affinityGroups = _.filter(this.options.affinityGroups, (option) => _.includes(instanceConfig.affinitygroupids, option.id))
-      this.networks = _.filter(this.options.networks, (option) => _.includes(instanceConfig.networkids, option.id))
+      if (!this.networkId) {
+        this.networks = _.filter(this.options.networks, (option) => _.includes(instanceConfig.networkids, option.id))
+      }
       this.sshKeyPair = _.find(this.options.sshKeyPairs, (option) => option.name === instanceConfig.keypair)
 
       if (this.zone) {
@@ -874,6 +883,15 @@ export default {
       this.form.getFieldDecorator([field], { initialValue: this.dataPreFill[field] })
     },
     fetchData () {
+      if (this.networkId) {
+        this.updateNetworks([this.networkId])
+        this.updateDefaultNetworks(this.networkId)
+        this.networks = [{
+          id: this.networkId,
+          name: this.networkName
+        }]
+      }
+
       if (this.dataPreFill.zoneid) {
         this.fetchDataByZone(this.dataPreFill.zoneid)
       } else {
@@ -1323,6 +1341,9 @@ export default {
       })
       this.tabKey = 'templateid'
       _.each(this.params, (param, name) => {
+        if (this.networkId && name === 'networks') {
+          return true
+        }
         if (!('isLoad' in param) || param.isLoad) {
           this.fetchOptions(param, name, ['zones'])
         }

ui/src/views/iam/AddUser.vue

@@ -0,0 +1,406 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.username') }}
+            <a-tooltip :title="apiParams.username.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-input
+            v-decorator="['username', {
+              rules: [{ required: true, message: $t('message.error.required.input') }]
+            }]"
+            :placeholder="apiParams.username.description" />
+        </a-form-item>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.password') }}
+                <a-tooltip :title="apiParams.password.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input-password
+                v-decorator="['password', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="apiParams.password.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.confirmpassword') }}
+                <a-tooltip :title="apiParams.password.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input-password
+                v-decorator="['confirmpassword', {
+                  rules: [
+                    { required: true, message: $t('message.error.required.input') },
+                    { validator: validateConfirmPassword }
+                  ]
+                }]"
+                :placeholder="apiParams.password.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.email') }}
+            <a-tooltip :title="apiParams.email.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-input
+            v-decorator="['email', {
+              rules: [{ required: true, message: $t('message.error.required.input') }]
+            }]"
+            :placeholder="apiParams.email.description" />
+        </a-form-item>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.firstname') }}
+                <a-tooltip :title="apiParams.firstname.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input
+                v-decorator="['firstname', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="apiParams.firstname.description" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.lastname') }}
+                <a-tooltip :title="apiParams.lastname.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input
+                v-decorator="['lastname', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="apiParams.lastname.description" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="this.isAdminOrDomainAdmin()">
+          <span slot="label">
+            {{ $t('label.domain') }}
+            <a-tooltip :title="apiParams.domainid.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            :loading="domainLoading"
+            v-decorator="['domainid', {
+              initialValue: selectedDomain,
+              rules: [{ required: true, message: $t('message.error.select') }] }]"
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="domain in domainsList" :key="domain.id">
+              {{ domain.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if="!account">
+          <span slot="label">
+            {{ $t('label.account') }}
+            <a-tooltip :title="apiParams.account.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            v-decorator="['account']"
+            :loading="loadingAccount"
+            :placeholder="apiParams.account.description">
+            <a-select-option v-for="(item, idx) in accountList" :key="idx">
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.timezone') }}
+            <a-tooltip :title="apiParams.timezone.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            showSearch
+            v-decorator="['timezone']"
+            :loading="timeZoneLoading">
+            <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <div v-if="'authorizeSamlSso' in $store.getters.apis">
+          <a-form-item :label="$t('label.samlenable')">
+            <a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
+          </a-form-item>
+          <a-form-item v-if="samlEnable">
+            <span slot="label">
+              {{ $t('label.samlentity') }}
+              <a-tooltip :title="apiParams.entityid.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
+            <a-select
+              v-decorator="['samlentity', {
+                initialValue: selectedIdp,
+              }]"
+              :loading="idpLoading">
+              <a-select-option v-for="(idp, idx) in idps" :key="idx">
+                {{ idp.orgName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </div>
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import { timeZone } from '@/utils/timezone'
+import debounce from 'lodash/debounce'
+
+export default {
+  name: 'AddUser',
+  data () {
+    this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
+    return {
+      loading: false,
+      timeZoneLoading: false,
+      timeZoneMap: [],
+      domainLoading: false,
+      domainsList: [],
+      selectedDomain: '',
+      samlEnable: false,
+      idpLoading: false,
+      idps: [],
+      selectedIdp: '',
+      loadingAccount: false,
+      accountList: [],
+      account: null
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.apiConfig = this.$store.getters.apis.createUser || {}
+    this.apiParams = {}
+    this.apiConfig.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
+    this.apiConfig = this.$store.getters.apis.authorizeSamlSso || {}
+    this.apiConfig.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.account = this.$route.query && this.$route.query.account ? this.$route.query.account : null
+      this.fetchDomains()
+      this.fetchTimeZone()
+      if (!this.account) {
+        this.fetchAccount()
+      }
+      if ('listIdps' in this.$store.getters.apis) {
+        this.fetchIdps()
+      }
+    },
+    fetchDomains () {
+      this.domainLoading = true
+      api('listDomains', {
+        listAll: true,
+        details: 'min'
+      }).then(response => {
+        this.domainsList = response.listdomainsresponse.domain || []
+        this.selectedDomain = this.domainsList[0].id || ''
+      }).catch(error => {
+        this.$notification.error({
+          message: `${this.$t('label.error')} ${error.response.status}`,
+          description: error.response.data.errorresponse.errortext
+        })
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchAccount () {
+      this.accountList = []
+      this.loadingAccount = true
+      api('listAccounts', { listAll: true }).then(response => {
+        this.accountList = response.listaccountsresponse.account || []
+      }).catch(error => {
+        this.$notification.error({
+          message: `${this.$t('label.error')} ${error.response.status}`,
+          description: error.response.data.errorresponse.errortext
+        })
+      }).finally(() => {
+        this.loadingAccount = false
+      })
+    },
+    fetchTimeZone (value) {
+      this.timeZoneMap = []
+      this.timeZoneLoading = true
+
+      timeZone(value).then(json => {
+        this.timeZoneMap = json
+        this.timeZoneLoading = false
+      })
+    },
+    fetchIdps () {
+      this.idpLoading = true
+      api('listIdps').then(response => {
+        this.idps = response.listidpsresponse.idp || []
+        this.selectedIdp = this.idps[0].id || ''
+      }).finally(() => {
+        this.idpLoading = false
+      })
+    },
+    isAdminOrDomainAdmin () {
+      return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isValidValueForKey (obj, key) {
+      return key in obj && obj[key] != null
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        this.loading = true
+        const params = {
+          username: values.username,
+          password: values.password,
+          email: values.email,
+          firstname: values.firstname,
+          lastname: values.lastname,
+          domainid: values.domainid,
+          accounttype: 0
+        }
+        if (!this.account) {
+          params.account = this.accountList[values.account].name
+        } else {
+          params.account = this.account
+        }
+        if (this.isValidValueForKey(values, 'timezone') && values.timezone.length > 0) {
+          params.timezone = values.timezone
+        }
+
+        api('createUser', {}, 'POST', params).then(response => {
+          this.$emit('refresh-data')
+          this.$notification.success({
+            message: this.$t('label.create.user'),
+            description: `${this.$t('message.success.create.user')} ${params.username}`
+          })
+          const users = response.createuserresponse.user.user
+          if (values.samlenable && users) {
+            for (var i = 0; i < users.length; i++) {
+              api('authorizeSamlSso', {
+                enable: values.samlenable,
+                entityid: values.samlentity,
+                userid: users[i].id
+              }).then(response => {
+                this.$notification.success({
+                  message: this.$t('label.samlenable'),
+                  description: this.$t('message.success.enable.saml.auth')
+                })
+              }).catch(error => {
+                this.$notification.error({
+                  message: this.$t('message.request.failed'),
+                  description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+                  duration: 0
+                })
+              }).finally(() => {
+                this.loading = false
+                this.closeAction()
+              })
+            }
+          }
+        }).catch(error => {
+          this.$notification.error({
+            message: this.$t('message.request.failed'),
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+            duration: 0
+          })
+        }).finally(() => {
+          this.loading = false
+          this.closeAction()
+        })
+      })
+    },
+    validateConfirmPassword (rule, value, callback) {
+      if (!value || value.length === 0) {
+        callback()
+      } else if (rule.field === 'confirmpassword') {
+        const form = this.form
+        const messageConfirm = this.$t('error.password.not.match')
+        const passwordVal = form.getFieldValue('password')
+        if (passwordVal && passwordVal !== value) {
+          callback(messageConfirm)
+        } else {
+          callback()
+        }
+      } else {
+        callback()
+      }
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-layout {
+  width: 80vw;
+  @media (min-width: 600px) {
+    width: 450px;
+  }
+}
+.action-button {
+  text-align: right;
+  button {
+    margin-right: 5px;
+  }
+}
+</style>

ui/src/views/iam/EditUser.vue

@@ -0,0 +1,236 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.username') }}
+            <a-tooltip :title="apiParams.username.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-input
+            v-decorator="['username', {
+              rules: [{ required: true, message: $t('message.error.required.input') }]
+            }]"
+            :placeholder="apiParams.username.description" />
+        </a-form-item>
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.email') }}
+            <a-tooltip :title="apiParams.email.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-input
+            v-decorator="['email', {
+              rules: [{ required: true, message: $t('message.error.required.input') }]
+            }]"
+            :placeholder="apiParams.email.description" />
+        </a-form-item>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.firstname') }}
+                <a-tooltip :title="apiParams.firstname.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input
+                v-decorator="['firstname', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="apiParams.firstname.description" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12">
+            <a-form-item>
+              <span slot="label">
+                {{ $t('label.lastname') }}
+                <a-tooltip :title="apiParams.lastname.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+              <a-input
+                v-decorator="['lastname', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="apiParams.lastname.description" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.timezone') }}
+            <a-tooltip :title="apiParams.timezone.description">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-select
+            showSearch
+            v-decorator="['timezone']"
+            :loading="timeZoneLoading">
+            <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import { timeZone } from '@/utils/timezone'
+import debounce from 'lodash/debounce'
+
+export default {
+  name: 'EditUser',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    currentAction: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
+    return {
+      loading: false,
+      timeZoneLoading: false,
+      timeZoneMap: [],
+      userId: null
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.apiConfig = this.$store.getters.apis.updateUser || {}
+    this.apiParams = {}
+    this.apiConfig.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.userId = this.$route.params.id || null
+      this.fetchTimeZone()
+      this.fillEditFormFieldValues()
+    },
+    fetchTimeZone (value) {
+      this.timeZoneMap = []
+      this.timeZoneLoading = true
+
+      timeZone(value).then(json => {
+        this.timeZoneMap = json
+        this.timeZoneLoading = false
+      })
+    },
+    fillEditFormFieldValues () {
+      const form = this.form
+      this.loading = true
+      Object.keys(this.apiParams).forEach(item => {
+        const field = this.apiParams[item]
+        let fieldValue = null
+        let fieldName = null
+
+        if (field.type === 'list' || field.name === 'account') {
+          fieldName = field.name.replace('ids', 'name').replace('id', 'name')
+        } else {
+          fieldName = field.name
+        }
+        fieldValue = this.resource[fieldName] ? this.resource[fieldName] : null
+        if (fieldValue) {
+          form.getFieldDecorator(field.name, { initialValue: fieldValue })
+        }
+      })
+      this.loading = false
+    },
+    isValidValueForKey (obj, key) {
+      return key in obj && obj[key] != null
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        this.loading = true
+        const params = {
+          id: this.userId,
+          username: values.username,
+          email: values.email,
+          firstname: values.firstname,
+          lastname: values.lastname
+        }
+        if (this.isValidValueForKey(values, 'timezone') && values.timezone.length > 0) {
+          params.timezone = values.timezone
+        }
+
+        api('updateUser', params).then(response => {
+          this.$emit('refresh-data')
+          this.$notification.success({
+            message: this.$t('label.edit.user'),
+            description: `${this.$t('message.success.update.user')} ${params.username}`
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: this.$t('message.request.failed'),
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+            duration: 0
+          })
+        }).finally(() => {
+          this.loading = false
+          this.closeAction()
+        })
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-layout {
+  width: 80vw;
+  @media (min-width: 600px) {
+    width: 450px;
+  }
+}
+.action-button {
+  text-align: right;
+  button {
+    margin-right: 5px;
+  }
+}
+</style>

ui/src/views/network/VpcTiersTab.vue

@@ -67,7 +67,7 @@
                 type="dashed"
                 style="margin-bottom: 15px; width: 100%"
                 :disabled="!('deployVirtualMachine' in $store.getters.apis)"
-                @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
+                @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id + '&name=' + network.name })">
                 {{ $t('label.vm.add') }}
               </a-button>
               <a-table