From c93a3141d77dc0e6b441fe3c607315cd800cdde6 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 20 Oct 2023 17:25:41 -0500
Subject: [PATCH] take Capacity out of system utilization page header

---
 ...CapacityUtilizationPage.tsx => UtilizationPage.tsx} |  6 +++---
 app/routes.tsx                                         |  6 +++---
 app/test/e2e/utilization.e2e.ts                        | 10 +++-------
 3 files changed, 9 insertions(+), 13 deletions(-)
 rename app/pages/system/{CapacityUtilizationPage.tsx => UtilizationPage.tsx} (97%)

diff --git a/app/pages/system/CapacityUtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
similarity index 97%
rename from app/pages/system/CapacityUtilizationPage.tsx
rename to app/pages/system/UtilizationPage.tsx
index 94dffbfeb..cdb2c571a 100644
--- a/app/pages/system/CapacityUtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -37,7 +37,7 @@ import { useDateTimeRangePicker } from 'app/components/form'
 
 import { tabularizeSiloMetrics } from './metrics-util'
 
-CapacityUtilizationPage.loader = async () => {
+SystemUtilizationPage.loader = async () => {
   await Promise.all([
     apiQueryClient.prefetchQuery('siloList', {}),
     apiQueryClient.prefetchQuery('systemMetric', {
@@ -57,7 +57,7 @@ CapacityUtilizationPage.loader = async () => {
   return null
 }
 
-export function CapacityUtilizationPage() {
+export function SystemUtilizationPage() {
   const { data: sleds } = usePrefetchedApiQuery('sledList', {})
   const { data: silos } = usePrefetchedApiQuery('siloList', {})
 
@@ -66,7 +66,7 @@ export function CapacityUtilizationPage() {
   return (
     <>
       <PageHeader>
-        <PageTitle icon={<Metrics24Icon />}>Capacity &amp; Utilization</PageTitle>
+        <PageTitle icon={<Metrics24Icon />}>Utilization</PageTitle>
       </PageHeader>
 
       <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">
diff --git a/app/routes.tsx b/app/routes.tsx
index 8af6be34c..0a5690202 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -60,10 +60,10 @@ import { NetworkingTab } from './pages/project/instances/instance/tabs/Networkin
 import { StorageTab } from './pages/project/instances/instance/tabs/StorageTab'
 import { ProfilePage } from './pages/settings/ProfilePage'
 import { SSHKeysPage } from './pages/settings/SSHKeysPage'
-import { CapacityUtilizationPage } from './pages/system/CapacityUtilizationPage'
 import { SiloImagesPage } from './pages/system/SiloImagesPage'
 import { SiloPage } from './pages/system/SiloPage'
 import SilosPage from './pages/system/SilosPage'
+import { SystemUtilizationPage } from './pages/system/UtilizationPage'
 import { DisksTab } from './pages/system/inventory/DisksTab'
 import { InventoryPage } from './pages/system/inventory/InventoryPage'
 import { SledsTab } from './pages/system/inventory/SledsTab'
@@ -137,8 +137,8 @@ export const routes = createRoutesFromElements(
         <Route path="issues" element={null} />
         <Route
           path="utilization"
-          element={<CapacityUtilizationPage />}
-          loader={CapacityUtilizationPage.loader}
+          element={<SystemUtilizationPage />}
+          loader={SystemUtilizationPage.loader}
           handle={{ crumb: 'Utilization' }}
         />
         <Route
diff --git a/app/test/e2e/utilization.e2e.ts b/app/test/e2e/utilization.e2e.ts
index 2b960bd95..85f872814 100644
--- a/app/test/e2e/utilization.e2e.ts
+++ b/app/test/e2e/utilization.e2e.ts
@@ -14,7 +14,7 @@ test.describe('System utilization', () => {
   test('works for fleet viewer', async ({ page }) => {
     await page.goto('/system/utilization')
     await expectVisible(page, [
-      page.getByRole('heading', { name: 'Capacity & Utilization' }),
+      page.getByRole('heading', { name: 'Utilization' }),
       page.getByText('Disk utilization'),
       page.getByText('CPU utilization'),
       page.getByText('Memory utilization'),
@@ -33,9 +33,7 @@ test.describe('System utilization', () => {
 test.describe('Silo utilization', () => {
   test('works for fleet viewer', async ({ page }) => {
     await page.goto('/utilization')
-    await expectVisible(page, [
-      page.getByRole('heading', { name: 'Capacity & Utilization' }),
-    ])
+    await expectVisible(page, [page.getByRole('heading', { name: 'Utilization' })])
     await expectNotVisible(page, [
       page.getByText('Disk utilization'),
       page.getByText('CPU utilization'),
@@ -48,9 +46,7 @@ test.describe('Silo utilization', () => {
   test('works for dev user', async ({ browser }) => {
     const page = await getDevUserPage(browser)
     await page.goto('/utilization')
-    await expectVisible(page, [
-      page.getByRole('heading', { name: 'Capacity & Utilization' }),
-    ])
+    await expectVisible(page, [page.getByRole('heading', { name: 'Utilization' })])
     await expectNotVisible(page, [
       page.getByText('Disk utilization'),
       page.getByText('CPU utilization'),