From 11dfaf4ad2ed56733b552016e5fb97a9d775e48f Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Sun, 14 Jun 2020 05:41:43 +0530
Subject: [PATCH] view: fix role-base checks on components to disable (#317)

Fixes #310

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/view/DedicateData.vue       |  8 ++++++-
 ui/src/components/view/DetailSettings.vue     | 19 +++++++++++++----
 ui/src/components/view/InfoCard.vue           |  8 +++----
 ui/src/components/view/ListView.vue           |  3 +++
 ui/src/components/view/ResourceLimitTab.vue   |  2 ++
 ui/src/components/view/SettingsTab.vue        |  1 +
 ui/src/config/section/image.js                |  4 ++--
 ui/src/config/section/storage.js              |  2 +-
 ui/src/views/compute/InstanceHardware.vue     | 10 ++++++++-
 ui/src/views/iam/RolePermissionTab.vue        |  2 ++
 ui/src/views/iam/SSLCertificateTab.vue        |  1 +
 ui/src/views/image/RegisterOrUploadIso.vue    |  2 +-
 .../views/image/RegisterOrUploadTemplate.vue  |  2 +-
 .../views/infra/network/DedicatedVLANTab.vue  |  9 ++++++--
 .../infra/network/IpRangesTabManagement.vue   |  2 ++
 .../infra/network/IpRangesTabStorage.vue      |  2 ++
 ui/src/views/network/AclListRulesTab.vue      |  9 ++++++--
 ui/src/views/network/EgressRulesTab.vue       |  4 ++--
 ui/src/views/network/FirewallRules.vue        | 14 +++++++++----
 .../network/IngressEgressRuleConfigure.vue    |  4 ++--
 ui/src/views/network/IpAddressesTab.vue       |  3 ++-
 ui/src/views/network/LoadBalancing.vue        | 12 ++++++-----
 ui/src/views/network/PortForwarding.vue       | 10 +++++++--
 ui/src/views/network/StaticRoutesTab.vue      |  8 +++----
 ui/src/views/network/VpcTab.vue               |  4 ++++
 ui/src/views/network/VpcTiersTab.vue          | 21 ++++++++++++++++---
 ui/src/views/network/VpnDetails.vue           |  4 ++--
 ui/src/views/project/AccountsTab.vue          |  9 +++++++-
 ui/src/views/storage/FormSchedule.vue         |  2 +-
 29 files changed, 135 insertions(+), 46 deletions(-)

diff --git a/ui/src/components/view/DedicateData.vue b/ui/src/components/view/DedicateData.vue
index 3adc7c7af76..5c9bea3567b 100644
--- a/ui/src/components/view/DedicateData.vue
+++ b/ui/src/components/view/DedicateData.vue
@@ -39,7 +39,7 @@
     <div>
       <strong>{{ $t('label.dedicated') }}</strong>
       <div>No</div>
-      <a-button type="primary" style="margin-top: 10px; margin-bottom: 10px;" @click="modalActive = true">
+      <a-button type="primary" style="margin-top: 10px; margin-bottom: 10px;" @click="modalActive = true" :disabled="!dedicateButtonAvailable">
         {{ dedicatedButtonLabel }}
       </a-button>
     </div>
@@ -70,6 +70,7 @@ export default {
   data () {
     return {
       modalActive: false,
+      dedicateButtonAvailable: true,
       dedicatedButtonLabel: 'Dedicate',
       releaseButtonLabel: 'Release',
       dedicatedModalLabel: 'Dedicate',
@@ -86,27 +87,32 @@ export default {
   },
   methods: {
     fetchData () {
+      this.dedicateButtonAvailable = true
       if (this.$route.meta.name === 'zone') {
         this.fetchDedicatedZones()
         this.releaseButtonLabel = this.$t('label.release.dedicated.zone')
+        this.dedicateButtonAvailable = ('dedicateZone' in this.$store.getters.apis)
         this.dedicatedButtonLabel = this.$t('label.dedicate.zone')
         this.dedicatedModalLabel = this.$t('label.dedicate.zone')
       }
       if (this.$route.meta.name === 'pod') {
         this.fetchDedicatedPods()
         this.releaseButtonLabel = this.$t('label.release.dedicated.pod')
+        this.dedicateButtonAvailable = ('dedicatePod' in this.$store.getters.apis)
         this.dedicatedButtonLabel = this.$t('label.dedicate.pod')
         this.dedicatedModalLabel = this.$t('label.dedicate.pod')
       }
       if (this.$route.meta.name === 'cluster') {
         this.fetchDedicatedClusters()
         this.releaseButtonLabel = this.$t('label.release.dedicated.cluster')
+        this.dedicateButtonAvailable = ('dedicateCluster' in this.$store.getters.apis)
         this.dedicatedButtonLabel = this.$t('label.dedicate.cluster')
         this.dedicatedModalLabel = this.$t('label.dedicate.cluster')
       }
       if (this.$route.meta.name === 'host') {
         this.fetchDedicatedHosts()
         this.releaseButtonLabel = this.$t('label.release.dedicated.host')
+        this.dedicateButtonAvailable = ('dedicateHost' in this.$store.getters.apis)
         this.dedicatedButtonLabel = this.$t('label.dedicate.host')
         this.dedicatedModalLabel = this.$t('label.dedicate.host')
       }
diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 0b02dbb7ef5..bb8e7366cd4 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -23,7 +23,14 @@
       :message="$t('message.action.settings.warning.vm.running')" />
     <div v-else>
       <div v-show="!showAddDetail">
-        <a-button type="dashed" style="width: 100%" icon="plus" @click="showAddDetail = true">{{ $t('label.add.setting') }}</a-button>
+        <a-button
+          type="dashed"
+          style="width: 100%"
+          icon="plus"
+          :disabled="!('updateTemplate' in $store.getters.apis && 'updateVirtualMachine' in $store.getters.apis)"
+          @click="showAddDetail = true">
+          {{ $t('label.add.setting') }}
+        </a-button>
       </div>
       <div v-show="showAddDetail">
         <a-auto-complete
@@ -62,16 +69,20 @@
             <span v-else>{{ item.value }}</span>
           </span>
         </a-list-item-meta>
-        <div slot="actions" v-if="!disableSettings">
+        <div slot="actions" v-if="!disableSettings && 'updateTemplate' in $store.getters.apis && 'updateVirtualMachine' in $store.getters.apis">
           <a-button shape="circle" size="default" @click="updateDetail(index)" v-if="item.edit">
             <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
           </a-button>
           <a-button shape="circle" size="default" @click="hideEditDetail(index)" v-if="item.edit">
             <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
           </a-button>
-          <a-button shape="circle" @click="showEditDetail(index)" v-if="!item.edit" icon="edit" />
+          <a-button
+            shape="circle"
+            icon="edit"
+            v-if="!item.edit"
+            @click="showEditDetail(index)" />
         </div>
-        <div slot="actions" v-if="!disableSettings">
+        <div slot="actions" v-if="!disableSettings && 'updateTemplate' in $store.getters.apis && 'updateVirtualMachine' in $store.getters.apis">
           <a-popconfirm
             title="Delete setting?"
             @confirm="deleteDetail(index)"
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index daa7e6f91dc..722a89bbc76 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -532,7 +532,7 @@
         <div class="title">{{ $t('label.tags') }}</div>
         <div>
           <template v-for="(tag, index) in tags">
-            <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+            <a-tag :key="index" :closable="'deleteTags' in $store.getters.apis" :afterClose="() => handleDeleteTag(tag)">
               {{ tag.key }} = {{ tag.value }}
             </a-tag>
           </template>
@@ -544,9 +544,9 @@
               @blur="handleInputConfirm"
               @keyup.enter="handleInputConfirm"
               compact>
-              <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" placeholder="Key" />
+              <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" placeholder="Key" />
               <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
-              <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" placeholder="Value" />
+              <a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" placeholder="Value" />
               <a-button shape="circle" size="small" @click="handleInputConfirm">
                 <a-icon type="check"/>
               </a-button>
@@ -555,7 +555,7 @@
               </a-button>
             </a-input-group>
           </div>
-          <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+          <a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="'createTags' in $store.getters.apis">
             <a-icon type="plus" /> New Tag
           </a-tag>
         </div>
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 33e18e33c32..e05a84281b9 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -193,6 +193,7 @@
       <a-input
         v-if="editableValueKey === record.key"
         :defaultValue="record.value"
+        :disabled="!('updateConfiguration' in $store.getters.apis)"
         v-model="editableValue"
         @keydown.esc="editableValueKey = null"
         @pressEnter="saveValue(record)">
@@ -204,11 +205,13 @@
     <template slot="actions" slot-scope="text, record">
       <a-button
         shape="circle"
+        :disabled="!('updateConfiguration' in $store.getters.apis)"
         v-if="editableValueKey !== record.key"
         icon="edit"
         @click="editValue(record)" />
       <a-button
         shape="circle"
+        :disabled="!('updateConfiguration' in $store.getters.apis)"
         @click="saveValue(record)"
         v-if="editableValueKey === record.key" >
         <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
diff --git a/ui/src/components/view/ResourceLimitTab.vue b/ui/src/components/view/ResourceLimitTab.vue
index db951dc8e68..494b8102590 100644
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@@ -29,6 +29,7 @@
         :v-bind="item.resourcetypename"
         :label="$t('label.max' + item.resourcetypename.replace('_', ''))">
         <a-input-number
+          :disabled="!('updateResourceLimit' in $store.getters.apis)"
           style="width: 100%;"
           v-decorator="[item.resourcetype, {
             initialValue: item.max
@@ -37,6 +38,7 @@
       </a-form-item>
       <div class="card-footer">
         <a-button
+          :disabled="!('updateResourceLimit' in $store.getters.apis)"
           v-if="!($route.meta.name === 'domain' && resource.level === 0)"
           :loading="formLoading"
           type="primary"
diff --git a/ui/src/components/view/SettingsTab.vue b/ui/src/components/view/SettingsTab.vue
index 85fafdd4b4d..4c9f2626660 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -23,6 +23,7 @@
       <div slot="actions" class="action">
         <a-button
           shape="circle"
+          :disabled="!('updateConfiguration' in $store.getters.apis)"
           v-if="editableValueKey !== index"
           icon="edit"
           @click="setEditableSetting(item, index)" />
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
index 82a12dc1288..6dc736787a4 100644
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@@ -57,7 +57,7 @@ export default {
           component: () => import('@/views/image/RegisterOrUploadTemplate.vue')
         },
         {
-          api: 'getUploadParamsForTemplate',
+          api: 'registerTemplate',
           icon: 'cloud-upload',
           label: 'label.upload.template.from.local',
           listView: true,
@@ -132,7 +132,7 @@ export default {
           component: () => import('@/views/image/RegisterOrUploadIso.vue')
         },
         {
-          api: 'getUploadParamsForIso',
+          api: 'registerIso',
           icon: 'cloud-upload',
           label: 'label.upload.iso.from.local',
           listView: true,
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index e1e7ec2aeaf..eab50c7371a 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -43,7 +43,7 @@ export default {
           component: () => import('@/views/storage/CreateVolume.vue')
         },
         {
-          api: 'getUploadParamsForVolume',
+          api: 'createVolume',
           icon: 'cloud-upload',
           label: 'label.upload.volume.from.local',
           listView: true,
diff --git a/ui/src/views/compute/InstanceHardware.vue b/ui/src/views/compute/InstanceHardware.vue
index b0a44eb47e2..2d0fe93354e 100644
--- a/ui/src/views/compute/InstanceHardware.vue
+++ b/ui/src/views/compute/InstanceHardware.vue
@@ -89,7 +89,11 @@
       </a-collapse-panel>
 
       <a-collapse-panel :header="'Network Adapter(s): ' + (vm && vm.nic ? vm.nic.length : 0)" key="3" >
-        <a-button type="primary" @click="showAddModal" :loading="loadingNic">
+        <a-button
+          type="primary"
+          @click="showAddModal"
+          :loading="loadingNic"
+          :disabled="!('addNicToVirtualMachine' in $store.getters.apis)">
           <a-icon type="plus"></a-icon> {{ $t('label.network.addvm') }}
         </a-button>
         <a-divider class="divider-small" />
@@ -119,6 +123,7 @@
                       v-if="!item.isdefault"
                     >
                       <a-button
+                        :disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
                         icon="check-square"
                         shape="circle" />
                     </a-popconfirm>
@@ -129,6 +134,7 @@
                       <a-button
                         icon="swap"
                         shape="circle"
+                        :disabled="!('updateVmNicIp' in $store.getters.apis)"
                         @click="editIpAddressNic = item.id; showUpdateIpModal = true" />
                     </a-tooltip>
                     <a-tooltip placement="bottom" v-if="item.type !== 'L2'">
@@ -138,6 +144,7 @@
                       <a-button
                         icon="environment"
                         shape="circle"
+                        :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
                         @click="fetchSecondaryIPs(item.id)" />
                     </a-tooltip>
                     <a-popconfirm
@@ -148,6 +155,7 @@
                       v-if="!item.isdefault"
                     >
                       <a-button
+                        :disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
                         type="danger"
                         icon="delete"
                         shape="circle" />
diff --git a/ui/src/views/iam/RolePermissionTab.vue b/ui/src/views/iam/RolePermissionTab.vue
index bda9c244886..f95c0d699bc 100644
--- a/ui/src/views/iam/RolePermissionTab.vue
+++ b/ui/src/views/iam/RolePermissionTab.vue
@@ -52,6 +52,7 @@
               Save new Rule
             </template>
             <a-button
+              :disabled="!('createRolePermission' in $store.getters.apis)"
               icon="plus"
               type="primary"
               shape="circle"
@@ -94,6 +95,7 @@
             </div>
             <div class="rules-table__col rules-table__col--actions">
               <rule-delete
+                :disabled="!('deleteRolePermission' in $store.getters.apis)"
                 :record="record"
                 @delete="onRuleDelete(record.id)" />
             </div>
diff --git a/ui/src/views/iam/SSLCertificateTab.vue b/ui/src/views/iam/SSLCertificateTab.vue
index d6012cf6309..f853a3d1802 100644
--- a/ui/src/views/iam/SSLCertificateTab.vue
+++ b/ui/src/views/iam/SSLCertificateTab.vue
@@ -40,6 +40,7 @@
                 {{ $t('label.delete.sslcertificate') }}
               </template>
               <a-button
+                :disabled="!('deleteSslCert' in $store.getters.apis)"
                 type="danger"
                 shape="circle"
                 icon="delete"
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
index c2ff36d2567..e6f00dfc968 100644
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -191,7 +191,7 @@ export default {
       selectedZone: '',
       uploadParams: null,
       uploadPercentage: 0,
-      currentForm: this.action.currentAction.api === 'registerIso' ? 'Create' : 'Upload'
+      currentForm: this.action.currentAction.icon === 'plus' ? 'Create' : 'Upload'
     }
   },
   beforeCreate () {
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
index b9a92685428..45ad66f8127 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -403,7 +403,7 @@ export default {
       allowed: false,
       allowDirectDownload: false,
       uploadParams: null,
-      currentForm: this.action.currentAction.api === 'registerTemplate' ? 'Create' : 'Upload'
+      currentForm: this.action.currentAction.icon === 'plus' ? 'Create' : 'Upload'
     }
   },
   beforeCreate () {
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 285e3f91e3b..4c3d4c25f97 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -17,7 +17,12 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-button type="dashed" icon="plus" style="width: 100%" @click="handleOpenModal">{{ $t('label.dedicate.vlan.vni.range') }}</a-button>
+    <a-button
+      :disabled="!('dedicateGuestVlanRange' in $store.getters.apis)"
+      type="dashed"
+      icon="plus"
+      style="width: 100%"
+      @click="handleOpenModal">{{ $t('label.dedicate.vlan.vni.range') }}</a-button>
     <a-table
       size="small"
       style="overflow-y: auto; margin-top: 20px;"
@@ -34,7 +39,7 @@
           cancelText="No"
           placement="top"
         >
-          <a-button icon="delete" type="danger" shape="circle"></a-button>
+          <a-button :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" icon="delete" type="danger" shape="circle"></a-button>
         </a-popconfirm>
       </template>
     </a-table>
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 3471895add6..fedff881e77 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -18,6 +18,7 @@
 <template>
   <a-spin :spinning="componentLoading">
     <a-button
+      :disabled="!('createManagementNetworkIpRange' in $store.getters.apis)"
       type="dashed"
       icon="plus"
       style="margin-bottom: 20px; width: 100%"
@@ -41,6 +42,7 @@
           <a-popover placement="bottom">
             <template slot="content">{{ $t('label.remove.ip.range') }}</template>
             <a-button
+              :disabled="!('deleteManagementNetworkIpRange' in $store.getters.apis)"
               icon="delete"
               shape="circle"
               type="danger"
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 1514312d4ab..9495649d419 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -18,6 +18,7 @@
 <template>
   <a-spin :spinning="componentLoading">
     <a-button
+      :disabled="!('createStorageNetworkIpRange' in $store.getters.apis)"
       type="dashed"
       icon="plus"
       style="margin-bottom: 20px; width: 100%"
@@ -40,6 +41,7 @@
         <a-popover placement="bottom">
           <template slot="content">{{ $t('label.remove.ip.range') }}</template>
           <a-button
+            :disabled="!('deleteStorageNetworkIpRange' in $store.getters.apis)"
             icon="delete"
             shape="circle"
             type="danger"
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 9716ae6fb6a..fa43f29c22c 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -18,7 +18,12 @@
 <template>
   <a-spin :spinning="fetchLoading">
     <div style="width: 100%; display: flex">
-      <a-button type="dashed" icon="plus" style="width: 100%; margin-right: 10px" @click="openAddRuleModal">
+      <a-button
+        type="dashed"
+        icon="plus"
+        style="width: 100%; margin-right: 10px"
+        :disabled="!('createNetworkACL' in $store.getters.apis)"
+        @click="openAddRuleModal">
         {{ $t('label.add') }} {{ $t('label.aclid') }}
       </a-button>
 
@@ -84,7 +89,7 @@
             <div class="list__actions">
               <a-button shape="circle" icon="tag" @click="() => openTagsModal(acl)"></a-button>
               <a-button shape="circle" icon="edit" @click="() => openEditRuleModal(acl)"></a-button>
-              <a-button shape="circle" icon="delete" type="danger" @click="() => handleDeleteRule(acl.id)"></a-button>
+              <a-button shape="circle" icon="delete" type="danger" :disabled="!('deleteNetworkACL' in $store.getters.apis)" @click="() => handleDeleteRule(acl.id)"></a-button>
             </div>
           </div>
         </transition-group>
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 789b0e3517c..1175bc7f238 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -53,7 +53,7 @@
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item">
-          <a-button type="primary" icon="plus" @click="addRule">{{ $t('label.add') }}</a-button>
+          <a-button :disabled="!('createEgressFirewallRule' in $store.getters.apis)" type="primary" icon="plus" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -78,7 +78,7 @@
         {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
       </template>
       <template slot="actions" slot-scope="record">
-        <a-button shape="circle" type="danger" icon="delete" @click="deleteRule(record)" />
+        <a-button :disabled="!('deleteEgressFirewallRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" @click="deleteRule(record)" />
       </template>
     </a-table>
     <a-pagination
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 5d202dd408c..887ca469440 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -48,7 +48,7 @@
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item" style="margin-left: auto;">
-          <a-button type="primary" @click="addRule">{{ $t('label.add') }}</a-button>
+          <a-button :disabled="!('createFirewallRule' in $store.getters.apis)" type="primary" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -75,7 +75,13 @@
       <template slot="actions" slot-scope="record">
         <div class="actions">
           <a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
-          <a-button shape="circle" type="danger" icon="delete" class="rule-action" @click="deleteRule(record)" />
+          <a-button
+            shape="circle"
+            type="danger"
+            icon="delete"
+            class="rule-action"
+            :disabled="!('deleteFirewallRule' in $store.getters.apis)"
+            @click="deleteRule(record)" />
         </div>
       </template>
     </a-table>
@@ -101,14 +107,14 @@
           <p class="add-tags__label">{{ $t('label.value') }}</p>
           <a-input v-model="newTag.value"></a-input>
         </div>
-        <a-button type="primary" @click="() => handleAddTag()" :loading="addTagLoading">{{ $t('label.add') }}</a-button>
+        <a-button type="primary" :disabled="!('createTag' in $store.getters.apis)" @click="() => handleAddTag()" :loading="addTagLoading">{{ $t('label.add') }}</a-button>
       </div>
 
       <a-divider></a-divider>
 
       <div class="tags-container">
         <div class="tags" v-for="(tag, index) in tags" :key="index">
-          <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+          <a-tag :key="index" :closable="'deleteTag' in $store.getters.apis" :afterClose="() => handleDeleteTag(tag)">
             {{ tag.key }} = {{ tag.value }}
           </a-tag>
         </div>
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 54c7063fd01..c078f7c26ee 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -64,7 +64,7 @@
           </div>
         </div>
         <div class="form__item" style="flex: 0">
-          <a-button type="primary" @click="handleAddRule">{{ $t('label.add') }}</a-button>
+          <a-button :disabled="!('authorizeSecurityGroupInress' in $store.getters.apis) && !('authorizeSecurityGroupEgress' in $store.getters.apis)" type="primary" @click="handleAddRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -92,7 +92,7 @@
           okText="Yes"
           cancelText="No"
         >
-          <a-button shape="circle" type="danger" icon="delete" class="rule-action" />
+          <a-button :disabled="!('revokeSecurityGroupIngress' in $store.getters.apis) && !('revokeSecurityGroupEgress' in $store.getters.apis)" shape="circle" type="danger" icon="delete" class="rule-action" />
         </a-popconfirm>
       </template>
     </a-table>
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index ee84dfd62bb..12fec6ea26d 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="acquireIpAddress">
+    <a-button :disabled="!('associateIpAddress' in $store.getters.apis)" type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="acquireIpAddress">
       {{ $t('label.acquire.new.ip') }}
     </a-button>
     <div v-if="$route.path.startsWith('/vpc')">
@@ -68,6 +68,7 @@
           type="danger"
           icon="delete"
           shape="circle"
+          :disabled="!('disassociateIpAddress' in $store.getters.apis)"
           @click="releaseIpAddress(record)" />
       </template>
     </a-table>
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 4ee58627237..b2586765c71 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -34,6 +34,8 @@
           <a-input v-model="newRule.privateport"></a-input>
           <span class="error-text">Required</span>
         </div>
+      </div>
+      <div class="form">
         <div class="form__item">
           <div class="form__label">{{ $t('label.algorithm') }}</div>
           <a-select v-model="newRule.algorithm">
@@ -52,7 +54,7 @@
         </div>
         <div class="form__item">
           <div class="form__label" style="white-space: nowrap;">{{ $t('label.add.vms') }}</div>
-          <a-button type="primary" @click="handleOpenAddVMModal">Add</a-button>
+          <a-button :disabled="!('createLoadBalancerRule' in $store.getters.apis)" type="primary" @click="handleOpenAddVMModal">Add</a-button>
         </div>
       </div>
     </div>
@@ -107,14 +109,14 @@
       <template slot="actions" slot-scope="record">
         <div class="actions">
           <a-button shape="circle" icon="edit" @click="() => openEditRuleModal(record)"></a-button>
-          <a-button shape="circle" icon="tag" @click="() => openTagsModal(record.id)" />
+          <a-button :disabled="!('editLoadBalancerRule' in $store.getters.apis)" shape="circle" icon="tag" @click="() => openTagsModal(record.id)" />
           <a-popconfirm
             :title="$t('label.delete') + '?'"
             @confirm="handleDeleteRule(record)"
             okText="Yes"
             cancelText="No"
           >
-            <a-button shape="circle" type="danger" icon="delete" />
+            <a-button :disabled="!('deleteLoadBalancerRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" />
           </a-popconfirm>
         </div>
       </template>
@@ -149,14 +151,14 @@
             <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
           </a-form-item>
         </div>
-        <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+        <a-button :disabled="!('createTags' in $store.getters.apis)" type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
       </a-form>
 
       <a-divider></a-divider>
 
       <div v-show="!tagsModalLoading" class="tags-container">
         <div class="tags" v-for="(tag, index) in tags" :key="index">
-          <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+          <a-tag :key="index" :closable="'deleteTag' in $store.getters.apis" :afterClose="() => handleDeleteTag(tag)">
             {{ tag.key }} = {{ tag.value }}
           </a-tag>
         </div>
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index ed67a4652df..f5bc4ac7f83 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -64,7 +64,7 @@
         </div>
         <div class="form__item" style="margin-left: auto;">
           <div class="form__label">{{ $t('label.add.vm') }}</div>
-          <a-button type="primary" @click="openAddVMModal">{{ $t('label.add') }}</a-button>
+          <a-button :disabled="!('createPortForwardingRule' in $store.getters.apis)" type="primary" @click="openAddVMModal">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -97,7 +97,13 @@
       <template slot="actions" slot-scope="record">
         <div class="actions">
           <a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
-          <a-button shape="circle" type="danger" icon="delete" class="rule-action" @click="deleteRule(record)" />
+          <a-button
+            shape="circle"
+            type="danger"
+            icon="delete"
+            class="rule-action"
+            :disabled="!('deletePortForwardingRule' in $store.getters.apis)"
+            @click="deleteRule(record)" />
         </div>
       </template>
     </a-table>
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index edb0313152f..2fed407213b 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -19,7 +19,7 @@
   <a-spin :spinning="componentLoading">
     <div class="new-route">
       <a-input v-model="newRoute" icon="plus" :placeholder="$t('label.cidr.destination.network')"></a-input>
-      <a-button type="primary" @click="handleAdd">{{ $t('label.add.route') }}</a-button>
+      <a-button type="primary" :disabled="!('createStaticRoute' in $store.getters.apis)" @click="handleAdd">{{ $t('label.add.route') }}</a-button>
     </div>
 
     <div class="list">
@@ -30,7 +30,7 @@
         </div>
         <div class="actions">
           <a-button shape="circle" icon="tag" @click="() => openTagsModal(route)"></a-button>
-          <a-button shape="circle" icon="delete" type="danger" @click="() => handleDelete(route)"></a-button>
+          <a-button :disabled="!('deleteStaticRoute' in $store.getters.apis)" shape="circle" icon="delete" type="danger" @click="() => handleDelete(route)"></a-button>
         </div>
       </div>
     </div>
@@ -52,14 +52,14 @@
               <a-input v-decorator="['value', { rules: [{ required: true, message: 'Please specify a tag value'}] }]" />
             </a-form-item>
           </div>
-          <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+          <a-button type="primary" :disabled="!('createTags' in $store.getters.apis)" html-type="submit">{{ $t('label.add') }}</a-button>
         </a-form>
 
         <a-divider style="margin-top: 0;"></a-divider>
 
         <div class="tags-container">
           <div class="tags" v-for="(tag, index) in tags" :key="index">
-            <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+            <a-tag :key="index" :closable="'deleteTags' in $store.getters.apis" :afterClose="() => handleDeleteTag(tag)">
               {{ tag.key }} = {{ tag.value }}
             </a-tag>
           </div>
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index 4672c905d7d..cb80bf5b910 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -36,6 +36,7 @@
           type="dashed"
           icon="plus"
           style="width: 100%"
+          :disabled="!('createNetworkACLList' in $store.getters.apis)"
           @click="() => handleOpenModals('networkAcl')">
           Add Network ACL List
         </a-button>
@@ -83,6 +84,7 @@
           type="dashed"
           icon="plus"
           style="width: 100%"
+          :disabled="!('createPrivateGateway' in $store.getters.apis)"
           @click="() => handleOpenModals('privateGateways')">Add Private Gateway</a-button>
         <a-table
           class="table"
@@ -166,6 +168,7 @@
           type="dashed"
           icon="plus"
           style="width: 100%"
+          :disabled="!('createVpnGateway' in $store.getters.apis)"
           @click="handleCreateVpnGateway">
           Create Site-to-Site VPN Gateway
         </a-button>
@@ -189,6 +192,7 @@
           type="dashed"
           icon="plus"
           style="width: 100%"
+          :disabled="!('createVpnConnection' in $store.getters.apis)"
           @click="handleOpenModals('vpnConnection')">
           Create Site-to-Site VPN Connection
         </a-button>
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 3e004437ec7..2339c04d0cd 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -17,7 +17,12 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-button type="dashed" icon="plus" style="width: 100%;margin-bottom: 20px;" @click="handleOpenModal">Add Network</a-button>
+    <a-button
+      type="dashed"
+      icon="plus"
+      style="width: 100%;margin-bottom: 20px;"
+      :disabled="!('createNetwork' in $store.getters.apis)"
+      @click="handleOpenModal">Add Network</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">
@@ -57,7 +62,12 @@
               <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
             </template>
             <a-collapse-panel :header="$t('label.instances')" key="vm" :style="customStyle">
-              <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
+              <a-button
+                icon="plus"
+                type="dashed"
+                style="margin-bottom: 15px; width: 100%"
+                :disabled="!('deployVirtualMachine' in $store.getters.apis)"
+                @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
                 {{ $t('label.vm.add') }}
               </a-button>
               <a-table
@@ -93,7 +103,12 @@
                 showSizeChanger/>
             </a-collapse-panel>
             <a-collapse-panel :header="$t('label.internal.lb')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
-              <a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="handleAddInternalLB(network.id)">
+              <a-button
+                icon="plus"
+                type="dashed"
+                style="margin-bottom: 15px; width: 100%"
+                :disabled="!('createLoadBalancer' in $store.getters.apis)"
+                @click="handleAddInternalLB(network.id)">
                 {{ $t('label.add.internal.lb') }}
               </a-button>
               <a-table
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index 4701584dda6..7d1d5247ad3 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -22,7 +22,7 @@
       <p>Your IPSec pre-shared key is <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
       <a-divider/>
       <a-button><router-link :to="{ path: '/vpnuser'}">Manage VPN Users</router-link></a-button>
-      <a-button style="margin-left: 10px" type="danger" @click="disableVpn = true">Disable VPN</a-button>
+      <a-button style="margin-left: 10px" type="danger" @click="disableVpn = true" :disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">Disable VPN</a-button>
     </div>
 
     <a-modal v-model="disableVpn" :footer="null" oncancel="disableVpn = false" title="Disable Remove Access VPN">
@@ -38,7 +38,7 @@
 
   </div>
   <div v-else>
-    <a-button type="primary" @click="enableVpn = true">Enable VPN</a-button>
+    <a-button :disabled="!('createRemoteAccessVpn' in $store.getters.apis)" type="primary" @click="enableVpn = true">Enable VPN</a-button>
 
     <a-modal v-model="enableVpn" :footer="null" onCancel="enableVpn = false" title="Enable Remote Access VPN">
       <p>Please confirm that you want Remote Access VPN enabled for this IP address.</p>
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index 8f48f24ceb0..7b76d896b02 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -32,7 +32,13 @@
               <template slot="title">
                 {{ $t('label.make.project.owner') }}
               </template>
-              <a-button type="default" shape="circle" icon="user" size="small" @click="onMakeProjectOwner(record)" />
+              <a-button
+                type="default"
+                shape="circle"
+                icon="user"
+                size="small"
+                :disabled="!('updateProject' in $store.getters.apis)"
+                @click="onMakeProjectOwner(record)" />
             </a-tooltip>
             <a-tooltip placement="top">
               <template slot="title">
@@ -43,6 +49,7 @@
                 shape="circle"
                 icon="delete"
                 size="small"
+                :disabled="!('deleteAccountFromProject' in $store.getters.apis)"
                 @click="onShowConfirmDelete(record)"/>
             </a-tooltip>
           </span>
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index 8d5233b104c..33b08f80884 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -148,7 +148,7 @@
           <div class="tagsTitle">{{ $t('label.tags') }}</div>
           <div>
             <template v-for="(tag, index) in tags">
-              <a-tag :key="index" :closable="true" :afterClose="() => handleDeleteTag(tag)">
+              <a-tag :key="index" :closable="'deleteTags' in $store.getters.apis" :afterClose="() => handleDeleteTag(tag)">
                 {{ tag.key }} = {{ tag.value }}
               </a-tag>
             </template>