UI: update vm with userdata (#6051)

* UI: update vm with userdata

* Update ui/src/views/compute/EditVM.vue

Co-authored-by: David Jumani <dj.davidjumani1994@gmail.com>

* Update #6051: small fixes

Co-authored-by: David Jumani <dj.davidjumani1994@gmail.com>

ui/src/views/compute/EditVM.vue

@@ -74,6 +74,12 @@
           }"
           :dataSource="groups.opts" />
       </a-form-item>
+      <a-form-item>
+        <tooltip-label slot="label" :title="$t('label.userdata')" :tooltip="apiParams.userdata.description"/>
+        <a-textarea
+          v-decorator="['userdata']">
+        </a-textarea>
+      </a-form-item>
 
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
@@ -145,7 +151,6 @@ export default {
     },
     fetchTemplateData () {
       const params = {}
-      console.log('templateid ' + this.resource.templateid)
       params.id = this.resource.templateid
       params.isrecursive = true
       params.templatefilter = 'all'
@@ -198,6 +203,14 @@ export default {
         this.$notifyError(error)
       }).finally(() => { this.groups.loading = false })
     },
+    sanitizeReverse (value) {
+      const reversedValue = value
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+
+      return reversedValue
+    },
     handleSubmit (e) {
       e.preventDefault()
       this.form.validateFieldsAndScroll((err, values) => {
@@ -214,10 +227,15 @@ export default {
         if (values.haenable !== undefined) {
           params.haenable = values.haenable
         }
-        params.group = values.group
+        if (values.group && values.group.length > 0) {
+          params.group = values.group
+        }
+        if (values.userdata && values.userdata.length > 0) {
+          params.userdata = encodeURIComponent(btoa(this.sanitizeReverse(values.userdata)))
+        }
         this.loading = true
 
-        api('updateVirtualMachine', params).then(json => {
+        api('updateVirtualMachine', {}, 'POST', params).then(json => {
           this.$message.success({
             content: `${this.$t('label.action.edit.instance')} - ${values.name}`,
             duration: 2