Show in which primary storage volumes are allocated in instance details page and volume migration pop-ups (apache#8835)

Author: winterhazel

ui/public/locales/en.json

@@ -595,6 +595,7 @@
 "label.crosszones": "Cross zones",
 "label.currency": "Currency",
 "label.current": "Current",
+"label.current.storage": "Current storage",
 "label.currentpassword": "Current password",
 "label.custom": "Custom",
 "label.customconstrained": "Custom constrained",
@@ -1916,6 +1917,7 @@
 "label.select.tier": "Select Network Tier",
 "label.select.zones": "Select zones",
 "label.select.2fa.provider": "Select the provider",
+"label.selected.storage": "Selected storage",
 "label.self": "Mine",
 "label.selfexecutable": "Self",
 "label.semanticversion": "Semantic version",
@@ -3082,7 +3084,7 @@
 "message.migrate.resource.to.ss": "Please confirm that you want to migrate this resource to another secondary storage.",
 "message.migrate.router.confirm": "Please confirm the host you wish to migrate the router to:",
 "message.migrate.systemvm.confirm": "Please confirm the host you wish to migrate the system VM to:",
-"message.migrate.volume": "Please confirm that you want to migrate this volume to another primary storage.",
+"message.migrate.volume": "Please confirm that you want to migrate the volume \"{volume}\" from \"{storage}\" to another primary storage.",
 "message.migrate.volume.failed": "Migrating volume failed.",
 "message.migrate.volume.pool.auto.assign": "Primary storage for the volume will be automatically chosen based on the suitability and Instance destination",
 "message.migrate.volume.processing": "Migrating volume...",

ui/public/locales/pt_BR.json

@@ -445,6 +445,7 @@
 "label.crosszones": "Inter zonas",
 "label.currency": "Moeda",
 "label.current": "Atual",
+"label.current.storage": "Armazenamento atual",
 "label.currentpassword": "Senha antiga",
 "label.custom": "Customizado",
 "label.customconstrained": "Customizado limitado",
@@ -1442,6 +1443,7 @@
 "label.select.projects": "Selecionar projetos",
 "label.select.tier": "Selecionar camada",
 "label.select.zones": "Selecionar zonas",
+"label.selected.storage": "Armazenamento selecionado",
 "label.self": "Meus",
 "label.selfexecutable": "Auto",
 "label.semanticversion": "Vers\u00e3o sem\u00e2ntica",
@@ -2235,7 +2237,7 @@
 "message.migrate.instance.to.ps": "Por favor confirme que voc\u00ea deseja migrar a inst\u00e2ncia para outro armazenamento prim\u00e1rio.",
 "message.migrate.router.confirm": "Por favor confirme o host que voc\u00ea deseja migrar o roteador para:",
 "message.migrate.systemvm.confirm": "Por favor confirme o host para o qual voc\u00ea deseja migrar a VM de sistema:",
-"message.migrate.volume": "Por favor confirme que voc\u00ea deseja migrar o volume para outro armazenamento prim\u00e1rio.",
+"message.migrate.volume": "Por favor confirme que voc\u00ea deseja migrar o volume \"{volume}\" do armazenamento prim\u00e1rio \"{storage}\" para outro.",
 "message.migrate.volume.failed": "Falha ao migrar volume",
 "message.migrate.volume.processing": "Migrando volume...",
 "message.migrating.failed": "Falha na migra\u00e7\u00e3o",

ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue

@@ -101,9 +101,14 @@ export default {
           key: 'size',
           title: this.$t('label.size')
         },
+        {
+          key: 'storage',
+          title: this.$t('label.current.storage'),
+          dataIndex: 'storage'
+        },
         {
           key: 'selectedstorage',
-          title: this.$t('label.storage')
+          title: this.$t('label.selected.storage')
         },
         {
           key: 'select',

ui/src/components/view/VolumesTab.vue

@@ -19,7 +19,7 @@
   <a-table
     class="table"
     size="small"
-    :columns="volumeColumns"
+    :columns="columns"
     :dataSource="volumes"
     :rowKey="item => item.id"
     :pagination="false"
@@ -40,6 +40,10 @@
       <template v-if="column.key === 'size'">
         {{ parseFloat(record.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
       </template>
+      <template v-if="column.key === 'storage'">
+        <router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link>
+        <span v-else>{{ text }}</span>
+      </template>
     </template>
   </a-table>
 </template>
@@ -64,11 +68,20 @@ export default {
     }
   },
   inject: ['parentFetchData'],
+  computed: {
+    columns () {
+      if (this.volumes?.[0]) {
+        return this.allColumns.filter(col => col.dataIndex in this.volumes[0])
+      }
+      return this.allColumns.filter(col => this.defaultColumns.includes(col.dataIndex))
+    }
+  },
   data () {
     return {
       vm: {},
       volumes: [],
-      volumeColumns: [
+      defaultColumns: ['name', 'state', 'type', 'size'],
+      allColumns: [
         {
           key: 'name',
           title: this.$t('label.name'),
@@ -87,6 +100,11 @@ export default {
           key: 'size',
           title: this.$t('label.size'),
           dataIndex: 'size'
+        },
+        {
+          key: 'storage',
+          title: this.$t('label.storage'),
+          dataIndex: 'storage'
         }
       ]
     }

ui/src/views/storage/MigrateVolume.vue

@@ -19,7 +19,7 @@
   <a-form class="form" layout="vertical" v-ctrl-enter="handleKeyboardSubmit">
     <a-alert class="top-spaced" type="warning">
       <template #message>
-        <span v-html="$t('message.migrate.volume')" />
+        <span v-html="$t('message.migrate.volume', { volume: resource.name, storage: resource.storage })" />
       </template>
     </a-alert>
     <a-form-item style="margin-top: 10px;">