Initial snapshots support

app/components/StatusBadge.tsx

@@ -1,4 +1,4 @@
-import type { DiskState, InstanceState } from '@oxide/api'
+import type { DiskState, InstanceState, SnapshotState } from '@oxide/api'
 import type { BadgeColor, BadgeProps } from '@oxide/ui'
 import { Badge } from '@oxide/ui'
 
@@ -41,3 +41,23 @@ export const DiskStatusBadge = (props: { status: DiskStateStr; className?: strin
     {props.status}
   </Badge>
 )
+
+const SNAPSHOT_COLORS: Record<SnapshotState, BadgeColor> = {
+  creating: 'notice',
+  destroyed: 'neutral',
+  faulted: 'destructive',
+  ready: 'default',
+}
+
+export const SnapshotStatusBadge = (props: {
+  status: SnapshotState
+  className?: string
+}) => (
+  <Badge
+    variant="default"
+    color={SNAPSHOT_COLORS[props.status]}
+    className={props.className}
+  >
+    {props.status}
+  </Badge>
+)

app/forms/snapshot-create.tsx

@@ -0,0 +1,90 @@
+import type { PathParams, Snapshot, SnapshotCreate } from '@oxide/api'
+import { useApiQuery } from '@oxide/api'
+import { useApiMutation } from '@oxide/api'
+import { useApiQueryClient } from '@oxide/api'
+import { Success16Icon } from '@oxide/ui'
+
+import {
+  DescriptionField,
+  ListboxField,
+  NameField,
+  SideModalForm,
+} from 'app/components/form'
+import { useRequiredParams, useToast } from 'app/hooks'
+
+import type { CreateSideModalFormProps } from '.'
+
+const useSnapshotDiskItems = (params: PathParams.Project) => {
+  const { data: disks } = useApiQuery('diskList', { ...params, limit: 1000 })
+  return (
+    disks?.items
+      .filter((disk) => disk.state.state === 'attached')
+      .map((disk) => ({ value: disk.name, label: disk.name })) || []
+  )
+}
+
+const values: SnapshotCreate = {
+  description: '',
+  disk: '',
+  name: '',
+}
+
+export function CreateSnapshotSideModalForm({
+  id = 'create-snapshot-form',
+  title = 'Create Snapshot',
+  initialValues = values,
+  onSubmit,
+  onSuccess,
+  onError,
+  onDismiss,
+  ...props
+}: CreateSideModalFormProps<SnapshotCreate, Snapshot>) {
+  const queryClient = useApiQueryClient()
+  const pathParams = useRequiredParams('orgName', 'projectName')
+  const addToast = useToast()
+
+  const diskItems = useSnapshotDiskItems(pathParams)
+
+  const createSnapshot = useApiMutation('snapshotCreate', {
+    onSuccess(data) {
+      queryClient.invalidateQueries('snapshotList', pathParams)
+      addToast({
+        icon: <Success16Icon />,
+        title: 'Success!',
+        content: 'Your snapshot has been created.',
+      })
+      onSuccess?.(data)
+      onDismiss()
+    },
+    onError,
+  })
+
+  return (
+    <SideModalForm
+      id={id}
+      title={title}
+      initialValues={initialValues}
+      onDismiss={onDismiss}
+      onSubmit={
+        onSubmit ||
+        ((values) => {
+          createSnapshot.mutate({
+            ...pathParams,
+            body: values,
+          })
+        })
+      }
+      {...props}
+    >
+      <NameField id="snapshot-name" />
+      <DescriptionField id="snapshot-description" />
+      <ListboxField
+        id="snapshot-disk"
+        name="disk"
+        label="Disk"
+        items={diskItems}
+        required
+      />
+    </SideModalForm>
+  )
+}

app/pages/project/disks/DisksPage.tsx

@@ -2,6 +2,7 @@ import type { LoaderFunctionArgs } from 'react-router-dom'
 import { Link, useNavigate } from 'react-router-dom'
 
 import type { Disk } from '@oxide/api'
+import { genName } from '@oxide/api'
 import { apiQueryClient } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
@@ -14,13 +15,19 @@ import {
   PageHeader,
   PageTitle,
   Storage24Icon,
+  Success16Icon,
   TableActions,
   buttonStyle,
 } from '@oxide/ui'
 
 import { DiskStatusBadge } from 'app/components/StatusBadge'
 import CreateDiskSideModalForm from 'app/forms/disk-create'
-import { requireProjectParams, useProjectParams, useRequiredParams } from 'app/hooks'
+import {
+  requireProjectParams,
+  useProjectParams,
+  useRequiredParams,
+  useToast,
+} from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 function AttachedInstance({
@@ -70,14 +77,41 @@ export function DisksPage({ modal }: DisksPageProps) {
   const queryClient = useApiQueryClient()
   const { orgName, projectName } = useRequiredParams('orgName', 'projectName')
   const { Table, Column } = useQueryTable('diskList', { orgName, projectName })
+  const addToast = useToast()
 
   const deleteDisk = useApiMutation('diskDelete', {
     onSuccess() {
       queryClient.invalidateQueries('diskList', { orgName, projectName })
     },
   })
 
+  const createSnapshot = useApiMutation('snapshotCreate', {
+    onSuccess() {
+      queryClient.invalidateQueries('snapshotList', { orgName, projectName })
+      addToast({
+        icon: <Success16Icon />,
+        title: 'Success!',
+        content: 'Snapshot successfully created',
+      })
+    },
+  })
+
   const makeActions = (disk: Disk): MenuAction[] => [
+    {
+      label: 'Snapshot',
+      onActivate() {
+        createSnapshot.mutate({
+          orgName,
+          projectName,
+          body: {
+            name: genName(disk.name),
+            disk: disk.name,
+            description: '',
+          },
+        })
+      },
+      disabled: disk.state.state !== 'attached',
+    },
     {
       label: 'Delete',
       onActivate: () => {

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -1,18 +1,39 @@
 import type { LoaderFunctionArgs } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
-import { apiQueryClient } from '@oxide/api'
+import type { Snapshot } from '@oxide/api'
+import { useApiQuery } from '@oxide/api'
+import { apiQueryClient, useApiMutation, useApiQueryClient } from '@oxide/api'
+import type { MenuAction } from '@oxide/table'
 import { DateCell, SizeCell, useQueryTable } from '@oxide/table'
-import { EmptyMessage, PageHeader, PageTitle, Snapshots24Icon } from '@oxide/ui'
+import {
+  EmptyMessage,
+  PageHeader,
+  PageTitle,
+  Snapshots24Icon,
+  TableActions,
+  buttonStyle,
+} from '@oxide/ui'
 
-import { requireProjectParams, useRequiredParams } from 'app/hooks'
+import { SnapshotStatusBadge } from 'app/components/StatusBadge'
+import { CreateSnapshotSideModalForm } from 'app/forms/snapshot-create'
+import { requireProjectParams, useProjectParams, useRequiredParams } from 'app/hooks'
+import { pb } from 'app/util/path-builder'
+
+const DiskNameFromId = ({ value }: { value: string }) => {
+  const { data: disk } = useApiQuery('diskViewById', { id: value })
+  if (!disk) return null
+  return <>{disk.name}</>
+}
 
 const EmptyState = () => (
   <EmptyMessage
     icon={<Snapshots24Icon />}
     title="No snapshots"
     body="You need to create a snapshot to be able to see it here"
-    // buttonText="New snapshot"
-    // buttonTo="new"
+    buttonText="New snapshot"
+    buttonTo={pb.snapshotNew(useProjectParams())}
   />
 )
 
@@ -23,20 +44,60 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   })
 }
 
-export function SnapshotsPage() {
+interface SnapshotsPageProps {
+  modal?: 'createSnapshot'
+}
+
+export function SnapshotsPage({ modal }: SnapshotsPageProps) {
+  const navigate = useNavigate()
+
+  const queryClient = useApiQueryClient()
   const projectParams = useRequiredParams('orgName', 'projectName')
   const { Table, Column } = useQueryTable('snapshotList', projectParams)
+
+  const deleteSnapshot = useApiMutation('snapshotDelete', {
+    onSuccess() {
+      queryClient.invalidateQueries('snapshotList', projectParams)
+    },
+  })
+
+  const makeActions = (snapshot: Snapshot): MenuAction[] => [
+    {
+      label: 'Delete',
+      onActivate() {
+        deleteSnapshot.mutate({ ...projectParams, snapshotName: snapshot.name })
+      },
+    },
+  ]
+
   return (
     <>
       <PageHeader>
         <PageTitle icon={<Snapshots24Icon />}>Snapshots</PageTitle>
       </PageHeader>
-      <Table emptyState={<EmptyState />}>
+      <TableActions>
+        <Link
+          to={pb.snapshotNew(projectParams)}
+          className={buttonStyle({ size: 'xs', variant: 'default' })}
+        >
+          New Snapshot
+        </Link>
+      </TableActions>
+      <Table emptyState={<EmptyState />} makeActions={makeActions}>
         <Column accessor="name" />
         <Column accessor="description" />
+        <Column id="disk" accessor="diskId" cell={DiskNameFromId} />
+        <Column
+          accessor="state"
+          cell={({ value }) => <SnapshotStatusBadge status={value} />}
+        />
         <Column accessor="size" cell={SizeCell} />
         <Column accessor="timeCreated" cell={DateCell} />
       </Table>
+      <CreateSnapshotSideModalForm
+        isOpen={modal === 'createSnapshot'}
+        onDismiss={() => navigate(pb.snapshots(projectParams))}
+      />
     </>
   )
 }

app/routes.tsx

@@ -206,6 +206,12 @@ export const routes = createRoutesFromElements(
               loader={SnapshotsPage.loader}
               handle={{ crumb: 'Snapshots' }}
             />
+            <Route
+              path="snapshots-new"
+              element={<SnapshotsPage modal="createSnapshot" />}
+              loader={SnapshotsPage.loader}
+              handle={{ crumb: 'New snapshot' }}
+            />
             <Route
               path="images"
               element={<ImagesPage />}

app/util/path-builder.spec.ts

@@ -38,6 +38,7 @@ test('path builder', () => {
         "silo": "/sys/silos/s",
         "siloNew": "/sys/silos-new",
         "silos": "/sys/silos",
+        "snapshotNew": "/orgs/a/projects/b/snapshots-new",
         "snapshots": "/orgs/a/projects/b/snapshots",
         "sshKeys": "/settings/ssh-keys",
         "system": "/sys",

app/util/path-builder.ts

@@ -14,7 +14,6 @@ export const pb = {
   projectEdit: (params: PP.Project) => `${pb.project(params)}/edit`,
 
   access: (params: PP.Project) => `${pb.project(params)}/access`,
-  snapshots: (params: PP.Project) => `${pb.project(params)}/snapshots`,
   images: (params: PP.Project) => `${pb.project(params)}/images`,
 
   instances: (params: PP.Project) => `${pb.project(params)}/instances`,
@@ -24,8 +23,11 @@ export const pb = {
 
   diskNew: (params: PP.Project) => `${pb.project(params)}/disks-new`,
   disks: (params: PP.Project) => `${pb.project(params)}/disks`,
-  vpcNew: (params: PP.Project) => `${pb.project(params)}/vpcs-new`,
 
+  snapshotNew: (params: PP.Project) => `${pb.project(params)}/snapshots-new`,
+  snapshots: (params: PP.Project) => `${pb.project(params)}/snapshots`,
+
+  vpcNew: (params: PP.Project) => `${pb.project(params)}/vpcs-new`,
   vpcs: (params: PP.Project) => `${pb.project(params)}/vpcs`,
   vpc: (params: PP.Vpc) => `${pb.vpcs(params)}/${params.vpcName}`,
   vpcEdit: (params: PP.Vpc) => `${pb.vpc(params)}/edit`,

libs/api-mocks/msw/db.ts

@@ -94,6 +94,18 @@ export function lookupDisk(params: PP.Disk): Result<Json<Api.Disk>> {
   return Ok(disk)
 }
 
+export function lookupSnapshot(params: PP.Snapshot): Result<Json<Api.Snapshot>> {
+  const [project, err] = lookupProject(params)
+  if (err) return Err(err)
+
+  const snapshot = db.snapshots.find(
+    (s) => s.project_id === project.id && s.name === params.snapshotName
+  )
+  if (!snapshot) return Err(notFoundErr)
+
+  return Ok(snapshot)
+}
+
 export function lookupVpcSubnet(params: PP.VpcSubnet): Result<Json<Api.VpcSubnet>> {
   const [vpc, err] = lookupVpc(params)
   if (err) return Err(err)