-
Notifications
You must be signed in to change notification settings - Fork 8
/
InstancesPage.tsx
82 lines (75 loc) · 2.12 KB
/
InstancesPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react'
import { Link } from 'react-router-dom'
import { useApiQuery } from '@oxide/api'
import { buttonStyle, PageHeader, PageTitle, Instances24Icon } from '@oxide/ui'
import { useParams } from '../../../hooks'
import {
linkCell,
DateCell,
InstanceResourceCell,
InstanceStatusCell,
useQueryTable,
} from '@oxide/table'
import { useInstanceActions } from './actions'
export const InstancesPage = () => {
const { orgName, projectName } = useParams('orgName', 'projectName')
const { data: project } = useApiQuery('organizationProjectsGetProject', {
organizationName: orgName,
projectName,
})
const actions = useInstanceActions({ organizationName: orgName, projectName })
const { Table, Column } = useQueryTable(
'projectInstancesGet',
{
organizationName: orgName,
projectName,
},
{
refetchInterval: 5000,
keepPreviousData: true,
}
)
if (!project) return null
return (
<>
<PageHeader>
<PageTitle icon={<Instances24Icon title="Project" />}>
{project.name}
</PageTitle>
</PageHeader>
<div className="-mt-11 mb-3 flex justify-end space-x-4">
<Link
to={`/orgs/${orgName}/projects/${projectName}/instances/new`}
className={buttonStyle({ size: 'xs', variant: 'dim' })}
>
New Instance
</Link>
</div>
<Table selectable actions={actions}>
<Column
id="name"
cell={linkCell(
(name) =>
`/orgs/${orgName}/projects/${projectName}/instances/${name}`
)}
/>
<Column
id="resources"
header="CPU, RAM / IMAGE"
accessor={(i) => ({ ncpus: i.ncpus, memory: i.memory })}
cell={InstanceResourceCell}
/>
<Column
id="status"
accessor={(i) => ({
runState: i.runState,
timeRunStateUpdated: i.timeRunStateUpdated,
})}
cell={InstanceStatusCell}
/>
<Column id="hostname" />
<Column id="created" accessor="timeCreated" cell={DateCell} />
</Table>
</>
)
}