Snapshot and Image index pages

app/pages/project/images/ImagesPage.tsx

@@ -1,5 +1,16 @@
 import React from 'react'
+import { useParams } from 'app/hooks'
+import { SizeCell, DateCell, useQueryTable } from '@oxide/table'
 
 export const ImagesPage = () => {
-  return <div>Not implemented</div>
+  const projectParams = useParams('orgName', 'projectName')
+  const { Table, Column } = useQueryTable('projectImagesGet', projectParams)
+  return (
+    <Table>
+      <Column id="name" />
+      <Column id="description" />
+      <Column id="size" cell={SizeCell} />
+      <Column id="created" accessor="timeCreated" cell={DateCell} />
+    </Table>
+  )
 }

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -1,5 +1,16 @@
 import React from 'react'
+import { useParams } from 'app/hooks'
+import { SizeCell, DateCell, useQueryTable } from '@oxide/table'
 
 export const SnapshotsPage = () => {
-  return <div>Not implemented</div>
+  const projectParams = useParams('orgName', 'projectName')
+  const { Table, Column } = useQueryTable('projectSnapshotsGet', projectParams)
+  return (
+    <Table>
+      <Column id="name" />
+      <Column id="description" />
+      <Column id="size" cell={SizeCell} />
+      <Column id="created" accessor="timeCreated" cell={DateCell} />
+    </Table>
+  )
 }

libs/api-mocks/image.ts

@@ -0,0 +1,42 @@
+import type { Image } from '@oxide/api'
+import type { Json } from './json-type'
+import { project } from './project'
+
+export const images: Json<Image>[] = [
+  {
+    id: 'image-id-1',
+    name: 'image-1',
+    description: "it's an image",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 1024,
+  },
+  {
+    id: 'image-id-2',
+    name: 'image-2',
+    description: "it's a second image",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 2048,
+  },
+  {
+    id: 'image-id-3',
+    name: 'image-3',
+    description: "it's a third image",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 3072,
+  },
+  {
+    id: 'image-id-4',
+    name: 'image-4',
+    description: "it's a fourth image",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 4096,
+  },
+]

libs/api-mocks/index.ts

@@ -1,8 +1,10 @@
 export * from './disk'
+export * from './image'
 export * from './instance'
 export * from './org'
 export * from './project'
 export * from './session'
+export * from './snapshot'
 export * from './vpc'
 
 export { handlers, json } from './msw/handlers'

libs/api-mocks/msw/db.ts

@@ -125,6 +125,8 @@ const initDb = {
   projects: [mock.project],
   instances: [mock.instance],
   disks: [...mock.disks],
+  images: [...mock.images],
+  snapshots: [...mock.snapshots],
   vpcs: [mock.vpc],
   vpcSubnets: [mock.vpcSubnet],
   vpcFirewallRules: [...mock.defaultFirewallRules],

libs/api-mocks/msw/handlers.ts

@@ -288,6 +288,26 @@ export const handlers = [
     }
   ),
 
+  rest.get<never, ProjectParams, Json<Api.ImageResultsPage> | GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/images',
+    (req, res) => {
+      const [project, err] = lookupProject(req)
+      if (err) return res(err)
+      const images = db.images.filter((i) => i.project_id === project.id)
+      return res(json({ items: images }))
+    }
+  ),
+
+  rest.get<never, ProjectParams, Json<Api.SnapshotResultsPage> | GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/snapshots',
+    (req, res) => {
+      const [project, err] = lookupProject(req)
+      if (err) return res(err)
+      const snapshots = db.snapshots.filter((i) => i.project_id === project.id)
+      return res(json({ items: snapshots }))
+    }
+  ),
+
   rest.get<never, ProjectParams, Json<Api.VpcResultsPage> | GetErr>(
     '/api/organizations/:orgName/projects/:projectName/vpcs',
     (req, res) => {

libs/api-mocks/snapshot.ts

@@ -0,0 +1,46 @@
+import type { Snapshot } from '@oxide/api'
+import type { Json } from './json-type'
+import { project } from './project'
+
+export const snapshots: Json<Snapshot>[] = [
+  {
+    id: 'snapshot-id-1',
+    name: 'snapshot-1',
+    description: "it's a snapshot",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 1024,
+    disk_id: 'disk-id-1',
+  },
+  {
+    id: 'snapshot-id-2',
+    name: 'snapshot-2',
+    description: "it's a second snapshot",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 2048,
+    disk_id: 'disk-id-1',
+  },
+  {
+    id: 'snapshot-id-3',
+    name: 'snapshot-3',
+    description: "it's a third snapshot",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 3072,
+    disk_id: 'disk-id-1',
+  },
+  {
+    id: 'snapshot-id-4',
+    name: 'snapshot-4',
+    description: "it's a fourth snapshot",
+    project_id: project.id,
+    time_created: new Date().toISOString(),
+    time_modified: new Date().toISOString(),
+    size: 4096,
+    disk_id: 'disk-id-1',
+  },
+]

libs/table/cells/InstanceResourceCell.tsx

@@ -13,7 +13,7 @@ export const InstanceResourceCell = ({
     <TwoLineCell
       value={[
         <span key="first-row">
-          {value.ncpus} vCPU {slash} {fileSize(value.memory)} SSD
+          {value.ncpus} vCPU {slash} {fileSize(value.memory, { base: 2 })} SSD
         </span>,
         <span className="flex items-center text-secondary" key="second-row">
           <UbuntuResponsiveIcon className="mr-1 w-5" /> FakeOS 12.04

libs/table/cells/SizeCell.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import fileSize from 'filesize'
+import type { Cell } from './Cell'
+
+/** Human-readable format for size in bytes */
+export const SizeCell = ({ value: bytes }: Cell<number>) => (
+  <span className="text-default">{fileSize(bytes, { base: 2 })}</span>
+)

libs/table/cells/index.ts

@@ -7,6 +7,7 @@ export * from './InstanceResourceCell'
 export * from './InstanceStatusCell'
 export * from './LabelCell'
 export * from './LinkCell'
+export * from './SizeCell'
 export * from './TwoLineCell'
 export * from './TypeValueCell'
 export * from './TypeValueListCell'