UI fixes and changes to use POST requests for state changing APIs

Author: sureshanaparti

ui/src/components/header/SamlDomainSwitcher.vue

@@ -102,7 +102,7 @@ export default {
     },
     changeAccount (index) {
       const account = this.samlAccounts[index]
-      postAPI('listAndSwitchSamlAccount', {}, 'POST', {
+      postAPI('listAndSwitchSamlAccount', {
         userid: account.userId,
         domainid: account.domainId
       }).then(response => {

ui/src/components/view/ImageStoreSelectView.vue

@@ -75,7 +75,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI } from '@/api'
 
 export default {
   name: 'ImageStoreSelector',
@@ -141,7 +141,7 @@ export default {
         page: this.page,
         pagesize: this.pageSize
       }
-      api('listImageStores', params).then(response => {
+      getAPI('listImageStores', params).then(response => {
         this.imageStores = response.listimagestoresresponse.imagestore || []
         this.totalCount = response.listimagestoresresponse.count
       }).catch(error => {

ui/src/components/view/TestWebhookDeliveryView.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import Status from '@/components/widgets/Status'
 
@@ -191,7 +191,7 @@ export default {
       if (this.secretKey) {
         params.secretKey = this.secretKey
       }
-      api('executeWebhookDelivery', params).then(response => {
+      postAPI('executeWebhookDelivery', params).then(response => {
         this.response = response.executewebhookdeliveryresponse.webhookdelivery
         this.$emit('update-success', response.success)
       }).catch(error => {

ui/src/components/view/UploadResourceIcon.vue

@@ -247,7 +247,7 @@ export default {
         newImage.src = await this.getResourceIcon()
         base64Canvas = await this.getNewImage(newImage)
       }
-      postAPI('uploadResourceIcon', {}, 'POST', {
+      postAPI('uploadResourceIcon', {
         resourceids: resourceid,
         resourcetype: resourceType,
         base64image: base64Canvas

ui/src/components/view/WebhookDeliveriesTab.vue

@@ -112,7 +112,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI, postAPI } from '@/api'
 import { isAdmin } from '@/role'
 import { genericCompare } from '@/utils/sort.js'
 import moment from 'moment'
@@ -253,7 +253,7 @@ export default {
         params.eventtype = this.searchParams.eventtype
       }
       this.tabLoading = true
-      api('listWebhookDeliveries', params).then(json => {
+      getAPI('listWebhookDeliveries', params).then(json => {
         this.deliveries = []
         this.totalCount = json?.listwebhookdeliveriesresponse?.count || 0
         this.deliveries = json?.listwebhookdeliveriesresponse?.webhookdelivery || []
@@ -321,7 +321,7 @@ export default {
           id: id
         }
         promises.push(new Promise((resolve, reject) => {
-          api('deleteWebhookDelivery', params).then(json => {
+          postAPI('deleteWebhookDelivery', params).then(json => {
             return resolve(id)
           }).catch(error => {
             return reject(error)
@@ -344,7 +344,7 @@ export default {
         webhookid: this.resource.id
       }
       this.tabLoading = true
-      api('deleteWebhookDelivery', params).then(json => {
+      postAPI('deleteWebhookDelivery', params).then(json => {
         this.$message.success(this.$t('message.success.clear.webhook.deliveries'))
         this.fetchData()
       }).catch(error => {
@@ -370,7 +370,7 @@ export default {
         id: item.id
       }
       this.tabLoading = true
-      api('executeWebhookDelivery', params).then(json => {
+      postAPI('executeWebhookDelivery', params).then(json => {
         this.$message.success(this.$t('message.success.redeliver.webhook.delivery'))
         this.fetchData()
       }).catch(error => {
@@ -396,7 +396,7 @@ export default {
         id: item.id
       }
       this.tabLoading = true
-      api('deleteWebhookDelivery', params).then(json => {
+      postAPI('deleteWebhookDelivery', params).then(json => {
         const message = `${this.$t('message.success.delete')} ${this.$t('label.webhook.delivery')}`
         this.$message.success(message)
         this.fetchData()

ui/src/components/widgets/InfiniteScrollSelect.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import ResourceIcon from '@/components/view/ResourceIcon'
 
 export default {
@@ -191,7 +191,7 @@ export default {
       if (this.showIcon) {
         params.showicon = true
       }
-      api(this.api, params).then(json => {
+      postAPI(this.api, params).then(json => {
         const response = json[this.api.toLowerCase() + 'response'] || {}
         if (this.totalCount === null) {
           this.totalCount = response.count || 0

ui/src/views/auth/ForgotPassword.vue

@@ -98,7 +98,7 @@
 
 <script>
 import { ref, reactive, toRaw } from 'vue'
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import store from '@/store'
 import { SERVER_MANAGER } from '@/store/mutation-types'
 import TranslationMenu from '@/components/header/TranslationMenu'
@@ -159,7 +159,7 @@ export default {
         if (!loginParams.domain) {
           loginParams.domain = '/'
         }
-        api('forgotPassword', {}, 'POST', loginParams)
+        postAPI('forgotPassword', loginParams)
           .finally(() => {
             this.$message.success(this.$t('message.forgot.password.success'))
             this.$router.push({ path: '/login' }).catch(() => {})

ui/src/views/auth/ResetPassword.vue

@@ -124,7 +124,7 @@
 
 <script>
 import { ref, reactive, toRaw } from 'vue'
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import store from '@/store'
 import { SERVER_MANAGER } from '@/store/mutation-types'
 import TranslationMenu from '@/components/header/TranslationMenu'
@@ -200,7 +200,7 @@ export default {
           loginParams.domain = '/'
         }
 
-        api('resetPassword', {}, 'POST', loginParams)
+        postAPI('resetPassword', loginParams)
           .then((res) => {
             if (res?.resetpasswordresponse?.success) {
               this.$message.success(this.$t('message.password.reset.success'))

ui/src/views/compute/CreateAutoScaleVmGroup.vue

@@ -2312,11 +2312,7 @@ export default {
           j++
         }
 
-        const httpMethod = createVmGroupData.userdata ? 'POST' : 'GET'
-        const args = httpMethod === 'POST' ? {} : params
-        const data = httpMethod === 'POST' ? params : {}
-
-        postAPI('createAutoScaleVmProfile', args, httpMethod, data).then(async json => {
+        postAPI('createAutoScaleVmProfile', params).then(async json => {
           const jobId = json.autoscalevmprofileresponse.jobid
           if (jobId) {
             const result = await this.pollJob(jobId)

ui/src/views/compute/DeployVM.vue

@@ -2235,11 +2235,7 @@ export default {
           }
         }
 
-        const httpMethod = deployVmData.userdata ? 'POST' : 'GET'
-        const args = httpMethod === 'POST' ? {} : deployVmData
-        const data = httpMethod === 'POST' ? deployVmData : {}
-
-        postAPI('deployVirtualMachine', args, httpMethod, data).then(response => {
+        postAPI('deployVirtualMachine', deployVmData).then(response => {
           const jobId = response.deployvirtualmachineresponse.jobid
           if (jobId) {
             this.$pollJob({