merge main

Author: david-crespo

app/pages/project/instances/InstancesPage.tsx

@@ -39,6 +39,7 @@ import { Tooltip } from '~/ui/lib/Tooltip'
 import { setDiff } from '~/util/array'
 import { toLocaleTimeString } from '~/util/date'
 import { pb } from '~/util/path-builder'
+import { pluralize } from '~/util/str'
 
 import { useMakeInstanceActions } from './actions'
 import { ResizeInstanceModal } from './instance/InstancePage'
@@ -99,7 +100,8 @@ export function Component() {
         header: 'CPU',
         cell: (info) => (
           <>
-            {info.getValue()} <span className="ml-1 text-tertiary">vCPU</span>
+            {info.getValue()}{' '}
+            <span className="ml-1 text-tertiary">{pluralize('vCPU', info.getValue())}</span>
           </>
         ),
       }),

app/pages/project/instances/instance/InstancePage.tsx

@@ -52,6 +52,7 @@ import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
+import { pluralize } from '~/util/str'
 import { GiB } from '~/util/units'
 
 import { useMakeInstanceActions } from '../actions'
@@ -221,7 +222,7 @@ export function InstancePage() {
         <PropertiesTable>
           <PropertiesTable.Row label="cpu">
             <span className="text-default">{instance.ncpus}</span>
-            <span className="ml-1 text-tertiary"> vCPUs</span>
+            <span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="ram">
             <span className="text-default">{memory.value}</span>

app/pages/system/metrics-util.spec.ts

@@ -14,6 +14,7 @@ import {
   extractText,
   kebabCase,
   normalizeName,
+  pluralize,
   titleCase,
 } from './str'
 
@@ -23,6 +24,14 @@ describe('capitalize', () => {
   })
 })
 
