F OpenNebula/one#6703: VM's table display hostname (#3242)

* Now displays hostname next to the host in the card view
* Also displays hostname in the list view

Signed-off-by: Victor Hansson <vhansson@opennebula.io>

src/fireedge/src/client/components/Cards/VirtualMachineCard.js

@@ -24,6 +24,7 @@ import {
   Lock,
   Network,
   User,
+  Internet as HostnameIcon,
   WarningCircledOutline as WarningIcon,
 } from 'iconoir-react'
 
@@ -80,7 +81,7 @@ const VirtualMachineCard = memo(
       USER_TEMPLATE: { LABELS } = {},
       GNAME,
       UNAME,
-      TEMPLATE: { VCPU = '-', MEMORY } = {},
+      TEMPLATE: { VCPU = '-', MEMORY, CONTEXT = {} } = {},
     } = vm
 
     const { HOSTNAME = '--', VM_MAD: hypervisor } = useMemo(
@@ -88,6 +89,8 @@ const VirtualMachineCard = memo(
       [vm.HISTORY_RECORDS]
     )
 
+    const { SET_HOSTNAME: VM_HOSTNAME = '' } = CONTEXT
+
     const [time, timeFormat] = useMemo(() => {
       const fromMill = timeFromMilliseconds(+ETIME || +STIME)
 
@@ -190,10 +193,16 @@ const VirtualMachineCard = memo(
               <MemoryIcon width={20} height={20} />
               <span data-cy="memory">{memValue}</span>
             </span>
-            <span title={`${Tr(T.Hostname)}: ${HOSTNAME}`}>
+            <span title={`${Tr(T.Host)}: ${HOSTNAME}`}>
               <HardDrive />
               <span data-cy="hostname">{HOSTNAME}</span>
             </span>
+            {!!VM_HOSTNAME && (
+              <span title={`${Tr(T.Hostname)}: ${VM_HOSTNAME}`}>
+                <HostnameIcon />
+                <span>{` ${VM_HOSTNAME}`}</span>
+              </span>
+            )}
             {!!UNAME && (
               <span title={`${Tr(T.Owner)}: ${UNAME}`}>
                 <User />

src/fireedge/src/client/components/Tables/Vms/columns.js

@@ -21,6 +21,7 @@ import {
   getLastHistory,
   getState,
   getType,
+  getVmHostname,
 } from 'client/models/VirtualMachine'
 
 /** @type {Column[]} VM columns */
@@ -55,6 +56,11 @@ const COLUMNS = [
   },
   {
     Header: T.Hostname,
+    id: 'vmhostname',
+    accessor: (row) => getVmHostname(row)?.pop() ?? '',
+  },
+  {
+    Header: T.Host,
     id: 'hostname',
     accessor: (row) => getLastHistory(row)?.HOSTNAME,
   },

src/fireedge/src/client/components/Tables/Vms/index.js

@@ -35,7 +35,13 @@ import { useGeneral } from 'client/features/General'
 import { useGetVmsQuery } from 'client/features/OneApi/vm'
 
 import { getColorFromString, getUniqueLabels } from 'client/models/Helper'
-import { getIps, getLastHistory, getState } from 'client/models/VirtualMachine'
+import {
+  getIps,
+  getLastHistory,
+  getState,
+  getVmHostname,
+} from 'client/models/VirtualMachine'
+
 const DEFAULT_DATA_CY = 'vms'
 
 const { VNC, RDP, SSH, VMRC } = VM_ACTIONS
@@ -163,6 +169,11 @@ const VmsTable = (props) => {
     },
     {
       header: T.Hostname,
+      id: 'vmhostname',
+      accessor: (vm) => getVmHostname(vm),
+    },
+    {
+      header: T.Host,
       id: 'hostname',
       accessor: (vm) => getLastHistory(vm)?.HOSTNAME,
     },

src/fireedge/src/client/models/VirtualMachine.js

@@ -60,6 +60,19 @@ export const getHistoryAction = (action) => HISTORY_ACTIONS[+action]
 export const getHistoryRecords = (vm) =>
   [vm?.HISTORY_RECORDS?.HISTORY ?? []].flat()
 
+/**
+ * @param {VM} vm - Virtual machine
+ * @returns {object} Context vars from resource
+ */
+export const getContext = (vm) => [vm?.TEMPLATE?.CONTEXT ?? []].flat()
+
+/**
+ * @param {VM} vm - Virtual machine
+ * @returns {string} VM hostname from resource
+ */
+export const getVmHostname = (vm) =>
+  [getContext(vm)?.pop()?.SET_HOSTNAME ?? []].flat()
+
 /**
  * @param {VM} vm - Virtual machine
  * @returns {HistoryRecord} Last history record from resource