UI changes to use POST requests for state changing APIs

Co-authored-by: Kevin Li <[email protected]>

Author: sureshanaparti

ui/src/api/index.js

@@ -23,18 +23,10 @@ import {
   ACCESS_TOKEN
 } from '@/store/mutation-types'
 
-export function api (command, args = {}, method = 'GET', data = {}) {
-  let params = {}
+export function getAPI (command, args = {}) {
   args.command = command
   args.response = 'json'
 
-  if (data) {
-    params = new URLSearchParams()
-    Object.entries(data).forEach(([key, value]) => {
-      params.append(key, value)
-    })
-  }
-
   const sessionkey = vueProps.$localStorage.get(ACCESS_TOKEN) || Cookies.get('sessionkey')
   if (sessionkey) {
     args.sessionkey = sessionkey
@@ -45,8 +37,30 @@ export function api (command, args = {}, method = 'GET', data = {}) {
       ...args
     },
     url: '/',
-    method,
-    data: params || {}
+    method: 'GET'
+  })
+}
+
+export function postAPI (command, data = {}) {
+  const params = new URLSearchParams()
+  params.append('command', command)
+  params.append('response', 'json')
+  if (data) {
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        params.append(key, value)
+      }
+    })
+  }
+
+  const sessionkey = vueProps.$localStorage.get(ACCESS_TOKEN) || Cookies.get('sessionkey')
+  if (sessionkey) {
+    params.append('sessionkey', sessionkey)
+  }
+  return axios({
+    url: '/',
+    method: 'POST',
+    data: params
   })
 }
 
@@ -56,7 +70,7 @@ export function login (arg) {
   }
 
   // Logout before login is called to purge any duplicate sessionkey cookies
-  api('logout')
+  postAPI('logout')
 
   const params = new URLSearchParams()
   params.append('command', 'login')
