UI: Add VM state to Volume list view (#10341)

* Add vm state to volume list view

* Change size column order

---------

Co-authored-by: Lucas Martins <[email protected]>

Author: lucas-a-martins

ui/public/locales/en.json

@@ -2454,7 +2454,7 @@
 "label.users": "Users",
 "label.usersource": "User type",
 "label.using.cli": "Using CLI",
-"label.utilization": "Utilisation",
+"label.utilization": "Utilization",
 "label.uuid": "ID",
 "label.value": "Value",
 "label.vcenter": "VMware datacenter vCenter",

ui/src/components/view/ListView.vue

@@ -256,6 +256,9 @@
       <template v-if="column.key === 'quotastate'">
         <status :text="text ? text : ''" displayText />
       </template>
+      <template v-if="column.key === 'vmstate'">
+        <status :text="text ? text : ''" displayText vmState/>
+      </template>
       <template v-if="column.key === 'vlan'">
         <a href="javascript:;">
           <router-link v-if="$route.path === '/guestvlans'" :to="{ path: '/guestvlans/' + record.id }">{{ text }}</router-link>

ui/src/components/widgets/Status.vue

@@ -44,6 +44,10 @@ export default {
     styles: {
       type: Object,
       default: () => {}
+    },
+    vmState: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -182,7 +186,11 @@ export default {
       } else if (this.$route.path === '/vm' || this.$route.path.includes('/vm/')) {
         result = this.$t('message.vm.state.' + state.toLowerCase())
       } else if (this.$route.path === '/volume' || this.$route.path.includes('/volume/')) {
-        result = this.$t('message.volume.state.' + state.toLowerCase())
+        if (this.vmState) {
+          result = this.$t('message.vm.state.' + state.toLowerCase())
+        } else {
+          result = this.$t('message.volume.state.' + state.toLowerCase())
+        }
       } else if (this.$route.path === '/guestnetwork' || this.$route.path.includes('/guestnetwork/')) {
         result = this.$t('message.guestnetwork.state.' + state.toLowerCase())
       } else if (this.$route.path === '/publicip' || this.$route.path.includes('/publicip/')) {

ui/src/config/section/storage.js

@@ -38,7 +38,7 @@ export default {
         }
       },
       columns: () => {
-        const fields = ['name', 'state', 'sizegb', 'type', 'vmname']
+        const fields = ['name', 'state', 'sizegb', 'type', 'vmname', 'vmstate']
         const metricsFields = ['diskkbsread', 'diskkbswrite', 'diskiopstotal']
 
         if (store.getters.userInfo.roletype === 'Admin') {