make /system/ip-pools the top-level route for now

Author: david-crespo

app/layouts/SystemLayout.tsx

@@ -66,7 +66,7 @@ export default function SystemLayout() {
       { value: 'Silos', path: pb.silos() },
       { value: 'Utilization', path: pb.systemUtilization() },
       { value: 'Inventory', path: pb.inventory() },
-      { value: 'Networking', path: pb.systemNetworking() },
+      { value: 'IP pools', path: pb.ipPools() },
     ]
       // filter out the entry for the path we're currently on
       .filter((i) => i.path !== pathname)
@@ -111,14 +111,8 @@ export default function SystemLayout() {
           <NavLinkItem to={pb.sledInventory()}>
             <Storage16Icon /> Inventory
           </NavLinkItem>
-          {/* <NavLinkItem to={pb.systemHealth()} disabled>
-            <Health16Icon /> Health
-          </NavLinkItem>
-          <NavLinkItem to={pb.systemUpdates()} disabled>
-            <SoftwareUpdate16Icon /> System Update
-          </NavLinkItem> */}
-          <NavLinkItem to={pb.systemNetworking()}>
-            <Networking16Icon /> Networking
+          <NavLinkItem to={pb.ipPools()}>
+            <Networking16Icon /> IP pools
           </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>

…p/pages/system/networking/IpPoolPage.tsx app/pages/system/ip-pools/IpPoolPage.tsxapp/pages/system/networking/IpPoolPage.tsx renamed to app/pages/system/ip-pools/IpPoolPage.tsx app/pages/system/networking/IpPoolPage.tsx renamed to app/pages/system/ip-pools/IpPoolPage.tsx

@@ -22,17 +22,17 @@ const EmptyState = () => (
   />
 )
 
-NetworkingPage.loader = async function () {
+IpPoolsPage.loader = async function () {
   await apiQueryClient.prefetchQuery('ipPoolList', { query: { limit: 25 } })
   return null
 }
 
-export function NetworkingPage() {
+export function IpPoolsPage() {
   const { Table, Column } = useQueryTable('ipPoolList', {})
   return (
     <>
       <PageHeader>
-        <PageTitle icon={<Networking24Icon />}>Networking</PageTitle>
+        <PageTitle icon={<Networking24Icon />}>IP pools</PageTitle>
       </PageHeader>
       <Table emptyState={<EmptyState />}>
         <Column accessor="name" cell={linkCell((pool) => pb.ipPool({ pool }))} />

…ges/system/networking/NetworkingPage.tsx app/pages/system/ip-pools/IpPoolsPage.tsxapp/pages/system/networking/NetworkingPage.tsx renamed to app/pages/system/ip-pools/IpPoolsPage.tsx app/pages/system/networking/NetworkingPage.tsx renamed to app/pages/system/ip-pools/IpPoolsPage.tsx

@@ -65,8 +65,8 @@ import { InventoryPage } from './pages/system/inventory/InventoryPage'
 import { SledInstancesTab } from './pages/system/inventory/sled/SledInstancesTab'
 import { SledPage } from './pages/system/inventory/sled/SledPage'
 import { SledsTab } from './pages/system/inventory/SledsTab'
-import { IpPoolPage } from './pages/system/networking/IpPoolPage'
-import { NetworkingPage } from './pages/system/networking/NetworkingPage'
+import { IpPoolPage } from './pages/system/ip-pools/IpPoolPage'
+import { IpPoolsPage } from './pages/system/ip-pools/IpPoolsPage'
 import { SiloImagesPage } from './pages/system/SiloImagesPage'
 import { SiloPage } from './pages/system/silos/SiloPage'
 import SilosPage from './pages/system/silos/SilosPage'
@@ -171,14 +171,10 @@ export const routes = createRoutesFromElements(
         </Route>
         <Route path="health" element={null} handle={{ crumb: 'Health' }} />
         <Route path="update" element={null} handle={{ crumb: 'Update' }} />
-        <Route path="networking" handle={{ crumb: 'Networking' }}>
-          <Route index element={<Navigate to="ip-pools" replace />} />
-          <Route path="ip-pool-new" element={null} />
-          {/* TODO: make this a tab on the networking page */}
-          <Route path="ip-pools">
-            <Route index element={<NetworkingPage />} loader={NetworkingPage.loader} />
-            <Route path=":pool" element={<IpPoolPage />} loader={IpPoolPage.loader} />
-          </Route>
+        <Route path="ip-pools" handle={{ crumb: 'I' }}>
+          <Route index element={<IpPoolsPage />} loader={IpPoolsPage.loader} />
+          <Route path=":pool" element={<IpPoolPage />} loader={IpPoolPage.loader} />
+          <Route path="ip-pools-new" element={null} />
         </Route>
       </Route>
 

app/routes.tsx

@@ -39,9 +39,9 @@ test('path builder', () => {
         "instanceStorage": "/projects/p/instances/i/storage",
         "instances": "/projects/p/instances",
         "inventory": "/system/inventory",
-        "ipPool": "/system/networking/ip-pools/pl",
-        "ipPoolNew": "/system/networking/ip-pool-new",
-        "ipPools": "/system/networking/ip-pools",
+        "ipPool": "/system/ip-pools/pl",
+        "ipPoolNew": "/system/ip-pools-new",
+        "ipPools": "/system/ip-pools",
         "nics": "/projects/p/instances/i/network-interfaces",
         "profile": "/settings/profile",
         "project": "/projects/p",
@@ -76,7 +76,6 @@ test('path builder', () => {
         "system": "/system",
         "systemHealth": "/system/health",
         "systemIssues": "/system/issues",
-        "systemNetworking": "/system/networking/ip-pools",
         "systemUtilization": "/system/utilization",
         "vpc": "/projects/p/vpcs/v",
         "vpcEdit": "/projects/p/vpcs/v/edit",

app/util/path-builder.spec.ts

@@ -78,9 +78,8 @@ export const pb = {
   systemUtilization: () => '/system/utilization',
   systemHealth: () => '/system/health',
 
-  systemNetworking: () => '/system/networking/ip-pools',
-  ipPools: () => '/system/networking/ip-pools',
-  ipPoolNew: () => '/system/networking/ip-pool-new',
+  ipPools: () => '/system/ip-pools',
+  ipPoolNew: () => '/system/ip-pools-new',
   ipPool: (params: IpPool) => `${pb.ipPools()}/${params.pool}`,
 
   inventory: () => '/system/inventory',