@@ -66,7 +80,7 @@ export function login (arg) {
   params.append('response', 'json')
   return axios({
     url: '/',
-    method: 'post',
+    method: 'POST',
     data: params,
     headers: {
       'content-type': 'application/x-www-form-urlencoded'
@@ -77,7 +91,7 @@ export function login (arg) {
 export function logout () {
   message.destroy()
   notification.destroy()
-  return api('logout')
+  return postAPI('logout')
 }
 
 export function oauthlogin (arg) {
@@ -86,7 +100,7 @@ export function oauthlogin (arg) {
   }
 
   // Logout before login is called to purge any duplicate sessionkey cookies
-  api('logout')
+  postAPI('logout')
 
   const params = new URLSearchParams()
   params.append('command', 'oauthlogin')

ui/src/components/header/SamlDomainSwitcher.vue

@@ -51,7 +51,7 @@
 
 <script>
 import store from '@/store'
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import _ from 'lodash'
 
 export default {
@@ -73,7 +73,7 @@ export default {
       const samlAccounts = []
       const getNextPage = () => {
         this.loading = true
-        api('listAndSwitchSamlAccount', { details: 'min', page: page, pageSize: 500 }).then(json => {
+        postAPI('listAndSwitchSamlAccount', { details: 'min', page: page, pageSize: 500 }).then(json => {
           if (json && json.listandswitchsamlaccountresponse && json.listandswitchsamlaccountresponse.samluseraccount) {
             samlAccounts.push(...json.listandswitchsamlaccountresponse.samluseraccount)
           }
@@ -102,7 +102,7 @@ export default {
     },
     changeAccount (index) {
       const account = this.samlAccounts[index]
-      api('listAndSwitchSamlAccount', {}, 'POST', {
+      postAPI('listAndSwitchSamlAccount', {}, 'POST', {
         userid: account.userId,
         domainid: account.domainId
       }).then(response => {

ui/src/components/header/UserMenu.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI } from '@/api'
 import CreateMenu from './CreateMenu'
 import ExternalLink from './ExternalLink'
 import HeaderNotice from './HeaderNotice'
@@ -143,7 +143,7 @@ export default {
           this.image = this.$store.getters.avatar
           resolve(this.image)
         }
-        api('listUsers', {
+        getAPI('listUsers', {
           id: id,
           showicon: true
         }).then(json => {

ui/src/components/page/GlobalLayout.vue

@@ -128,7 +128,7 @@ import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { isAdmin } from '@/role'
-import { api } from '@/api'
+import { getAPI } from '@/api'
 import Drawer from '@/components/widgets/Drawer'
 import Setting from '@/components/view/Setting.vue'
 
@@ -260,7 +260,7 @@ export default {
       this.$store.commit('SET_COUNT_NOTIFY', 0)
     },
     checkShutdown () {
-      api('readyForShutdown', { managementserverid: this.$store.getters.msId }).then(json => {
+      getAPI('readyForShutdown', { managementserverid: this.$store.getters.msId }).then(json => {
         this.$store.dispatch('SetShutdownTriggered', json.readyforshutdownresponse.readyforshutdown.shutdowntriggered || false)
         this.$store.dispatch('SetMaintenanceInitiated', json.readyforshutdownresponse.readyforshutdown.maintenanceinitiated || false)
       })

ui/src/components/view/ActionButton.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import Console from '@/components/widgets/Console'
 
 export default {
@@ -194,7 +194,7 @@ export default {
           const action = actionBadge[i]
 
           arrAsync.push(new Promise((resolve, reject) => {
-            api(action.api, action.param).then(json => {
+            postAPI(action.api, action.param).then(json => {
               let responseJsonName
               const response = {}
 

ui/src/components/view/AnnotationsTab.vue

@@ -119,7 +119,7 @@
 
 <script>
 
-import { api } from '@/api'
+import { getAPI, postAPI } from '@/api'
 
 export default {
   name: 'AnnotationsTab',
@@ -217,7 +217,7 @@ export default {
       }
       this.loadingAnnotations = true
       this.notes = []
-      api('listAnnotations', { entityid: this.resource.id, entitytype: this.annotationType, annotationfilter: 'all', page: this.page, pagesize: this.pageSize }).then(json => {
+      getAPI('listAnnotations', { entityid: this.resource.id, entitytype: this.annotationType, annotationfilter: 'all', page: this.page, pagesize: this.pageSize }).then(json => {
         if (json.listannotationsresponse && json.listannotationsresponse.annotation) {
           this.notes = json.listannotationsresponse.annotation
           this.itemCount = json.listannotationsresponse.count
@@ -246,7 +246,7 @@ export default {
       args.entitytype = this.annotationType
       args.annotation = this.annotation
       args.adminsonly = this.annotationAdminsOnly
-      api('addAnnotation', args).catch(error => {
+      postAPI('addAnnotation', args).catch(error => {
         this.$notifyError(error)
       }).finally(e => {
         this.getAnnotations()
@@ -258,7 +258,7 @@ export default {
       this.loadingAnnotations = true
       const args = {}
       args.id = annotation.id
-      api('removeAnnotation', args).catch(error => {
+      postAPI('removeAnnotation', args).catch(error => {
         this.$notifyError(error)
       }).finally(e => {
         this.getAnnotations()
@@ -270,7 +270,7 @@ export default {
         id: annotation.id,
         adminsonly: !annotation.adminsonly
       }
-      api('updateAnnotationVisibility', args).catch(error => {
+      postAPI('updateAnnotationVisibility', args).catch(error => {
         this.$notifyError(error)
       }).finally(e => {
         this.getAnnotations()

ui/src/components/view/DedicateData.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI, postAPI } from '@/api'
 import DedicateModal from './DedicateModal'
 
 export default {
@@ -124,7 +124,7 @@ export default {
       }
     },
     fetchDedicatedZones () {
-      api('listDedicatedZones', {
+      getAPI('listDedicatedZones', {
         zoneid: this.resource.id
       }).then(response => {
         if (response?.listdedicatedzonesresponse?.dedicatedzone?.length > 0) {
@@ -136,7 +136,7 @@ export default {
       })
     },
     fetchDedicatedPods () {
-      api('listDedicatedPods', {
+      getAPI('listDedicatedPods', {
         podid: this.resource.id
       }).then(response => {
         if (response?.listdedicatedpodsresponse?.dedicatedpod?.length > 0) {
@@ -148,7 +148,7 @@ export default {
       })
     },
     fetchDedicatedClusters () {
-      api('listDedicatedClusters', {
+      getAPI('listDedicatedClusters', {
         clusterid: this.resource.id
       }).then(response => {
         if (response?.listdedicatedclustersresponse?.dedicatedcluster?.length > 0) {
@@ -160,7 +160,7 @@ export default {
       })
     },
     fetchDedicatedHosts () {
-      api('listDedicatedHosts', {
+      getAPI('listDedicatedHosts', {
         hostid: this.resource.id
       }).then(response => {
         if (response?.listdedicatedhostsresponse?.dedicatedhost?.length > 0) {
@@ -172,7 +172,7 @@ export default {
       })
     },
     releaseDedidcatedZone () {
-      api('releaseDedicatedZone', {
+      postAPI('releaseDedicatedZone', {
         zoneid: this.resource.id
       }).then(response => {
         this.$pollJob({
@@ -195,7 +195,7 @@ export default {
       })
     },
     releaseDedidcatedPod () {
-      api('releaseDedicatedPod', {
+      postAPI('releaseDedicatedPod', {
         podid: this.resource.id
       }).then(response => {
         this.$pollJob({
@@ -218,7 +218,7 @@ export default {
       })
     },
     releaseDedidcatedCluster () {
-      api('releaseDedicatedCluster', {
+      postAPI('releaseDedicatedCluster', {
         clusterid: this.resource.id
       }).then(response => {
         this.$pollJob({
@@ -241,7 +241,7 @@ export default {
       })
     },
     releaseDedidcatedHost () {
-      api('releaseDedicatedHost', {
+      postAPI('releaseDedicatedHost', {
         hostid: this.resource.id
       }).then(response => {
         this.$pollJob({

ui/src/components/view/DedicateDomain.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI } from '@/api'
 
 export default {
   name: 'DedicateDomain',
@@ -90,7 +90,7 @@ export default {
   methods: {
     fetchData () {
       this.domainsLoading = true
-      api('listDomains', {
+      getAPI('listDomains', {
         listAll: true,
         details: 'min'
       }).then(response => {
@@ -107,7 +107,7 @@ export default {
       })
     },
     fetchAccounts () {
-      api('listAccounts', {
+      getAPI('listAccounts', {
         domainid: this.domainId
       }).then(response => {
         this.accountsList = response.listaccountsresponse.account || []

ui/src/components/view/DedicateModal.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { postAPI } from '@/api'
 import DedicateDomain from './DedicateDomain'
 
 export default {
@@ -92,7 +92,7 @@ export default {
         this.domainError = true
         return
       }
-      api('dedicateZone', {
+      postAPI('dedicateZone', {
         zoneId: this.resource.id,
         domainId: this.domainId,
         account: this.dedicatedAccount
@@ -134,7 +134,7 @@ export default {
         this.domainError = true
         return
       }
-      api('dedicatePod', {
+      postAPI('dedicatePod', {
         podId: this.resource.id,
         domainId: this.domainId,
         account: this.dedicatedAccount
@@ -176,7 +176,7 @@ export default {
         this.domainError = true
         return
       }
-      api('dedicateCluster', {
+      postAPI('dedicateCluster', {
         clusterId: this.resource.id,
         domainId: this.domainId,
         account: this.dedicatedAccount
@@ -218,7 +218,7 @@ export default {
         this.domainError = true
         return
       }
-      api('dedicateHost', {
+      postAPI('dedicateHost', {
         hostId: this.resource.id,
         domainId: this.domainId,
         account: this.dedicatedAccount

ui/src/components/view/DetailSettings.vue

@@ -128,7 +128,7 @@
 </template>
 
 <script>
-import { api } from '@/api'
+import { getAPI, postAPI } from '@/api'
 import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
@@ -209,11 +209,11 @@ export default {
           return { name: k, value: resource.details[k], edit: false }
         })
       }
-      api('listDetailOptions', { resourcetype: this.resourceType, resourceid: resource.id }).then(json => {
+      getAPI('listDetailOptions', { resourcetype: this.resourceType, resourceid: resource.id }).then(json => {
         this.detailOptions = json.listdetailoptionsresponse.detailoptions.details
       })
       this.disableSettings = (this.$route.meta.name === 'vm' && resource.state !== 'Stopped')
-      api('listTemplates', { templatefilter: 'all', id: resource.templateid }).then(json => {
+      getAPI('listTemplates', { templatefilter: 'all', id: resource.templateid }).then(json => {
         this.deployasistemplate = json.listtemplatesresponse.template[0].deployasis
       })
     },
@@ -291,7 +291,7 @@ export default {
       var params = { id: this.resource.id }
       params = Object.assign(params, this.getDetailsParam(this.details))
       this.loading = true
-      api(apiName, params).then(json => {
+      postAPI(apiName, params).then(json => {
         var details = {}
         if (this.resourceType === 'UserVm' && json.updatevirtualmachineresponse.virtualmachine.details) {
           details = json.updatevirtualmachineresponse.virtualmachine.details