CNV-49533: Fix memory utilization percentage in vmlist

src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx

@@ -31,9 +31,10 @@ const VirtualMachineRowLayout: FC<
       isSingleNodeCluster: boolean;
       node: React.ReactNode | string;
       vmim: V1VirtualMachineInstanceMigration;
+      vmiMemory?: string;
     }
   >
-> = ({ activeColumnIDs, obj, rowData: { ips, isSingleNodeCluster, node, vmim } }) => {
+> = ({ activeColumnIDs, obj, rowData: { ips, isSingleNodeCluster, node, vmim, vmiMemory } }) => {
   const selected = isVMSelected(obj);
 
   const vmName = useMemo(() => getName(obj), [obj]);
@@ -90,7 +91,7 @@ const VirtualMachineRowLayout: FC<
         {ips}
       </TableData>
       <TableData activeColumnIDs={activeColumnIDs} className="vm-column" id="memory-usage">
-        <MemoryPercentage vmName={vmName} vmNamespace={vmNamespace} />
+        <MemoryPercentage vmiMemory={vmiMemory} vmName={vmName} vmNamespace={vmNamespace} />
       </TableData>
       <TableData activeColumnIDs={activeColumnIDs} className="vm-column" id="cpu-usage">
         <CPUPercentage vmName={vmName} vmNamespace={vmNamespace} />

src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRunningRow.tsx

@@ -6,6 +6,7 @@ import {
   V1VirtualMachineInstanceMigration,
 } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { getMemory } from '@kubevirt-utils/resources/vm';
 import { getVMIIPAddressesWithName } from '@kubevirt-utils/resources/vmi';
 import { ResourceLink, RowProps } from '@openshift-console/dynamic-plugin-sdk';
 
@@ -33,6 +34,7 @@ const VirtualMachineRunningRow: React.FC<
         isSingleNodeCluster,
         node: <ResourceLink kind="Node" name={vmi?.status?.nodeName} />,
         vmim,
+        vmiMemory: getMemory(vmi),
       }}
       activeColumnIDs={activeColumnIDs}
       obj={obj}

src/views/virtualmachines/list/components/VirtualMachineRow/components/CPUPercentage.tsx

@@ -14,8 +14,8 @@ const CPUPercentage: FC<CPUPercentageProps> = ({ vmName, vmNamespace }) => {
 
   if (isEmpty(cpuRequested) || isEmpty(cpuUsage)) return <span>{NO_DATA_DASH}</span>;
 
-  const percentage = Math.round((cpuUsage * 10000) / cpuRequested) / 100;
-  return <span>{percentage}%</span>;
+  const percentage = (cpuUsage * 100) / cpuRequested;
+  return <span>{percentage.toFixed(2)}%</span>;
 };
 
 export default memo(CPUPercentage);

src/views/virtualmachines/list/components/VirtualMachineRow/components/MemoryPercentage.tsx

@@ -1,21 +1,30 @@
 import React, { FC, memo } from 'react';
+import xbytes from 'xbytes';
 
+import { getMemorySize } from '@kubevirt-utils/components/CPUMemoryModal/utils/CpuMemoryUtils';
 import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
 import { getVMMetrics } from '@virtualmachines/list/metrics';
 
 type MemoryPercentageProps = {
+  vmiMemory: string;
   vmName: string;
   vmNamespace: string;
 };
 
