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

@@ -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')
       }

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)"

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>

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" />

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"

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)" />

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,

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,

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" />

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>

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"

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 () {

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 () {

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>

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"

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"

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>

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

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>