Add assignVolume API to the GUI

ui/public/locales/en.json

@@ -443,6 +443,7 @@
 "label.assign.instance.another": "Assign Instance to another Account",
 "label.assign.vms": "Assign Instances",
 "label.assigning.vms": "Assigning Instances",
+"label.assign.volume.another": "Assign volume to another account",
 "label.associatednetwork": "Associated Network",
 "label.associatednetworkid": "Associated Network ID",
 "label.associatednetworkname": "Network name",
@@ -4089,6 +4090,7 @@
 "message.success.add.webhook.filter": "Successfully added Webhook Filter",
 "message.success.assign.sslcert": "Successfully assigned SSL certificate",
 "message.success.assign.vm": "Successfully assigned Instance",
+"message.success.assign.volume": "Successfully assigned Volume",
 "message.success.apply.network.policy": "Successfully applied Network Policy",
 "message.success.apply.tungsten.tag": "Successfully applied Tag",
 "message.success.assigned.vms": "Successfully assigned Instances",

ui/public/locales/pt_BR.json

@@ -407,6 +407,7 @@
 "label.assign": "Atribuir",
 "label.assign.instance.another": "Atribuir inst\u00e2ncia para outra conta",
 "label.assign.vms": "Atribuir VMs",
+"label.assign.volume.another": "Atribuir volume \u00e0 outra conta",
 "label.assigning.vms": "Atribuindo VMs",
 "label.associated.resource": "Recurso associado",
 "label.associatednetwork": "Rede associada",

ui/src/config/section/storage.js

@@ -291,6 +291,15 @@
             return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) || store.features.allowuserexpungerecovervolume) && record.state === 'Destroy'
           }
         },
+        {
+          api: 'assignVolume',
+          icon: 'user-add-outlined',
+          label: 'label.assign.volume.another',
+          dataView: true,
+show: (record) => { return !record.virtualmachineid },
+          popup: true,
+          component: shallowRef(defineAsyncComponent(() => import('@/views/storage/AssignVolume.vue')))
+        },
         {
           api: 'deleteVolume',
           icon: 'delete-outlined',

ui/src/views/compute/wizard/OwnershipSelection.vue

@@ -70,7 +70,7 @@
     <template v-if="selectedAccountType === 'Account'">
       <a-form-item :label="$t('label.account')" required>
         <a-select
-          @change="emitChangeEvent"
+          @change="handleSelectedAccountId"
           v-model:value="selectedAccount"
           showSearch
           optionFilterProp="label"
@@ -143,6 +143,7 @@ export default {
       selectedAccountType: this.$store.getters.project?.id ? 'Project' : 'Account',
       selectedDomain: null,
       selectedAccount: null,
+      selectedAccountId: null,
       selectedProject: null,
       loading: false,
       requestToken: 0
@@ -178,6 +179,7 @@ export default {
             this.selectedDomain = null
             this.selectedProject = null
             this.selectedAccount = null
+            this.selectedAccountId = null
             return
           }
           const domainIds = this.domains?.map(domain => domain.id)
@@ -221,6 +223,7 @@ export default {
             this.selectedAccount = this.accounts?.[0]?.name
           }
           this.selectedProject = null
+          this.handleSelectedAccountId(this.selectedAccount)
           this.emitChangeEvent()
         })
         .catch((error) => {
@@ -231,6 +234,18 @@ export default {
           this.initialized = true
         })
     },
+    handleSelectedAccountId (accountName) {
+      const selected = this.accounts.find(acc => acc.name === accountName)
+      if (selected) {
+        this.selectedAccount = selected.name
+        this.selectedAccountId = selected.id
+      } else {
+        this.selectedAccount = null
+        this.selectedAccountId = null
+      }
+
+      this.emitChangeEvent()
+    },
     fetchProjects () {
       this.loading = true
       const currentToken = this.incrementAndGetRequestToken()

ui/src/views/storage/AssignVolume.vue

@@ -0,0 +1,176 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <div class="form" v-ctrl-enter="submitData">
+
+      <div v-if="loading" class="loading">
+        <loading-outlined style="color: #1890ff;" />
+      </div>
+
+      <ownership-selection @fetch-owner="fetchOwnerOptions" accountId/>
+
+      <div class="submit-btn">
+        <a-button @click="closeAction">
+          {{ $t('label.cancel') }}
+        </a-button>
+        <a-button type="primary" @click="submitData" ref="submit">
+          {{ $t('label.submit') }}
+        </a-button>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { postAPI } from '@/api'
+import ResourceIcon from '@/components/view/ResourceIcon'
+import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
+
+export default {
+  name: 'AssignVolume',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    ResourceIcon,
+    OwnershipSelection
+  },
+  inject: ['parentFetchData'],
+  data () {
+    return {
+      domains: [],
+      accounts: [],
+      projects: [],
+      selectedAccountType: 'Account',
+      selectedDomain: null,
+      selectedAccount: null,
+      selectedAccountId: null,
+      selectedProject: null,
+      accountError: false,
+      projectError: false,
+      loading: false
+    }
+  },
+  methods: {
+    fetchOwnerOptions (selectedOptions) {
+      this.selectedAccountType = selectedOptions.selectedAccountType
+      this.selectedAccount = selectedOptions.selectedAccount
+      this.selectedAccountId = selectedOptions.selectedAccountId
+      this.selectedDomain = selectedOptions.selectedDomain
+      this.selectedProject = selectedOptions.selectedProject
+    },
+    closeAction () {
+      this.$emit('close-action')
+    },
+    submitData () {
+      if (this.loading) return
+      let variableKey = ''
+      let variableValue = ''
+
+      if (this.selectedAccountType === 'Account') {
+        if (!this.selectedAccountId) {
+          this.accountError = true
+          return
+        }
+        variableKey = 'accountid'
+        variableValue = this.selectedAccountId
+      } else if (this.selectedAccountType === 'Project') {
+        if (!this.selectedProject) {
+          this.projectError = true
+          return
+        }
+        variableKey = 'projectid'
+        variableValue = this.selectedProject
+      }
+
+      this.loading = true
+      postAPI('assignVolume', {
+        response: 'json',
+        volumeid: this.resource.id,
+        [variableKey]: variableValue,
+        ignoreproject: true
+      }).then(() => {
+        this.$notification.success({
+          message: this.$t('message.success.assign.volume')
+        })
+        this.$emit('close-action')
+        this.parentFetchData()
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.form {
+  width: 85vw;
+
+  @media (min-width: 760px) {
+    width: 500px;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  &__label {
+    display: flex;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+}
+
+.submit-btn {
+  margin-top: 10px;
+  align-self: flex-end;
+
+  button {
+    margin-left: 10px;
+  }
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}
+</style>