-const MemoryPercentage: FC<MemoryPercentageProps> = ({ vmName, vmNamespace }) => {
-  const { memoryRequested, memoryUsage } = getVMMetrics(vmName, vmNamespace);
+const MemoryPercentage: FC<MemoryPercentageProps> = ({ vmiMemory, vmName, vmNamespace }) => {
+  const { memoryUsage } = getVMMetrics(vmName, vmNamespace);
 
-  if (isEmpty(memoryRequested) || isEmpty(memoryUsage)) return <span>{NO_DATA_DASH}</span>;
+  if (isEmpty(memoryUsage) || isEmpty(vmiMemory)) return <span>{NO_DATA_DASH}</span>;
 
-  const percentage = Math.round((memoryUsage / memoryRequested) * 10000) / 100;
-  return <span>{percentage}%</span>;
+  const memoryRequested = getMemorySize(vmiMemory);
+
+  const memoryAvailableBytes = xbytes.parseSize(
+    `${memoryRequested?.size} ${memoryRequested?.unit}B`,
+  );
+
+  const percentage = (memoryUsage * 100) / memoryAvailableBytes;
+  return <span>{percentage.toFixed(2)}%</span>;
 };
 
 export default memo(MemoryPercentage);

src/views/virtualmachines/list/hooks/constants.ts

@@ -6,7 +6,6 @@ export const TEXT_FILTER_LABELS_ID = 'labels';
 export const VMListQueries = {
   CPU_REQUESTED: 'CPU_REQUESTED',
   CPU_USAGE: 'CPU_USAGE',
-  MEMORY_REQUESTED: 'MEMORY_REQUESTED',
   MEMORY_USAGE: 'MEMORY_USAGE',
   NETWORK_TOTAL_USAGE: 'NETWORK_TOTAL_USAGE',
 };
@@ -18,7 +17,6 @@ export const getVMListQueries = (namespace: string) => {
   return {
     [VMListQueries.CPU_REQUESTED]: `kube_pod_resource_request{resource='cpu',${namespaceFilter}}`,
     [VMListQueries.CPU_USAGE]: `rate(kubevirt_vmi_cpu_usage_seconds_total{${namespaceFilter}}[5m])`,
-    [VMListQueries.MEMORY_REQUESTED]: `kube_pod_resource_request{resource='memory',${namespaceFilter}}`,
     [VMListQueries.MEMORY_USAGE]: `kubevirt_vmi_memory_used_bytes{${namespaceFilter}}`,
     [VMListQueries.NETWORK_TOTAL_USAGE]: `rate(kubevirt_vmi_network_transmit_bytes_total{${namespaceFilter}}[5m]) + rate(kubevirt_vmi_network_receive_bytes_total{${namespaceFilter}}[5m])`,
   };

src/views/virtualmachines/list/hooks/useVMMetrics.ts

@@ -11,13 +11,7 @@ import {
   usePrometheusPoll,
 } from '@openshift-console/dynamic-plugin-sdk';
 
-import {
-  setVMCPURequested,
-  setVMCPUUsage,
-  setVMMemoryRequested,
-  setVMMemoryUsage,
-  setVMNetworkUsage,
-} from '../metrics';
+import { setVMCPURequested, setVMCPUUsage, setVMMemoryUsage, setVMNetworkUsage } from '../metrics';
 
 import { getVMListQueries, VMListQueries } from './constants';
 import { getVMNamesFromPodsNames } from './utils';
@@ -54,13 +48,6 @@ const useVMMetrics = () => {
     query: queries?.NETWORK_TOTAL_USAGE,
   });
 
-  const [memoryRequestedResponse] = usePrometheusPoll({
-    endpoint: PrometheusEndpoint?.QUERY,
-    endTime: currentTime,
-    namespace: allNamespace ? undefined : activeNamespace,
-    query: queries?.[VMListQueries.MEMORY_REQUESTED],
-  });
-
   const [cpuUsageResponse] = usePrometheusPoll({
     endpoint: PrometheusEndpoint?.QUERY,
     endTime: currentTime,
@@ -95,19 +82,6 @@ const useVMMetrics = () => {
     });
   }, [memoryUsageResponse]);
 
-  useEffect(() => {
-    memoryRequestedResponse?.data?.result?.forEach((result) => {
-      const vmName = launcherNameToVMName?.[`${result?.metric?.namespace}-${result?.metric?.pod}`];
-
-      if (isEmpty(vmName)) return;
-      const vmNamespace = result?.metric?.namespace;
-
-      const memoryRequested = parseFloat(result?.value?.[1]);
-
-      setVMMemoryRequested(vmName, vmNamespace, memoryRequested);
-    });
-  }, [memoryRequestedResponse, launcherNameToVMName]);
-
   useEffect(() => {
     cpuUsageResponse?.data?.result?.forEach((result) => {
       const vmName = result?.metric?.name;

src/views/virtualmachines/list/metrics.ts

@@ -32,15 +32,6 @@ export const setVMNetworkUsage = (vmName: string, vmNamespace: string, networkUs
   vmMetrics.networkUsage = networkUsage;
 };
 
-export const setVMMemoryRequested = (
-  vmName: string,
-  vmNamespace: string,
-  memoryRequested: number,
-) => {
-  const vmMetrics = getVMMetrics(vmName, vmNamespace);
-  vmMetrics.memoryRequested = memoryRequested;
-};
-
 export const setVMCPUUsage = (vmName: string, vmNamespace: string, cpuUsage: number) => {
   const vmMetrics = getVMMetrics(vmName, vmNamespace);
   vmMetrics.cpuUsage = cpuUsage;