Fix VpcTiersTab

Author: davidjumani

ui/src/views/network/VpcTiersTab.vue

@@ -22,7 +22,7 @@
       icon="plus"
       style="width: 100%;margin-bottom: 20px;"
       :disabled="!('createNetwork' in $store.getters.apis)"
-      @click="handleOpenModal">{{ $t('label.add.network') }}</a-button>
+      @click="handleOpenModal">{{ $t('label.add.new.tier') }}</a-button>
     <a-list class="list">
       <a-list-item v-for="(network, idx) in networks" :key="idx" class="list__item">
         <div class="list__item-outer-container">
@@ -164,13 +164,25 @@
       v-ctrl-enter="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
-          <a-form-item :label="$t('label.name')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.name') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.name.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.unique.name.tier')"
+              :placeholder="$t('label.create.tier.name.description')"
               v-decorator="['name',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
-              autoFocus></a-input>
+              autoFocus />
           </a-form-item>
-          <a-form-item :label="$t('label.networkofferingid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.networkofferingid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.networkofferingid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               v-decorator="['networkOffering',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
               @change="val => { this.handleNetworkOfferingChange(val) }">
@@ -187,22 +199,48 @@
               }]"
               :placeholder="this.$t('label.vlan')"/>
           </a-form-item>
-          <a-form-item :label="$t('label.gateway')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.gateway') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.gateway.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.create.network.gateway.description')"
+              :placeholder="$t('label.create.tier.gateway.description')"
               v-decorator="['gateway',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.netmask')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.netmask') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.netmask.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.create.network.netmask.description')"
+              :placeholder="$t('label.create.tier.netmask.description')"
               v-decorator="['netmask',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.externalid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.externalid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.externalid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
+              :placeholder=" $t('label.create.tier.externalid.description')"
               v-decorator="['externalId']"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.aclid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.aclid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.aclid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
+              :placeholder="$t('label.create.tier.aclid.description')"
               v-decorator="['acl',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
               @change="val => { this.handleNetworkAclChange(val) }">
               <a-select-option v-for="item in networkAclList" :key="item.id" :value="item.id">