From 10faeeb213bdb73e6830fe086b121e121d943b1f Mon Sep 17 00:00:00 2001 From: David Crespo Date: Mon, 4 Apr 2022 14:16:13 -0500 Subject: [PATCH 1/2] add image and snapshot index endpoints to MSW --- libs/api-mocks/image.ts | 42 +++++++++++++++++++++++++++++++ libs/api-mocks/index.ts | 2 ++ libs/api-mocks/msw/db.ts | 2 ++ libs/api-mocks/msw/handlers.ts | 20 +++++++++++++++ libs/api-mocks/snapshot.ts | 46 ++++++++++++++++++++++++++++++++++ 5 files changed, 112 insertions(+) create mode 100644 libs/api-mocks/image.ts create mode 100644 libs/api-mocks/snapshot.ts diff --git a/libs/api-mocks/image.ts b/libs/api-mocks/image.ts new file mode 100644 index 0000000000..f10b6cd4b9 --- /dev/null +++ b/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[] = [ + { + 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: 1000, + }, + { + 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: 2000, + }, + { + 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: 3000, + }, + { + 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: 4000, + }, +] diff --git a/libs/api-mocks/index.ts b/libs/api-mocks/index.ts index 52b0ba2c25..7947daee3b 100644 --- a/libs/api-mocks/index.ts +++ b/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' diff --git a/libs/api-mocks/msw/db.ts b/libs/api-mocks/msw/db.ts index fba12845ab..9a38ab02a4 100644 --- a/libs/api-mocks/msw/db.ts +++ b/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], diff --git a/libs/api-mocks/msw/handlers.ts b/libs/api-mocks/msw/handlers.ts index 0b262fc562..12fd0fce35 100644 --- a/libs/api-mocks/msw/handlers.ts +++ b/libs/api-mocks/msw/handlers.ts @@ -288,6 +288,26 @@ export const handlers = [ } ), + rest.get | 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 | GetErr>( + '/api/organizations/:orgName/projects/:projectName/images', + (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 | GetErr>( '/api/organizations/:orgName/projects/:projectName/vpcs', (req, res) => { diff --git a/libs/api-mocks/snapshot.ts b/libs/api-mocks/snapshot.ts new file mode 100644 index 0000000000..000e274c44 --- /dev/null +++ b/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[] = [ + { + 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: 1000, + 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: 2000, + 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: 3000, + 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: 4000, + disk_id: 'disk-id-1', + }, +] From eb148460b87890d2cfdede128fc8d928a211adf3 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Mon, 4 Apr 2022 15:02:27 -0500 Subject: [PATCH 2/2] the most basic of snapshot and image QueryTables --- app/pages/project/images/ImagesPage.tsx | 13 ++++++++++++- app/pages/project/snapshots/SnapshotsPage.tsx | 13 ++++++++++++- libs/api-mocks/image.ts | 8 ++++---- libs/api-mocks/msw/handlers.ts | 2 +- libs/api-mocks/snapshot.ts | 8 ++++---- libs/table/cells/InstanceResourceCell.tsx | 2 +- libs/table/cells/SizeCell.tsx | 8 ++++++++ libs/table/cells/index.ts | 1 + 8 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 libs/table/cells/SizeCell.tsx diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx index b670a7dc1b..aaebf195f5 100644 --- a/app/pages/project/images/ImagesPage.tsx +++ b/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
Not implemented
+ const projectParams = useParams('orgName', 'projectName') + const { Table, Column } = useQueryTable('projectImagesGet', projectParams) + return ( + + + + + +
+ ) } diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx index d4f774ad5b..1200ca4b95 100644 --- a/app/pages/project/snapshots/SnapshotsPage.tsx +++ b/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
Not implemented
+ const projectParams = useParams('orgName', 'projectName') + const { Table, Column } = useQueryTable('projectSnapshotsGet', projectParams) + return ( + + + + + +
+ ) } diff --git a/libs/api-mocks/image.ts b/libs/api-mocks/image.ts index f10b6cd4b9..65b9d051b5 100644 --- a/libs/api-mocks/image.ts +++ b/libs/api-mocks/image.ts @@ -10,7 +10,7 @@ export const images: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 1000, + size: 1024, }, { id: 'image-id-2', @@ -19,7 +19,7 @@ export const images: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 2000, + size: 2048, }, { id: 'image-id-3', @@ -28,7 +28,7 @@ export const images: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 3000, + size: 3072, }, { id: 'image-id-4', @@ -37,6 +37,6 @@ export const images: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 4000, + size: 4096, }, ] diff --git a/libs/api-mocks/msw/handlers.ts b/libs/api-mocks/msw/handlers.ts index 12fd0fce35..614f67b66b 100644 --- a/libs/api-mocks/msw/handlers.ts +++ b/libs/api-mocks/msw/handlers.ts @@ -299,7 +299,7 @@ export const handlers = [ ), rest.get | GetErr>( - '/api/organizations/:orgName/projects/:projectName/images', + '/api/organizations/:orgName/projects/:projectName/snapshots', (req, res) => { const [project, err] = lookupProject(req) if (err) return res(err) diff --git a/libs/api-mocks/snapshot.ts b/libs/api-mocks/snapshot.ts index 000e274c44..b8482d081f 100644 --- a/libs/api-mocks/snapshot.ts +++ b/libs/api-mocks/snapshot.ts @@ -10,7 +10,7 @@ export const snapshots: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 1000, + size: 1024, disk_id: 'disk-id-1', }, { @@ -20,7 +20,7 @@ export const snapshots: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 2000, + size: 2048, disk_id: 'disk-id-1', }, { @@ -30,7 +30,7 @@ export const snapshots: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 3000, + size: 3072, disk_id: 'disk-id-1', }, { @@ -40,7 +40,7 @@ export const snapshots: Json[] = [ project_id: project.id, time_created: new Date().toISOString(), time_modified: new Date().toISOString(), - size: 4000, + size: 4096, disk_id: 'disk-id-1', }, ] diff --git a/libs/table/cells/InstanceResourceCell.tsx b/libs/table/cells/InstanceResourceCell.tsx index 04ee363422..6785e3780c 100644 --- a/libs/table/cells/InstanceResourceCell.tsx +++ b/libs/table/cells/InstanceResourceCell.tsx @@ -13,7 +13,7 @@ export const InstanceResourceCell = ({ - {value.ncpus} vCPU {slash} {fileSize(value.memory)} SSD + {value.ncpus} vCPU {slash} {fileSize(value.memory, { base: 2 })} SSD , FakeOS 12.04 diff --git a/libs/table/cells/SizeCell.tsx b/libs/table/cells/SizeCell.tsx new file mode 100644 index 0000000000..e843608cef --- /dev/null +++ b/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) => ( + {fileSize(bytes, { base: 2 })} +) diff --git a/libs/table/cells/index.ts b/libs/table/cells/index.ts index b7c6df9f55..fc5d2216aa 100644 --- a/libs/table/cells/index.ts +++ b/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'