+describe('pluralize', () => {
+  it('pluralizes correctly', () => {
+    expect(pluralize('item', 0)).toBe('items')
+    expect(pluralize('item', 1)).toBe('item')
+    expect(pluralize('item', 2)).toBe('items')
+  })
+})
+
 describe('camelCase', () => {
   it('basic formats to camel case', () => {
     expect(camelCase('camelCase')).toBe('camelCase')
@@ -51,8 +60,9 @@ it('commaSeries', () => {
   expect(commaSeries([], 'or')).toBe('')
   expect(commaSeries(['a'], 'or')).toBe('a')
   expect(commaSeries(['a', 'b'], 'or')).toBe('a or b')
-  expect(commaSeries(['a', 'b'], 'or')).toBe('a or b')
+  expect(commaSeries(['a', 'b'], 'and')).toBe('a and b')
   expect(commaSeries(['a', 'b', 'c'], 'or')).toBe('a, b, or c')
+  expect(commaSeries(['a', 'b', 'c'], 'and')).toBe('a, b, and c')
 })
 
 describe('titleCase', () => {

app/pages/system/metrics-util.ts

@@ -10,7 +10,7 @@ import React, { type ReactElement, type ReactNode } from 'react'
 
 export const capitalize = (s: string) => s && s.charAt(0).toUpperCase() + s.slice(1)
 
-export const pluralize = (s: string, n: number) => `${n} ${s}${n === 1 ? '' : 's'}`
+export const pluralize = (s: string, n: number) => `${s}${n === 1 ? '' : 's'}`
 
 export const camelCase = (s: string) =>
   s

app/util/str.spec.tsx

@@ -10,7 +10,8 @@
     "start": "API_MODE=msw vite",
     "start:msw": "API_MODE=msw vite",
     "start:nexus": "API_MODE=nexus vite",
-    "start:dogfood": "API_MODE=dogfood vite",
+    "start:dogfood": "API_MODE=remote EXT_HOST=oxide.sys.rack2.eng.oxide.computer vite",
+    "start:colo": "API_MODE=remote EXT_HOST=oxide.sys.r3.oxide-preview.com vite",
     "preview": "API_MODE=msw npm run build && cp mockServiceWorker.js dist/ && vite preview",
     "dev": "API_MODE=msw vite",
     "start:mock-api": "tsx ./tools/start_mock_api.ts",

app/util/str.ts

@@ -161,7 +161,7 @@ test('can resize a failed or stopped instance', async ({ page }) => {
   // resize 'you-fail', currently in a failed state
   await expectRowVisible(table, {
     name: 'you-fail',
-    CPU: '4 vCPU',
+    CPU: '4 vCPUs',
     Memory: '6 GiB',
     state: expect.stringMatching(/^failed\d+s$/),
   })
@@ -173,15 +173,15 @@ test('can resize a failed or stopped instance', async ({ page }) => {
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
   await expectRowVisible(table, {
     name: 'you-fail',
-    CPU: '10 vCPU',
+    CPU: '10 vCPUs',
     Memory: '20 GiB',
     state: expect.stringMatching(/^failed\d+s$/),
   })
 
   // resize 'db1', which needs to be stopped first
   await expectRowVisible(table, {
     name: 'db1',
-    CPU: '2 vCPU',
+    CPU: '2 vCPUs',
     Memory: '4 GiB',
     state: expect.stringMatching(/^running\d+s$/),
   })
@@ -200,7 +200,7 @@ test('can resize a failed or stopped instance', async ({ page }) => {
   await resizeModal.getByRole('button', { name: 'Resize' }).click()
   await expectRowVisible(table, {
     name: 'db1',
-    CPU: '8 vCPU',
+    CPU: '8 vCPUs',
     Memory: '16 GiB',
     state: expect.stringMatching(/^stopped\d+s$/),
   })
@@ -224,19 +224,19 @@ test('instance table', async ({ page }) => {
   const table = page.getByRole('table')
   await expectRowVisible(table, {
     name: 'db1',
-    CPU: '2 vCPU',
+    CPU: '2 vCPUs',
     Memory: '4 GiB',
     state: expect.stringMatching(/^running\d+s$/),
   })
   await expectRowVisible(table, {
     name: 'you-fail',
-    CPU: '4 vCPU',
+    CPU: '4 vCPUs',
     Memory: '6 GiB',
     state: expect.stringMatching(/^failed\d+s$/),
   })
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    CPU: '2 vCPU',
+    CPU: '2 vCPUs',
     Memory: '8 GiB',
     state: expect.stringMatching(/^starting\d+s$/),
   })

package.json

@@ -18,13 +18,17 @@ import vercelConfig from './vercel.json'
 
 const KiB = 1024
 
-const ApiMode = z.enum(['msw', 'dogfood', 'nexus'])
+const ApiMode = z.enum(['msw', 'remote', 'nexus'])
+
+function bail(msg: string): never {
+  console.error(msg)
+  process.exit(1)
+}
 
 const apiModeResult = ApiMode.default('nexus').safeParse(process.env.API_MODE)
 if (!apiModeResult.success) {
   const options = ApiMode.options.join(', ')
-  console.error(`Error: API_MODE must be one of: [${options}]. If unset, default is "msw".`)
-  process.exit(1)
+  bail(`Error: API_MODE must be one of: [${options}]. If unset, default is "msw".`)
 }
 /**
  * What API are we talking to? Only relevant in development mode.
@@ -35,8 +39,11 @@ if (!apiModeResult.success) {
  */
 const apiMode = apiModeResult.data
 
-// if you want a different host you can override it with EXT_HOST
-const DOGFOOD_HOST = process.env.EXT_HOST || 'oxide.sys.rack2.eng.oxide.computer'
+if (apiMode === 'remote' && !process.env.EXT_HOST) {
+  bail(`Error: EXT_HOST is required when API_MODE=remote. See package.json for examples.`)
+}
+
+const EXT_HOST = process.env.EXT_HOST
 
 const previewAnalyticsTag = {
   injectTo: 'head' as const,
@@ -126,7 +133,7 @@ export default defineConfig(({ mode }) => ({
       },
     }),
     react(),
-    apiMode === 'dogfood' && basicSsl(),
+    apiMode === 'remote' && basicSsl(),
   ],
   html: {
     // don't include a placeholder nonce in production.
@@ -139,8 +146,7 @@ export default defineConfig(({ mode }) => ({
     // these only get hit when MSW doesn't intercept the request
     proxy: {
       '/v1': {
-        target:
-          apiMode === 'dogfood' ? `https://${DOGFOOD_HOST}` : 'http://localhost:12220',
+        target: apiMode === 'remote' ? `https://${EXT_HOST}` : 'http://localhost:12220',
         changeOrigin: true,
       },
     },