Inaccurate memory usage chart for various data formats (#81)

Co-authored-by: pawel.wesolowski <[email protected]>

src/components/Summary/LabelFormatter.tsx

@@ -1,14 +1,29 @@
+import MemoryUnit from "../../types/MemoryUnit";
+
 const round = (value: number): string => value.toFixed(2);
 
-const convert = (value: number): string => {
-  if (value > 1000000) {
-    return `${round(value / 1000000)} GB`;
+const convertMiB = (value: number): string => {
+  const valueInMB = value * 1.048576;
+  const valueInGB = value * 0.001048576;
+
+  if (valueInGB > 1) {
+    return `${round(valueInGB)} GB`;
+  }
+  return `${round(valueInMB)} MB`;
+};
+
+const convertKiB = (value: number): string => {
+  const valueInMB = value * 0.001024;
+  const valueInGB = valueInMB / 1024;
+
+  if (valueInGB > 1) {
+    return `${round(valueInGB)} GB`;
   }
-  return `${round(value / 1000)} MB`;
+  return `${round(valueInMB)} MB`;
 };
 
 // perform a "best effort" conversion to GBs
-export default function
-labelFormatter(value: string | number | Array<string | number>): string {
-  return convert(value as number);
+export default function labelFormatter(value: string | number | Array<string | number>, unit: MemoryUnit): string {
+  const numericValue = Number(value);
+  return unit === MemoryUnit.MiB ? convertMiB(numericValue) : convertKiB(numericValue);
 }

src/components/Summary/MemoryUsageChart.tsx

@@ -29,6 +29,7 @@ export default class MemoryUsageChart extends React.PureComponent<Props> {
       );
     }
 
+    const memoryUnit = memoryUsages[0].memoryUnit;
     const freeMemoryAvg = memoryUsages.reduce((a, b) => a + b.memoryFree, 0) / memoryUsages.length;
     const usedMemoryAvg = memoryUsages.reduce((a, b) => a + b.memoryUsed, 0) / memoryUsages.length;
 
@@ -48,7 +49,7 @@ export default class MemoryUsageChart extends React.PureComponent<Props> {
                 data.map((_, index) => <Cell key={COLORS[index]} fill={COLORS[index]} />)
               }
             </Pie>
-            <Tooltip formatter={labelFormatter} />
+            <Tooltip formatter={(value) => labelFormatter(value, memoryUnit)} />
             <Legend />
           </PieChart>
         </ResponsiveContainer>

src/parser/cpuusage/os/TopCpuUsageParser.tsx

@@ -4,13 +4,14 @@ import MemoryUsage from '../../../types/MemoryUsage';
 import ThreadCpuUsage from '../ThreadCpuUsage';
 import { matchMultipleGroups, matchMultipleTimes, matchOne } from '../../RegExpUtils';
 import TopColumnOffsets from './TopColumnOffsets';
+import MemoryUnit from '../../../types/MemoryUnit';
 
 export const CPU_USAGE_TIMESTAMP_PATTERN = /^top - ([0-9]{2}:[0-9]{2}:[0-9]{2})/;
 const LOAD_AVERAGES_PATTERN = / load average: ([0-9.]+), ([0-9.]+), ([0-9.]+)/;
 const RUNNING_PROCESSES_PATTERN = /([0-9.]+) running/;
 const TOTAL_MEMORY_PATTERN = /([0-9.]+)k?[ +]total/;
-const USED_MEMORY_PATTERN = /([0-9.]+)k? used/;
-const FREE_MEMORY_PATTERN = /([0-9.]+)k? free/;
+const USED_MEMORY_PATTERN = /([0-9.]+)k?[ +]used/;
+const FREE_MEMORY_PATTERN = /([0-9.]+)k?[ +]free/;
 const COLUMN_MATCHER = /([^\s]+) +/g;
 
 export type ParseCpuUsageCallback = (cpuUsage: CpuUsage) => void;
@@ -60,12 +61,13 @@ export default class TopCpuUsageParser {
     const memoryTotal = parseInt(matchOne(TOTAL_MEMORY_PATTERN, line1), 10);
     const memoryUsed = parseInt(matchOne(USED_MEMORY_PATTERN, line1), 10);
     const memoryFree = parseInt(matchOne(FREE_MEMORY_PATTERN, line1), 10);
+    const memoryUnit = line1?.includes(MemoryUnit.MiB) ? MemoryUnit.MiB : MemoryUnit.KiB;
 
     const swapTotal = parseInt(matchOne(TOTAL_MEMORY_PATTERN, line2), 10);
     const swapUsed = parseInt(matchOne(USED_MEMORY_PATTERN, line2), 10);
     const swapFree = parseInt(matchOne(FREE_MEMORY_PATTERN, line2), 10);
 
-    return new MemoryUsage(memoryTotal, memoryUsed, memoryFree, swapTotal, swapUsed, swapFree);
+    return new MemoryUsage(memoryTotal, memoryUsed, memoryFree, swapTotal, swapUsed, swapFree, memoryUnit);
   }
 
   private static parseThreadCpuUsages(lines: string[]): ThreadCpuUsage[] {

src/types/MemoryUnit.tsx

@@ -0,0 +1,6 @@
+enum MemoryUnit {
+  MiB = 'MiB',
+  KiB = 'KiB'
+}
+
+export default MemoryUnit;

src/types/MemoryUsage.tsx

@@ -1,3 +1,5 @@
+import MemoryUnit from "./MemoryUnit";
+
 export default class MemoryUsage {
   public readonly memoryTotal: number;
 
@@ -11,12 +13,15 @@ export default class MemoryUsage {
 
   public readonly swapFree: number;
 
-  constructor(memoryTotal: number, memoryUsed: number, memoryFree: number, swapTotal: number, swapUsed: number, swapFree: number) {
+  public readonly memoryUnit: MemoryUnit;
+
+  constructor(memoryTotal: number, memoryUsed: number, memoryFree: number, swapTotal: number, swapUsed: number, swapFree: number, memoryUnit: MemoryUnit) {
     this.memoryTotal = memoryTotal;
     this.memoryUsed = memoryUsed;
     this.memoryFree = memoryFree;
     this.swapTotal = swapTotal;
     this.swapUsed = swapUsed;
     this.swapFree = swapFree;
+    this.memoryUnit = memoryUnit;
   }
 }