From 0a92cc034969e57f2cb76eb8d797d0eec1db1783 Mon Sep 17 00:00:00 2001
From: Lucas Martins <56271185+lucas-a-martins@users.noreply.github.com>
Date: Wed, 12 Feb 2025 11:50:58 -0300
Subject: [PATCH] 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 <lucas.martins@scclouds.com.br>
---
 ui/public/locales/en.json            |  2 +-
 ui/src/components/view/ListView.vue  |  3 +++
 ui/src/components/widgets/Status.vue | 10 +++++++++-
 ui/src/config/section/storage.js     |  2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 7fdd8fab414..7bf898f4933 100644
--- a/ui/public/locales/en.json
+++ b/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",
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index a0b304c8148..dedbcbc5561 100644
--- a/ui/src/components/view/ListView.vue
+++ b/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>
diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index af52de7ceb9..22a8236d6cd 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/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/')) {
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index e0fa72dff8a..b175f5eee93 100644
--- a/ui/src/config/section/storage.js
+++ b/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') {