diff --git a/app/components/StatusBadge.tsx b/app/components/StateBadge.tsx similarity index 77% rename from app/components/StatusBadge.tsx rename to app/components/StateBadge.tsx index 5815d44e2f..79d933e1a3 100644 --- a/app/components/StatusBadge.tsx +++ b/app/components/StateBadge.tsx @@ -22,12 +22,9 @@ const INSTANCE_COLORS: Record ( - - {props.status} +export const InstanceStateBadge = (props: { state: InstanceState; className?: string }) => ( + + {props.state} ) @@ -48,9 +45,9 @@ const DISK_COLORS: Record> = finalizing: { color: 'blue', variant: 'solid' }, } -export const DiskStatusBadge = (props: { status: DiskStateStr; className?: string }) => ( - - {props.status} +export const DiskStateBadge = (props: { state: DiskStateStr; className?: string }) => ( + + {props.state} ) @@ -61,11 +58,8 @@ const SNAPSHOT_COLORS: Record = { ready: 'default', } -export const SnapshotStatusBadge = (props: { - status: SnapshotState - className?: string -}) => ( - - {props.status} +export const SnapshotStateBadge = (props: { state: SnapshotState; className?: string }) => ( + + {props.state} ) diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx index 54965cd35f..d41a889cdc 100644 --- a/app/pages/project/disks/DisksPage.tsx +++ b/app/pages/project/disks/DisksPage.tsx @@ -20,7 +20,7 @@ import { import { Storage16Icon, Storage24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { DiskStatusBadge } from '~/components/StatusBadge' +import { DiskStateBadge } from '~/components/StateBadge' import { getProjectSelector, useProjectSelector } from '~/hooks' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' @@ -87,8 +87,8 @@ const staticCols = [ ), colHelper.accessor('size', Columns.size), colHelper.accessor('state.state', { - header: 'Status', - cell: (info) => , + header: 'state', + cell: (info) => , }), colHelper.accessor('timeCreated', Columns.timeCreated), ] diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx index 93d4db8ef7..8c5cfc36fa 100644 --- a/app/pages/project/instances/InstancesPage.tsx +++ b/app/pages/project/instances/InstancesPage.tsx @@ -17,7 +17,7 @@ import { instanceTransitioning } from '~/api/util' import { InstanceDocsPopover } from '~/components/InstanceDocsPopover' import { RefreshButton } from '~/components/RefreshButton' import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks' -import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell' +import { InstanceStateCell } from '~/table/cells/InstanceStateCell' import { makeLinkCell } from '~/table/cells/LinkCell' import { getActionsCol } from '~/table/columns/action-col' import { Columns } from '~/table/columns/common' @@ -176,8 +176,8 @@ export function InstancesPage() { colHelper.accessor( (i) => ({ runState: i.runState, timeRunStateUpdated: i.timeRunStateUpdated }), { - header: 'status', - cell: (info) => , + header: 'state', + cell: (info) => , } ), colHelper.accessor('timeCreated', Columns.timeCreated), diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx index d03c1a03e5..7241f86d91 100644 --- a/app/pages/project/instances/instance/InstancePage.tsx +++ b/app/pages/project/instances/instance/InstancePage.tsx @@ -23,7 +23,7 @@ import { InstanceDocsPopover } from '~/components/InstanceDocsPopover' import { MoreActionsMenu } from '~/components/MoreActionsMenu' import { RefreshButton } from '~/components/RefreshButton' import { RouteTabs, Tab } from '~/components/RouteTabs' -import { InstanceStatusBadge } from '~/components/StatusBadge' +import { InstanceStateBadge } from '~/components/StateBadge' import { getInstanceSelector, useInstanceSelector } from '~/hooks' import { EmptyCell } from '~/table/cells/EmptyCell' import { DateTime } from '~/ui/lib/DateTime' @@ -167,11 +167,11 @@ export function InstancePage() { {memory.value} {memory.unit} - +
- + {polling && ( - + diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx index ad9c8526f8..a6f3bdacfe 100644 --- a/app/pages/project/instances/instance/SerialConsolePage.tsx +++ b/app/pages/project/instances/instance/SerialConsolePage.tsx @@ -19,7 +19,7 @@ import { import { PrevArrow12Icon } from '@oxide/design-system/icons/react' import { EquivalentCliCommand } from '~/components/EquivalentCliCommand' -import { InstanceStatusBadge } from '~/components/StatusBadge' +import { InstanceStateBadge } from '~/components/StateBadge' import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params' import { Badge, type BadgeColor } from '~/ui/lib/Badge' import { Spinner } from '~/ui/lib/Spinner' @@ -219,7 +219,7 @@ const CannotConnect = ({ instance }: { instance: Instance }) => (

The instance is - +

{isStarting(instance) diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx index 79a483a442..44df9a7c4f 100644 --- a/app/pages/project/instances/instance/tabs/StorageTab.tsx +++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx @@ -21,7 +21,7 @@ import { } from '@oxide/api' import { Storage24Icon } from '@oxide/design-system/icons/react' -import { DiskStatusBadge } from '~/components/StatusBadge' +import { DiskStateBadge } from '~/components/StateBadge' import { AttachDiskSideModalForm } from '~/forms/disk-attach' import { CreateDiskSideModalForm } from '~/forms/disk-create' import { getInstanceSelector, useInstanceSelector } from '~/hooks' @@ -56,8 +56,8 @@ const staticCols = [ colHelper.accessor('name', { header: 'Disk' }), colHelper.accessor('size', Columns.size), colHelper.accessor((row) => row.state.state, { - header: 'status', - cell: (info) => , + header: 'state', + cell: (info) => , }), colHelper.accessor('timeCreated', Columns.timeCreated), ] diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx index cced8b2804..b61216095e 100644 --- a/app/pages/project/snapshots/SnapshotsPage.tsx +++ b/app/pages/project/snapshots/SnapshotsPage.tsx @@ -19,7 +19,7 @@ import { import { Snapshots16Icon, Snapshots24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { SnapshotStatusBadge } from '~/components/StatusBadge' +import { SnapshotStateBadge } from '~/components/StateBadge' import { getProjectSelector, useProjectSelector } from '~/hooks' import { confirmDelete } from '~/stores/confirm-delete' import { SkeletonCell } from '~/table/cells/EmptyCell' @@ -91,7 +91,7 @@ const staticCols = [ cell: (info) => , }), colHelper.accessor('state', { - cell: (info) => , + cell: (info) => , }), colHelper.accessor('size', Columns.size), colHelper.accessor('timeCreated', Columns.timeCreated), diff --git a/app/pages/system/inventory/sled/SledInstancesTab.tsx b/app/pages/system/inventory/sled/SledInstancesTab.tsx index 2272d2a266..50ba82a23b 100644 --- a/app/pages/system/inventory/sled/SledInstancesTab.tsx +++ b/app/pages/system/inventory/sled/SledInstancesTab.tsx @@ -12,7 +12,7 @@ import * as R from 'remeda' import { apiQueryClient, type SledInstance } from '@oxide/api' import { Instances24Icon } from '@oxide/design-system/icons/react' -import { InstanceStatusBadge } from '~/components/StatusBadge' +import { InstanceStateBadge } from '~/components/StateBadge' import { requireSledParams, useSledParams } from '~/hooks' import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell' import { useColsWithActions, type MenuAction } from '~/table/columns/action-col' @@ -59,8 +59,8 @@ const staticCols = [ // we don't show run state last update time like on project instances because // it's not in this response colHelper.accessor('state', { - header: 'status', - cell: (info) => , + header: 'State', + cell: (info) => , }), colHelper.accessor((i) => R.pick(i, ['memory', 'ncpus']), { header: 'specs', diff --git a/app/table/cells/InstanceStatusCell.tsx b/app/table/cells/InstanceStateCell.tsx similarity index 76% rename from app/table/cells/InstanceStatusCell.tsx rename to app/table/cells/InstanceStateCell.tsx index 959cdc3457..ff25ce1f85 100644 --- a/app/table/cells/InstanceStatusCell.tsx +++ b/app/table/cells/InstanceStateCell.tsx @@ -7,15 +7,15 @@ */ import type { Instance } from '@oxide/api' -import { InstanceStatusBadge } from '~/components/StatusBadge' +import { InstanceStateBadge } from '~/components/StateBadge' import { TimeAgo } from '~/components/TimeAgo' type Props = { value: Pick } -export const InstanceStatusCell = ({ value }: Props) => { +export const InstanceStateCell = ({ value }: Props) => { return (

- +
) diff --git a/test/e2e/disks.e2e.ts b/test/e2e/disks.e2e.ts index dedd964bfe..03398c4cd6 100644 --- a/test/e2e/disks.e2e.ts +++ b/test/e2e/disks.e2e.ts @@ -18,13 +18,13 @@ test('List disks and snapshot', async ({ page }) => { 'Attached to': 'db1', name: 'disk-1', size: '2 GiB', - Status: 'attached', + state: 'attached', }) await expectRowVisible(table, { 'Attached to': '', name: 'disk-3', size: '6 GiB', - Status: 'detached', + state: 'detached', }) await clickRowAction(page, 'disk-1 db1', 'Snapshot') diff --git a/test/e2e/instance.e2e.ts b/test/e2e/instance.e2e.ts index 5bb7be2bb1..34e88fd862 100644 --- a/test/e2e/instance.e2e.ts +++ b/test/e2e/instance.e2e.ts @@ -29,7 +29,7 @@ test('can stop and delete a running instance', async ({ page }) => { const table = page.getByRole('table') await expectRowVisible(table, { name: 'db1', - status: expect.stringContaining('running'), + state: expect.stringContaining('running'), }) const row = page.getByRole('row', { name: 'db1', exact: false }) @@ -42,11 +42,11 @@ test('can stop and delete a running instance', async ({ page }) => { // polling makes it go stopping and then stopped await expectRowVisible(table, { name: 'db1', - status: expect.stringContaining('stopping'), + state: expect.stringContaining('stopping'), }) await expectRowVisible(table, { name: 'db1', - status: expect.stringContaining('stopped'), + state: expect.stringContaining('stopped'), }) // now delete @@ -62,7 +62,7 @@ test('can stop a starting instance, then start it again', async ({ page }) => { const table = page.getByRole('table') await expectRowVisible(table, { name: 'not-there-yet', - status: expect.stringContaining('starting'), + state: expect.stringContaining('starting'), }) await clickRowAction(page, 'not-there-yet', 'Stop') @@ -70,21 +70,21 @@ test('can stop a starting instance, then start it again', async ({ page }) => { await expectRowVisible(table, { name: 'not-there-yet', - status: expect.stringContaining('stopping'), + state: expect.stringContaining('stopping'), }) await expectRowVisible(table, { name: 'not-there-yet', - status: expect.stringContaining('stopped'), + state: expect.stringContaining('stopped'), }) await clickRowAction(page, 'not-there-yet', 'Start') await expectRowVisible(table, { name: 'not-there-yet', - status: expect.stringContaining('starting'), + state: expect.stringContaining('starting'), }) await expectRowVisible(table, { name: 'not-there-yet', - status: expect.stringContaining('running'), + state: expect.stringContaining('running'), }) }) @@ -108,18 +108,18 @@ test('instance table', async ({ page }) => { name: 'db1', CPU: '2 vCPU', Memory: '4 GiB', - status: expect.stringMatching(/^running\d+s$/), + state: expect.stringMatching(/^running\d+s$/), }) await expectRowVisible(table, { name: 'you-fail', CPU: '4 vCPU', Memory: '6 GiB', - status: expect.stringMatching(/^failed\d+s$/), + state: expect.stringMatching(/^failed\d+s$/), }) await expectRowVisible(table, { name: 'not-there-yet', CPU: '2 vCPU', Memory: '8 GiB', - status: expect.stringMatching(/^starting\d+s$/), + state: expect.stringMatching(/^starting\d+s$/), }) }) diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts index 5d4da1dfc0..fe141ebf4a 100644 --- a/test/e2e/utils.ts +++ b/test/e2e/utils.ts @@ -112,7 +112,7 @@ export async function stopInstance(page: Page) { await page.getByRole('button', { name: 'Confirm' }).click() await closeToast(page) // don't need to manually refresh because of polling - await expect(page.getByText('statusstopped')).toBeVisible() + await expect(page.getByText('statestopped')).toBeVisible() } /**