From 49584b746a4c88c854737831690c9fe2ad7089f2 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Sat, 16 Dec 2023 18:11:45 -0800
Subject: [PATCH 1/3] Use toFixed to handle rounding

---
 app/pages/system/UtilizationPage.tsx | 3 ++-
 app/test/e2e/utilization.e2e.ts      | 4 ++--
 libs/util/math.spec.ts               | 1 +
 libs/util/math.ts                    | 3 +--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index 4fed415e46..08e381e1b7 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -254,7 +254,8 @@ const AvailableCell = ({
   return (
     <div className="flex w-full items-center justify-between">
       <div>
-        {allocated - provisioned} {unit && <span className="text-tertiary">{unit}</span>}
+        {allocated - provisioned}
+        {unit && <span className="text-tertiary"> {unit}</span>}
       </div>
       {/* We only show the ResourceMeter if the percent crosses the warning threshold (66%) */}
       {usagePercent > 66 && (
diff --git a/app/test/e2e/utilization.e2e.ts b/app/test/e2e/utilization.e2e.ts
index fbe2201887..72eaff7984 100644
--- a/app/test/e2e/utilization.e2e.ts
+++ b/app/test/e2e/utilization.e2e.ts
@@ -21,13 +21,13 @@ test.describe('System utilization', () => {
 
     const table = page.getByRole('table')
     await expectRowVisible(table, {
-      CPU: '20 ',
+      CPU: '20',
       Storage: '2.7 TiB',
       Memory: '66 GiB',
       Silo: 'maze-war',
     })
     await expectRowVisible(table, {
-      CPU: '26 ',
+      CPU: '26',
       Storage: '7 TiB',
       Memory: '350 GiB',
       Silo: 'myriad',
diff --git a/libs/util/math.spec.ts b/libs/util/math.spec.ts
index 19c6f2b4d0..101068f564 100644
--- a/libs/util/math.spec.ts
+++ b/libs/util/math.spec.ts
@@ -16,6 +16,7 @@ it('rounds properly', () => {
   expect(round(123.456, 2)).toEqual(123.46)
   expect(round(123.456, 3)).toEqual(123.456)
   expect(round(123.456, 4)).toEqual(123.456) // trailing zeros are culled
+  expect(round(123.0001, 3)).toEqual(123) // decimal is culled if decimals are all zeros
   expect(round(1.9, 0)).toEqual(2)
   expect(round(1.9, 1)).toEqual(1.9)
   expect(round(5 / 2, 2)).toEqual(2.5) // math expressions are resolved
diff --git a/libs/util/math.ts b/libs/util/math.ts
index dc65df8619..4b36a4b2e9 100644
--- a/libs/util/math.ts
+++ b/libs/util/math.ts
@@ -16,6 +16,5 @@ export function splitDecimal(value: number) {
 }
 
 export function round(num: number, digits: number) {
-  const pow10 = Math.pow(10, digits)
-  return Math.round((num + Number.EPSILON) * pow10) / pow10
+  return Number(num.toFixed(digits))
 }

From 1dfe0629f8b0bab5468c8774cf63253512485c1e Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Sat, 16 Dec 2023 18:12:55 -0800
Subject: [PATCH 2/3] more precise comment

---
 libs/util/math.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/util/math.spec.ts b/libs/util/math.spec.ts
index 101068f564..cca1f9b865 100644
--- a/libs/util/math.spec.ts
+++ b/libs/util/math.spec.ts
@@ -16,7 +16,7 @@ it('rounds properly', () => {
   expect(round(123.456, 2)).toEqual(123.46)
   expect(round(123.456, 3)).toEqual(123.456)
   expect(round(123.456, 4)).toEqual(123.456) // trailing zeros are culled
-  expect(round(123.0001, 3)).toEqual(123) // decimal is culled if decimals are all zeros
+  expect(round(123.0001, 3)).toEqual(123) // period is culled if decimals are all zeros
   expect(round(1.9, 0)).toEqual(2)
   expect(round(1.9, 1)).toEqual(1.9)
   expect(round(5 / 2, 2)).toEqual(2.5) // math expressions are resolved

From 90e46ac7144e41510057a5b1bf3d4974d9f61d8d Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Sat, 16 Dec 2023 18:27:00 -0800
Subject: [PATCH 3/3] Round it inline as well, just to be sure

---
 app/pages/system/UtilizationPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index 08e381e1b7..5acbf76d2a 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -24,7 +24,7 @@ import {
   Table,
   Tabs,
 } from '@oxide/ui'
-import { bytesToGiB, bytesToTiB } from '@oxide/util'
+import { bytesToGiB, bytesToTiB, round } from '@oxide/util'
 
 import { CapacityBars } from 'app/components/CapacityBars'
 import { useDateTimeRangePicker } from 'app/components/form'
@@ -254,7 +254,7 @@ const AvailableCell = ({
   return (
     <div className="flex w-full items-center justify-between">
       <div>
-        {allocated - provisioned}
+        {round(allocated - provisioned, 2)}
         {unit && <span className="text-tertiary"> {unit}</span>}
       </div>
       {/* We only show the ResourceMeter if the percent crosses the warning threshold (66%) */}