Add snapshot state

Author: just-be-dev

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/pages/project/snapshots/SnapshotsPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 
 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'
@@ -15,10 +16,17 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
+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 />}
@@ -78,6 +86,11 @@ export function SnapshotsPage({ modal }: SnapshotsPageProps) {
       <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>