Add crumb for sled ID using middle-truncated UUID (#2555)

add crumb for sled ID using middle-truncated UUID
oxidecomputer · Nov 14, 2024 · 510c645 · 510c645
1 parent d790819
commit 510c645
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/app/routes.tsx b/app/routes.tsx
@@ -86,6 +86,7 @@ import * as SiloImages from './pages/system/SiloImagesPage'
 import * as SiloPage from './pages/system/silos/SiloPage'
 import * as SilosPage from './pages/system/silos/SilosPage'
 import * as SystemUtilization from './pages/system/UtilizationPage'
+import { truncate } from './ui/lib/Truncate'
 import { pb } from './util/path-builder'
 
 export const routes = createRoutesFromElements(
@@ -157,7 +158,14 @@ export const routes = createRoutesFromElements(
         <Route path="inventory" handle={{ crumb: 'Inventory' }}>
           <Route path="sleds" handle={{ crumb: 'Sleds' }}>
             {/* a crumb for the sled ID looks ridiculous, unfortunately */}
-            <Route path=":sledId" {...SledPage}>
+            <Route
+              path=":sledId"
+              {...SledPage}
+              handle={makeCrumb(
+                (p) => truncate(p.sledId!, 12, 'middle'),
+                (p) => pb.sled({ sledId: p.sledId! })
+              )}
+            >
               <Route
                 index
                 element={<Navigate to="instances" replace />}

diff --git a/app/util/__snapshots__/path-builder.spec.ts.snap b/app/util/__snapshots__/path-builder.spec.ts.snap
@@ -463,7 +463,7 @@ exports[`breadcrumbs 2`] = `
       "path": "/system/silos",
     },
   ],
-  "sled (/system/inventory/sleds/sl)": [
+  "sled (/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances)": [
     {
       "label": "Inventory",
       "path": "/system/inventory",
@@ -472,8 +472,16 @@ exports[`breadcrumbs 2`] = `
       "label": "Sleds",
       "path": "/system/inventory/sleds",
     },
+    {
+      "label": "5c56b…ec3e0",
+      "path": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
+    },
   ],
-  "sledInstances (/system/inventory/sleds/sl/instances)": [
+  "sledInstances (/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances)": [
     {
       "label": "Inventory",
       "path": "/system/inventory",
@@ -482,9 +490,13 @@ exports[`breadcrumbs 2`] = `
       "label": "Sleds",
       "path": "/system/inventory/sleds",
     },
+    {
+      "label": "5c56b…ec3e0",
+      "path": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
+    },
     {
       "label": "Instances",
-      "path": "/system/inventory/sleds/sl/instances",
+      "path": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
     },
   ],
   "sledInventory (/system/inventory/sleds)": [

diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
@@ -23,7 +23,7 @@ const params = {
   silo: 's',
   version: 'vs',
   provider: 'pr',
-  sledId: 'sl',
+  sledId: '5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0',
   image: 'im',
   snapshot: 'sn',
   pool: 'pl',
@@ -76,8 +76,8 @@ test('path builder', () => {
         "siloUtilization": "/utilization",
         "silos": "/system/silos",
         "silosNew": "/system/silos-new",
-        "sled": "/system/inventory/sleds/sl",
-        "sledInstances": "/system/inventory/sleds/sl/instances",
+        "sled": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
+        "sledInstances": "/system/inventory/sleds/5c56b522-c9b8-49e4-9f9a-8d52a89ec3e0/instances",
         "sledInventory": "/system/inventory/sleds",
         "snapshotImagesNew": "/projects/p/snapshots/sn/images-new",
         "snapshots": "/projects/p/snapshots",

diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
@@ -116,7 +116,7 @@ export const pb = {
 
   sledInventory: () => '/system/inventory/sleds',
   diskInventory: () => '/system/inventory/disks',
-  sled: ({ sledId }: Sled) => `/system/inventory/sleds/${sledId}`,
+  sled: ({ sledId }: Sled) => `/system/inventory/sleds/${sledId}/instances`,
   sledInstances: ({ sledId }: Sled) => `/system/inventory/sleds/${sledId}/instances`,
 
   silos: () => '/system/silos',